/* STYLESHEET FOR RESPONSIVE DESIGN */


@media only screen and (min-width: 2500px) and (orientation: landscape) {
    html {
        font-size: 22px;
    }
}

@media only screen and (min-width: 2900px) and (orientation: landscape) {
    html {
        font-size: 26px;
    }
}

@media only screen and (min-width: 3500px) and (orientation: landscape) {
    html {
        font-size: 32px;
    }
}

@media only screen and (max-width: 1900px) {
    :root {
        --edge-margins: 5rem;
        --ver-margins: 5rem;
    }

    .menu ul {
        gap: 4rem;
    }
}

@media only screen and (max-width: 1590px) {
    
    .bigvp {
        display: none;
    }

    .smallvp {
        display: block;
    }
    
    .menu ul {
        gap: 2rem;
    }

    .left_img,
    .right_img {
        height: auto;
        max-width: 50%;
    }
}

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

    .menu ul {
        padding: 1rem 4rem;
    }

}

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

    html {
        font-size: 14px;
    }

    .menu ul {
        gap: 1.5rem;
    }

    .splash_filler {
        padding-top: 9rem;
    }

    .splash_presentation {
        grid-column: 1 / span 2;
        grid-row: 1 / span 1;
    }

    .splash_links_container {
        display: none;
    }

    .services {
        padding-bottom: 0;
    }

    .responsive {
        display: flex;
        gap: 0;
    }

    .nviewport {
        display: none;
    }

    .accordion {
        cursor: pointer;
    }

    .panel {
        max-height: 0;
        overflow: hidden;    
        transition: max-height 0.2s ease-out;
    } 

    .service_line {
        flex-flow: column;
        margin: 0;
    }

    .services_content {
        padding: 3rem;
        background-color: var(--bc-overlay);
    }

    .services_text {
        flex-direction: row;
        gap: 2.5rem;
        align-items: flex-start;
    }

    .services_content h5 {
        width: 100%;
        text-align: center;
        font-size: 2rem;
        padding-left: 0;
    }
    
    .services_text p,
    .services_text li {
        color: white;
        text-align: left;
    }

    .services_text p,
    .services_text ul {
        padding-top: 1.5rem;
    }

    .left_img,
    .right_img {
        display: none;
    }

    #gutters,
    #gutmaint,
    #roofflash,
    #spinners,
    #conduits,
    #drywalls,
    #lconcr,
    #constr {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #gutters {
        background-image: url("imgs/serv_gutters.jpg");
        margin-top: 5rem;
    }

    #gutmaint {
        background-image: url("imgs/serv_gutmaint.jpg");
    }

    #roofflash {
        background-image: url("imgs/serv_rooff.jpg");
    }

    #spinners {
        background-image: url("imgs/serv_spinners.jpg");
    }

    #conduits {
        background-image: url("imgs/serv_conduits.jpg");
    }

    #drywalls {
        background-image: url("imgs/serv_drywalls.jpg");
    }

    #lconcr {
        background-image: url("imgs/serv_lconcr.jpg");
    }

    #constr {
        background-image: url("imgs/serv_constr.jpg");
    }
}

@media only screen and (max-width: 1000px) {
    
    :root {
        --edge-margins: 2.5rem;
        --ver-margins: 2rem;
    }

    .menu ul::after {
    content: "";
    border-width: 0rem 0rem;
    }

    .menu {
        position: relative;
        right: -2.5rem;
    }

    .menu ul {
        padding: 1rem 2.5rem;
    }

    .img_grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 3fr));
        gap: 0.5rem;
    }
}

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

    .services_text {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }

}

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

    .menu ul {
        display: none;
    }

    .icon {
        display: flex;
    }
    
    footer {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .contacts {
        align-self: flex-start;
    }

    .footer_logo {
        position: relative;
        left: -5px;
    }

}

@media only screen and (max-width: 600px) {
    
    .services {
        padding: 0 0;
    }

    .introduction {
        padding-inline: 0;
        margin: 0rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;
    }

    .service_line {
        margin-top: 0;
    }

    #gutters {
        margin-top: 0;
    }

    .gallery,
    .contact_form {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .contact_form > form {
        width: 100%;
        padding: 1.5rem;
    }

    .contact_form h3 {
        width: 100%;
        text-align: center;
    }

    .services_content {
        padding: 1.5rem 1.5rem;
    }

    .services_text {
        padding: 0 0;
    }

}

@media only screen and (max-width: 400px) {
    
    .splash_filler {
        padding-top: 6rem;
    }

    .splash_presentation {
        padding: 1rem;
    }
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    
    .splash_bg,
    .splash_filler {
        height: fit-content;
    }

}