* {box-sizing:border-box;}

body {margin:0px;
        background: linear-gradient(rgba(240,221,207,1)0%, rgba(162,121,111,1)100%);
        background-attachment: fixed;
        color: #745141;
        font-family: 'Quicksand', sans-serif;}

#wrapper {display:grid;
        grid-auto-rows: minmax(0px,auto);
        grid-template-columns:repeat(12, minmax(0,1fr));
}

#topbar {background-color: #a94c23;
            grid-row: 1/2;
            grid-column: 1/-1;
            height:40px;
}

.topbtn {
    background-color: #a94c23;
    color:#ffffff;
    border:none;
}

.topbtn:hover {
            background-color: #e68a57;
            text-decoration:underline;
            text-decoration-color: #ffffff;
            cursor: pointer;
}

#callbutton-top {
            grid-row:1/2;
            grid-column: 2/4;
}

#estimatebutton-top {
            grid-row:1/2;
            grid-column: 10/12;
}

header {background-image: url("milestone3pics/redrock.jpg");
            height:400px;
            grid-row: 2/8;
            grid-column: 1/-1;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            margin-bottom: 0;
            z-index: 0;
}

#graybar {background-color: #75787f;
        opacity: .5;
        grid-row: 7/8;
        grid-column: 1/-1;
}

nav {background-color: inherit;
    display: block;
    position: sticky;
}

nav ul {list-style: none;
        display: flex;
        flex-flow: nowrap;
        align-items: center;
        justify-content: space-evenly;
        padding: 0px;
    }

nav a {
    color: #ffffff;
    text-decoration: none;
}

nav a:hover {
    color: black;
    cursor: pointer;
}

nav li {display: list-item;}

#leftnavbar {
            grid-column: 2/6;
            grid-row: 7/8;
}

#leftnavbar ul a {padding-left:0px;
            padding-right:40px;

}

#rightnavbar {
            grid-column: 8/12;
            grid-row:7/8;
}

#rightnavbar ul a {padding-right: 0px;
            padding-left:40px;
}

#logohero {grid-column: 6/8;
            grid-row:6/9;
            z-index: 1;}

#logohero img {max-width:250px;
            max-height:250px;
            border-radius: 50%;
}

#worryingbox {grid-column: 1/-1;
            grid-row: 7/10;
            height:650px;
            background-image: url("milestone3pics/prints.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            margin-top: 0;
            display: grid;
            color:#745141;
            grid-template-columns: 1fr 4fr 4fr 1fr;
            grid-template-rows: repeat(6,minmax(auto,1fr));
        }

#worryingbox h2 {grid-row: 2/3;
                grid-column:2/3;
            }

#worryingbox p {grid-row:3/4;
                grid-column: 2/3;
                border-bottom: #a94c23;
                border-style: solid;
                border-top: none;
                border-left: none;
                border-right: none;
            }

.mainbtn {border-style: solid;
    border-color: #a94c23;
    color: #fbf4ed;
    background-color: #b46449;
    margin-top: 14px;
    margin-bottom:14px;
    margin-right: 88px;
    margin-left: 0px;
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.mainbtn:hover {background-color: #a94c23;
    cursor: pointer;
}

#estimatebtn-main {
            grid-row:4/5;
            grid-column: 2/3;
}

#gallerybtn-main {grid-row:5/6;
            grid-column:2/3;
}

.categories {grid-column: 2/12;
            grid-row: 10/11;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: .5fr 1fr .5fr;
            text-align: center;
        }

#categories-text {grid-column: 1/-1;
            grid-row: 1/2;
}

.services {align-items: center;
}

.services a {text-decoration: none;
            color: #745141;}

#residential {grid-column: 1/2;
            grid-row:2/3;
}

#commercial {grid-column: 2/3;
    grid-row:2/3;
}

#tile {grid-column: 3/4;
    grid-row:2/3;
}

#upholstery {grid-column: 4/5;
    grid-row:2/3;
}

.services img {border-radius: 50%;
    border-style: solid;
    border-color: #745141;}

section:hover {cursor: pointer;
                opacity: 75%;
            }

footer {grid-column: 1/-1;
        grid-row:11/12;
        font-size: 0.70em;
        font-style: italic;
        text-align: center;
        background-color: #954c39;
        color: #e5cfbc;
    }

@media only screen and (max-width:992px) {
    #wrapper {grid-template-columns:repeat(12, minmax(0,76.8fr));}
    #topbar {height:inherit;}
    header {background-image: url("milestone3pics/redrock.jpg");
        height:250px;
        width:100%;}
    #logohero {grid-column: 6/8;
        grid-row:1/2;
        z-index: 1;}
    #logohero img {max-width:50px;
        max-height:50px;
        border-radius: 50%;}
    nav ul {flex-flow: column nowrap;}
    #worryingbox {width:100%;
        height:auto;
        grid-template-columns: .25fr 1fr 3fr;
        grid-template-rows: .65fr .5fr 1fr .25fr .25fr}
    #worryingbox h2 {grid-row: 2/3;
        grid-column:2/4;
        align-self: flex-end;}
    #worryingbox p {grid-row:3/4;
        grid-column: 2/3;
        align-self: flex-start;
        border-style: solid;
        background-color: ivory;
        border-color: #a94c23;
        padding: 8px;}
    .mainbtn {width:120px;
        height:40px;}
    #gallerybtn-main {justify-content: flex-start;}
    .categories {width:100%;
        height:auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .5fr 1fr 1fr .5fr;}
    #tile {grid-column: 1/2;
        grid-row:3/4;}
    #upholstery {grid-column: 2/3;
        grid-row:3/4;}
}

@media only screen and (max-width: 768px) {
    #wrapper {width:100%;}
    #topbar {height:inherit;}
    header {background-image: url("milestone3pics/redrock.jpg");
        height:auto;
        width:100%;}
    #logohero {grid-column: 6/8;
        grid-row:1/2;
        z-index: 1;}
    #logohero img {max-width:50px;
        max-height:50px;
        border-radius: 50%;}
    nav ul {flex-flow: column nowrap;}
    #worryingbox {width:100%;
        height:auto;
        grid-template-columns: .5fr .60fr 1.4fr .5fr;
        grid-template-rows: .65fr .5fr 1fr .25fr .25fr}
    #worryingbox h2 {grid-row: 2/3;
        grid-column:2/4;
        align-self: flex-end;}
    #worryingbox p {grid-row:3/4;
        grid-column: 2/3;
        align-self: flex-start;
        border-style: solid;
        border-color: #a94c23;
        background-color: ivory;
        padding: 8px;}
    .mainbtn {width:120px;
        height:40px;}
    #gallerybtn-main {justify-content: flex-start;}
    .categories {width:100%;
        height:auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .5fr 1fr 1fr .5fr;}
    #tile {grid-column: 1/2;
        grid-row:3/4;}
    #upholstery {grid-column: 2/3;
        grid-row:3/4;}
    .services img {width:100%;
        height: auto;}
}