@media screen and (min-width: 0px) {

    .home {
        background-image: url("images/deckHomeSs.jpg");
    }

    .kitchens {
    background-image:url("images/kitchenHeaderSs.jpg");
    }

    .decks {
        background-image: url("images/deckHeaderSs.jpg");
    }

    .bathrooms {
        background-image: url("images/bathroomHeaderSs.jpg");
    }

    .basements {
        background-image: url("images/basementHeaderSs.jpg");
    }

    .flooring {
        background-image: url("images/flooringHeaderSs.jpg");
    }

    .services {
        background-image: url("images/drawingSs.jpg");
    }

    .home {
        background-image: url("images/deckHomeSs.jpg");
    }


    .kitchensSm {
    background-image: url("images/kitchenNav.jpg");
}

    .decksSm {
        background-image: url("images/deckNav.jpg");
    }

    .bathroomsSm {
        background-image: url("images/bathroomNav.jpg");
    }

    .basementsSm {
        background-image: url("images/basementNav.jpg");
    }

    .flooringSm {
        background-image: url("images/flooringNav.jpg");
    }

    .servicesSm {
        background-image: url("images/drawingNav.jpg");
    }

    body {
        padding:0;
        margin:0;
        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;        font-size:16px;
        color:#444;
    }

    header {
        position:relative;
    }
    
    h1 {
        color:white;
        margin:40px 0 0 0;
        font-family: 'georgia', serif;
        font-size:42px;
        font-weight:normal;
        font-style:italic;
        line-height:38px;
        text-shadow: 2px 2px 2px #000;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 0;
        /*box-shadow:inset 0 13px 10px -10px #000;*/
        padding:150px 0 10px 3%;
    }

    h2 {
        font-size: 28px;
        color: #263fbc;
        font-family: 'georgia', serif;
        margin: 0px 0 20px 0;
        font-weight:normal;
        font-style: italic;
    }

    h3 {
        font-size:16px;
        padding:0 0 15px 0;
        margin:0;
        color:white;
        text-align:center;
        line-height:18px;
        font-weight:normal;
        /*background-color:#162a8c;*/
    }

    h4 {
        font-size:16px;
        padding:0;
        margin:0;
    }

    ul {
        margin:0;
        list-style-type: square;
    }

    li {
        margin:0 0 10px 0;
        color:#1b2d87;
    }

    nav {
        background-color: #263fbc;
        padding:10px 0 10px 15px;
        list-style-type: none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:2;
        box-shadow: -8px 1px 14px 0 #03226b;
    }

    nav a {
        text-decoration:none;
        opacity:0.7;
        color:white;
    }
    nav a:hover {
        text-decoration:none;
        opacity:0.85;
        color:white;
    }

    nav a:visited {
        color:white;
    }

    main {
        padding:30px 6% 40px 6%;
    }

    main p {
        font-size:18px;
        overflow:auto;
    }

    main li {
        font-size:18px;
        margin-left:30px;
    }

    main ul {
        overflow:auto;
        display:inline;
        margin:0;
        padding:0;
    }

    main img {
        display:none;
        width:150px;
        height:105px;
        margin:0 0 10px 10px;
        border-radius:4px;
        position:relative;
        float:right;
        top:5px;
    }

    main a {
        color:#263fbc;
        text-decoration:underline;
    }

    main a:visited {
        color:#1b2d87;
    }

    form {
        padding:40px 20px 20px 20px;
        margin:0;
    }

    form section {
        text-align:center;
    }

    input, textarea, select {
        height:35px;
        border:2px solid white;
        border-radius:4px;
        display:block;
        width:90%;
        margin:0 auto 15px auto;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size:18px;
        color:#000;
        opacity:0.65;
        padding:3px;
    }

    select {
        height:45px;
        background-color:white;
    }

    textarea {
        height:125px;
    }

    label {
        width:90%;
        margin:0 auto 3px auto;
        display:block;
        color:#263fbc;
        font-size:20px;
    }

    footer {
        text-align:center;
        background-color: #1b2d87;
        color:white;
        padding:20px;
        font-size:14px;
        line-height:22px;
    }

    footer img {
        margin-top:5px;
    }

    #logo {
        display:inline-block;
        color:white;
        font-family: georgia, serif;
        margin-right:18px;
        font-style:italic;
        font-size:20px;
    }

    #navul {
        display:block;
        margin:0 0 0 10px;
        padding:0;
        height:0;
        overflow: hidden;
        transition: height .1s ease;
    }

    #navul li {
        display:block;
        font-size:20px;
        margin:4px;
    }

    #navToggle {
        position:absolute;
        top:10px;
        right:30px;
        width:25px;
        cursor:pointer;
    }

    #navToggle div {
        height:3px;
        margin-bottom:5px;
        background-color:white;
    }


    #form a {
        color:white;
        text-decoration:underline;
    }

    #form a:visited {
        /*color: #a42c25;*/
        color:white;
    }

    #form p {
        font-size: 16px;
        line-height: 20px;
        color: white;
        padding: 10px 20px 10px 20px;
        font-weight: normal;
        text-align: center;
        margin:1px 0 0 0;
    }

    form button {
        padding: 15px 20px;
        text-align: center;
        color: white;
        margin: 20px 0;
        /*text-transform:capitalize;*/
        font-size: 22px;
        border: 0;
        outline:2px solid white;
        border-radius: 4px;
        background-color: #263fbc;
        font-style:italic;
        cursor:pointer;
    }

    #form img {
        margin-top:8px;
    }

    #errors {
        color:red;
        font-weight:bold;
        padding:0;
        font-size:18px;
    }

    #form {
        background-color: #a3c5fe;
        padding-top:1px;
    }

    /*.smPic {
        width:135px;
        height:92px;
        margin:0 0 10px 10px;
    }*/



    .footerH {
        font-family:georgia;
        font-size:18px;
        font-style:italic;
    }

    footer a {
        color:white;
    }

    footer a:hover {
        color:white;
        text-decoration:underline;
    }

    #form a:visited {
        /*color: #a42c25;*/
        color:white;
    }

    #subNav {
        display:none;
        margin:20px 0 30px 0;
    }

    #subNav a {
        margin:0 3px 3px 0;
        background-repeat:no-repeat;
        background-size:cover;
        font-size:12px;
        font-family:georgia;
        color:white;
        text-shadow:1px 1px 0 #222;
        font-style:italic;
        padding:30px 0 2px 2px;
        width:18%;
        text-decoration:none;
    }

    #formResponse {
        color:#263fbc;
        font-size:22px;
    }

    .error {
        color:red;
        font-size:16px;
        font-weight:bold;
        width:70%;
        margin:0 auto 3px auto;
    }

    .rbText {
        color:#263fbc;
    }

    .center {
        text-align:center;
    }

    .phoneNum {
        font-size:20px;
        text-align:center;
        margin-bottom:10px;
    }

    #form h2 {
        font-size:22px;
        font-weight:normal;
        font-family:georgia;
        padding:10px 0;
        margin:0;
        color:white;
        text-align:center;
        /*background-color:#162a8c;*/
    }

    #companyInfo {
        display:block;
    }

    #companyInfo p {
        font-size:18px;
        padding:0;
        margin:0;
    }

    #companyInfo div {
        padding:15px 0;
    }

    #companyInfo section {
        text-align:center;
        color:white;
    }

    .phone {
        display:flex;
        align-items:center;
        text-align:center;
        margin-top:1px;
    }

    .blue {
        background-color:#263fbc;
    }

    .blueText {
        color:#263fbc;
    }

    .dBlue {
        background-color:#1b2d87;
    }

    h4 {
        font-size:20px;
        font-family:georgia;
        font-style:italic;
        text-align:center;
        color:white;
        font-weight:normal;
        display:block;
        margin:0;
        padding:10px;
        line-height:22px;
    }

    .callout {
        font-size:20px;
    }

    .opacity {
        opacity:0.7;
    }

    .pLi {
        list-style-type:none;
        margin-top:20px;
    }

    .subHead {
        font-style:italic;
        font-size:22px;
        color:#263fbc;
        border-top:1px solid #263fbc ;
        border-bottom:1px solid #263fbc ;
        padding:5px 0;
        margin:30px 0;
    }

    .advice {
        font-size:20px;
        margin:0px;
    }

    .float-left {
        float:left;
        margin:0 15px 5px 0;
    }

    .float-right {
        float:right;
        margin:0 0 15px 15px;
    }

    .currentPage {
        cursor:text;
        opacity:1.0;
    }

    .display {
        display:block;
    }

    .noDisplay {
        display:none;
    }
}

