/*se importa la tipografía Roboto y Raleway de google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto:wght@100&display=swap');


* {
    font-family: sans-serif;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-size: 12px;
    margin: 0;
}

.body-carrito{
    font-family: sans-serif ;
    height: 100%;
    
}

.body-productDetail{
    font-family: sans-serif ;
    font-size: 12px;
    background-color: #363062;
    width: 100%;
    height: 100%;
}

.text-danger {
    color: rgb(255, 0, 0);
    font-size: 12px;
    margin: 2px;
}


/*NAV*/

.header-menu nav {
    display: none;
 }
 
 /*HEADER*/
 
 header {
     background-color: #f0f0f0;
     width: 100vw;
     position: fixed;
     z-index:999;
     top:0;
     border-bottom: 6px solid #2d9a9e;
 }
 /* div.container-header{
    height: 12vh;
 } */
 .container-header{
 
     max-width: 1200px;
     padding-top: 10px;
     margin: auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 95vw;
     height: max(60px,9vw);
 }
 
 .header-menu{
     display: none;
 }
 
 .logo {
    flex-grow: 10.5;
     /* margin-left: 3px; */
     padding-top: 0px;
     padding-bottom: 0px;
    
    
 }

 .logo-15 {
     display: none;
 }
 
 .logo img {
    margin-left: 3px;
     width: 49px;
     max-width: 150px;
    
 }


 i.fa-solid.fa-cart-shopping.seccion{
    font-size: 14px;
 }

 .badge-counter {
    position: absolute;
    right: 0;
 }

 .badge-danger {
    color: #fff;
    background-color: #e74a3b;
 }

 .badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.35rem;
 }

 .carrito-compra {
     position: relative;
    flex-grow: 0.5;
    text-align: right;
 }
 .carrito-compra i{
    
    /* border: rgb(49 47 56) solid 2px; */
    border-radius: 27px;
    /* margin-right: 10px; */
    color: rgb(49 47 56);
    cursor: pointer;
    font-size: min(27px, 40px);
    padding: 5px;
    transition: all 300ms ease;
    
     
 }
 /* hover carrito de compra*/
 
 .carrito-compra i:hover{
        transform: scale(1.1);
    }
 
 i.fa-solid.fa-circle-user{
    font-size: 29px;
 }
 i.fa-solid.fa-cart-plus{
    font-size: 14px;
 }

 .user-login {
    flex-grow: 0.10;
    text-align: right;
 }
 
 .user-login i{   
  
     margin-right: 10px;
     color:rgb(49 47 56);
     cursor: pointer;
     font-size: min(27px, 40px);
     /* padding: 7px; */
     transition: all 300ms ease;
 
 }
 
 .user-login i:hover {
     transform: scale(1.1);
 }

 .user-img {
    margin: 0px 10px;
    height: 30px;
    width: 10%;
    flex-grow: 0.2;
    text-align: right;
}

.logout {
text-decoration: none;
color: black;
font-size: 10px;
margin: 0px 0px 0px 5px;
}

.user-img img {
    
    height: 33px;
    width: 32px;
    border-radius: 100%;
}

 /*burger-menu*/
 
 .burger-menu{
     margin: 5px;
     position: relative;
     z-index: 10;
     
     cursor: pointer;
     }
 i#icono-menu.fa-solid.fa-bars{
    cursor: pointer;
    width: 20px;
 }
 .background-burger{
     font-size: 31px;
     color: #1c063b;
     padding: 5px;
     border-radius: 5px;
     transition: all 300ms ease;
 }

 .burger-close {
     font-size: 36px;
 }
 
 /* hover burger-menu*/
 
 .background-burger:hover{
    
     color: black;
     transform: scale(1.1);
     
     border-radius:10px ;
          
 }
 
 /* estilo para el contenedor del Menu*/
 .cont-menu{
    background-color: rgb(42, 42,42,0.9);
   
    width:100vw;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    transition: all .5s ease;
    text-align: center;
    
    z-index: 10;
 }

 /*estilo para el listado del menu */

 .cont-menu ul{
    padding: 100px, 0px, 20px, 0px;
    list-style: none;
 }

 .cont-menu ul li a{
   color:white;
   display: block;
   font-size: 18px;
   text-decoration: none;
   padding: 10px, 50px;
   cursor: pointer;
   padding-bottom: 10px;
   padding-top: 10px;
 }
 .cont-menu ul li:hover{
    background-color: rgb(241 253 247 / 91%);
    color: rgb(42,42,42)
 }
 .cont-menu ul li a:hover{
    background-color: #f1f8fd;
    color: rgb(42,42,42)
 }

 /*estilos para Javascript*/

 .active{
    transform: translate(-600px);

 }
 .opacity{
    background-color: rgba(0,0,0,0, 0.5);
    transition: all .5s ease;
 }

 .logo-burgerMenu{
    background-color:rgb(240 240 240);;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 6px solid #2d9a9e;
    padding: 10px;
 }

 .logo-menu {
    margin: 0px;
 }
    
 /*Search bar*/
 
 .search-bar{
     flex-grow: 0.6;
     margin-left: 5vw;
 }
 
 .search-bar form{
     display: flex;
     align-items: center;
     flex-grow: 1;
 }
 
 .input-header {
    width: 80%;
    height: 10vw;
    max-height: 30px;
    margin-right: 0px;
    box-sizing: border-box;
    border: 1px dotted #2d9a9e;
    text-align: center;
         
 }

 .input-header:focus {
    outline:none;
 }

 .search-bar-1 {
     display: none;
 }

 .search-bar-2 {
    padding-bottom: 15px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
 }

 .search-bar-2 form{
     flex-grow: 1;
    display: flex;
    justify-content: center;
 }
 
 .search-bar-2 form button {
    text-decoration: none;
    background-color: #f1f8fd;
    border: 1px dotted #2d9a9e;
    color: #2d9a9e;
 }
 .search-bar-2 form button i {
    padding: 6px;
    font-size: 16px;
 }
 
 .search-bar button {
 display: flex;
 background-color: rgb(240, 240, 240);
 color: #1c063b;
 padding: min(0.6vw, 6px);
 margin-right: 16px;
 margin-left: 5px;
 font-size: 2vw;
 border: solid #bebebe ;
 cursor: pointer;
 border-radius: 30%;
 } 
 
 /*hover search bar*/
 .search-bar button:hover{
 
 transition: 0.5s;
 transform: scale(1.1);
 
 }


 /* MAIN - GENERAL */

 main{
    background-color: rgb(255 255 255);
    width: 100%;
    margin: auto;
  
}

p{
    font-size: 12px;
}

a {
    color: rgb(18 89 230)
}

h6{
    font-size: 14px;
    /* en carrito aparece 18px */
    margin: 0;
}

h5{
    font-size: 16px;
}
    
h4 {
    font-size: 18px;
}
h2{
    font-size: 24px;
}

/* MAIN - HOME */

/* carrusel */
 section.section-set-display.carrusel{
                margin-top: 17.7vh;
            }

.slider-frame {
	width: 103%; 
    height: auto;
	margin:0px auto 0;
	overflow: hidden; 
}

.slider-frame ul {

    display: flex;
    padding: 0;
    width: 400%;
    animation: slide 20s infinite alternate;
    margin: 0px
}

.slider-frame li {
	width: 100%;
	list-style: none;

}

.slider-frame img {
    object-fit: contain;
	width: 24.3%;
    padding-top: 10px;
    max-height: 50vh;
    
    
}
/* 
@keyframes slide {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
} */

