@charset "utf-8";

.background-image{
    background-image: url(../img/05-catalogue-raisonee/02-sinh-vat-canh/PNG/F5-01.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
  }

/*Large*/
@media (min-width:1200px){
    .btn-card{
        background-color: white !important;
        width: 125px;
        height: 36px;
        border-radius: 0;

    }
    .card-contact{
        background-color: rgba(255, 255, 255, 0.3);
        color: #FFF;
        width: 580px;
        height: 320px;
    }
    .card{
        position: relative;
        overflow: hidden;
        display: flex;

        border-radius: 4px; /* Styling */
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);*/
        /*transition: box-shadow 0.56s ease-in-out; !* Animation *!*/
        /*!* background-color: rgba(0,0,0,.2); !* for debugging *!*/
    }
    .background-image{
        height: 800px;
    }
    .space-contact{
        margin-bottom: 10px;
    }
    #text-box-1{
        padding-top: 40px;
        padding-left: 20px;
    }
}
/*Medium*/
@media (min-width:992px) and (max-width:1199px){
    .btn-card{
        background-color: white !important;
        width: 125px;
        height: 36px;
        border-radius: 0;

    }
    .card-contact{
        background-color: rgba(255, 255, 255, 0.3);
        color: #FFF;
        width: 380px;
        height: 320px;
    }
    .card{
        position: relative;
        overflow: hidden;
        display: flex;

        border-radius: 4px; /* Styling */
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);*/
        /*transition: box-shadow 0.56s ease-in-out; !* Animation *!*/
        /*!* background-color: rgba(0,0,0,.2); !* for debugging *!*/
    }

    .space-contact{
        margin-bottom: 10px;
    }
    #text-box-1{
        padding-top: 20px;
        padding-left: 20px;
    }
}
/*Small*/
@media (min-width:768px) and (max-width:991px){
    .btn-card{
        background-color: white !important;
        width: 125px;
        height: 36px;
        border-radius: 0;

    }
    .card-contact{
        background-color: rgba(255, 255, 255, 0.3);
        color: #FFF;
        width: 280px;
        height: 350px;
    }
    .card{
        position: relative;
        overflow: hidden;
        display: flex;

        border-radius: 4px; /* Styling */
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);*/
        /*transition: box-shadow 0.56s ease-in-out; !* Animation *!*/
        /*!* background-color: rgba(0,0,0,.2); !* for debugging *!*/
    }
    .space-contact{
        margin-bottom: 10px;
    }
    #text-box-1{
        padding-top: 10px;
        padding-left: 10px;
    }

}
/*X-small*/
@media (max-width:767px){
    .btn-card{
        background-color: white !important;
        width: 125px;
        height: 36px;
        border-radius: 0;

    }
    .card-contact{
        background-color: rgba(255, 255, 255, 0.3);
        color: #6c5a5a;
        width: 360px;
        height: 300px;
    }
    .card{
        position: relative;
        overflow: hidden;
        display: flex;

        border-radius: 4px; /* Styling */
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);*/
        /*transition: box-shadow 0.56s ease-in-out; !* Animation *!*/
        /*!* background-color: rgba(0,0,0,.2); !* for debugging *!*/
    }
    .space-contact{
        margin-bottom: 10px;
    }
    #text-box-1{
        padding-top: 20px;
        padding-left: 20px;
    }

}