/*@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/playfair.ttf);
    font-family: headings;
}
:root {
    --main: #CB2435;
    --comp: #111;
    --comp2: #539C26;
    --light: #fff;
    --dark: #000;
    --mid: #999;
}
* {
	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;
}
h1 {
    color: var(--light);
    transform: translateY(-4rem);
    animation: slideDown 1s forwards;
    height: 20rem;
    width: 60%;
    margin: 0 auto;
    font-size: 100%;
    text-shadow: 1px 1px 0 var(--dark);
    background-image: url(../../../data/uploads/images/stanthorpeFromMtMarlay.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 90%;
    position: relative;
}
@keyframes slideDown {
    0% {
        transform: translateY(-4rem);
    }
    100% {
        transform: translateY(0);
    }
}
.title {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 0;
    margin-top: 0;
    padding: 1rem 0 0 1rem;
}
.tagline {
    font-size: 3em;
    font-family: headings;
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: 0 1rem;
}
.description {
    font-weight: normal;
    line-height: 1.5;
    font-size: 1.5rem;
    padding: 0 1rem;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
}
.wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100%;
}
article {
    padding: 0 1rem;
    width: 60%;
    margin: 0 auto 2rem auto;
}
article ul {
    margin: 3rem 0;
    list-style-type: square;
}
article li {
    margin-bottom: 1.5rem;
}
article li::marker {
    color: var(--comp2);
}
article img {
    width: 100%;
}
section p {
    line-height: 2;
}
.fa::before { /*BEFORE IS NECESSARY TO OVERRIDE FONTAWESOME STYLES*/
    font-size: 1.5rem;
}
.fa-trowel::before { 
    color: var(--mid);
    margin-right: 1rem;
}
.fa-trowel {
    transition: .3s;
    transform: rotate(90deg);
}
li:hover .fa-trowel {
    transform: rotate(-180deg);
}
li:hover .fa-trowel::before {
    color: var(--main);    
}
@media only screen and (max-width: 1600px) {
    article,
    h1 {
        width: 95%;
    }
}
@media only screen and (max-width: 1000px) {
    h1 {
        width: 100%;
    }
}