/*--------------------------------  HEADER PRODUCT CSS -------------------------------*/

#Header-MainProducts .Header-Background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}


#Header-MainProducts .Header-Title {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

    #Header-MainProducts .Header-Title h1 {
        font-size: 4.1em;
        font-family: 'Cormorant', serif;
        font-weight: 500;
        color: #fff;
        padding-top: 6%;
    }


@media only screen and (max-width: 680px) {


    #Header-MainProducts .Header-Background {
        height: 300px !important;
    }

    #Header-MainProducts .Header-Title {
        width: 100%;
    }

        #Header-MainProducts .Header-Title h1 {
            font-size: 3.5em;
            text-align: center;
        }
}


    /*---------------------------   MAIN PRODUCTS SECTION ----------------------------------- */

#MainProducts {
    height: auto;
    background-color: #f2eadc;
}

    #MainProducts .container-fluid {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #MainProducts .Breadcrumb a:hover {
        text-decoration: none !important;
        color: none !important;
    }

    #MainProducts .Breadcrumb span {
        color: #312821;
        margin-left: 10px;
        font-size: 1.1em;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
    }

    #MainProducts .MainProducts-Content .Product-Card {
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 400px;
        height: 500px;
    }

        #MainProducts .MainProducts-Content .Product-Card .Frame {
            width: 100%;
            height: 100%;
        }

            #MainProducts .MainProducts-Content .Product-Card .Frame img {
                width: 100%;
                height: 100%;
            }

        #MainProducts .MainProducts-Content .Product-Card h4 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 0 !important;
            font-size: 1.2em;
            font-weight:800;
            font-family: 'Lato', sans-serif;
            font-weight:600;
            padding-left: 20%;
            padding-right: 20%;
            padding-top: 3%;
            padding-bottom: 3%;
        }

        #MainProducts .MainProducts-Content .Product-Card:hover h4 {
            /* background-color: rgba(255, 255, 255, 0.5);*/
            background-color: #f2eadc;
            color: #666;
            font-size: 1.2em;
            font-weight: 700;
        }



@media only screen and (max-width: 1690px) {
    #MainProducts .MainProducts-Content .Product-Card {
        width: 370px;
        height: 500px;
    }
}

@media only screen and (max-width: 1450px) {
    #MainProducts .MainProducts-Content .Product-Card {
        width: 330px;
        height: 470px;
    }
}

@media only screen and (max-width: 1370px) {
    #MainProducts .MainProducts-Content .Product-Card {
        width: 310px;
        height: 400px;
    }
}

@media only screen and (max-width: 1290px) {
    #MainProducts .MainProducts-Content .Product-Card {
        width: 310px;
        height: 400px;
    }
}

@media only screen and (max-width: 790px) {

    #MainProducts .container-fluid {
        width: 90%;
    }
}

@media only screen and (max-width: 680px) {

    #MainProducts .MainProducts-Content .Product-Card {
        width: 290px;
        height: 350px;
    }
}