/* info */
.info {
    width: 100%;
}
div.containerInfo{
    background: linear-gradient(179deg, rgb(255 248 252 / 27%), #2929220d)
}

.info ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0px 10px 5px;
    justify-content: space-around;
    font-size: 9px;
    
}


.info-li {
    text-align: center;
    align-items: center;
    display: flex;
}

/* div.info-li i {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 10px;
    color: #1c063b;       
    font-size: 14px;
    -webkit-text-stroke-width: thin;
    display:none
} */
div.info-li h3 {
    display: none;
    color: #010509;
    opacity: 0.8;
    margin: 5px 0px; 
}
/* Efecto fade */
    .article-style {
    /* opacity: 0.5; */
    transition: all 0.5s ease;
    }
.transform_up{
    transform: translateY(30%);
}
.transform_down{
    transform: translateY(-20%);
    }
    .transform_left{
    transform: translateX(30%);
    }
    .transform_right{
    transform: translateX(-20%);
    transition: all 4s ease

    }

/*text */


.aparece{

    opacity: 1;
    
    transform: none; 
    

}
/*Efecto Swiper*/
.swiper {
    width: 100%;
    height: 100%;
  }
  div.swiper-pagination.swiper-pagination{
    bottom: 4px;
    /* padding-bottom: 20px */
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* sections */
.body-menu{
    width: 90%;
    margin: auto;
}
div.body-menu h2 a{
    text-shadow: 0px 0px 1px #686565;
    text-shadow: red;
    font-size: 24px;
    -webkit-text-stroke: thin;
    text-decoration: none;
    /* text-transform: uppercase; */
    color: #0c0c0b61;
    border-left: solid 3px #00c0c7;
    padding-left: 2px;
}
div.body-menu h2{
        
  white-space: nowrap;
  overflow: hidden;    
 
  font-size: 28px;
  color: rgba(255,255,255,.70);
  margin: 45px 10px 20px;
}

/*animation text*/

.typing {

animation: animated-text 8s steps(29,end) 1s 1 normal both,
            animated-cursor 600ms steps(10,end) ;
}

/* text animation */

  @keyframes animated-text {
    from{width: 0;}
    to{width: 100%;}
  }
  
  /* cursor animations */
  
  @keyframes animated-cursor {
    from{border-right-color: rgba(15, 16, 15, 0.75);}
    to{border-right-color: transparent;}
  }
    

.main-home {
    width: 100%;
    margin: auto;
}

section.section-set-display.seccion02, .seccion03, .seccion04, .seccion05, .seccion06 , .seccion07 , .seccion08 , .seccion09 {

    display: flex;
    justify-content: space-around;
    width: 70%;
    /* max-width: 191px; */
    margin: auto;
    height: 50vh;
    /* max-height: 36vh; */
}


section.section-set-display.sección01  {

    display: flex;
    justify-content: space-around;
    width: 70%;
    /* max-width: 191px; */
    margin: auto;
    height: 40vh;
    max-height: 36vh;
}
section.section-set-display.formulario{
    background-color: #00000029
}

section.section-set-display.formulario{
    background-image: url("/images/banner/foto.png");
}

.icons-index {
    display: none;
    padding: 5px;
    opacity: 0.8;
    margin: 3px 0px;
    border-radius: 40px;
    color: #038e93;
    font-weight: bolder;
    background-color: white;
}

div.swiper{
    
    /* box-shadow: 0px 0px 10px rgb(100 100 100); */
    border-radius: 11px;
}


.carrusel, .info {
    display: block;
}

/*style section lo mas buscado*/

section.section-set-display.sección01 {
    
padding-bottom: 10px;

}

h2.typing.seccion1{
    padding-bottom: 20px;
    padding-top: 30px;
    margin: auto;
    min-width: -webkit-fill-available;
    text-align: center;
    background-color: #f1f8fd
}
h2.typing.seccion1 a{
    text-decoration: underline 3px #05c0c7;
    text-decoration-line: overline;
    color: rgb(49 47 56)
}
 
 section.section-set-display.sección01{
    background-color: #95c7ee21;
    min-width: -webkit-fill-available;
 }
 div.swiper.mySwiper.seccion1{
    box-shadow: none;
 }
 div.swiper-slide.bckSwiper{
    background-color: rgb(241, 248, 253);
    width: 215.333px;
 }
 article.article-style.bckArticle{
    background-color: #f1f8fd;
    box-shadow: none;
    cursor: pointer;
    margin-bottom: 80px;
 }
 article.article-style.bckArticle:hover{
 transform: scale(1.1);
 }
 div.bckCard.seccion1{
    height: 100%;
    width: 100%
}
.imgProduct.seccion1 img{
    /* max-width: 110px;
    padding: 5px; */
    
    min-width: fit-content;
    height: 93%;
    width: 100%;
    transform: translate(-50%);
    transition: translate(-50%);
    position: absolute;
    left: 50%;
    bottom: -8%;
    /* border-radius: 45%;
    object-fit: scale-down; */
    background-color: #f1f8fd;
    border: none;
    object-fit: contain;
}  

.imgOferta {
    position: absolute;
    bottom: 39vh;
    left: 39vw;
    width: 74px;
}
.imgOferta-phones {
    position: absolute;
    bottom: 38vh;
    left: 35vw;
    width: 74px
}

div.descriptionProduct.seccion1{
        
    height: 37%;
    position: relative;
    /* bottom: 19px; */ 
    padding-top: 4px;
    flex-direction: column;
    align-items: center;
   border-top: none;
    padding: 2px;
    display: flex;

    
}
div.title.seccion1{
    position: absolute;
    top: 21px;;
    box-shadow: 2px 2px 4px #00000099;
    color: #f1f8fd;
    font-weight: bold;
    padding: 4px;
    background-color: #312f38
}
div.price.seccion1{
    display: none;
}
div.verProducto.seccion1{
    display: none;
}


/* style resto secciones*/
article.article-style{
    position: relative;
    padding-bottom: 20px;
    height: 100%;
    
    width: 100%;
    

}
.article-style {
    border-radius: 15px;
    
    margin-bottom: 0px;
    
}

.bckCard{
    text-align: -webkit-center;
    height: 97%;
}
.bckCard img{
position: relative;
width: 90%;
height: 67%;
border-radius: 5px;
object-fit: contain;
filter: drop-shadow(2px 4px 6px black);
}
div.imgProduct{
    
    width: 100%;
    max-width: 190px;
}
.imgProduct img {
    max-width: 110px;
    padding: 5px;
    height: 17vh;
    width: 41vw;
    transform: translate(-50%);
    transition: translate(-50%);
    position: absolute;
    left: 50%;
    bottom: 45%;
    /* border-radius: 45%;
    object-fit: scale-down; */
    background-color: white;
    /* border: solid 2px #1c063b; */
}
div.descriptionProduct{
    
    height: 37%;
    position: relative;
    bottom: 19px;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: solid 1px #ebebeb;
    padding: 2px;
    
}
div.descriptionProduct-seccion{
    
    height: 37%;
    position: relative;
    bottom: 35px;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border-top: solid 1px #ebebeb; */
    padding: 2px;
    
}
div.title{
    display: flex;
    align-items: center;
    text-align: -webkit-center;
    position: absolute;
    top: -51px
}
div.title h5{
width: 100%;
margin: 0;
font-size: 14px;
font-family: sans-serif;
letter-spacing: 1px;
}

div.title-section h5{
width: 100%;
margin: 0;
font-size: 15px;
font-family: sans-serif;
letter-spacing: 1px;
background-color: #f1f8fd;
color: #2d9a9e;
border-radius: 12px;
padding: 8px;
}

/* .fa-cart-shopping:before, .fa-shopping-cart:before {
    content: "\f07a";

} */

/* div.price{

left: 47px;
position: absolute;
top: -13px;
} */

div.discount {
    left: 30px;
    position: absolute;
    top: 6px
    
}


div.verProducto{
    display: flex;
    
    right: 10px;
    font-size: 15px;
    bottom: 48px;
    position: absolute;
    padding: 9px;
    right: 49px;
    padding: 5px;
    opacity: 0.8;
    margin: 3px 0px;
    color: #312f38
}



.section-set-display article:hover {
    transform:scale(1.03);
    transition: all .5s ease;
    
    }

    
div.buttomVerProducto{
    display: none;
}


.article02, .article03, .article04 {
        display: none;
}

.descriptionProduct {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: solid 1px #ebebeb;
    padding: 2px;
    display: flex;
}

.descriptionProduct .title {
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    /* height: 20px;
    margin-bottom: 10px; */
}

.title h5 {
    width: 100%;
    margin: 0;
    font-size: 11px;
}

.descriptionProduct .price {
    color:#05c0c7;
}
div.price h5{
    font-size: 20px;
    margin: 0;
    padding: 5px;
    font-family: sans-serif;
}
    
.descriptionProduct .discount {
    display: flex;
    color: #39b54a;
}

.discount i {
    margin-right: 3px;
}
div.verProducto a{
    text-decoration: none;
    /* border: solid; */
    padding: 3px;
    font-size: 9px;
    border-radius: 7px;
    background-color: #1abc9c;
    color: #1c063b
}
div.imgofertas{
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    text-align: center
}
div.imgofertas img{
    width: 41%;
    filter: drop-shadow(2px 4px 6px black)
}

div.imgDelivery{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 18px;
    text-align: center;
    
}
div.imgDelivery img{
    width: 63%;
    margin-left: -16vw;
    
}

/* FIN HOME */

/* MAIN - PRODUCT DETAIL */
    

.margin-productDetail{
    background-color: white;
    margin-top: 21vh;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 20px
}
/* .card-body{
    height: 74vh;
     white-space: pre-line;
} */

div.col-md-6{
    align-self: center;
    white-space: none ;
    text-align: center;
    white-space: nowrap;
}
.card-text{
    padding-bottom: 10px;
    text-align: center;
}

.name-product{
    padding: 5px;
    font-size: 14px;
   
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    background-color: #312f38;
    color: white;
}
.product-description{
    white-space: normal
}
.detail-product{
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
    
}
p.card-text{
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
}
h4.card-title.detail-product{
    font-size: 13px;
}
div.d-grid.gap-2.button-productDetail{
    font-size: smaller
}
.button-productDetail{
    text-align: center;
}



.img-div img {
    width: 100%;
}
.img-fluid {
    max-width: 50%;
    margin-top: 12px;
    height: 40vw;
    max-height: 100%;
}
.precio{
    display: flex;
    flex-direction: column;
    width: 90%;
    color: #4D4C7D;
    align-items: center;
    text-align: center;
    border-top: 0px 3px 0px 3px solid whitesmoke;
    justify-content: center;
}

/*>>flexbox main<<*/
div.fotos article{
    display: flex;
    width: 100%;
    flex-direction: row;
}

.fotoPincipal{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.fotosSecundarias{
    display: none;
}

/*>>>boton comprar<<*/
.botones {
    display: flex;
    margin: 2px;
    padding: 2px;
    width: 90%;
    justify-content: center;
    
}

.icon-edit-delet {
    margin: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 20%;
}



.delete-btn {
    width: 100px;
    color: #4D4C7D;
}

button.btn.btn-primary {
    width: 36vw;
    background-color: #27868a;
    border: none;
    justify-self: center;
    height: 4vh
    
    
}
.button-productDetail  button:hover{
   
   transform: scale(1.1);
   transition: 00.5s;
}



/* counter detailProduct */

.contador-productDetail{
    white-space: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

div.btn.btn-plus , .btn.btn-minus{
    font-size: initial
}




/*precio*/

.productDetail-price-discount{
    -webkit-text-stroke-width: thin;
    width: 100;
    display: inline-flex;
    align-items: center;
    flex-flow: column;
    width: -webkit-fill-available;
    white-space: nowrap;
}



.price-product {
    color: rgb(0 192 199)
}
   
 .discount-listaProducto {
    display: flex;
    color: #f02f42;
    gap: 9px;
    
}

h5.price-product{
    font-size:15px
}

h5.price-product::before{
    content: "$ ";
}



.precio-tachado{
    display: inline;
    text-decoration: line-through;
}

/* edit-delete */
div.edit-delete{
    
    display: flex;
    white-space: normal;
    gap: 10px;
    flex-direction: row-reverse;
    margin: 13px 0px;
}
i.fa-solid.fa-pen-to-square{
    border-radius: 5px;
    background-color: #312f38;
    font-size: 17px;
    color: rgb(0 192 199);
    padding: 4px;

}
i.fa-regular.fa-trash-can{
    border-radius: 5px;
    background-color: #312f38;
    font-size: 17px;
    color: rgb(0 192 199);
    padding: 4px;
}
button.button-delete {
    background-color: white;
    border: none;
}



.description {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: justify;
    /* background-color: #ebebeb82; */
    border-radius: 10px;
    /* border: 2px  solid #4D4C7D; */
}

.colorRed {
    color: rgb(255, 0,0 );
}

/* FIN PRODUCT DETAIL */

/*login*/

main.mainLogin{
    background-color: rgb(255 255 255);
    width: 100%;
    margin: auto;
    text-align: -webkit-center;
  
}
div.main.login-registro{
    background-color: #312f38;
}
.main.login-registro{
   
    margin-top: 23vh;
    width: 86vw;
	max-width: 350px;
	height: 444px;
	background: rgb(84, 77, 77);
	overflow: hidden;
	background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
	border-radius: 10px;
	box-shadow: 5px 20px 50px #000;
    margin-bottom: 16px;
}
#chk{
	display: none;
}
.signup{
	position: relative;
	width:100%;
	height: 118%;
}
form#registro label{
	color: white;
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	margin: 24px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
}

form#login label{
    color: black;
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	margin: 24px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;

}
div.signup input, div.login input{
	width: 60%;
	height: 22px;
	background: white;
	justify-content: center;
	display: flex;
	margin: 5px auto;
	padding: 5px;
	border: none;
	outline: none;
	border-radius: 5px;
}
input#avatar.input-formulario{
    height: fit-content;
}
input#buttonRegister.submit-login{
    padding-bottom: 21px;
    background-color: #2d9a9e;
    color: white;
}

