/*
    AYLMER GLASS & MIRROR - site overrides
    Loaded after ../../shared/css/stylesheet.css, so rules here win at equal specificity.

    Contains only what differs from the shared base:
      1. Values that differ between the two sites.
      2. Rules whose background image differs per site (url(../images/...) resolves
         inside aylmer/images/, not shared/images/).
      3. Aylmer's services grid uses .col13 where Stratford uses .col12.

    Note: Aylmer collapses the nav to the hamburger at 1024px, Stratford at 1250px.
*/


/*NAV*/
header section nav ul li {
    margin-left: 50px;
}


/*PER-SITE IMAGERY*/
#about-us .col12:first-child,
#about-us-2 .col12:first-child {
    background: url(../images/thumbs/agm-building.webp) no-repeat center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 10px 10px 40px 0px rgba(36,51,138,.2);
}

#home {
    background: url(../images/banners/home-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}
#about {
    background: url(../images/banners/about-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}


/*MEDIA QUERIES*/

@media (max-width: 1250px) {
    header section nav ul li {
        margin-left: 20px;
    }

    /*SERVICES GRID - Aylmer markup uses .col13*/
    #services .col13 {
        width: calc(50% - 40px);
    }
}


@media (max-width: 1024px) {
    header nav ul {
        display: none;
    }
    header nav .hamburger {
        display: inline-block;
    }
}


@media (max-width: 768px) {
    #services .col13 {
        width: 100%;
    }

    #home {
        background: url(../images/banners/home-hero-mobile.webp) no-repeat center bottom #f9f9f9;
        background-size: cover;
        padding: 200px 0 80%;
    }
}