body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body.light-mode,
body.light-mode #categories img,
body.light-mode #categories-top img,
body.light-mode #categories-menu img {
    background-color: aliceblue;
}

body.dark-mode,
body.dark-mode #categories img,
body.dark-mode #categories-top img,
body.dark-mode #categories-menu img {
    background-color: #1f1f1f;
}

body.light-mode header,
body.light-mode #menu,
.owl-carousel-discount .owl-nav button.owl-prev,
.owl-carousel-discount .owl-nav button.owl-next,
body.light-mode .owl-carousel-category .owl-nav button.owl-prev,
body.light-mode .owl-carousel-category .owl-nav button.owl-next,
body.light-mode #products,
body.light-mode #products .products-row .product .product-button button,
body.light-mode #products .products-row .product .product-button button ion-icon,
body.light-mode #product,
body.light-mode #categories,
body.light-mode #categories-top,
body.light-mode #categories-menu,
body.light-mode form input,
body.light-mode form select,
body.light-mode form button,
body.light-mode #footer,
body.light-mode #form {
    background-color: #fff !important;
}

body.dark-mode header,
body.dark-mode #menu,
body.dark-mode .owl-carousel-category .owl-nav button.owl-prev,
body.dark-mode .owl-carousel-category .owl-nav button.owl-next,
body.dark-mode #products,
body.dark-mode #products .products-row .product .product-button button,
body.dark-mode #products .products-row .product .product-button button ion-icon,
body.dark-mode #product,
body.dark-mode #categories,
body.dark-mode #categories-top,
body.dark-mode #categories-menu,
body.dark-mode form input,
body.dark-mode form select,
body.dark-mode form button,
body.dark-mode #footer,
body.dark-mode #form {
    background-color: #000 !important;
}

body.dark-mode #logo h1,
body.dark-mode ion-icon,
body.dark-mode #products .products-topic,
body.dark-mode #products .products-row .product .product-name a,
body.dark-mode #products .products-row .product .product-rating p,
body.dark-mode #products .products-row .product .product-price,
body.dark-mode #products .add-comment,
body.dark-mode #products .comments,
body.dark-mode #categories-menu .categories-menu-topic,
body.dark-mode #products .cart-products-topic,
body.dark-mode #products .products-top-topic,
body.dark-mode #product .product-info .product-name,
body.dark-mode #product .product-info .product-rating,
body.dark-mode #product .product-info .product-price,
body.dark-mode #product .product-info .product-about,
body.dark-mode form label,
body.dark-mode form input,
body.dark-mode form select,
body.dark-mode form button,
body.dark-mode table,
body.dark-mode .info h3,
body.dark-mode .info p,
body.dark-mode #footer .footer-about,
body.dark-mode #footer .footer-topic,
body.dark-mode #footer a,
body.dark-mode .form-text,
body.dark-mode .pagination li a,
body.dark-mode .pagination li.active,
body.dark-mode .pagination li.disabled {
    color: #fff;
}

body.light-mode #logo h1,
body.light-mode ion-icon,
body.light-mode #products .products-topic,
body.light-mode #products .products-row .product .product-name a,
body.light-mode #products .products-row .product .product-rating p,
body.light-mode #products .products-row .product .product-price,
body.light-mode #products .add-comment,
body.light-mode #products .comments,
body.light-mode #categories-menu .categories-menu-topic,
body.light-mode #products .cart-products-topic,
body.light-mode #products .products-top-topic,
body.light-mode #product .product-info .product-name,
body.light-mode #product .product-info .product-rating,
body.light-mode #product .product-info .product-price,
body.light-mode #product .product-info .product-about,
body.light-mode form label,
body.light-mode form input,
body.light-mode form select,
body.light-mode form button,
body.light-mode table,
body.light-mode .info h3,
body.light-mode .info p,
body.light-mode #footer .footer-about,
body.light-mode #footer .footer-topic,
body.light-mode #footer a,
body.light-mode .form-text,
body.light-mode .pagination li a,
body.light-mode .pagination li.active,
body.light-mode .pagination li.disabled {
    color: #000;
}

