body{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FFFFFF;
    color: #2B2B2B;
    font-family: "Futura Std Medium", Futura, Futura-Medium, "Futura Medium", "FuturaStd Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", "Montserrat", sans-serif;
    font-size: 1em;
    margin: 0;
    outline: none;
}

input:focus, textarea:focus, button:focus{
    outline: none;
}

#bodyWrap{
    min-height: 100%;
    min-width: 100%;
    position: relative;
    display: block;
}

a{
    text-decoration: none;
    color: #2B2B2B;
}

/*--------------------------------------------Navigation*/

#logo{
    text-transform: uppercase;
    font-family: "Futura Std Heavy", Futura, Futura-Heavy, "Futura Heavy", "FuturaStd Heavy",  "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    letter-spacing: 2px;
    color: #57B031;
}

#logoContainer{
    display: flex;
    width: 100%;
    max-width: 1000px;

}

#logoContainer > a{
    width: 100%;
    /*padding: 0 0 0 15px;*/
}

#menuButton {
    display: inline-block;
    cursor: pointer;
    background: white;
    border: none;
    outline: none;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #2B2B2B;
    margin-bottom: 5px;
    transition: 500ms;
    display: block;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -5px) ;
    transform: rotate(45deg) translate(-8px, -5px) ;
}

#topNav{
    width: 100%;
}

#topNav ul{
    margin: 0;
    padding: 0;
}

#topNav > ul > li > a{
    text-transform: uppercase;
    text-decoration: none;
    list-style: none;
    color: #2B2B2B;
    letter-spacing: 1px;
}

#topNav > ul > li > a:focus, #topNav > ul > li > a:hover, #topNav > ul > li > a:active{
    color: #57B031;
}

.heroImage{
    height: 30%;
    width: 100%;
    background-size: cover;
}

/*--------------------------------------------Main*/

main, .mainContent{
    padding-bottom: 100px;
}


.heroImage{
    min-height: 250px;
    width: 100%;
    background-size: cover;
    align-items: center;
    justify-content: center;
    text-align: center;
}


#heroImageServices{
    background-image: url("../images/bluewall-chairs.JPG");
    background-position: 50% 20%;

}

#heroImageAbout{
    background-image: url("../images/table-and-dresser.jpg");
    background-position: center left;
}

.mainContent{
    max-width: 1000px;
}

.pageTitle{
    color: #57B031;
    font-family: "Futura Std Heavy", Futura, Futura-Heavy, "Futura Heavy", "FuturaStd Heavy", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-size: 2em;
}

/*--------------------------------------------Index*/


#heroImageHome{
    min-height: 89vh;
    width: 90%;
    background-size: cover;
    background-image: url("../images/greenwall.jpg");
    background-position: bottom left;
    align-items: right;
    justify-content: right;
    text-align: right;
    padding: 5%;
}

#homePromoWrap{
    max-width: 1000px;
    margin: auto;
}

.homePromoText{
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: "Futura Std Bold", Futura, Futura-Bold, "Futura Bold", "FuturaStd Bold", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    font-size: xx-large;
    letter-spacing: 2px;
}

#estimateButtonHome{
    border: none;
    background-color: #FFFFFF;
    color: #57B031;
    border-radius: 15px;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 500;
    padding: 10px 13px 10px 13px;
}

#estimateButtonHome:hover, #estimateButtonHome:active{
    font-size: 2em;
    padding: 12px 15px 12px 15px;
    transition: 300ms;
}

/*--------------------------------------------Services*/

#textWrapServices > ul > li{
    margin: 5px;
}

#estimateReqContainerServices{
    border: #2B2B2B 1px solid;
    border-radius: 5px;
    padding: 10px;
    width: 207px;
}

#estimateReqContainerServices > p{
    margin: 30px 20px 30px 20px;
}

#estimateButtonServices{
    border: none;
    background-color: #57B031;
    color: #FFFFFF;
    border-radius: 15px;
    text-transform: uppercase;
    font-size: large;
    font-weight: 500;
    padding: 10px 13px 10px 13px;
}

#estimateButtonServices:hover, #estimateButtonServices:active{
    /*font-size: larger;*/
    /*padding: 12px 15px 12px 15px;*/
    box-shadow: 3px 3px 5px #6B6B6B;
}

/*--------------------------------------------Contact Us*/

#contactFormWrap{
    max-width: 502px;
}

#errorText{
	color: red;
}

#contactForm > input, #contactForm > textarea{
    display: block;
    border: #57B031 1px solid;
    padding: 5px;
    width: 100%;
}

#contactForm textarea{
    max-height: 102px;
}

#contactForm label{
    margin: 7px 0 8px 0;
    display: block;
}

#submitContactButton{
    border: #2B2B2B 1px solid;
    padding: 15px;
    margin: 13px 0 0 0;
    color: #2B2B2B;
    background-color: #FFFFFF;
    font-family: "Futura Std Medium", Futura, Futura-Medium, "Futura Medium", "FuturaStd Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", "Montserrat", sans-serif;
    font-size: 1em;
    width: 100px;
}