@media screen and (min-width:350px) {
    main img {
        display:inline;
    }
}

@media screen and (min-width:420px) {
    #subNav a {
        padding-top:50px;
        font-size:16px;
    }
}

@media screen and (min-width: 500px) {
    main img {
        width:200px;
        height:140px;
        margin:0 0 15px 15px;
    }

    main p {
        font-size:18px;
    }

    main li {
        font-size:20px;
        margin-left:40px;
    }

    .kitchens {
    background-image:url("images/kitchenHeader.jpg");
    }

    .decks {
        background-image: url("images/deckHeader.jpg");
    }

    .bathrooms {
        background-image: url("images/bathroomHeader.jpg");
    }

    .basements {
        background-image: url("images/basementHeader.jpg");
    }

    .flooring {
        background-image: url("images/flooringHeader.jpg");
    }

    .services {
        background-image: url("images/drawing.jpg");
    }

    .home {
        background-image: url("images/deckHome.jpg");
    }

}

@media screen and (min-width: 576px) {
    h1 {
        font-size:50px;
        line-height:46px;
        padding-top:225px;
    }

    h2 {
        font-size:32px;
    } 

    #navul li {
        font-size:20px;
    }

    #companyInfo {
        display:flex;
        flex-wrap:wrap;
    }

    #companyInfo div {
        width:50%;
    }

    input, textarea, select {
        width:70%;
    }

    label {
        width:70%;
    }
}