.login{
	height: 460px;
	background: #2d9a9e;
	border-radius: 60% / 10%;
	transform: translateY(-180px);
	transition: .8s ease-in-out;
}
.login label{
	color: #312f38;
	transform: scale(.6);
}

#chk:checked ~ .login{
	transform: translateY(-500px);
}
#chk:checked ~ .login label{
	transform: scale(1);	
}
#chk:checked ~ .signup label{
	transform: scale(.6);
}




/* MAIN - LOGIN - REGISTRO*/
div.formularios{
    margin-bottom: 14px;
    height: 100%;
    /* border: solid 2px #1b1b1bbd; */
    gap: 42px;
    background-color: white;
    display: inline-flex;
    border-radius: 20px;
    box-shadow: 2px 2px 4px #00000099
}
/* form#login{
    width: 25vw;
    padding-top: 15px
} */

.formulario {
    width: 100%;
    padding: 10vw;
    padding-top: 12vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    
    border: 0px 3px 0px 3px solid whitesmoke;
   
 
}
div.login h2{
    text-decoration-line:underline;
    padding-bottom: 44px
}

/* .input-formulario {
    width: 90%;
    height: 5vh;
    padding: 12px 20px;
    margin: 8px ;
    box-sizing: border-box;
    border: 2px solid rgb(255, 255, 255);
    opacity: 5px;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #000000;
    display: flex;
    text-align: center;   
} */

