#catalog {
    .item.product.sku {
        box-sizing: content-box;
        width: 31%;
        height: 460px;
        margin: 8px;
    }

    .product {
        border: none;

        &:hover {
            .nowp {
                overflow: visible;
            }

            .tabloid {
                position: absolute;
                height: auto;
                width: 100%;
                z-index: 3;
            }
        }

        &:before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            top: -1px;
            height: 1px;
            background: transparent;
        }

        .tabloid {
            padding: 0;
            height: 460px;
            border: none;

            .productTable {
                display: flex;
                flex-direction: column;

                .productColImage {
                    overflow: hidden;

                    .picture {
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                        position: relative;
                        display: block;
                        text-align: center;
                        height: 370px;
                        /*line-height: 370px;*/
                        padding: 2px 4px;

                        img {
                            -webkit-transition: all 0.5s ease-in-out;
                            -o-transition: all 0.5s ease-in-out;
                            transition: all 0.5s ease-in-out;
                            transform: translate3d(0, 0, 0);
                            max-height: 100%;
                            max-width: 100%;
                        }
                    }
                }

                .productColText {
                    padding: 12px;

                    .name {
                        height: 36px;
                        line-height: 36px;
                    }
                }
            }

            .optional {
                padding: 12px;
            }

        }
    }
}

@media all and (max-width: 700px) {
    #catalog {
        .item.product.sku {
            width: 46%;
            height: 330px;
        }

        .product {
            &:hover {
                .nowp {
                    overflow: visible;
                }

                .tabloid {
                    position: absolute;
                    height: 330px;
                    width: 100%;
                    z-index: 3;

                    .productTable {
                        .productColText {
                            background-color: white;
                        }
                    }
                }
            }

            .tabloid {
                height: 330px;

                .productTable {
                    display: flex;
                    flex-direction: column;


                    .productColImage {
                        overflow: visible;

                        .picture {
                            height: 172px;
                        }
                    }

                    .productColText {
                        padding: 12px;
                        justify-content: flex-start;
                        background-color: white;

                        .price {
                            .discount {
                                font-size: 14px;
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media all and (max-width: 600px) {
    #catalog {
        .item.product.sku {
            width: 45%;
            height: 330px;
        }

        .product {
            &:hover {
                .nowp {
                    overflow: visible;
                }

                .tabloid {
                    position: absolute;
                    height: 330px;
                    width: 100%;
                    z-index: 3;

                    .productTable {
                        .productColText {
                            background-color: white;
                        }
                    }
                }
            }

            .tabloid {
                height: 330px;

                .productTable {
                    display: flex;
                    flex-direction: column;


                    .productColImage {
                        overflow: visible;

                        .picture {
                            height: 172px;
                        }
                    }

                    .productColText {
                        padding: 12px;
                        justify-content: flex-start;
                        background-color: white;
                    }
                }
            }
        }
    }
}

@media all and (max-width: 480px) {
    #catalog {
        .item.product.sku {
            width: 44%;
            height: 330px;
        }

        .product {
            &:hover {
                .nowp {
                    overflow: visible;
                }

                .tabloid {
                    position: absolute;
                    height: 330px;
                    width: 100%;
                    z-index: 3;

                    .productTable {
                        .productColText {
                            background-color: white;
                        }
                    }
                }
            }

            .tabloid {
                height: 330px;

                .productTable {
                    display: flex;
                    flex-direction: column;


                    .productColImage {
                        overflow: visible;

                        .picture {
                            height: 172px;
                        }
                    }

                    .productColText {
                        padding: 12px;
                        justify-content: flex-start;
                        background-color: white;
                    }
                }
            }
        }
    }
}