.section-title {
    border-bottom: 2px solid #0d4062;
    text-transform: uppercase;
    color: #0d4062;

    @media screen and (max-width: 479px) {
        margin: 0 15px;
        margin-top: 80px;
        margin-bottom: 20px;
    }

    @media screen and (min-width:480px) {
        margin: 0 60px;
        margin-top: 80px;
        margin-bottom: 20px;
        width: 45%;
    }

}

.labels {
    color: #0d4062;

}

.form-search {
    margin: 0 60px;

    .control {
        background-color: #cfd9e0;
        color: #0d4062;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        height: 30px;
    }

    .btn-primary {
        background-color: #0d4062;
        color: white;
        text-transform: uppercase;
        text-align: center;
    }

    @media screen and (max-width:479px) {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        margin: 2vh;

        #rif {
            order: 1
        }

        #tipo-label {
            order: 3
        }

        #marca-label {
            order: 5
        }

        #q {
            order: 2
        }

        #tipo {
            order: 4
        }

        #brand {
            order: 6
        }

        #cerca {
            order: 7;
            margin-top: 3vh;
        }

        #null-label {
            order: 8;
        }
    }
}


.catalog {
    background-color: #0d4062;
    padding-top: 3vh;
    padding-bottom: 1vh;
    padding-left: 5vw;
    padding-right: 5vw;

    .pagination>li {
        width: 23px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        background-color: #576a88;

        a {
            color: white;
        }
    }

    .pagination>.active {
        background-color: #405a7a;
    }

    .pagination>.false {
        background-color: #576a88;
    }

    .pager {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        margin-top: 1vh;

    }

    .records-info {
        text-align: right;
        color: white;
    }

    .product-list {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 30px;

        .product-preview {
            @media screen and (max-width: 480px) {
                width: 100%;
            }

            @media screen and (min-width:481px) and (max-width:1024px) {
                width: 50%
            }

            @media screen and (min-width:1025px) {
                width: 25%;
            }

            padding-bottom: 15px;

            div.img-wrapper {
                position: relative;
                padding-top: (2/3)*100%;
                overflow: hidden;
                width: 100%;

                >img {
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    transform: translate(-50%, -50%);
                }
            }

            >div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                margin: 10px;

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

                background-color: #576a88;
                height: 100%;

            }

            >div .preview-name {
                color: white;
                font-size: 16px;

                @media only screen and (min-width: 700px) {
                    padding: 2px;
                }

                @media only screen and (max-width:699px) {
                    padding: 1px;
                }

            }

            >div .preview-brand {
                background-color: #0d4062;
                padding: 2px;
                color: #576a88;
                text-align: center;
                text-transform: uppercase;
                width: 100%;

                @media only screen and (max-width: 699px) {
                    font-size: calc(0.4rem + 2%);
                }
            }

            &:hover {
                >div {
                    background-color: darken(#576a88,15%);
                }
                >div .preview-brand{
                    color:#fff;
                }
            }
        }
    }
}