div.recuerdame-box{
    font-size: 16px;
    width: 30%;
    color: #184297;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.msg-middleware {
    font-size: 15px;
    padding: 25px 26px;
   
    color: #d82003
}
input#recordarme{
    width: 13px;
}

/* .input-formulario-rcuerdame {
    height: 2.5vh;
    padding: 12px 20px;
    margin: 8px ;
    box-sizing: border-box;
    border: 2px solid beige;
    opacity: 5px;
    border-radius: 4px;
    display: flex;
    text-align: center;
    
} */

 .submit-login {
    text-transform: uppercase;
    border: none;
    font-weight: bold;
    width: 60%;
    height: 6vh;
    padding-bottom: 10px 25px;
    
    margin: 8px ;
    box-sizing: border-box;
    background-color:#2d9a9e;
    
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
   
    
  }

  .submit-login:hover{
    transform: scale(1.1);  
    transition: all 0.5s ease;
  }
  .submit-login.buttonLogin{
    padding-bottom: 21px;
    background-color: #312f38;
    color: white
  }

  .registro h2{
      padding-top: 15px;
      text-decoration-line:underline
     
  }

  .registro h4{
     
      padding-left: 20px;
      text-align: left;
      padding-bottom: 10px;
   
  }
  .label-bold{
      font-weight: bold;
  }


  ul.passwordList{
    list-style-type: none;
    font-size: 12px;
  }

/*Cartel de alert password*/

.eyeBox{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin: -5px;
    padding: 0px;
}

.eyeIcon{
    outline: none;
    position: absolute;
    top: 50%;
    right: 21%;
    transform: translateY(-50%);
    opacity: 0.5;
    cursor: pointer;
}
.eyeIcon:hover{
    opacity: 0.8;
}

.passWarning{
    list-style-type: none;
    font-size: 12px;
}
.emailWarning{
    color: rgb(255,0,0);   
    font-size: 12px;
    display: block
}

.nameWarning{
    color: rgb(255,0,0);   
    font-size: 12px;
    display: block
}

.lastNameWarning{
    color: rgb(255,0,0);   
    font-size: 12px;
    display: block
}

.patronWarning{
    color: rgb(255,0,0);   
    font-size: 12px;
    display: block
}
.passVeryWeack{
    color: rgb(255, 0, 200);   
    font-size: 12px;
}
.passWeack{
    color: rgb(255,0,0);   
    font-size: 12px;
}
.passMedium{
    color: rgb(255, 217, 0);
    font-size: 12px;
}
.passStrong{
    color: rgb(250, 245, 0);  
    font-size: 12px;
}
.passVeryStrong{
    color: rgb(0,255,0);   
    font-size: 12px;
}
.linckPassword {
    text-decoration: none;
}
  
  /* MAIN - CARRITO */

  .article-margin-padding.checkout {
    margin-bottom: 10px;
    padding: 15px;
    background-color: #ebebeb82
  }
 div.subtotal-box h4{
    font-size: 14px;
 }

 .price-total::before {
    content: "$ ";
 }

  .main-carrito {
      padding-top:19vh;
  }

  /* Flex-Box  */

.flex-grow-40 {
    flex-grow:0.4;
}

.flex-grow-60 {
    flex-grow:0.6;
}
.flex-grow-70 {
    flex-grow:0.7;
}

.flex-grow-100 {
    flex-grow: 1;    
}

/*>>>>>>>>>>Servicio Técnico<<<<<<<<<<*/

.shopping-cart {
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}

.shoppingCartLogoTecnico {
    height: 20vh;
    object-fit: contain;
}

.shoppingCartLogoRepresent {
    height: 5vh;
    object-fit: contain;
}

.shopping-cart h1 {
    color: #312f38;
    font-size: 1em;
    text-transform: uppercase;
    margin: 2.5px 10px;
    padding: 10px 2.5px;
    font-weight: bold;
}


.cart-items {
    align-items: center;
    margin: auto;
    width: 95%;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
}

.img-items {
    flex-grow: 0.5;
    text-align: center;
}

.img-items img {
    height: 20vw;
    max-height: 150px
}

.description-item {
    gap:10px;
    display: flex;
    flex-wrap: wrap;
    width: 71%;
    margin: auto;
    align-items: center;
}

.description-item .name {
    width: 90%;
    margin: 10px 0px;
}

.description {
    font-weight: 100;
    /* text-align: center;
    margin: 10px auto;
    max-width: 350px;     */
}
h4.description.h4-carrito{
    width: 90%;
    font-size: 12px;
    margin: 0;
    padding: 5px;
} 
.counter {
  
    font-size: 8px;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    align-items: center;
    flex-grow: 0.8;
    justify-content: center;
}



.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    font-size: 2em;
    cursor: pointer; 

}
div.d-grid.gap-2.button-productDetail {
    font-size: xx-small;
}

span.number {
    font-size: 13px;
}

.remove-button button {
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    /* box-shadow: 2px 2px #000000; */
    color: white;
    padding:5px;
    margin: auto;
    border: #312f38 solid;
    background-color: #312f38;
    transition: all 0.2s;
}

.remove-button button:hover {
    transform: scale(1.1);
}
.amount {
    font-weight: bold;
    color: #1bc5cc;
    
    text-align: center;
    font-size: 14px;
}

.amount::before{
    content: "$ ";
}

/* Main <---> Seccion de descuento y checkout */

/* Descuento */

.discount-checkout
.discount {
    width: 90%;
    margin: auto;
    border-top: 2.5px solid #312f386b;
    border-bottom: 2.5px solid #312f386b;
}
.discount-code {
    color: #1c063b;
text-align: center;
margin-bottom: 12px;
}

.discount-container{
    display: flex;
    justify-content: center;
}

.discount-container form {
    width: 100%;
    text-align: center;
}

.discount-box {
  
    border:2px solid #312f38;
    box-shadow: 2px 2px 4px #000000;
    height: 54%;
    width: 51%;
    margin: 0px 10px 10px 0px;
    border-radius: 10px;
}

.discount-button {
    border: #312f38;
    font-size: 1em;
    margin-bottom: 20px;
    font-weight: 700;
    padding: 5px 15px;
    background-color: #312f38;
    color: white;
    cursor: pointer;
    /* opacity: 0.8; */
    border-radius: 4px;
    /* box-shadow: 2px 2px 4px #000000; */
    transition: all 0.5s ease;
}

.discount-button:hover {
    background-color:#312f38;
    color: white;
    transform: scale(1.1)
}
div.total-box{
    margin-bottom: 21px;
    align-items: center;
    height: 40px;
    background-color: #ffffff
}
/* Checkout */

.subtotal-box {
    display: flex;
    justify-content: space-around; 
}

