body { background-color: #0d2033; align-items: center; justify-content: center; } h1, h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 200%; text-align: center; color: #fff; } h3 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 200%; text-align: justify; color: #fff; } p { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; } hr { color: white; background-color: black; width: 100%; } * { box-sizing: border-box; } .MenuHorizontal { overflow: hidden; border-radius: 5px 50px; border-color: blueviolet; } .MenuHorizontal a { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; background-color: #fff; color: black; text-decoration: none; float: left; width: 16.666666666666666666666666%; text-align: center; padding: 20px; font-size: 125%; } .MenuHorizontal a:hover { background-color: #53408a; color: #fff; } .MenuVertical { float: left; width: 16.666666666666666666666666%; overflow: hidden; border-radius: 5px 50px; border-color: blueviolet; } .MenuVertical a { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; background-color: #fff; color: black; text-decoration: none; padding: 70px; display: block; text-align: center; font-size: 125%; } .MenuVertical a:hover { background-color: #53408a; color: #fff; } img { float: right; width: 5%; } .titulo1 { padding: 3%; } header { background-color: #0a141d; } table { text-align: justify; } label, tr { color: #fff; font-family: Georgia, 'Times New Roman', Times, serif; text-align: justify; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } .pie-pagina { width: 100%; background-color: #0a141d; } .pie-pagina .grupo-1 { width: 100%; max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 50px; padding: 45px 0px; } .pie-pagina .grupo-1 .box figure { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .pie-pagina .grupo-1 .box figure img { width: 250px; } .pie-pagina .grupo-1 .box h2 { color: #fff; margin-bottom: 25px; font-size: 20px; text-align: justify; } .pie-pagina .grupo-1 .box p { color: #efefef; margin-bottom: 10px; text-align: justify; } .pie-pagina .grupo-1 .red-social a { display: inline-block; text-decoration: none; width: 45px; height: 45px; line-height: 45px; color: #fff; margin-right: 10px; background-color: #0d2033; text-align: center; } .pie-pagina .grupo-1 .red-social a:hover { color: aqua; } .pie-pagina .grupo-2 { background-color: #0a1a2a; padding: 15px 10px; text-align: center; color: #fff; } .pie-pagina .grupo-2 small { font-size: 15px; } @media screen and (max-width:800px) { .pie-pagina .grupo-1 { width: 90%; grid-template-columns: repeat(1, 1fr); grid-gap: 30px; padding: 35px 0px; } } .buscar { position: absolute; padding: 5px; } .buscar input { width: 0px; height: 40px; padding: 0 20px; font-size: 18px; color: #000; outline: none; border: 1px solid silver; border-radius: 30px; transition: all 0.6s ease; } .btn { position: absolute; top: 0; right: 0; background: #440080; width: 55px; height: 55px; text-align: center; line-height: 55px; color: white; font-size: 20px; border-radius: 50%; cursor: pointer; } .buscar:hover input { width: 240px; } .buscar input:focus { width: 240px; } .botón { background: #d45320; padding: 10px; font-size: 17px; color: white; text-decoration: none; text-align: center; border-radius: 5px; } .wrap { max-width: 1100px; width: 90%; margin: auto; } .wrap>h1 { color: #494B4D; font-weight: 400; display: flex; flex-direction: column; text-align: center; margin: 15px 0px; } .wrap>h1:after { content: ''; width: 100%; height: 1px; background: #C7C7C7; margin: 20px 0; } .store-wrapper { display: flex; flex-wrap: wrap; } .category_list { display: flex; flex-direction: column; width: 18%; } .category_list .category_item { display: block; width: 90%; padding: 15px 0; margin-bottom: 20px; background: #E84C3D; text-align: center; text-decoration: none; color: #fff; } .category_list .ct_item-active { background: #2D3E50; } .products-list { width: 82%; display: flex; flex-wrap: wrap; } .products-list .product-item { width: 22%; margin-left: 3%; margin-bottom: 25px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; align-items: center; align-self: flex-start; transition: all .4s; } .products-list .product-item img { width: 100%; } .products-list .product-item a { display: block; width: 100%; padding: 8px 0; background: #2D3E50; color: #fff; text-align: center; text-decoration: none; } @media screen and (max-width: 1100px) { .products-list .product-item { width: 30.3%; } } @media screen and (max-width: 900px) { .category_list, .products-list { width: 100%; } .category_list { flex-direction: row; justify-content: space-between; } .category_list .category_item { align-self: flex-start; width: 15%; font-size: 14px; } .products-list .product-item { margin-left: 4.5%; } .products-list .product-item:nth-child(3n+1) { margin-left: 0px; } } @media screen and (max-width: 700px) { .category_list { flex-direction: column; } .category_list .category_item { width: 100%; margin-bottom: 10px; } } @media screen and (max-width: 600px) { .products-list .product-item { width: 47.5%; } .products-list .product-item:nth-child(3n+1) { margin-left: 4.5%; } .products-list .product-item:nth-child(2n+1) { margin-left: 0px; } } @media screen and (max-width: 350px) { .products-list .product_item { width: 100%; margin-left: 0px; } }