body.light-mode .active,
body.dark-mode .active,
.head-icon ion-icon:hover,
.menu-item ion-icon:hover,
#moon-sunny:hover,
#footer .footer-logo,
#categories-menu .categories-row .category a,
body.light-mode #products .products-topic:hover,
body.dark-mode #products .products-topic:hover,
body.light-mode #products .products-row .product .product-button button:hover,
body.dark-mode #products .products-row .product .product-button button:hover,
.owl-carousel-discount .owl-nav button.owl-prev,
.owl-carousel-discount .owl-nav button.owl-next,
.owl-carousel-category .owl-nav button.owl-prev,
.owl-carousel-category .owl-nav button.owl-next,
#footer a:hover {
    color: orange !important;
}

body.light-mode form button:hover {
    background-color: orange !important;
    color: #fff;
}

body.dark-mode form button:hover {
    background-color: orange !important;
    color: #000;
}

#discounts .slide-content {
    color: red;
}

body.light-mode a.active,
body.dark-mode a.active {
    border-bottom: 3px solid orange;
}

body.light-mode .owl-carousel-category .owl-nav button.owl-prev,
body.light-mode .owl-carousel-category .owl-nav button.owl-next,
.owl-carousel-discount .owl-nav button.owl-prev,
.owl-carousel-discount .owl-nav button.owl-next,
body.light-mode #products .products-row .product:hover,
body.light-mode #categories-menu .categories-row .category:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

body.dark-mode .owl-carousel-category .owl-nav button.owl-prev,
body.dark-mode .owl-carousel-category .owl-nav button.owl-next,
body.dark-mode #products .products-row .product:hover,
body.dark-mode #categories-menu .categories-row .category:hover {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

body.light-mode #products .products-row .product .product-button button {
    border: 2px solid #000;
}

body.dark-mode #products .products-row .product .product-button button {
    border: 2px solid #fff;
}

body.light-mode #products .products-row .product .product-button button:hover,
body.dark-mode #products .products-row .product .product-button button:hover,
body.light-mode form input,
body.dark-mode form input,
body.light-mode form select,
body.dark-mode form select,
body.light-mode form button,
body.dark-mode form button {
    border-color: orange;
}

header {
    width: 100%;
    padding: 0 5%;
    top: 0;
    position: fixed;
    z-index: 9;
    text-align: center;
}

#logo h1 {
    font-size: 27px;
}

#logo {
    display: block;
    position: absolute;
}

#head-icons {
    position: relative;
    height: 40px;
    padding-top: 18px;
    padding-left: 70%;
    font-size: 25px;
}

#head-icons .head-icon {
    margin-right: 20px;
}

a {
    text-decoration: none;
}

#discounts {
    margin-top: 80px;
}

#discounts .slide-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#discounts .slide-content {
    position: absolute;
    text-decoration: none;
    font-family: cursive;
}

#categories {
    margin-top: 30px;
}

#categories-top {
    margin-top: 80px;
}

#categories .categories-slide-item,
#categories-top .categories-slide-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.owl-carousel-discount,
.owl-carousel-category {
    position: relative;
}

.owl-carousel-discount .owl-nav button.owl-prev,
.owl-carousel-discount .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    font-size: 25px !important;
    border: none;
    border-radius: 100%;
    padding: 20px;
    cursor: pointer;
    z-index: 1000;
}

.owl-carousel-category .owl-nav button.owl-prev,
.owl-carousel-category .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    font-size: 25px !important;
    border: none;
    border-radius: 100%;
    padding: 20px;
    cursor: pointer;
    z-index: 1000;
}

.owl-carousel-category .owl-nav button.owl-prev {
    left: 20px;
}

.owl-carousel-category .owl-nav button.owl-next {
    right: 20px;
}

.product-flex {
    display: flex;
}

.product-flex>div {
    flex: 1;
}

.product-flex>div:first-child {
    flex: 8;
}

.product-flex>div:last-child {
    flex: 2;
}

.error {
    width: 250px;
    color: #c0392b;
    font-size: 14px;
    margin-top: -1px;
    margin-bottom: -1px;
}

.alert_error {
    width: 268px;
    color: #c0392b;
    font-size: 14px;
    margin-bottom: 10px;
}

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