.total-box {
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

.checkout-buttom {
    text-align: center;
    padding: 5px;
    margin-top: 5px;
}

.checkout-buttom button {
    margin-top: 20px;
    font-size: 1.3em;
    font-weight: 700;
    padding: 5px 15px;
    width: 81%;
    background-color: #27868a;
    border: #27868a;
    /* opacity: 0.8; */
    color: white;
    cursor: pointer;
    border-radius: 4px;
    /* box-shadow: 2px 2px 4px #000000; */
    transition: all 0.2s;
}

.checkout-buttom button:hover {
    transform: scale(1.1);
    transition: all 0.5s ease;
    /* opacity: 1; */
}
.checkout-continue {
    text-align: center;
    padding: 5px;
    
}

.checkout-continue button {
    border: #312f38;
    font-size: 1.3em;
    font-weight: 700;
    padding: 5px 15px;
    width: 81%;
    background-color: #312f38;
    color: white;
    cursor: pointer;
    /* opacity: 0.8; */
    border-radius: 4px;
    /* box-shadow: 2px 2px 4px #000000; */
    transition: all 0.5s ease;
}

.checkout-continue button:hover {
    background-color:#312f38;
    color: white;
    transform: scale(1.1);

}
div.row.checkout{
    text-align-last: left;
    border-bottom: solid 1px #a9a8ab;
    padding-bottom: 17px;
}
div.select-sender{
    font-weight: bold;
    padding-bottom: 10px;
    text-decoration: underline
}
div.col-md-6.mb-4.tipoenvio{
    margin-bottom: 11px

}
label.tipoEnvio{
    margin-right: 10px;
    font-weight: bold;
    font-size: 13px

}
.select-payment{
    text-decoration: underline;
    font-weight: bold;
    padding: 10px 0px 10px 0px
}
label.formaPago{
    margin-right: 44px;
    font-weight: bold;
    font-size: 13px
}

select.custom-select {
    width: 128px;
}

/* Main <---> Seccion de sugerencias */

.suggestion {
    justify-content: center;
    display: flex;
    flex-wrap:wrap;    
    border-top: 2.5px solid #ccc7c7;
    border-bottom: 2.5px solid #ccc7c7;
}

.suggestion-title-box {
    width: 100%;
    margin: 10px 0px;
}

div.suggestion-title-box h2 {
    font-size: 1rem;
    text-align: center;
}

.item-suggested {
    width: 50%;
    padding: 10px 0px;
}


.img-price-container img {
    border: 1px solid rgba(0,0,0,0.5);
    padding: 11px;
}


.description-container {
    display: flex;
    width: 90%;
    margin: 10px auto;
}
.description-container .description-text {
    display: none;
    text-align: center;
    color: black;
    /* background-color:rgb(70, 0, 128) ; */
    padding: 5px 1px;
    margin:10px;
    /* border: rgb(137,7, 243) 5px solid; */
    border-radius: 10%;
}
.description-container .description-price {
    color:  rgb(70, 0, 128);
    font-style: italic;
    
}

.description-container i{ 
    font-size: 1em;
    color: rgb(70, 0, 128);
}


.s-item-3,
.s-item-4 {
    display: none;
}



/* Footer de CARRITO*/


.footer-container{
    width: 90%;
    color: white;
    margin: auto;
    text-align: justify;
}

.footer-logo {
    padding: 10px;
    margin: 4px 0px 0px 7px;
}

.footer-logo a img {
    width: 152px;
}

.tyc {
    color: white;
}
.footer-container h6{
    font-weight: 100;
    padding: 0px 5px;
    margin: 10px 0px 15px;   
}

.footer-container h5{
    font-weight: 100;
    margin: 5px
    
}

.footer-container p {
    padding-bottom: 10px;
}

.data-fiscal-container {
    padding: 5px;
    margin: 5px;
    text-align: center;
}

.data-fiscal-container img {
    width: 10%;
    max-width: 50px;
    text-align: center;
}

/* MAIN - NEW PRODUCT */

.newProductSection {
    width: 90%;
    margin: 24vh auto 100px auto;
    border-radius: 30px;
 
}
div.container.products-wrapper{
    background-color: #312f38;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 20px
}
div.row.formNewProduct{
    display: flex;
   
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}
div.titleContainerNP{
    padding: 0;
}
h2.products-title{
    padding-top: 33px;
    width: -webkit-fill-available;
    border-radius: 5% 5% 160% 160%;
    height: 13vh;
    background-color: #2d9a9e;
    font-size: 17px;
    font-weight: bold;
    color: #f1f8fd;
}
.form-group{
    margin-bottom: 0;
}
div.form-group.row h4, .price-discount h4{
    margin-top: 10px;
    font-size: 14px;
    color: white;
}
select#brandNewProduct.form-control, select#sectionNewProduct.form-control{
    height: 29px;
}
.form-control{

    font-size: 12px;
}

.newProductForm {
    display: flex;
    flex-direction: column;    
    margin-top: 12px;
}
div.form-group.row label{
    color: white;
    padding-top: 10px;
    margin-bottom: 0;
}
input#imagesNewProduct{
    height: fit-content;
}
textarea#description.form-control.input-textarea{
    height: 10vh;
}
.input-textarea {
    font-size: 13px;
    width: 100%;
    padding: 0px 0px;
    margin: auto ;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #000000;
    display: flex;
    text-align: center;
    height: 4vh;
}

.padding-left-grow-1{
    padding-left: 25px;
    flex-grow: 1;

}

.btn-create {
    width: 100%;
    margin: 0px
}

.price-discount {
    margin-top: 10px;
    display: flex;
    text-align: center;
}

.input-category {
    height: 7vh;
    width: 100%;
    background-color: white;
    padding: 12px 20px 12px 0px;
    margin: auto auto -1rem auto;
    box-sizing: border-box;
  
    border-radius: 4px;
    box-shadow: 2px 2px 4px #000000;
    display: flex;
    text-align: center;
}


.newProductDescriptionInput{
    width: 90%;
    height: 20vh;
    padding: 12px 20px;
    margin: 8px;
    box-sizing: border-box;
    border: 2px solid beige;
    opacity: 5px;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #000000;
    display: flex;
    text-align: left;
}
.newProductInput {
    width: 90%;
    height: 3vh;
    padding: 12px 20px;
  
    box-sizing: border-box;
    
    opacity: 5px;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #000000;
    display: flex;
    text-align: center;
}

.categoryContainer {
    display: flex;
    margin-bottom: 15px;
}


.submitTitle {
    margin: auto;
}

.products-title {
    text-align: center;
}

div.ml-0.mr-0{
    padding-top: 5px;
    font-size: 2px;
    width: 100%;
    text-align-last:center ;
}
h4.titleError.text-danger{
    font-size: 13px;
}



 /* FOOTER */

 footer {
    background-color: #333;
    
   } 
  

  .contenedor-footer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    color:white;
    padding: 20px;
    margin-top:10px
    
  }
  .contenedor-footer ul li{
    list-style: none;
    text-align: left;
    padding-top: 5px;
    font-size: min(3vw, 15px);
  }
  .contenedor-footer ul li a{
      color: white;
      text-decoration: none;
  }
  
    .logo-footer {
    width: 25vw;
    max-width: 160px;
  }

  .contacto{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }

  .contacto h6, .contacto ul{
    padding-left: 0px
}

.social-media{
      width: 100%;
      display: flex;
    justify-content: center;
      padding: 8px;

  }
  
  .social-media-list {
      display: flex;
      gap: 2em
  }

  .social-media-list img {
      width: 50%;
      max-width: 100px;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  }
  

 /*boton whatsapp*/

 .btn-whatsapp img {
    display:block;
    width:min(7vw, 40px);
    position: fixed;
    right:40px;
    bottom:20px;
    z-index: 800; 
}

/*Map google*/
.servicioTecnico{
    margin-top: 117px;
}

