@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
	padding: 0;
	margin: 0;
    border: 0;
    box-sizing: border-box;
}

@media screen and (min-width:271mm){

body { background: gainsboro;width:100%;} 
header {display: flex;flex-direction: row;justify-content:space-around;align-items: center;height:25vh;background-color: rgba(255, 127, 80, 0.377);width:100%;}
header img{height:28vh;margin-left:-4em;border-radius: 2em;padding: 1em;}

header input{margin: 1em;padding: 0.7em;}
header a img{height:32vh;margin: 1em;}
div4 {display: flex;flex-direction: column;justify-content: center;align-items: center;}
div4 h1 {font-family:'Tangerine', serif;font-size:8vh;font-weight:bolder;margin-left:-6em;text-shadow: 4px 4px 4px #aaa;}

div4 h3 {font-family:'cursive';font-size:5vh;color:rgba(34, 139, 34, 0.877);margin-left:-6em;}


    
.sticky-nav{
    position: sticky; /* Hace que el elemento se "pega" a la parte superior de la ventana */
    top: 0; /* Define la posición inicial */
    background-color: #fff; /* Color de fondo para que se vea al pegarse */
    z-index: 100; /* Asegura que el elemento esté por encima de otros elementos */
  }  
.list{
    width: 100%;
    height:7vh;
    background-color: rgba(255, 127, 80, 0.884);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    list-style:none;
}   
.nav__link{
    color: black;
    display: block;
    font-weight:bolder;
    align-items: center;
    text-align: center;
    text-decoration: none;
    height:7vh;
    padding-top:0.6em;
    
    
}

.nav__link--inside{
    border-radius: 6px ;
    align-items: center;
    text-align: left;
    padding: 0.41em;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
}

.nav__link--inside:hover{
    background: #dee3e9;
}



.list__item{
    list-style:none ;
    width: 10vw;
    text-align: center;
    align-items: center;
    height:7vh;
    
}

.list__item--click{
    cursor:pointer ;
}

.list__button--click{
    display: flex;
    
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 1em;
    width: 50%;
    
    
    height:7vh;
}

.arrow .list__arrow{
    transform: rotate(90deg);
}

.list__arrow{
    margin-left: auto;
    transition: transform .3s;
    align-items: center;
    text-align: center;
}

.list__show{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    margin-left:0;
    
    border-left: 1px solid aquamarine;
    text-decoration: none;
    list-style: none;
    transition: height .4s;
    height:0;
    overflow: hidden;
}

.list__large{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width: 370%;
    background-color: #fff;
    margin-left:-12.5em;
    
     
    border-left: 1px solid aquamarine;
    text-decoration: none;
    list-style: none;
    transition: height .4s;
    height:0;
    overflow: hidden;
}
aside{
    width: 100%;
    height: 40vh;
    background-image:url("../img/1920x5001799_sin_titulo_2_2.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.escolar{
    width: 100%;
    height: 40vh;
    background-image:url("../img/empresa-1200-x1.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.comercial{
    width: 100%;
    height: 40vh;
    background-image:url("../img/libreria-comercial-ofi-virtual_pvavuja_3.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.artistica{
    width: 100%;
    height: 40vh;
    background-image:url("../img/arriba.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.tecnica{
    width: 100%;
    height: 40vh;
    background-image:url("../img/unnamed.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.cotillon{
    width: 100%;
    height: 40vh;
    background-image:url("../img/pito.jpeg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bazar{
    width: 100%;
    height: 40vh;
    background-image:url("../img/bazar.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.jugueteria{
    width: 100%;
    height: 40vh;
    background-image:url("../img/jugueteria.png") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.blanqueria{
    width: 100%;
    height: 40vh;
    background-image:url("../img/blanqueria.jpg") ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.kits{
    width: 50em;
    height: 90%;
}
.kit{
    height: 42vh;
}
.juvenil{
     width: 5vw;
}
.alfombras{
    width: 60em;
    height: 90%;
}
figure {
    margin: 0;
  }
  
  .subtitulo {
      text-align: center;margin-top:0.5em;margin-bottom: 0.5em;align-items: center;
  }
  
li a:hover{color:red;}
form {display: flex;flex-direction: column;align-items: center;}
form label input {margin:1em;background-color:white;color:black;}
input {margin: 0.7em;background-color:aquamarine; color:white;padding: 0.5em;border-radius:1em; }
article1 a:hover{color:red;}
article1 b:hover{color:red}   

aside h1 {font-family: cursive;font-size: 4em;color:orangered;margin-left:7em;padding-top: 2.8em;} 
footer {display: flex;flex-direction: row;justify-content:space-around;align-items: center;background-color: beige;height:6em;}
footer a img{height:10vh;}
section {display: flex;flex-direction: row;justify-content:space-around;flex-wrap:wrap;}
table { border-collapse: collapse;margin:0 auto;}
article1 table { border-collapse: collapse;}
article1 table thead {background-color:red;color:white;}
thead {background-color: red;color:white;}
article1 table thead h4 {margin:0 auto;padding:0.5em;}
article1 table td {background-color: beige;border:solid;padding-left: 1.5em;padding-right: 1.5em;padding-top:1.5em;padding-bottom: 1.5em; }
div3 h3 {font-size: 1.5em;color: forestgreen;margin-bottom: 0.5em;}
thead h4 {margin:0 auto;padding:0.5em;}
td {background-color: beige;border:solid;padding-left: 0.5em;padding-right: 0.5em;}
h4 {margin:0.7em ;}
main {background-color: white;width: 95%; margin-left: 2vw;margin-top: 1em; }
main1 {display:flex;flex-direction: row;justify-content: space-around;align-items: flex-start; background-color:azure;width: 95vw;margin-left: 2vw;margin-top: 1em;margin-bottom: 1em;}
main2 {background-color:orange;width: 95vw;margin-left: 2vw;margin-top:1em;}
main3 {background-color:gray;width: 95vw;margin-left: 2vw;margin-top:1em;}
main4 {background-color:burlywood;width: 95vw;margin-left: 2vw;margin-top:1em;}
main5 {display:flex;flex-direction: row;justify-content: space-around;align-items: flex-start; background-color:azure;width: 95vw;margin-left: 2vw;margin-top: 1em;margin-bottom: 1em;}    
article form {display: flex;flex-direction:column;justify-content: flex-start;align-items: center;}
article input {background-color:aquamarine; color:black;padding-right: 0.5em;border-radius:1em;}
caption {margin: 1em;}
td a img {width: 4vmin;padding-left:1em}
section1 {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
section2 {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
section3 {display: flex;flex-direction: row;justify-content:space-evenly;align-items:center;flex-wrap:wrap;}

footer a {text-decoration: none;}
footer {margin-top: 5em;}
section3 article {display: flex;flex-direction: column;justify-content:flex-start;align-items:center;background-color: antiquewhite;border:0.1em solid antiquewhite;width: 15vw;height: 70vh;margin-bottom: 0.5em;margin-top:0.5em;margin-left:1em;}
section3 p {margin-top:0.6em;font-size: 1em }
section3 article img {width: 15vw;height: 28vh;}
article form img {width: 8vw;height:8vh;margin-bottom: 0em;}
article form p{color:red;}

section article1 {display: flex;flex-direction: column;justify-content: flex-start;align-items:flex-start;margin: 1em;}
article1 a {text-decoration: none}
article b {font-size:1.3em;margin-top: 0.5em;margin-bottom:0em;  color:black;}
article1 b {font-size:1em;margin: 1.4em;color:black;}

div1 {display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 1em;}
div1 h5 {font-size: 1.3em;background-color: aquamarine;color: white;margin: 0.7em;border-radius: 1em;padding: 0.5em;}
div1 h3 {font-size: 2em;color: forestgreen;}
div1 h5:hover{color:red}
div2 {display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap;}
}
@media screen and (max-width:271mm){
 
    body {background-color:gainsboro;width:auto ;display: flex;flex-direction: column;}
    header {display: flex;flex-direction: row;justify-content: space-around; align-items: center;height: 26vh;}
    header {background-color:rgba(255, 127, 80, 0.377);width:100vw;}
    header input{margin: 1em;padding: 0.7em;}
    header a img {height:50vh;margin: 1em;}
    header img {height:0vh;border-radius:20px;}
    div4 {display: flex;flex-direction: column;justify-content: center;align-items: center;padding-bottom:1vh;}    
div4 h1 {font-family:'Tangerine', serif;font-size:12vh;font-weight:bolder;margin-left:-2em;text-shadow: 4px 4px 4px #aaa;}

div4 h3 {font-family:'cursive' ;font-size: 1em;color: rgba(34, 139, 34, 0.877);margin-left:-2em;}

.sticky-nav{
    position: sticky; /* Hace que el elemento se "pega" a la parte superior de la ventana */
    top: 0; /* Define la posición inicial */
    background-color: #fff; /* Color de fondo para que se vea al pegarse */
    z-index: 100; /* Asegura que el elemento esté por encima de otros elementos */
  }  
.list{
    width: 100vw;
    height:6vh;
    background-color: rgba(255, 127, 80, 0.884);
    display: flex;
    flex-direction: row;
    font-weight:normal;
    justify-content: space-evenly;
    text-decoration: none;
    list-style: none;
    
}   
.nav__link{
    color: black;
    display: block;
    font-weight:normal;
    
    align-items: center;
    text-align: center;
    text-decoration: none;
    
    
    
    
    
}

.nav__link--inside{
    border-radius: 6px ;
    align-items: center;
    text-align: left;
    padding: 0.2em;
    padding-bottom: 0.4em;
    padding-top: 0.2em;
    margin-bottom: 0em;
}

.nav__link--inside:hover{
    background: #dee3e9;
}



.list__item{
    list-style:none ;
    width: 6vw;
    text-align:center;
    text-decoration: none;
    height:2vh;
    
}

.list__item--click{
    cursor:pointer ;
}

.list__button--click{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align:center;
    font-size: 0.6em ;
    gap: 0.1em;
    
    
    
    
}

.arrow .list__arrow{
    transform: rotate(90deg);
}

.list__arrow{
    margin-left: auto;
    transition: transform .3s;
}

.list__show{
    display: flex;
    flex-direction: column;
    width: 13vw;
    background-color: #fff;
    
    padding-left:-0.5em;
    border-left: 1px solid aquamarine;
    text-decoration: none;
    list-style: none;
    transition: height .4s;
    height:0;
    overflow: hidden;
}

.list__large{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 55vw;
    background-color: #fff;
    margin-left:-12.5em;
    
    
    border-left: 1px solid aquamarine;
    text-decoration: none;
    list-style: none;
    transition: height .4s;
    height:0;
    overflow: hidden;
}
aside{
width: 100vw;
height: 40vh;
background-image:url("../img/1920x5001799_sin_titulo_2_2.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.escolar{
width: 100vw;
height: 40vh;
background-image:url("../img/empresa-1200-x1.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.comercial{
width: 100vw;
height: 40vh;
background-image:url("../img/libreria-comercial-ofi-virtual_pvavuja_3.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.artistica{
width: 100vw;
height: 40vh;
background-image:url("../img/arriba.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tecnica{
width: 100vw;
height: 40vh;
background-image:url("../img/unnamed.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.cotillon{
width: 100vw;
height: 40vh;
background-image:url("../img/pito.jpeg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bazar{
width: 100vw;
height: 40vh;
background-image:url("../img/bazar.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.jugueteria{
width: 100vw;
height: 40vh;
background-image:url("../img/jugueteria.png") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.blanqueria{
width: 100vw;
height: 40vh;
background-image:url("../img/blanqueria.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.kits{
width: 50em;
height: 90%;
}
.kit{
height: 90%;
width: 30vw;
}
.juvenil{
 width: 5vw;
}
.alfombras{
width: 60em;
height: 90%;
}
figure {
margin: 0;
}

.subtitulo {
  text-align: center;align-items: center;
}
header form {display: flex;flex-direction: column;align-items: center;}
header form label input {margin:0.5em;background-color:white;color:black}
header input {margin: 0.5em;background-color:aquamarine; color:white;padding: 0em;border-radius:1em; }

li a:hover{color:red} 
div4{padding-bottom: 1% ;}   
div4 h3 {font-size: 2em;color: rgba(34, 139, 34, 0.877);padding-bottom: 1% ;}
aside h1 {font-family: cursive;font-size: 2.8em;color:orangered;margin-left:9em;margin-top:2em;}
main {background-color: white;width:100vw; margin-top: 1em; }
section3 {display: flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:wrap;width:100vw;}    
section3 article {display: flex;flex-direction: column;justify-content:flex-start;align-items:center;background-color: antiquewhite;border:0.1em solid antiquewhite;width:29vw;height:150vh;margin-bottom: 0.5em;margin-top:0.5em;}
section3 p {margin-top:0.6em;font-size: 1em }
section3 article img {width: 29vw;height: 50vh;align-items:center;}
article form {display: flex;flex-direction: column;justify-content:flex-start;align-items:center;}   
article form img {width: 6vw;height:20vh;margin-bottom:0.1em;margin-top:0.1em;}
article form p{color:red;margin-bottom:0.1em;}

form label input {margin:1em;padding-left:2.8em;background-color:white;color:black;width: 25vw;height: 8vh;}    
form input {background-color:aquamarine; color:black;border-radius:1em;width: 15vw;height: 8vh;}

article b {font-size:1.3em;margin-top: 0.5em;margin-bottom:0em;  color:black;}
footer {display: flex;flex-direction: row;justify-content: center;align-items: center}
footer a img{height: 2vh;}   
footer a {text-decoration: none;}
footer {margin-top: 5em;}



article1 a {text-decoration: none}
article1 b {font-size:1em;margin: 1em;color:black;} 
section {display: flex;flex-direction: row;justify-content:flex-start;}  
section article1 {display: flex;flex-direction: column;justify-content: flex-start;align-items:flex-start;margin: 1em;}  
main1 {display:flex;flex-direction: row;justify-content: space-around;align-items: flex-start; background-color:azure;width: 100vw;margin-left: 6vw;margin-top:11em;margin-bottom: 1em;}
    
main1 { background-color:azure;width: 100vw;margin-left: 1vw;margin-top:1em;margin-bottom: 1em;}
section1 {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
article1 H2 {font-size:2em;color:forestgreen;margin:0.5em;}
caption {margin: 1em;}
table { border-collapse: collapse;margin:0 auto;}
article1 table { border-collapse: collapse;}
article1 table thead {background-color:red;color:white;}
thead {background-color: red;color:white;}
article1 table thead h4 {margin:0 auto;padding:0.3em;}
article1 table td {background-color: beige;border:solid;padding:0.4em; }
div3 h3 {font-size: 1.8em;color: forestgreen;margin-bottom: 0.5em;}
thead h4 {margin:0 auto;padding:0.3em;}
td {background-color: beige;border:solid;padding-left: 0.4em;padding-right: 0.4em;}
h4 {margin:0.0.3em ;} 
div1 {display: flex;flex-direction: column;justify-content: space-between;align-items: center;margin-top: 1em;}
div1 h5 {font-size: 1.3em;background-color: aquamarine;color: white;margin: 0.7em;border-radius: 1em;padding: 0.5em;}
div1 h3 {font-size: 2em;color: forestgreen;}
div1 h5:hover{color:red}
div2 {display: flex;flex-direction:column;justify-content: flex-start;align-items: center;}
textarea{width: 88vw;}    
}
@media screen and (max-width:110mm){
    body {background-color:gainsboro;width:100vw ;display: flex;flex-direction: column;align-items: center;text-align: center;}
    header {display: flex;flex-direction: column;justify-content: flex-start; align-items: center;height: 15%;background-color:rgba(255, 127, 80, 0.377);width:100vw;}    
    header input{margin: 0em;padding: 0em;width: 30vw;height: 4vh;}
    header label input{width: 50vw;height: 4vh;margin-top: 0.2vh;}
    header a img {margin-top:-1em;padding-top:0em;height:20vh;}
    
    
    div4 {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
    div4 h1 {font-family:'Tangerine' ;font-size: 4em;font-weight:bolder;align-items: center;padding-top:0.1em;padding-left: 2em; }
    div4 h3 {font-size: 2em;color: rgba(34, 139, 34, 0.877);align-items: center;padding-left: 1.6em;}
    header form{display: flex;flex-direction: row;justify-content: center;align-items: center;}
    
    .sticky-nav{
        position: sticky; /* Hace que el elemento se "pega" a la parte superior de la ventana */
        top: 0; /* Define la posición inicial */
        background-color: #fff; /* Color de fondo para que se vea al pegarse */
        z-index: 100; /* Asegura que el elemento esté por encima de otros elementos */
      }  
    .list{
        width: 100vw;
        height:10vh;
        background-color: rgba(255, 127, 80, 0.884);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        
        justify-content: space-evenly;
        
        list-style:none;
        padding-left: 2.5em;
    }   
    .nav__link{
        color: black;
        display: block;
        align-items: center;
        text-decoration: none;
        padding-top:1.5em;
        padding-left: 0em;
        
        
    }
    
    .nav__link--inside{
        border-radius: 6px ;
        align-items: center;
        text-align: left;
        padding-top: 0 em;
        padding-bottom: 0 em;
        margin-bottom: 0 em;
    }
    
    .nav__link--inside:hover{
        background: #dee3e9;
    }
    
    
    
    .list__item{
        list-style:none ;
        width: 30vw;
        text-align: center;
        align-items: center;
        height:5vh;
        
    }
    
    .list__item--click{
        cursor:pointer ;
    }
    
    .list__button--click{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        
        align-items: center;
        
        gap:0.3em;
        padding-left: 2em;
        
        
        height:5vh;
    }
    
    .arrow .list__arrow{
        transform: rotate(90deg);
    }
    
    .list__arrow{
        margin-left: auto;
        transition: transform .3s;
        padding:0em;
    }
    
    .list__show{
        display: flex;
        flex-direction: column;
        width: 34vw;
        height: 7vh;
        background-color: #fff;
        margin-left:-2em;
        margin-top: 3vh;
        border-left: 1px solid aquamarine;
        text-decoration: none;
        list-style: none;
        transition: height .4s;
        height:0;
        overflow: hidden;
    }
    
    .list__large{
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        width: 50vw;
        background-color: #fff;
        margin-left:-4.5em;
        margin-top: 5vh;
        height: 20vh; 
        border-left: 1px solid aquamarine;
        text-decoration: none;
        list-style: none;
        transition: height .4s;
        height:0;
        overflow: hidden;
    }
        .aside{
        width: 100vw;
        height: 20vh;
        background-image:url("../img/1920x5001799_sin_titulo_2_2.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 20%;
        }
        .escolar{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/empresa-1200-x1.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .comercial{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/libreria-comercial-ofi-virtual_pvavuja_3.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .artistica{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/arriba.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .tecnica{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/unnamed.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .cotillon{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/pito.jpeg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .bazar{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/bazar.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .jugueteria{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/jugueteria.png") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .blanqueria{
        width: 100vw;
        height: 15vh;
        background-image:url("../img/blanqueria.jpg") ;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        }
        .kits{
        width: 100%;
        height: 100%;
        }
        
        .kit{
        display: flex;   
        flex-direction: column;
        height: 95%;
        width: 100%;
        }
        .juvenil{
         width: 5vw;
        }
        .alfombras{
        display: flex;   
        flex-direction: column;
        width: 100%;
        height: 100%;
         
        }
        .fotos{
        height: 100%;
        width: 100%;
        }
        .celular{
            height: 40%;
            width: 100%;  
        }
        figure {
        margin: 0;
        }
        
        .subtitulo {
          text-align: center;align-items: center;padding:0.4em;
        }
        aside h1 {font-family: cursive;font-size: 2.8em;color:orangered;margin-left:2em;margin-top:0em;padding: 0em;}
        main {background-color: white;width:100vw; margin-top: 1em; }
        section3 {display: flex;flex-direction: column;justify-content:space-evenly;align-items:center;width: 100vw;}
        section {display:flex;flex-direction: column;justify-content: center;align-items: center; background-color:azure;width: 95vw;margin-left: 2vw;margin-bottom: 1em;}
        section article1 {display: flex;flex-direction: column;justify-content: flex-start;align-items:flex-start;margin: 1em;}
        section article1 b {font-weight: bolder;font-size: 1.5em;}
        section3 article {display: flex;flex-direction: column;justify-content:flex-start;align-items:center;}
        section3 article {background-color: antiquewhite;border:0.1em solid antiquewhite;width: 100vw;height: 95vh;}
        section3 article p {font-weight: bolder;}
        section3 article b {font-weight: bolder;font-size: 1.5em;}
        section3 article img{width:100vw;margin-top:0em;}
        section3 article form img{width:20vw;height:15vh;}
        article form p{color:red;font-size:1.3em;}
        section3 article form label{width:10em;height:3em;margin-bottom: 1em;}
        section3 article form input{width:10em;height:3em;}
}