#submitContactButton:hover{
    border: none;
    color: #FFFFFF;
    background-color: #57B031;
    transition: 300ms;
}

/*--------------------------------------------Footer*/

footer{
    position: absolute;
    bottom: 0;
    padding: 15px 0 15px 0;
    background-color: #2B2B2B;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: #FFFFFF;
    margin: 0 0 7px 0;
}

.copyright{
    margin: 7px 0 7px 0;
    font-size: small;
}

/*--------------------------------------------Responsive*/

@media screen and (min-width: 1350px){
    #heroImageHome{
        min-height: 61vh;
    }
    #homePromoWrap {
        padding-left: 512px;
        padding-top: 118px;
    }
}

@media screen and (min-width: 1024px) {
    #logo{
        margin-left: 0;
    }
    #topNav ul{
        margin-right: 0;
    }
    #contactFormWrap{
        max-width: 512px;
        float: left;
    }
    #heroImageHome{
        min-height: 70vh;
    }
    #homePromoWrap{
        /*padding-left: 512px;*/
        /*padding-top: 118px;*/
        max-width: 1000px;
    }
}

@media screen and (max-width: 1024px) {
    #logo{
        margin-left: 15px;
    }
}

@media screen and (max-width: 700px){
    #topNav {
        height: 0;
        visibility: hidden;
    }
    #contactFormWrap{
        max-width: 512px;
    }
}

@media screen and (min-width: 701px){
    header{
        display: flex;
    }
    header, .mainContent{
        max-width: 1000px;
        margin: auto;
    }
    .mainContent{
        min-height: 140px;
        padding: 20px;
    }
    #logoContainer{
        max-width: 315px;
        display: flex;
    }
    #logo{
        font-size: 2em;
        margin: 35px 0 35px 20px;
    }
    #menuButton{
        visibility: hidden;
    }
    #topNav > ul > li{
        display: inline;
        padding: 0 0 0 15px;
    }
    #topNav ul {
        float: right;
        margin: 44px 20px 30px 0;
        text-align: right;
    }
    .heroImage, .heroImage > iframe{
        min-height: 550px;
    }
    .homePromoText{
        font-size: 3.5em;
    }
    #estimateButtonHome{
        /*font-size: 2em;*/
    }
    #textWrapServices{
        float: left;
    }
    #estimateReqContainerServices{
        margin: 45px 0 60px 450px;
    }
}

@media screen and (min-width: 701px) and (max-width: 814px) {
    #heroImageHome {;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 87vh;
    }
    .homePromoText{
        font-size: 3em;
    }
}

@media screen and (min-width: 814px) {
    #contactFormWrap{
        width: 512px;
    }
    #contactFormWrap, #contactTextWrap{
        /*display: inline-block;*/
        /*padding-bottom: 140px;*/
    }
    #contactTextWrap{
        margin: 0 0 170px 570px;
        padding-top: 15px;
    }
    #estimateReqContainerServices{
        margin: 45px 0 60px 550px;
    }
}

@media screen and (min-width: 814px) and (max-width: 1024px) {
    #contactFormWrap{
        max-width: 512px;
        /*float: left;*/
    }
    #contactTextWrap{
        width: auto;
        margin: -300px 0 140px 570px;
    }
}

@media screen and (min-width: 1024px) {
    #logo{
        margin-left: 0;
    }
    #topNav ul{
        margin-right: 0;
    }
    #estimateReqContainerServices{
        margin: 45px 0 60px 800px;
    }
}

@media screen and (min-width: 200px) and (max-width: 814px){
    #contactFormWrap{
        max-width: 97%;
        float: none;
    }

}

@media screen and (min-width: 200px) and (max-width: 700px){
    #logoContainer > a{
        padding: 0 0 0 15px;
    }
    #logo{
        font-size: 25px;
    }
    #menuButton{
        padding: 0 15px 0 0;
    }
    header{
        width: 100%;
    }
    #topNav > ul > li{
        width: 100%;
        padding: 5px 0 5px 0;
        color: #FFFFFF;
        background-color: #2B2B2B;
        text-align: center;
    }
    #topNav > ul > li > a{
        color: #FFFFFF;
        font-size: 14px;
        letter-spacing: 1px;
        font-family: "Futura Std Medium", Futura, Futura-Medium, "Futura Medium", "FuturaStd Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", "Montserrat", sans-serif;
    }
    #topNav > ul > li:focus, #topNav > ul > li:hover, #topNav > ul > li:active{
        background-color: #6B6B6B;
    }
    #topNav > ul > li > a:focus, #topNav > ul > li > a:hover, #topNav > ul > li > a:active{
        color: #FFFFFF;
    }
    .heroImage, .heroImage > iframe{
        min-height: 250px;
    }
    .mainContent{
        margin: 15px;
    }
    #heroImageHome {;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 87vh;
    }
    footer{
        bottom: 0;
    }
}

@media screen and (min-width: 200px) {
    main, .mainContent {
        padding-bottom: 100px;
    }
}