#map{
    height: 200px;
    width: 96%;
    margin: auto;
}
.contact-container{
  
    align-items: center;
}
.contact-container ul li{
        
    display: flex;
    align-items: center;
    gap: 10px
}
.contact-container ul li p{
    font-size: 12px;
}
.contact-title h5{
    padding: 7px;
    border-radius: 6px;
    margin: 7px auto;
    width: 81%;
    background-color: #333;
    text-align: -webkit-center;
    font-size: 14px;
    color: white
}
.contactos{
    display: flex;
    justify-content: center;
}
.fa-solid.fa-screwdriver-wrench{
    
    border-radius: 1px solid;
    background-color: white;
    
    color: #2d9a9e;
    padding: 3px;
    border-radius: 10px
}
.garantia ul{
    color: #2d9a9e;
    display: flex;
    justify-content: space-around;
    list-style: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 10px 0px 10px 0px
}
.stEmail{
    display: flex;
    align-items: center;
    display: flex;
  
    gap: 10px;
    margin-left: 22px;
}
.stEmail h4{
    font-size: 14px;
}
i.fa-solid.fa-envelope{
    font-size: 19px;
}


/* Checkout */

div.msjEntregaProducto{
    margin-left: 10px ;
}
div.msjEntregaProducto p{
    text-align: center ;
}
h2.order-number{
    background-color: #e8e8e8;
    padding: 8px;
    text-align: -webkit-center
}
div.card.my-5{
    margin-top: 15px;
}

.container-checkout {
    margin-top:145px
}

.msg-congrats {
    padding: 0px 10px;
    text-align: center;
}

.order-number {
    padding: 0px 15px;
}

.table {
    border: solid 1px #2d9a9e;
    margin: 2px
}

th {
    color: #2d9a9e;
    padding: 2px;
    /* white-space: nowrap; */
}
.th-1{
    color: #2d9a9e;
    padding: 0px;
    width: 5%;
}

td {
    padding: 2px;
    text-align: center;
    /* white-space: nowrap; */
}

.td-2 {
    width: 30%;
}  
div.card-footer.text-right.subtotal{
    margin-top: 12px;
}

div.card-footer.text-right h2 {
    justify-content: space-between;
    display: flex;
    background-color: #ebebeb82;
    font-size: 18px;
    margin: 0;
    padding: 10px 41px 10px 8px
}
div.card-footer.text-right.total{
    background-color: #e8e8e8;
}
div.card.purchaseDetail{
    margin-left: 14px;
    margin-top: 10px;
    text-align: center;
}
div.card-header.text-center{
    font-weight: bold;
    text-decoration-line: underline
}
/* div.card-body.purchaseDetail{
    text-align-last: left
} */

.row1 {
    text-align: -webkit-center;
}

div.card-footer{
    font-size: 8px;
}

.subtotalAmount::before{
    content: "$ ";
}

.discountAmount::before {
    content: "$ ";
}

.totalAmount::before {
    content:"$ "
}
     
    
    /* 404 NOT FOUND */

.notFound404 {
    text-align: center;
    margin-top: 84px;
}

.notFound404Alert {
    font-family: monospace;
}



/* MEDIA QUERIES */
    /* tabs */
@media (min-width: 361px) {

    /*HEADER*/

    .logo img {
        width: 30vw;
        min-width: 135px;
    }

    .logo-15 {
        display: block;
    }
    .logo-16 {
        display:none;
    }
    .header-menu{
        display: flex;
        justify-content: center;
        height: 8vw;
        max-height: 40px;
        background-color: #312f38;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }

    .user-img {  
        width: 6%;     
    }
    .slider-frame img{
        padding: 0;
    }
    .menu{
        display: flex;          
    }
            
    .burger-menu{ 
        display: none;
    }
    .cont-menu
    {
        display: none;
    }

    .header-menu nav {
        display: flex;               
    }
        
    .header-menu nav > ul {
            display: flex;
            margin:0px;
            padding: 0px;
            }
    .header-menu nav > ul > li{
            display: flex;
            list-style: none;
            text-align: center;
        }
        
    .header-menu nav > ul > li >a {
        margin: 4px 2.5vw;
        text-decoration: none;
        display: flex;
        color: #ffffff;
        align-items: center;
        padding: 14px 0px;
        text-transform: uppercase;
        font-size: min(2vw, 12px);
        transition: all 300ms ease;
        font-weight: bold;
        
    }
    .header-menu nav > ul > li >a:hover{
        background-color: #05c0c7;
        color: white;
        transform: scale(1.1);
        border-radius: 10px;
        padding: 3px;
        /* border: 1px solid white; */
    }
    section.section-set-display.info{
        padding-bottom: 19px
    }
    /* .info ul{
        gap: 26px
    }
    /*hasta aca es el header*/

        /* HOME */
    section.section-set-display.carrusel{
        margin-top: 148px;
    }



    .main-productDetail {
        margin-top:  28vh;
    }

    section.section-set-display.sección01  {
        display: flex;
        justify-content: space-around;
        width: 100%;
        max-width: none;
        margin: auto;

    }
    section.section-set-display.seccion02, .seccion03, .seccion04, .seccion05, .seccion06  {
        display: flex;
        justify-content: space-around;
        width: 100%;
        /* max-width: 191px; */
        margin: auto;
        height: 50vh;
        /* max-height: 36vh; */
    }
    .imgOferta {
        position: absolute;
        bottom: 37vh;
        left: 110px;
        width: 74px;
    }
    .imgOferta-phones {
        position: absolute;
        bottom: 254px;
        left: 94px;
        width: 74px;
    }
    div.swiper{
        box-shadow: none;
        padding: 17px;
    }
    div.swiper-section{
        box-shadow: none;
        padding: 0px;
    }
    article.article-style{
        /* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); */
        min-width: 150px;
        max-width: 190px;
    }

    .icons-index {
        display: block;
    }

    div.info-li h3 {
        /* border-bottom: 1px solid #2d9a9e; */
        display: block;
        color: black;
        margin: 0px 3px;
        padding: 6px 0px;
        font-size: 2.2vw;
        opacity: 0.8;
        animation: flip 5s 4 forwards;
        animation-delay: calc(.5s * var(--i));
    }
    @keyframes flip {
    0%,80% {
        transform: rotateY(360deg) 
    }
    }


    .article01 {
        width: 50%;
    }
    /* .article02 {
        display: block;
        width: 50%;
    } */

    /* .article-style {
        margin: 15px;
    } */

    /* FIN HOME */

    /* LOGIN - REGISTRO */

    .formulario {
        padding-top: 20VH;
    }

    /* FIN LOGIN - REGISTRO */

    /* CARRITO */
    .main.login-registro{
        margin-top: 28vh;
    }

    .main-carrito {
        padding-top: 170px
    }


    /* New Product */
    h2.products-title {
        font-size: 18px;
    }

    .newProductSection {
        margin-top: 30vh;     
    } 

    div.form-group.row h4, .price-discount h4{
        font-size: 16px;
    }

    /*PRODUCT DETAIL*/
    .margin-productDetail {
        /* margin-bottom: 7vh; */
        margin-top: 28vh
    }

        /* 404 NOT FOUND */
    .notFound404 {
        text-align: center;
        margin-top: 165px;
    }

    /*SERVICIO TECNICO*/
    .shopping-cart {
        margin-left: 25px; ;
    }
    .servicioTecnico{
        margin-top: 149px;
    }

    /*CHEKOUT*/
    .main-checkout{
        max-width: 650px;
    }
    .container-checkout {
        margin-top: 176px;
    }
    h2.order-number{
        margin: 0px 10px 0px 10px
    }
    div.card-body{
        margin: 0px 10px 0px 10px
    }
    div.card.purchaseDetail{
        margin: 10px 10px
    }
    div.card-header.text-center {
        font-size: 14px;
    }
    p.mb-0{
        font-size: 14px;
    }
}

@media (min-width: 600px) {

    
    /*HOME*/
    section.section-set-display.carrusel{
        margin-top: 160px;
    }

    .imgOferta {
        position: absolute;
        bottom: 38vh;
        left: 15vw;
        width: 74px;
    }

    div.info-li h3 { 
        font-size: 11px;
        margin: 0px 13px
    }

    section.section-set-display.sección01, .seccion02, .seccion03, .seccion04, .seccion05, .seccion06 , .seccion07 , .seccion08 , .seccion09 {

        height: 52vh;
        width: 88vw;
        
    }

    /* LOGIN - REGISTRO */
    .main.login-registro{
        margin-top: 29vh
    }

    .formulario{
        display: flex;
        flex-direction: row;
        padding-top: 20vw ;
        justify-content: space-around;
        
        
    }
   .formulario-login form{
    padding-bottom: 30px; 
     
    }

    /* FIN LOGIN - REGISTRO */

    /* CARRITO */

    .description {
        width: 35vw;
    }
    .suggestion {
        justify-content: space-around;
    }
    .item-suggested {
        width: 45%;
        margin: 5px 5px;
        padding: 10px 0px; 
    }
    .description-item {
       
        width: 77%;
       
    }

    footer {
        display: flex;
        align-items: center;
    }

    .footer-container{
        width: 70%;
        margin: 10px;
        padding: 10px;
        /* border-right: #ccc7c7 3px solid; */
    }

    .data-fiscal-container {
        width: 30%;
    }

    .data-fiscal-container img {
        width: 50px;
    }

    .newProductSection {
        margin-top: 22vh;
    }

    /*PRODUCT DETAIL*/
    .row>* {
        width: 50%;
    }
    .img-fluid {
        margin: auto;
        height: 275px;
        max-width: 100%;
    }

    .card-body {
        HEIGHT: auto;
        /* height: 74vh; */
        /* white-space: pre-line; */
    }
    div.productName{
        padding-bottom: 10px;
    }
    button.btn.btn-primary {
        width: 16vw;
        height: 4vh;
    }
    .margin-productDetail{
        margin-top: 29vh;
    }
    /*NEW PRODUCT*/
    div.form-group.row h4{
        margin-top: 0px;
    }
    div.form-group.row label{
        padding-top: 0px;
    }

    .input-category{
        margin-bottom: 0px
    }
    .newProductSection {
        margin-top: 31vh;
    }

    /*SERVICIO TECNICO*/
    .shopping-cart {
        margin-left: 56px;
    }
    .servicioTecnico {
        margin-top: 161px;
    }
    .contact-container{
        display: flex;
    }
    #map{
        margin-top: 7px;
        width: 96%;
        height: 268px;
        margin-right: 10px;
    }

    .contact-title h5 {
        padding: 5px;
    }
    /*chekout*/
    .msg-congrats {
        padding: 0px 60px;
        text-align: center;
    }
    div.msjEntregaProducto{
        margin-left: 14px;
    }
    div.msjEntregaProducto p{
        font-size: 14px;
    }
    h2.order-number {
        margin: 0px 20px 0px 20px;
    }
    .table {
        font-size: 14px
    }
    /* div.card-body {
        margin: 0px 20px 0px 20px;
    } */
    div.card.purchaseDetail {
        margin: 10px 20px;
    }
}

