*{
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}
html{
    font-size: 92.5%;   
    }
body{
    margin:0;
  
}
.container{
    width: 90%;
    margin: 0 auto;    
}
/*------Header-------*/
header{
    background-color:#333;
    color:black;
    padding: 2rem 0;
    font-size: 1rem;
}
.titulo{
    margin-top:1.2rem;
}
.header a{
    color:white;
    text-decoration: none;
    align-items: center;
}
 /*------Nav-------*/
.logo-nav-container{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.navigation ul {
    margin:0;
    padding:0;
    list-style:none;
}
.navigation ul li{
    display:inline-block;
}
.navigation ul li a{
    display: block;
    padding: 0.5rem 1rem;
    transition: all 0.4s linear;
    border-radius: 0.25rem;
}
.navigation ul li a:hover{
    background: #4a4a4a;  
}
.logo{
    display: flex; 
    flex-direction:row;
    align-items:center;
    font-size: 1rem;
    color:white;  
}
#btn-menu{
    display:none;
}
label{
    display:none;   
}
label:hover{
    background: #4a4a4a;
}
/*-----Slider----*/
.slider{
    width: 100%;
    height: 13rem;
    margin:auto;
    overflow: hidden;
}
.slider ul{
    margin-top:0 ;
    margin-bottom:0 ;
    padding: 0;
    display: flex;
    width: 400%;
    animation: cambio 20s infinite alternate;    
    animation-timing-function: cubic-bezier(1,.01,.02,.68);
}
.slider li{
    width: 100%;
    list-style: none;  
}
.slider img{
    width:100%;
    height: auto;
}
@keyframes cambio {
    0% {margin-left: 0;}
    20% {margin-left: 0;}
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    50% {margin-left: -200%;}
    75% {margin-left: -200%;}
    80% {margin-left: -300%;}
    100% {margin-left: -300%;}  
}
#portada1{
    max-width: 100%;
    max-height: 10rem;
}
h1{
    margin-top: 0;
    text-align: center;
    font-size: 2rem;
}
.main{
    margin-top: 0;
    align-items: center;
}
/*--Grid para acecsorios y mas vendidos*/
.grid{
    display: grid;
    grid-template-areas: "celu1 celu2 celu3"
                         "celu4 celu5 celu6"
                         "celu7 celu8 celu9";
    grid-gap: 3.5rem 3.5rem;
    justify-content: center;  
}
.item{
    border-style:  groove;
    border-radius: 0.6rem;
    box-shadow: 0 0 1rem 0.1rem rgba(189,166,240,0.75);   
}
.item1{
    grid-area: celu1;    
}
.descripcion{
    text-align: center;      
}
.nombre{
    margin-top:0;
    margin-bottom: 0;
    font-size: 1.5rem;    
}
.antes{
    font-size: 1.5rem;
    margin:0;
    padding: 0;
    text-decoration: none;   
}
.precio{
    text-decoration: line-through;
    color:#e73827;
}
.oferta{
    font-size: 1.8rem;
    margin:0;
    padding: 0;
    color:#207ce5;
}
.item2{
    grid-area: celu2;
}
.item3{
    grid-area: celu3;    
}
.item4{
    grid-area:celu4; 
}
.item5{
    grid-area: celu5;   
}
.item6{
    grid-area: celu6;
   
}
.item7{
    grid-area: celu7;     
}
.item8{
    grid-area: celu8;
    
}
.item9{
    grid-area: celu9;

}
.stock{
    color:red;
    font-weight: bold;
}
.footer{
    height: 100%;
    background: #f2f2f2; 
    margin-top: 1.5rem;
    width:100%;    
}
.iconos-nosotros {
    display: flex;  
    justify-content: space-between;
    align-items: center;
}
.iconos{
    display:flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    text-decoration-color: aqua;
}
.iconos a:-webkit-any-link{
    color:black;
}
.nosotros a:-webkit-any-link{
    color:black;
}
/*-----------Inicio Noticias---------*/
article{
    display: inline-flex;
    font-size:1.2rem;
    padding-top:2rem;
    padding-bottom:2rem;
    width: 85%;
    margin-left: auto;
    margin-right:auto;
    line-height: 2rem;
    color:#333;
    font-weight: bold;

}
.iPhone12{
    width: 70%;
    height: auto;
    align-items: center;
    margin-left: auto;
    margin-right:auto; 
}
/*-----------Footer---------*/
i{
    width: 100%;
    height: 100%;
    font-size: 1.5rem; 
}
.nosotros{
    display:flex;
    font-size: 1rem;
    margin-top: 0;
    align-items: center; 
}
.correo{
    margin-left:0.5rem;
    font-size: 1.3rem;
}
.copy{
    font-size: 1.4rem;
}
/*-----------Contacto---------*/
form{
    background: #333;
    text-decoration-color: white;
    font-size:1rem;
    width: 30%;
    align-items: center;
    padding: 1rem 2rem;
    margin-top:2rem;
    margin-left: auto;
    margin-right:auto;
    border-radius: 0.7rem;
    
    
}
.h2-form{
    text-align:center;
    font-size:1.5rem;
}
form,label{
    color:white;
}
.map{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    
}
input,textarea,button{
    width: 100%;
    margin-bottom: 0.5rem;
    margin-top:0.5rem;
    padding:0.5rem;
    align-items: center;
    resize: none;
}
@media  ( min-width:540px) and (max-width:768px){
    /*------Header-------*/
    label{
        display:block;
    }
    #btn-menu:checked ~*.navigation ul li{   
        display: block;
    }
    /*------Nav-------*/
    .header{
        text-align: center;
        padding:0;
        margin:0;
    }
    .navigation{
        width: 100%;
        transition: all 10s;    
    }
    .navigation ul li{
        display:none;         
    }
    .navigation ul li a{
        display: block;
        padding: 0.5rem 0;
        transition: all 0.4s linear;
        border-radius: 0.25rem;    
    }
    .logo-nav-container{
        flex-direction: column;
        justify-content: center;
    }
    /*-----Slider----*/
    .slider{
        height: 8rem;
    }
    /*----Noticias---*/
    .iPhone12{
        width: 80%;    
    }  
    /*------Main------*/
    .grid{        
        grid-template-areas: "c1 c2 c3" 
                             "c4 c5 c6"
                             "c7 c8 c9"
                             "c10 c11 c12"
                             "c13 c14 c15"
                             "c16 c17 c18";
        justify-content: center;
        grid-gap: 0.5rem 0.5rem;           
    }
    .item1{
        grid-area: c1;
    }
    .item2{
        grid-area: c2;
    }
    .item3{
        grid-area: c4;
    }
    .item4{
        grid-area: c5;
    }
    .item5{
        grid-area: c7;
    }
    .item6{
        grid-area: c8;
    }
    .item7{
        grid-area: c10;
    }
    .item8{
        grid-area: c11;
    }
   .item9{
       grid-area:c13;
   }
   /*--Grid para acecsorios y mas vendidos*/
   .accesorios1{
        grid-area:c1;
   }
   .accesorios2{
    grid-area:c2;
    }
    .accesorios3{
    grid-area:c4;
    }
    .accesorios4{
    grid-area:c5;
    }
    .accesorios5{
    grid-area:c7;
    }
    .accesorios6{
    grid-area:c8;
    }
    .accesorios7{
    grid-area:c10;
    }
    .accesorios8{
    grid-area:c11;
    }
    .accesorios9{
    grid-area:c13;
    }
    .accesorios10{
    grid-area:c14;
    }
    .accesorios11{
    grid-area:c16;
    }
    .accesorios12{
    grid-area:c17;
    }
   /*--------Footer------*/
   .iconos-nosotros{
       flex-direction: column;
       justify-content: center;
   }
   .iconos a{
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
   }
   /*--contacto--*/
   .contacto{
    flex-direction: column;
    justify-content: center;
    }
    .map{
        max-width: 90%;
    }
    form{
        width: auto;   
    }
}

