@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@font-face {
    font-family: 'body';
    src: url('../fonts/roboto-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bodybold';
    src: url('../fonts/roboto-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    src: url(../fonts/BlackMud.ttf);
    font-family: headings;
}
:root {
    --light: #fff;
    --dark: #000;
    --main: #374487;
    --mainLight: #d2f7f8;
    --mainDark: #05888d;
    --comp1: #F2BA71;
    --comp2: #E42F29;
    --midLight: #ddd;
    --midDark: #333;
}
* {
	box-sizing: border-box;
}
html {
	height: 100%;
    overflow-y: scroll; /*FORCE VERTICAL SCROLL BAR FOR SHORT PAGES*/
}
body {
    font-family: body;
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100%;
}
main {
    margin-bottom: 3rem;
}
article {
    width: 60%;
    margin: 0 auto 10rem auto;
    line-height: 2;
}
.headerImage {
    background-size: cover;
    height: 87vh;
    background-position: 0;
    position: relative;
    z-index: 1; /*SO THAT THE RETURN-TO-TOP ARROW GOES BEHIND THE HERO*/
}
.fa.down {
    position: absolute;
    bottom: 1.5rem;
    font-size: 3rem;
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0;
    color: var(--light);
}
#index .headerImage {
    background-image: url(../../../data/uploads/heroes/hero8.jpg);
}
#about-us .headerImage {
    background-image: url(../../../data/uploads/heroes/hero2.jpg);
}
#gardening-services .headerImage {
    background-image: url(../../../data/uploads/heroes/hero7.jpg);
}
#contact-us .headerImage {
    background-image: url(../../../data/uploads/heroes/hero1.jpg);
}
#cleaning-services .headerImage {
    background-image: url(../../../data/uploads/heroes/hero10.jpg);
}
#home-maintenance .headerImage {
    background-image: url(../../../data/uploads/heroes/hero3.jpg);
}
#projects .headerImage {
    background-image: url(../../../data/uploads/heroes/hero4.jpg);
}
#our-people .headerImage {
    background-image: url(../../../data/uploads/heroes/hero9.jpg);
}
#testimonials .headerImage {
    background-image: url(../../../data/uploads/heroes/hero11.jpg);
}
#help .headerImage {
    background-image: url(../../../data/uploads/heroes/hero12.jpg);
}
#playground .headerImage {
    background-image: url(../../../data/uploads/heroes/hero13.jpg);
}
.headerCover {
    width: 100%;
    height: 87vh;
    height: 87svh;
    margin: 0;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
h1 {
    color: var(--light);
    text-align: center;
    font-size: 5vw;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
    animation: slideup1 .75s linear forwards;
    font-family: headings;
    font-weight: normal;
    margin-bottom: 0;
}
.headerCover h2 {
    color: var(--light);
    animation: slideup2 .75s linear forwards;
    text-align: center;
    font-family: 'headings';
    font-weight: normal;
    font-size: 2vw;
}
.headerCover p {
    font-size: 1.5rem;
    color: var(--light);
    width: 50%;
    text-align: center;
    animation: slideup3 .75s linear forwards;
}
h2 {
    color: var(--comp2);
}
@keyframes slideup1 {
    0% {
        opacity: 0;
        transform: translateY(220%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes slideup2 {
    0% {
        opacity: 0;
        transform: translateY(700%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes slideup3 {
    0% {
        opacity: 0;
        transform: translateY(420%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes enlarge {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
a {
    text-decoration: none;
    color: inherit;
}
p:not(footer p) a,
li a {
    text-decoration: underline;
    color: var(--comp2);
}
.emphasis {
    color: var(--main);
    font-weight: bold;
}
ul {
    list-style-type: square;
}
ul ::marker {
    color: var(--comp1);
}
@media only screen and (max-width: 1245px) {
    article {
        width: 80%;
    }
}
@media only screen and (max-width: 935px) {
    article {
        width: 99%;
    }
    h1 p {
        font-size: 3vw;
    }
}
@media only screen and (max-width: 800px) {
    h1 {
        font-size: 9vw;
    }
    .headerCover h2 {
        font-size: 6vw;
    }
}
@media only screen and (max-width: 600px) {
    h1 p {
        font-size: 5vw;
    }
}
@media only screen and (max-width: 580px) {
    .headerImage {
        margin-top: 1rem;
    }
    .headerCover p {
        width: 100%;
    }
}
@media only screen and (max-width: 400px) {
    h1 p {
        font-size: 7vw;
    }
}