@media (min-width: 761px) {

    .info ul{
        padding: 5px 0px;
    }

    /* HEADER */

    section.section-set-display.carrusel {
        margin-top: 114px;

    }

    .logo {
        flex-grow: 0.1;
    }

    .carrito-compra, .user-img, .user-login{
        flex-grow: 0;
        margin: 0px 10px
    }

    .user-img {
        width: 35px;
        height: 34px;
    }


    .search-bar-1 {
        /* display: block; */
        flex-grow: 1;
        padding-bottom: 15px;
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    .search-bar-1 form{
        flex-grow: 1;
       display: flex;
       justify-content: center;
    }
    
    .search-bar-1 form button {
       text-decoration: none;
       background-color: #f1f8fd;
       border: 1px dotted #2d9a9e;
       color: #2d9a9e;
    }
    .search-bar-1 form button i {
       padding: 6px;
       font-size: 16px;
    }


    .search-bar-2 {
        display: none;
    }

    /* HOME */
    section.section-set-displayarticle04.carrusel{
        margin-top: 19.5vh;
    }

    .imgOferta {
        position: absolute;
        bottom: 32vh;
        left: 12vw;
        width: 74px;
    }

    .icons-index {
        display: block;
        font-size: 14px;
        padding: 5px;
        opacity: 0.8;
        margin: 3px 0px;
        border-radius: 40px;
        color: #038e93;
        font-weight: bolder;
        background-color: white;
    }
    

    section.section-set-display.sección01, .seccion02, .seccion03, .seccion04, .seccion05, .seccion06 , .seccion07 , .seccion08 , .seccion09 {

        height: 44vh;
        width: 92vw;
        
    }
    .article03, .article04 {
        display: block;
    
    }
    .article01, .article02, .article03, .article04 {
        width: 25%;
    
    }
    .carrusel {
        margin-top: 200px;
    }
    i.fa-solid.fa-cart-shopping.seccion{
    display: none;
    } 

    div.verProducto{
    position: absolute;
    right: 14px;
    font-size: 18px;
    bottom: 36px
    }

    /* div.price {
    left: 36px;
    position: absolute;
    top: 2px;
    right: 72;
    color: #5a5960;
    margin-top: 3px;
    } */
    div.buttomVerProducto{
        text-align: center;
        display: flex;
        justify-content: center;
        margin: auto;
        width: 100%;
        height: 90%;
        bottom: 34px;
        left: 0px;
        border-radius: inherit;
        white-space: nowrap;
        background-color:  rgb(0 0 0 / 73%);
        padding: 10px;
        opacity: 0;
        transition: 0.5s;
        position: absolute;
        border-radius: 7px;

    }
    div.buttomVerProducto a{
        font-size: 12px;
        color: rgb(255, 255, 255);
        align-self: center;
        background-color: #05c0c7;
        /* border-style: solid; */
        padding: 12px;
        border-radius: 10px;
        cursor: pointer;
    }
    div.buttomVerProducto:hover{
        opacity: 1;
        background-color: rgba(0,0,0,0, 0.5);
    }

    div.imgofertas img{
        width: 40%;
    max-width: 34%;
    }
    /* FIN HOME */


    /* CARRITO */

    .main-carrito {
        gap: 23px;
        padding-top: 21vh;
        display: flex;
        flex-wrap: wrap;
    }

    .margin-productDetail {
        /* margin-bottom: 7vh; */
        margin-top: 22vh;
    }

    .description-item .name {
        width: auto;
    }

    .shopping-cart {
        margin-left: 26px;
        width: 100%;
    }

    .shopping-cart h1 {
        font-size: 1.3em;
    }
    .shopping-cart a {
        text-decoration: none;      
    }
     
    div.suggestion-title-box h2 {
        font-size: 18px;
       
    }
    section.cart-container {
        width: 57%;
        text-align: -webkit-center
    }

    .discount-box {
        height: 40%;
        width: 100%;
        
    }
    .img-items img {
        height: 13vw;
        max-height: 150px;
       
    }
    .counter{
        flex-grow: 0.3;
        margin:0
    }
    h4.description.h4-carrito {
        width: auto;
       
    }
    div.remove-button{
        margin-left: auto;
    }

    .discount-checkout {
        width: 32vw;
    
    }

    .discount-checkout.discount {
        width: 100%;
        margin: auto;
        border-top: none;
        border-bottom: 2.5px solid #07c1c9;
        padding-bottom: 30px;
    }

    .checkout {
        flex-grow: 1;
    }
    .checkout-buttom {
        margin: 5px 0px;
    }

    .checkout-buttom button {
        font-size: 1.3em;
        padding: 5px 15px;
        width: 81%;
    }

    .checkout-continue button {
        width: 81%;
    }    
    
    .description-item {
        width: 75%;
        margin-top: 10px;
    }

    /* FIN CARRITO */

    /*NEW PRODUCT*/

    .newProductSection {
        margin-top: 25vh;
    }
    /*PRODUCT DETAIL*/
    div.container.products-wrapper.margin-productDetail{
        text-align: -webkit-center;
        max-width: 720px
    }
    div.card-body{
        margin-top: 25px;
    }
    /* div.card.mb-3{
        height: 57vh;
    } */
    p.card-text{
        font-size: 12px;
    }
    .img-fluid {
    
        max-width: 85%;
    }
    /*LOGIN*/
    .main.login-registro{
        margin-top: 23vh;
    }

    /* FOOTER */

    .logo-footer {
    width: 25vw;
    display: flex;
    justify-content: center;
    }

    
    .contacto h6, .contacto ul{
        
        padding-left: 0px
    }

    .social-media {
        width: 30%;
        
    }

    .social-media-list {
        gap: 1em;
    }

    .social-media-list li {
        text-align: center;
        width: 30%;
    }

    /* NEW PRODUCT*/

    .newProductSection {
        width: 80%;
        max-width: 650px;
    }

    .input-textarea{
    height: 6vh;
    font-size: 14px;
    }
    div.form-group.row{
    align-items: center;
    }
    
    select#brandNewProduct.form-control, select#sectionNewProduct.form-control {
    height: 33px;
    }
    .form-control {
        font-size: 15px;
    }

    /*SERVICIO TECNICO*/
    .contact-container{
        align-items: baseline;
    }
    .contact-title h5{
        padding: 10px;
        width: 87%;
    }
    .contact-container ul li p {
        font-size: 14px;
    }
    #map {
        margin-top: 7px;
        width: 100%;
        height: 295px;
        margin-right: 10px;
    }

    .garantia ul li strong{
        font-size: 14px;
    }
    
    /* 404 NOT FOUND */
    .notFound404 {
        margin-top: 165px;
    }

    /*CHEKOUT*/
    .container-checkout {
        margin-top: 149px;
    }
    h2.order-number {
        margin: 0px 30px 0px 30px;
    }
    div.msjEntregaProducto {
        margin-left: 30px;
    }
    /* div.card-body {
        margin: 0px 30px 0px 30px;
    } */
    .table {
        font-size: 15px;
    }
    div.card.purchaseDetail {
        margin: 24px 30px;
    }
    div.card-header.text-center {
        font-size: 15px;
        
    }
        
} 