@media only screen and ( max-width:540px){
    label{
        display:block;
    }
    #btn-menu:checked ~*.navigation ul li{   
        display: block;
    }
    /*------Nav-------*/
    .header{
        text-align: center;
        padding:0;
        margin:0;
    }
    .navigation{
        width: 100%;    
    }
    .navigation ul li{
        display:none;       
    }
    .navigation ul li a{
        display: block;
        padding: 0.5rem 0;
        transition: all 0.4s linear;
        border-radius: 0.25rem;
    }
    .logo-nav-container{
        flex-direction: column;
        justify-content: center;
    }
    /*---footer----*/
    .iconos-nosotros{
        flex-direction: column;
    }
    .correo{
        font-size:1.2rem;
        margin-left:0;
    }
    /*---Noticias--*/
    article{   
        font-size:1.2rem;
        line-height: 1.5rem;
    }
    /*---main----*/
    .grid{        
        grid-template-areas: "  c1  " 
                             "  c2  "
                             "  c3  "
                             "  c4  "
                             "  c5  "
                             "  c6  " 
                             "  c7  "
                             "  c8  "
                             "  c9  "
                             "  c10  "
                             "  c11  "
                             "  c12  "
                             ;
        justify-content: center;
        grid-gap: 0.5rem 0.5rem; 
    }
    .item1{
        grid-area: c1;
    }
    .item2{
        grid-area: c2;
    }
    .item3{
        grid-area: c3;
    }
    .item4{
        grid-area: c4;
    }
    .item5{
        grid-area: c5;
    }
    .item6{
        grid-area: c6;
    }
    .item7{
        grid-area: c7;
    }
    .item8{
        grid-area: c8;
    }
   .item9{
       grid-area:c9;
   }
   /*----grid de accesorios----*/
   .accesorios1{
    grid-area:c1;
    }
.accesorios2{
grid-area:c2;
}
.accesorios3{
grid-area:c3;
}
.accesorios4{
grid-area:c4;
}
.accesorios5{
grid-area:c5;
}
.accesorios6{
grid-area:c6;
}
.accesorios7{
grid-area:c7;
}
.accesorios8{
grid-area:c8;
}
.accesorios9{
grid-area:c9;
}
.accesorios10{
grid-area:c10;
}
.accesorios11{
grid-area:c11;
}
.accesorios12{
grid-area:c12;
}
.map{
    max-width: 90%;   
}
form{
    width: auto;   
}

input,textarea,button{
width: 100%;
margin-left:0rem;
}
/*--Slider---*/
.slider{
     height: 5rem;
}
}