@import url("main.inc.css");

/* Styles specific for home.inc.php */

/*
This stylesheet handles styles specific for home.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

#home .h1-container {
    margin-bottom: 96px;
}

#home .cta-container {
    margin-top: unset;
    margin-bottom: unset;
}

h3 {
    margin-top: 96px;
}

.hero > div:first-child { /* container for .hero img */
    max-width: 503px;
    margin-left: auto;
    margin-right: auto;
}

.hero img {
    margin-bottom: 48px;
}

.hero p {
    margin-bottom: 48px;
}

.hero > div:nth-child(3) {
    max-width: 312px;
    margin-left: auto;
    margin-right: auto;
}

/*
** End Default Styling **
*************************
*/

@media screen and (min-width: 900px) {

    #home .h1-container { /* Overrides change on main.inc.css. Needed to match design. */
        max-width: 312px;
    }

    .hero > div:nth-child(3) {
        max-width: unset;
        text-align: center;
    }

    #home .content > div:first-child p {
        max-width: 52.5%;
    }

} /* End of 900px */

@media screen and (min-width: 1300px) {

    #home .h1-container {
        max-width: 550px;
    }

} /* End of 1300px */