@media (min-width: 900px) {
    .imgOferta-phones {
        position: absolute;
        bottom: 38vh;
        left: 9vw;
        width: 74px;
    }

    /*MENU*/
    section.section-set-display.carrusel{
        margin-top: 13vw;
    }
    /* CARRITO */
    section.discount-checkout{
        margin-left: 44px;
    }
    .description-item {
        width: 72%;
    }

    .description {
        width: 25vw;
    }  
    h4.description.h4-carrito {
        font-size: 14px;
        
    }  
    
    .item-suggested {
        width: 30%;
        margin: 5px 5px;
        padding: 10px 0px; 
        border: solid thin  #000000 ; 
    }
    .s-item-3 {
        display: block;
    }
    /* FIN CARRITO */

    /*productDetail*/
    .main-productDetail {
        margin-top:  30vh;
    }
    .margin-productDetail{
        margin-top: 24vh;
    }
    div.card-body{
        margin-top: 25px;
    }
    .img-fluid {
        
        max-width: 85%;
    }
    /*fin productDetail*/

    /*NEW PRODUCT*/

    .newProductSection {
        margin-top: 23vh;
    }

    /*LOGIN*/
    .main.login-registro{
        margin-top:25vh
        
    }


    /*SERVICIO TECNICO*/
    .shopping-cart {
        margin-left: 25px;
    }
    .servicioTecnico{
    margin-top: 142px;
    }
    #map{
        margin-right: 17px;
        width: 65%;
    }

    /* 404 NOT FOUND */
    .notFound404 {
        text-align: center;
        margin-top: 165px;
    }

}

/*desktop*/
@media (min-width: 1000px) {
    section.section-set-display.carrusel{
        margin-top: 12vw;
    }
    
    .slider-frame ul {
        background-color: #2357B8;
        justify-content: center;
        display: flex;
        
        width: auto;
        /* animation: slide 20s infinite alternate; */
    
    }



    .slider-frame img {
        width: auto;
        /* padding-top: 10px; */
        max-height: 50vh;
        
        
    }

    .main {
        margin-top: 25vh;
    }
    .imgOferta-phones {
        position: absolute;
        bottom: 38vh;
        left:100px;
        width: 74px;
    }

    .imgOferta {
        position: absolute;
        bottom: 32vh;
        left: 117px;
        width: 74px;
    }

    div.verProducto{
        position: absolute;
        right: 20px;
        font-size: 18px;
        bottom: 38px
    }
    /* div.discount {
        left: 30px;
        position: absolute;
        top: 6px
        
    } */
    /* div.price {
        left: 70px;
        position: absolute;
        top: -13px;
        
    } */
    /* PRODUCT DETAIL */
    div.container.products-wrapper.margin-productDetail{
        display: flex;
        width: 100%;
        text-align: -webkit-center
    }
    .caracteristicas{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    div.fotos article{
        display: flex;
        width: 100%;
        flex-direction: row-reverse;
    }
     
    .fotoPincipal{
        display: flex;
        width: 70%;
        flex-wrap: wrap;
    }
    
    .fotosSecundarias{
        display: flex;
        width: 30%;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .main-productDetail {
        margin-top: 35vh;
    }
    div.card.mb-3{
        justify-content: center;
        max-width: 850px
    }
    div.row.g-0.container-detail{
        justify-content: center;
    }
    div.col-md-6{

        width: 44%;
    }
   
    .img-fluid {
        max-width: 85%;
        
    }
    p.card-text{
        font-size: 13px;
    }

    .margin-productDetail {
        margin-top: 14vw;
        display: flex;
        justify-content: center;
    }

    /* FIN PRODUCT DETAIL */

    /* CARRITO */
    .main-carrito{
        padding-top: 14vw;
    }
    .newProductSection {
        margin-top: 30vh;
      
    }
   


    
       /*SERVICIO TECNICO*/
    .shopping-cart {
        margin-left: 16px;
    }
    .servicioTecnico{
        margin-top: 13vw
    }
    div.contact-container{
        margin-top: 16px;
    }
    #map{
        margin-right: 20px;
        width: 50%;
        height: 300px;
    }
    
    .contact-title h5 {
       font-size: 15px;
        width: 93%;
    }
    .contact-container ul li p {
        font-size: 16px;
    }
    .garantia ul li strong {
        font-size: 16px;
    }

        /*404 NOT FOUND*/
    .notFound404 {
        margin-top: 165px;
    }

    /*CHEKOUT*/
    .container-checkout {
        margin-top: 182px;
    }
    div.msjEntregaProducto p{
        font-size: 16px
    }
    div.msjEntregaProducto {
        margin-left: 50px;
    }
    h2.order-number {
        margin: 0px 50px 0px 50px;
    }
    div.card-body.tabla {
        text-align: -webkit-center
    }
    div.card-footer.text-right h2{
        text-align: left;
    }
    div.card.purchaseDetail {
        margin: 24px 50px;
    }
    div.card-header.text-center p {
        font-size: 16px;
    }
    p.mb-0 {
        
            font-size: 15px;

    }
    
}