.form-text {
    width: 280px;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

.form-text a {
    color: orange;
}

form .center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orders .center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

table {
    border-collapse: collapse;
    width: 80%;
}

table th, table td {
    border: 2px solid orange;
    padding: 10px 10px;
}

.pagination {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    list-style-type: none;
    margin-left: -30px;
}

body.dark-mode .pagination li {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    border: #1f1f1f solid 3px;
    background-color: #1f1f1f;
    border-radius: 6px;
    margin: 0 3px;
    height: 35px;
}

body.light-mode .pagination li {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    border: aliceblue solid 3px;
    background-color: aliceblue;
    border-radius: 6px;
    margin: 0 3px;
    height: 35px;
}

body.dark-mode .pagination li.active,
body.light-mode .pagination li.active {
    border: orange solid 3px;
}

.comments {
    padding: 30px;
}

.comment {
    margin: 1px 50px;
    border-top: 1px solid orange;
}

.comment h2 {
    font-size: 20px;
    margin-bottom: -8px;
}

.comment .text {
    font-size: 18px;
    margin-top: -8px;
}

.comment .star-date {
    font-size: 15px;
}

.comment .star-date span {
    font-size: 12px;
}

.comment .modify {
    display: flex;
    margin-top: -20px;
    margin-bottom: 10px;
}

.comment .modify .right {
    margin-right: 10px;
}

body.dark-mode .comment .star-date span {
    color: #999;
}

body.light-mode .comment .star-date span {
    color: #aaa;
}

@media screen and (min-width: 1320px) {
    #menu {
        width: 50%;
        top: 0;
        position: fixed;
        z-index: 10;
        font-size: 22px;
        text-align: center;
        padding-top: 20px;
        left: 25%;
    }

    #menu a {
        margin-left: 3%;
        margin-right: 3%;
    }

    #discounts img {
        width: 85%;
        height: 400px;
        border-radius: 25px;
    }

    #categories img,
    #categories-top img,
    #categories-menu img {
        width: 120px;
        border-radius: 100%;
        border: 5px solid orange;
        padding: 20px;
        margin: 20px;
    }

    .owl-nav .owl-prev {
        left: 180px;
    }

    .owl-nav .owl-next {
        right: 180px;
    }

    #discounts .slide-content {
        font-size: 40px;
        left: 7.5%;
        right: 7.5%;
        width: 85%;
        height: 100%;
    }

    #discounts .slide-about {
        margin-left: 12%;
        margin-top: 8%;
        width: 30%;
    }

    #categories {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        border-radius: 25px;
    }

    #categories-top {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        border-radius: 25px;
    }

    #products {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        margin-top: 30px;
        border-radius: 25px;
        padding-top: 30px;
    }

    #products.top {
        margin-top: 80px;
        padding-bottom: 50px;
    }

    #products .products-topic {
        font-size: 25px;
        font-weight: 600;
        margin-left: 30px;
        margin-bottom: -20px;
    }

    #products .products-top-topic {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 35px;
        margin-top: -2px;
        text-align: center;
    }

    #products .cart-products-topic {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 35px;
        margin-top: -2px;
        text-align: center;
    }

    #products .products-row {
        margin: 20px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
    }

    #products .products-row .product {
        width: 23%;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    #products .products-row .product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #products .products-row .product .product-name {
        font-size: 22px;
        margin-top: -10px;
        margin-left: 12px;
        margin-right: 12px;
    }

    #products .products-row .product .product-rating {
        font-size: 16px;
        margin-top: -10px;
        margin-left: 12px;
        margin-right: 12px;
        display: flex;
    }

    #products .products-row .product .product-rating ion-icon {
        margin-top: -5px;
    }

    #products .products-row .product .product-rating p {
        margin-top: -5px;
        margin-left: 5px;
    }

    #products .products-row .product .product-price {
        font-size: 18px;
        font-weight: 550;
        margin-top: -25px;
        margin-left: 12px;
        margin-right: 12px;
    }

    #products .products-row .product .product-button {
        margin-top: 18px;
        margin-left: 12px;
        margin-right: 12px;
        width: 100%;
        display: flex;
    }

    #products .products-row .product .product-button button {
        font-size: 24px;
        border-radius: 7px;
        padding: 8px;
        cursor: pointer;
        width: 45px;
        height: 45px;
    }

    #products .products-row .product .product-button .right {
        margin-right: 5px;
    }

    #products .product .check {
        display: block;
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #products .product .check input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    #products .product .check .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 40px;
        width: 40px;
        background-color: #eee;
        border: 3px solid orange;
        border-radius: 7px;
    }

    #products .product .check:hover input~.checkmark {
        background-color: #ccc;
    }

    #products .product .check input:checked~.checkmark {
        background-color: #2196F3;
    }

    #products .product .check .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    #products .product .check input:checked~.checkmark:after {
        display: block;
    }

    #products .product .check .checkmark:after {
        left: 15px;
        top: 10px;
        width: 8px;
        height: 14px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #product {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        margin-top: 80px;
        border-radius: 25px;
        padding-top: 30px;
        padding-bottom: 50px;
        display: flex;
    }

    #product .product-image {
        width: 40%;
        margin-left: 150px;
    }

    #product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #product .product-info {
        margin-left: 100px;
    }

    #product .product-info .product-name {
        font-size: 50px;
    }

    #product .product-info .product-rating {
        display: flex;
    }

    #product .product-info .product-rating ion-icon {
        margin-top: -20px;
    }

    #product .product-info .product-rating p {
        margin-top: -20px;
        margin-left: 10px;
    }

    #product .product-info .product-price {
        font-size: 35px;
        margin-top: -20px;
    }

    #product .product-info .product-about {
        width: 350px;
    }

    #product .product-info .product-button {
        display: flex;
    }

    #product .product-info .product-button button {
        font-size: 24px;
        border-radius: 7px;
        padding: 8px;
        cursor: pointer;
        width: 100px;
        height: 45px;
    }

    #product .product-info .product-button .right {
        margin-right: 10px;
    }

    .pagination li a {
        font-size: 22px;
        padding: 15px;
    }

    .pagination li.active,
    .pagination li.disabled {
        font-size: 22px;
        padding: 0 15px;
    }

    #categories-menu {
        width: 85%;
        margin-left: 7.5%;
        margin-right: 7.5%;
        border-radius: 25px;
        margin-top: 30px;
        padding-top: 10px;
    }

    #categories-menu .categories-menu-topic {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: -10px;
        text-align: center;
    }

    #categories-menu .categories-row {
        margin: 20px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #categories-menu .categories-row .category {
        width: 48%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        margin: 10px;
        margin-top: 20px;
    }

    #categories-menu .categories-row .category:nth-child(2n+1) {
        clear: left;
    }

    #form {
        width: 30%;
        margin-left: 35%;
        margin-right: 35%;
        margin-top: 90px;
        margin-bottom: 20px;
        border-radius: 25px;
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    form label {
        font-size: 22px;
    }

    form input {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    form select {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        border-width: 2px;
        width: 100%;
    }

    form button {
        font-size: 20px;
        border-radius: 5px;
        padding: 5px 50px;
        margin-top: 15px;
    }

    table form button {
        font-size: 15px;
        border-radius: 5px;
        padding: 5px 50px;
        margin-top: 0px;
    }

    .panel form button {
        width: 400px;
        padding: 5px 30px;
    }

    .address {
        display: flex;
        margin-bottom: 30px;
    }
    
    .address .right {
        margin-left: 20px;
    }
    
    .payment {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin-bottom: 30px;
    }
    
    .payment div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 3px solid orange;
        border-radius: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .info {
        border: 3px solid orange;
        border-radius: 15px;
        width: 35%;
        margin-bottom: 30px;
    }

    .info div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info .top {
        margin-bottom: -15px;
    }
    
    .info h3 {
        margin-right: 5px;
    }

    .info p {
        margin-left: 5px;
    }

    #footer {
        width: 100%;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        margin-bottom: -20px;
        display: flex;
        padding-bottom: 10px;
        margin-top: 30px;
    }

    #footer .left,
    #footer .center,
    #footer .right {
        margin-top: 40px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }

    #footer .left {
        width: 33%;
        padding-left: 150px;
    }

    #footer .right {
        width: 33%;
        padding-right: 150px;
    }

    #footer .center {
        width: 33%;
    }

    #footer .footer-about {
        width: 300px;
    }
}