@media screen and (min-width: 650px) {
    #subNav {
    display:flex;
    }

    #subNav a {
        padding-top:50px;
        font-size:16px;
    }
}

@media screen and (min-width: 768px) {

    h1 {
        font-size:58px;
        line-height:53px;
        padding-top:300px;
    }

    h2 {
        font-size:36px;
    } 


    main li {
        font-size:22px;
    }

    main p {
        font-size:20px;
    }
}

@media screen and (min-width: 850px) {
    #navul {
        display:inline-block;
        overflow:visible;
    }

    #navul li {
        display:inline-block;
        margin-right:4px;
        font-size:16px;
    }

    #navToggle {
        display:none;
    }

    #logo {
        font-size:16px;
    }
}

@media screen and (min-width: 925px) {
    #content {
        display:flex;
    }

    #main {
        width:68%;
    }

    #form {
        width:32%;
    }

    h1 {
        font-size:66px;
        line-height:60px;
        padding-top:325px;
    }

    h2 {
        font-size:40px;
    }

    #subNav a {
        padding-top:42px;
    }

    #companyInfo {
        display:block;   
    }

    #companyInfo div {
    width:auto;   
    }

    #companyInfo p {
    width:auto;
    text-align:center;   
    }

    input, textarea, select {
        width:90%;
    }

    label {
        width:90%;
    }

    .error {
        width:90%
    }
}

@media screen and (min-width: 1080px) {
    #subNav a {
        padding-top:50px;
    }  
}

@media screen and (min-width: 1200px) {
    h1 {
        font-size:72px;
        line-height:66px;
        padding-top:400px;
    }

    h2 {
        font-size:44px;
    } 

    main li {
        font-size:24px;
    }

    main p {
        font-size:22px;
    }

    #subNav a {
        padding-top:60px;
    }

    main li {
        font-size:24px;
    }

    main img {
        display:inline;
    }
}