/* ///////////////////// Mobile devices ///////////////////// (S) (M) (L) */
@media (min-width: 320px) and (max-width: 374px) {
    nav {
        display: none;
    }

    .side-images {
        display: none;
    }

    .cards {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }

    .spacebox {
        height: 2rem !important;
    }

    .search-box button {
        padding: 10px 0 10px 0;
        width: 100%;
    }

    .hero {
        padding: 20px 20px;
    }

    .popular p {
        margin-bottom: 50px;
    }

    .containz {
        width: 90% !important;
    }

    .search-box input {
        width: 100%;
    }

    .hlinez {

        margin: 3rem 0 2rem 0;
        font-size: 1.5rem;

    }

    .ducardd {
        flex: 1 1 calc(100% - 20px);
    }

    .setupcardleft {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .setupcardright {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .confilter-section input {
        width: 100%;
        margin: .5rem 0;
    }

    .hpline {
        font-size: 1.5rem;
    }


}

@media (min-width: 375px) and (max-width: 424px) {
    nav {
        display: none;
    }

    .side-images {
        display: none;
    }

    .cards {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }

    .spacebox {
        height: 3rem !important;
    }

    .search-box button {
        padding: 10px 0 10px 0;
        width: 100%;
    }

    .search-box input {
        width: 100%;
    }

    .hero {
        padding: 20px 20px;
    }

    .popular p {
        margin-bottom: 50px;
    }

    .containz {
        width: 90% !important;
    }

    .ducardd {
        flex: 1 1 calc(100% - 20px);
    }

    .setupcardleft {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .setupcardright {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .confilter-section input {
        width: 100%;
        margin: .5rem 0;
    }

    .hpline {
        font-size: 1.8rem;
    }

}

@media (min-width: 425px) and (max-width: 767px) {
    nav {
        display: none;
    }

    .side-images {
        display: none;
    }

    .cards {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
    }

    .spacebox {
        height: 3rem !important;
    }

    .search-box button {
        padding: 10px 0 10px 0;
        width: 100%;
    }

    .search-box input {
        width: 100%;
    }

    .hero {
        padding: 20px 20px;
    }

    .popular p {
        margin-bottom: 50px;
    }

    .containz {
        width: 90% !important;
    }

    .ducardd {
        flex: 1 1 calc(100% - 20px);
    }

    .setupcardleft {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .setupcardright {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .confilter-section input {
        width: 100%;
        margin: .5rem 0;
    }

    .hpline {
        font-size: 2rem;
    }


}

/* ///////////////////// Tablets devices ///////////////////// */
@media (min-width: 768px) and (max-width: 824px) {
    nav {
        display: none;
    }

    .side-images {
        display: none;
    }

    .spacebox {
        height: 0rem !important;
    }

    .containz {
        width: 70% !important;
    }

    .cardz {
        width: 40%;
    }

    .popular {
        padding: 0 0 60px 0 !important;
    }

    .ducardd {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (min-width: 825px) and (max-width: 920px) {
    nav {
        display: none;
    }

    .side-images {
        display: none;
    }

    .spacebox {
        height: 0rem !important;
    }

    .cardz {
        width: 40%;
    }

    .popular {
        padding: 0 0 60px 0 !important;
    }

    .ducardd {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (min-width: 921px) and (max-width: 1023px) {
    .icon {
        display: none;
    }

    .spacebox {
        height: 0rem !important;
    }

    .side-images {
        top: 55% !important;
    }

    .cardz {
        width: 40%;
    }

    .side-images img {
        width: 100px;
        height: 70px;
    }

    .r2 {
        display: none !important;
    }

    .side-images {
        top: 20% !important;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

    .popular {
        padding: 0 0 60px 0 !important;
    }

    .ducardd {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (min-width: 1024px) and (max-width: 1034px) {
    .icon {
        display: none;
    }

    .spacebox {
        height: 0rem !important;
    }

    .side-images {
        top: 55% !important;
    }

    .cardz {
        width: 40%;
    }

    .r2 {
        display: none !important;
    }

    .side-images {
        top: 20% !important;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

    .popular {
        padding: 0 0 60px 0 !important;
    }

    .ducardd {
        flex: 1 1 calc(50% - 20px);
    }
}

/* ///////////////////// Desktops devices ///////////////////// (S) */
@media (min-width: 1035px) and (max-width: 1070px) {
    .icon {
        display: none;
    }

    .cardz {
        width: 40%;
    }

    .spacebox {
        height: 5rem;
    }

    .hero {
        padding: 0px 20px;
    }

    .hero h1 {
        font-size: 3rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

    .side-images {
        top: 20% !important;
    }

    .r2 {
        display: none !important;
    }
}

/* ///////////////////// Desktops devices ///////////////////// */
@media (min-width: 1071px) and (max-width: 1210px) {
    .icon {
        display: none;
    }

    .cardz {
        width: 40%;
    }

    .spacebox {
        height: 5rem;
    }

    .hero {
        padding: 0px 20px;
    }

    .hero h1 {
        font-size: 3rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

    .side-images {
        top: 20% !important;
    }

    .r2 {
        display: none !important;
    }
}

@media (min-width: 1211px) and (max-width: 1440px) {
    .icon {
        display: none;
    }

    .hero {
        padding: 0px 20px;
    }

    .side-images {
        top: 25% !important;
    }

}

@media (min-width: 1441px) and (max-width: 1470px) {
    .icon {
        display: none;
    }

    .hero {
        padding: 0px 20px;
    }

    .side-images {
        top: 25% !important;
    }

    .hero h1 {
        font-size: 3.5rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

}

@media (min-width: 1471px) and (max-width: 2559px) {
    .icon {
        display: none;
    }

    .hero {
        padding: 0px 20px;
    }

    .side-images {
        top: 25% !important;
    }

    .hero h1 {
        font-size: 3.5rem;
        margin-bottom: 10px;
        padding: 0 8rem;
    }

}

@media (min-width: 2560px) {
    .icon {
        display: none;
    }

    .hero h1 {
        font-size: 5rem;
    }

    .side-images img {
        width: 200px;
        height: 160px;
    }

    .side-images {
        top: 20%;
    }
}