* {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;
        width:100%;
        height:100%;}

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

#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;}

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

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

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

#main-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%;
            }

.content-main {grid-column: 1/-1;
    grid-row: 7/10;
    height:650px;
    margin-top: 0;
    display: grid;
    color:#745141;
    grid-template-columns: .5fr 1.75fr .5fr 1.25fr .5fr;
    grid-template-rows: .5fr repeat(3,minmax(0,auto)) .25fr;
}

.content-main h2 {grid-column: 2/3;
    grid-row: 1/2;
    color: #954c39;
    border-bottom: #954c39;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    align-self: flex-end;}

.content-main .content-p1 {grid-column: 2/3;
    grid-row:2/3;
    height: 80px;}

.content-main .content-p2 {grid-column: 2/3;
    grid-row: 3/4;
    justify-content: end;}

.content-main img {grid-column:4/5;
    grid-row: 2/4;
    border-style: solid;
    border-color: #954c39;
    justify-self: start;}

.content-main .slider {grid-column:4/5;
    grid-row: 2/4;}

.content-main .slider img {border: none;}

.content-main iframe {grid-column:4/5;
    grid-row: 2/3;
    height: 280px;
    width: 320px;}

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

form {grid-column:4/5;
    grid-row:2/5;
    border-style: solid;
    border-color: #954c39;
    padding: 8px;
    padding-top:18px;}

#lname {margin-left:1px;}

#email {margin-left:38px;}

#phonenumber {margin-left:32px;}

form p {margin-bottom:0px;}

#services-main {grid-column: 1/-1;
    grid-row: 7/10;
    height: auto;
    margin-top: 0;
    display: grid;
    color:#745141;
    grid-template-rows: 120px repeat(4,minmax(auto,1fr)) 60px;
    grid-template-columns:repeat(4, minmax(0,1fr));
    padding-bottom:60px;
    min-height:100vh;}

#section-residential {grid-row:2/3;
    grid-column: 2/3;
    justify-content: center;
    text-align: center;
    margin: 20px;
    align-self: center;}

#residential-img {grid-row: 2/3;
    grid-column: 3/4;
    justify-self: center;
    align-self: center;}

#section-commercial {grid-row:3/4;
    grid-column: 3/4;
    justify-content: center;
    text-align: center;
    margin: 20px;
    align-self: center;}

#commercial-img {grid-row: 3/4;
    grid-column: 2/3;
    justify-self: center;
    align-self: center;}

#section-tile {grid-row: 4/5;
    grid-column: 2/3;
    justify-content: center;
    text-align: center;
    margin: 20px;
    align-self: center;}

#tile-img {grid-row: 4/5;
    grid-column: 3/4;
    justify-self: center;
    align-self: center;}

#section-upholstery {grid-row:5/6;
    grid-column: 3/4;
    justify-content: center;
    text-align: center;
    margin: 20px;
    align-self: center;}

#upholstery-img {grid-row: 5/6;
    grid-column: 2/3;
    justify-self: center;
    align-self: center;}

.clear {clear:both;}

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;}
    #main-tile {grid-column: 1/2;
        grid-row:3/4;}
    #main-upholstery {grid-column: 2/3;
        grid-row:3/4;}
    .content-main {grid-row: 8/10;
        grid-template-columns: .25fr 1fr .25fr;
        grid-template-rows: .5fr repeat(5,minmax(auto,1fr));
        margin-bottom: 4.5rem;}
    .content-main h2 {grid-column: 2/3;
        grid-row: 2/3;
        text-align: center;}
    .content-main .content-p1 {grid-column: 2/3;
        grid-row:3/4;
        height: auto;
        text-align: center;}
    .content-main img {grid-column:2/3;
        grid-row: 4/5;
        border-style: solid;
        border-color: #954c39;
        margin: auto;
        display: block;}
    .content-main .content-p2 {grid-column: 2/3;
        grid-row: 5/6;
        text-align: center;}
    .content-main .slider {grid-column:2/3;
        grid-row: 4/5;}
    .content-main iframe {grid-column:2/3;
        grid-row: 4/5;
        height: 280px;
        width: 320px;
        margin: auto;}
    #freequote {grid-row:3/4;
            grid-column: 2/3;}
    form {grid-column:2/3;
            grid-row:4/5;}
    footer {position:static;}
}

@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;}
    #main-tile {grid-column: 1/2;
        grid-row:3/4;}
    #main-upholstery {grid-column: 2/3;
        grid-row:3/4;}
    .services img {width:100%;
        height: auto;}
    #services-main {grid-template-columns:.5fr 1fr .5fr;}
    
    #section-residential {grid-row:2/3;
        grid-column: 2/3;}
    
    #residential-img {display: none;}
    
    #section-commercial {grid-row:3/4;
        grid-column: 2/3;}
    
    #commercial-img {display: none;}
    
    #section-tile {grid-row: 4/5;
        grid-column: 2/3;}
    
    #tile-img {display: none;}
    
    #section-upholstery {grid-row:5/6;
        grid-column: 2/3;}
    
    #upholstery-img {display: none;}
}