@media screen and (max-width: 1320px) and (min-width: 868px) {
    #menu {
        width: 50%;
        top: 0;
        position: fixed;
        z-index: 10;
        font-size: 22px;
        text-align: center;
        padding-top: 20px;
        left: 25%;
    }

    #menu a {
        margin-left: 3%;
        margin-right: 3%;
    }

    #discounts img {
        width: 92%;
        height: 350px;
        border-radius: 25px;
    }

    #categories img,
    #categories-top img,
    #categories-menu img {
        width: 90px;
        border-radius: 100%;
        border: 4px solid orange;
        padding: 20px;
        margin: 15px;
    }

    .owl-nav .owl-prev {
        left: 90px;
    }

    .owl-nav .owl-next {
        right: 90px;
    }

    #discounts .slide-content {
        font-size: 35px;
        left: 4%;
        right: 4%;
        width: 92%;
        height: 100%;
    }

    #discounts .slide-about {
        margin-left: 12%;
        margin-top: 10%;
        width: 30%;
    }

    #categories {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
    }

    #categories-top {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
    }

    #products {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        margin-top: 30px;
        border-radius: 25px;
        padding-top: 30px;
    }

    #products.top {
        margin-top: 80px;
        padding-bottom: 50px;
    }

    #products .products-topic {
        font-size: 22px;
        font-weight: 600;
        margin-left: 30px;
        margin-bottom: -20px;
    }

    #products .products-top-topic {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 25px;
        margin-top: -2px;
        text-align: center;
    }

    #products .cart-products-topic {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 25px;
        margin-top: -2px;
        text-align: center;
    }

    #products .products-row {
        margin: 20px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
    }

    #products .products-row .product {
        width: 30%;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    #products .products-row .product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #products .products-row .product .product-name {
        font-size: 20px;
        margin-top: -10px;
        margin-left: 12px;
        margin-right: 12px;
    }

    #products .products-row .product .product-rating {
        font-size: 14px;
        margin-top: -10px;
        margin-left: 12px;
        margin-right: 12px;
        display: flex;
    }

    #products .products-row .product .product-rating ion-icon {
        margin-top: -5px;
    }

    #products .products-row .product .product-rating p {
        margin-top: -5px;
        margin-left: 5px;
    }

    #products .products-row .product .product-price {
        font-size: 16px;
        font-weight: 550;
        margin-top: -25px;
        margin-left: 12px;
        margin-right: 12px;
    }

    #products .products-row .product .product-button {
        margin-top: 18px;
        margin-left: 12px;
        margin-right: 12px;
        width: 100%;
        display: flex;
    }

    #products .products-row .product .product-button button {
        font-size: 20px;
        border-radius: 7px;
        padding: 8px;
        cursor: pointer;
        width: 45px;
        height: 45px;
    }

    #products .products-row .product .product-button .right {
        margin-right: 5px;
    }

    #products .product .check {
        display: block;
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #products .product .check input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    #products .product .check .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 37px;
        width: 37px;
        background-color: #eee;
        border: 3px solid orange;
        border-radius: 7px;
    }

    #products .product .check:hover input~.checkmark {
        background-color: #ccc;
    }

    #products .product .check input:checked~.checkmark {
        background-color: #2196F3;
    }

    #products .product .check .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    #products .product .check input:checked~.checkmark:after {
        display: block;
    }

    #products .product .check .checkmark:after {
        left: 15px;
        top: 10px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #product {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        margin-top: 80px;
        border-radius: 25px;
        padding-top: 30px;
        padding-bottom: 50px;
        display: flex;
    }

    #product .product-image {
        width: 45%;
        margin-left: 70px;
    }

    #product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #product .product-info {
        margin-left: 50px;
    }

    #product .product-info .product-name {
        font-size: 40px;
    }

    #product .product-info .product-rating {
        display: flex;
    }

    #product .product-info .product-rating ion-icon {
        margin-top: -20px;
    }

    #product .product-info .product-rating p {
        margin-top: -20px;
        margin-left: 10px;
    }

    #product .product-info .product-price {
        font-size: 25px;
        margin-top: -20px;
    }

    #product .product-info .product-about {
        width: 350px;
    }

    #product .product-info .product-button {
        display: flex;
    }

    #product .product-info .product-button button {
        font-size: 24px;
        border-radius: 7px;
        padding: 8px;
        cursor: pointer;
        width: 100px;
        height: 45px;
    }

    #product .product-info .product-button .right {
        margin-right: 10px;
    }

    .pagination li a {
        font-size: 20px;
        padding: 13px;
    }

    .pagination li.active,
    .pagination li.disabled {
        font-size: 20px;
        padding: 0 13px;
    }

    #categories-menu {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
        margin-top: 30px;
        padding-top: 10px;
    }

    #categories-menu .categories-menu-topic {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: -10px;
        text-align: center;
    }

    #categories-menu .categories-row {
        margin: 20px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #categories-menu .categories-row .category {
        width: 45%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        margin: 8px;
        margin-top: 20px;
    }

    #categories-menu .categories-row .category:nth-child(2n+1) {
        clear: left;
    }

    #categories-menu .categories-row .category a {
        font-size: 15px;
    }

    #form {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 90px;
        margin-bottom: 20px;
        border-radius: 25px;
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    form label {
        font-size: 22px;
    }

    form input {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    form select {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        border-width: 2px;
        width: 100%;
    }

    form button {
        font-size: 20px;
        border-radius: 5px;
        padding: 5px 50px;
        margin-top: 15px;
    }

    table form button {
        font-size: 15px;
        border-radius: 5px;
        padding: 5px 50px;
        margin-top: 0px;
    }

    .panel form button {
        width: 350px;
        padding: 5px 30px;
    }

    .address {
        display: flex;
        margin-bottom: 30px;
    }
    
    .address .right {
        margin-left: 20px;
    }
    
    .payment {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin-bottom: 30px;
    }
    
    .payment div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 3px solid orange;
        border-radius: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .info {
        border: 3px solid orange;
        border-radius: 15px;
        width: 50%;
        margin-bottom: 30px;
    }

    .info div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info .top {
        margin-bottom: -15px;
    }
    
    .info h3 {
        margin-right: 5px;
    }

    .info p {
        margin-left: 5px;
    }

    #footer {
        width: 100%;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        margin-bottom: -20px;
        display: flex;
        padding-bottom: 10px;
        margin-top: 30px;
    }

    #footer .left,
    #footer .center,
    #footer .right {
        margin-top: 40px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }

    #footer .left {
        width: 33%;
        padding-left: 100px;
    }

    #footer .right {
        width: 33%;
        padding-right: 100px;
    }

    #footer .center {
        width: 33%;
    }

    #footer .footer-about {
        width: 300px;
    }
}

