/*--------------------------------------------------------------------- File Name: responsive.css ---------------------------------------------------------------------*/


/*------------------------------------------------------------------- 991px x 768px ---------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    
}


/*------------------------------------------------------------------- 767px x 599px ---------------------------------------------------------------------*/

@media only screen and (min-width: 599px) and (max-width: 767px) {
    
}


/*------------------------------------------------------------------- 599px x 280px ---------------------------------------------------------------------*/

@media only screen and (min-width: 280px) and (max-width: 599px) {
    
}

@media (min-width: 1400px){
    #start {
        height: 879px;
        margin-top: -118px;
    }
    .background-product{
        background: white;
        display: flex;
        border-radius: 20px 20px;
        justify-content: center;
        padding: 2% 0%;     
    }
    .background-product img{
        height: 100%;
        width:auto;
    }
    .background-product {
        margin-bottom: 3% !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #navbarSupportedContent a {
        font-weight: 100;
        font-size: 0.8rem;
    }
    .container-wtapp {
        padding: 0% 0%; 
        width: 18%;
        padding-left: 2%;
    }
    .container-wtapp svg{
        width: 20px;
        height: 20px;
    }
    .container-logo {
        /*padding: 0% 2%;*/
        width: 25%;
    }
    .nav-item{
        text-align: center;
    }
    #start {
        height: 600px;
        width: 100%;
        padding-top: 11%;
        margin-top: -112px;
    }
    #start h1 {
        font-size: 2.5rem;
    }
    .container-logo img{
        width: 90%
    }
    .background-product {
        background: white !important;
        height: max-content;
        padding-bottom: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse {
        position: absolute;
        width: 100%;
        /*background: var(--colortextwhite);*/
        top: 100%;
        left: 0%;
    }
    .navbar-nav {
        padding: 0%;
    }
    .container-wtapp {
        display: none;
        width: 25%;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }
    .container-logo {
        width: 90%;
    }
    .container-logo img{
        padding-left: 15%;
    }
    .navbar-toggler {
        background: linear-gradient( rgba(20, 15, 15, 0.8),rgba(32, 31, 31, 0.54));
        padding: 3% 3% !important;
    }
    .navbar-toggler svg{
        color: white;
        width: 100%;
    }
    #start {
        height: 500px;
        padding-top: 14%;
        /*background-size: contain;*/
    }
    #start h1 {
        font-size: 2rem;
    }
    #servicios {
        padding: 0% 5%;
    }
    #servicios p {
        font-size: 1rem;
        width: 100%;
        margin-top: 0%;
    }
    #servicios .containerservices {
        padding: 0% 2%;
    }
    footer a, footer p {
        text-decoration: none;
        color: white;
        font-weight: 900;
        font-size: 1rem;
    }
    .name-product {
        font-size: 25px;
    }
    .background-product{
        background: white !important;
        height: max-content;
        padding-bottom: 100%;
    }
    .new-tag {
        left: 53%;
        top: 5%;
    }
    .productos {
        padding: 2% 0%;
    }
}

@media (min-width: 576px) and (max-width: 767px) { 
    .navbar-collapse {
        position: absolute;
        width: 100%;
        /*background: var(--colortextwhite);*/
        top: 100%;
        left: 0%;
    }
    button.amazon-button {
        border: 2px solid var(--firstcolor);
        padding: 1.5% 5%;
    }
    button.amazon-button img{
        width: 75%;
    }
    .container-wtapp {
        display: none;
        width: 28%;
        padding: 0%;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }
    .container-wtapp svg {
        width: 25px;
        height: 25px;
    }
    .container-logo {
        width: 77%;
    }
    .container-logo img{
        width: 80%;        
        padding-left: 34%;
    }
    #start {
        height: 450px;
        background-size: cover;
        padding: 4% 5%;
        padding-top: 20%;
    }
    #start h1 {
        font-size: 1.6rem;
    }
    #servicios {
        padding: 0% 0%;
    }
    /*productos{
        background: var(--backgroundbeige);
        padding: 2% 0%;
    }*/
    .background-product{
        background: white !important;
        height: max-content;
        padding-bottom: 100%;
    }
    .background-product img {
    position: absolute;
    /* display: none; */
    width: 95%;
    }
}
@media (max-width: 575px) {
    .navbar-collapse {
        position: absolute;
        width: 100%;
        /*background: var(--colortextwhite);*/
        top: 100%;
        left: 0%;
    }
    .navbar-toggler {
        background: linear-gradient( rgba(20, 15, 15, 0.8),rgba(32, 31, 31, 0.54));
        padding: 3% 3% !important;
    }
    .navbar-toggler svg{
        color: white;
        width: 100%;
    }
    .container-logo {
        width: 85%;
    }
    .container-logo img{
        width: 60%;
        padding-left: 22%;
    }
    .navbar-collapse {
        position: absolute;
        width: 100%;
        /*background: var(--colortextwhite);*/
        top: 100%; 
    }
    .container-wtapp {
        display: none;
        padding: 0% 0%;
        width: 33%;
    }
    .container-wtapp a{
        padding: 0% 5%;
    }
    .container-wtapp a:hover {
        font-size: 0.7rem;
    }
    .container-wtapp svg{
        width: 20px;
    }
    #start{
        background-image: url('../img/slider/slider-mobile.webp');
    }
    #start {
        height: 250px;
        background-size: cover;
        padding: 0%;
        /* padding-top: 16%; */
        margin-top: -77px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    #start h1 {
        color: black;
        font-size: 1rem;
    }
    #start button img{
        width:50%;
    }
    /*---------------Propiedades de ProGourmet------------------*/
    .property-pgt .container-portable{
        display: none;
    }
    .property-pgt .container-movil{
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    /*---------------Categorias------------------*/

    .productos {
        padding: 2% 0%;
    }
    .name-product {
        font-size: 20px;
    }
    .count-product, .description-product, .natural-product {
        margin: 0%;
        font-size: 15px;
    }
    /*Productos*/
    .background-product {
        height: 125px;
        padding-bottom: 100%;
        margin-bottom: 5%;
    }
    .position-relative:hover .info-box {
        height: 105%;
    }
}