@media screen and (max-width: 867px) {
    #head-icons {
        padding-left: 40%;
    }

    #head-icons .head-icon {
        margin-right: 10px;
    }

    #menu {
        width: 100%;
        bottom: 0;
        position: fixed;
        z-index: 10;
        font-size: 25px;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #menu a {
        margin-left: 5%;
        margin-right: 5%;
    }

    #categories img,
    #categories-top img,
    #categories-menu img {
        width: 50px;
        border-radius: 100%;
        border: 3px solid orange;
        padding: 20px;
        margin: 15px 5px;
    }

    #discounts img {
        width: 92%;
        height: 220px;
        border-radius: 25px;
    }

    .owl-nav .owl-prev {
        left: 40px;
    }

    .owl-nav .owl-next {
        right: 40px;
    }

    #discounts .slide-content {
        font-size: 20px;
        left: 4%;
        right: 4%;
        width: 92%;
        height: 100%;
    }

    #discounts .slide-about {
        margin-left: 10%;
        margin-top: 10%;
        width: 30%;
    }

    #categories {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
    }

    #categories-top {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
    }

    #products {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        margin-top: 30px;
        border-radius: 25px;
        padding-top: 30px;
    }

    #products.top {
        margin-top: 80px;
        padding-bottom: 50px;
    }

    #products .products-topic {
        font-size: 18px;
        font-weight: 600;
        margin-left: 20px;
        margin-bottom: -20px;
    }

    #products .products-top-topic {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 35px;
        margin-top: -2px;
        text-align: center;
    }

    #products .cart-products-topic {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 35px;
        margin-top: -2px;
        text-align: center;
    }

    #products .products-row {
        margin: 10px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
    }

    #products .products-row .product {
        width: 44%;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    #products .products-row .product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #products .products-row .product .product-name {
        font-size: 16px;
        margin-top: -10px;
        margin-left: 5px;
        margin-right: 0px;
    }

    #products .products-row .product .product-rating {
        font-size: 12px;
        margin-top: -10px;
        margin-left: 5px;
        margin-right: 0px;
        display: flex;
    }

    #products .products-row .product .product-rating ion-icon {
        margin-top: -5px;
    }

    #products .products-row .product .product-rating p {
        margin-top: -5px;
        margin-left: 5px;
    }

    #products .products-row .product .product-price {
        font-size: 14px;
        font-weight: 550;
        margin-top: -25px;
        margin-left: 5px;
        margin-right: 0px;
    }

    #products .products-row .product .product-button {
        margin-top: 18px;
        margin-left: 12px;
        margin-right: 0px;
        width: 100%;
        display: flex;
    }

    #products .products-row .product .product-button button {
        font-size: 12px;
        border-radius: 7px;
        padding: 6px;
        cursor: pointer;
        width: 30px;
        height: 30px;
    }

    #products .products-row .product .product-button .right {
        margin-right: 5px;
    }

    #products .product .check {
        display: block;
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #products .product .check input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    #products .product .check .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 30px;
        width: 30px;
        background-color: #eee;
        border: 3px solid orange;
        border-radius: 7px;
    }

    #products .product .check:hover input~.checkmark {
        background-color: #ccc;
    }

    #products .product .check input:checked~.checkmark {
        background-color: #2196F3;
    }

    #products .product .check .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    #products .product .check input:checked~.checkmark:after {
        display: block;
    }

    #products .product .check .checkmark:after {
        left: 10px;
        top: 5px;
        width: 6px;
        height: 14px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #product {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        margin-top: 80px;
        border-radius: 25px;
        padding-top: 30px;
        padding-bottom: 50px;
    }

    #product .product-image {
        width: 90%;
        margin-left: 25px;
    }

    #product .product-image img {
        width: 100%;
        border-radius: 20px;
    }

    #product .product-info {
        margin-left: 50px;
    }

    #product .product-info .product-name {
        font-size: 35px;
    }

    #product .product-info .product-rating {
        display: flex;
    }

    #product .product-info .product-rating ion-icon {
        margin-top: -20px;
    }

    #product .product-info .product-rating p {
        margin-top: -20px;
        margin-left: 10px;
    }

    #product .product-info .product-price {
        font-size: 25px;
        margin-top: -20px;
    }

    #product .product-info .product-about {
        width: 90%;
    }

    #product .product-info .product-button {
        display: flex;
    }

    #product .product-info .product-button button {
        font-size: 24px;
        border-radius: 7px;
        padding: 8px;
        cursor: pointer;
        width: 100px;
        height: 45px;
    }

    #product .product-info .product-button .right {
        margin-right: 10px;
    }

    .pagination li a {
        font-size: 18px;
        padding: 10px;
    }

    .pagination li.active,
    .pagination li.disabled {
        font-size: 18px;
        padding: 0 10px;
    }

    #categories-menu {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        border-radius: 25px;
        margin-top: 30px;
        padding-top: 10px;
    }

    #categories-menu .categories-menu-topic {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: -10px;
        text-align: center;
    }

    #categories-menu .categories-row {
        margin: 20px;
        padding-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #categories-menu .categories-row .category {
        width: 100%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        margin: 10px;
        margin-top: 20px;
        clear: left;
    }

    #categories-menu .categories-row .category a {
        font-size: 14px;
    }

    #form {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
        margin-top: 90px;
        margin-bottom: 20px;
        border-radius: 25px;
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    form label {
        font-size: 22px;
    }

    form input {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    form select {
        font-size: 21px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        border-width: 2px;
        width: 100%;
    }

    form button {
        font-size: 20px;
        border-radius: 5px;
        padding: 5px 30px;
        margin-top: 15px;
    }

    table form button {
        font-size: 14px;
        border-radius: 5px;
        padding: 5px 5px;
        margin-top: 0px;
    }

    table th, table td {
        font-size: 12px;
    }

    .panel form button {
        width: 300px;
        padding: 5px 30px;
    }

    .address {
        margin-bottom: 30px;
    }
    
    .payment {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin-bottom: 30px;
    }
    
    .payment div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 3px solid orange;
        border-radius: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .info {
        border: 3px solid orange;
        border-radius: 15px;
        width: 80%;
        margin-bottom: 30px;
    }

    .info div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info .top {
        margin-bottom: -15px;
    }
    
    .info h3 {
        margin-right: 5px;
    }

    .info p {
        margin-left: 5px;
    }

    #footer {
        width: 100%;
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        margin-bottom: 20px;
        display: flex;
        padding-bottom: 30px;
        margin-top: 30px;
    }

    #footer .left,
    #footer .center,
    #footer .right {
        margin-top: 40px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }

    #footer .left {
        width: 33%;
        padding-left: 50px;
    }

    #footer .right {
        width: 33%;
        padding-right: 50px;
    }

    #footer .center {
        width: 33%;
    }

    #footer .footer-about {
        width: 150px;
        font-size: 14px;
    }

    #footer .footer-logo {
        font-size: 22px;
    }

    #footer .footer-topic {
        font-size: 22px;
    }

    #footer a {
        font-size: 14px;
    }
}