body {color: #5a5a5a;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: linear-gradient(#c4c4c4, #dadada);
background-attachment: fixed;
margin: 0px;}

header {background-color: #2b2b2b;
color: #ffffff;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: large;
text-align: right;
padding-top: 0rem;
grid-row: 1 / 2;
grid-column: 2 / -2;}

header h1 {line-height: 150%;
height: 60px;
background-image: url('images/rrsc.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 1rem;
margin: 0;}

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

* { box-sizing: border-box; }

header a:hover {background-color: #2b2b2b;
    color: #ffffff;}

nav {font-weight: bold;
background-color: #9e9e9e;
grid-row: 2 / 3;
grid-column: 2 / -2;
margin: 0;}

nav a {text-decoration: none;
    text-align: center;
    padding: 1rem;
    color: #ffffff;
    font-size: medium;
    display: block;}

nav a:hover {background-color: #2b2b2b;
    color: #ffffff;}

nav ul {list-style-type: none;
    margin: 0rem;
    padding-left: 0rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-right: 0rem;
    display: flex;
    flex-flow: row nowrap;}

nav ul li {width: 100%;}

main {background-color: #ffffff;
    padding-left: 1rem;
    padding-right: 1rem;
    grid-row: 4 / 5;
    grid-column: 2 / -2;}
   
h2 {color: #2b2b2b;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;}

footer {background-color: #ffffff;
font-size: .5rem;
font-style: italic;
text-align: center;
padding: .5rem;
grid-row: 5 / 6;
grid-column: 2 / -2;}

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

#darkerbar {background-color: #2b2b2b;
grid-column: 1 / -1;
grid-row: 1 / 2;}

#lighterbar {background-color: #9e9e9e;
grid-column: 1 / -1;
grid-row: 2 / 3;}

#residential {height: 200px;
    background-image: url('images/residential.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    grid-row: 3 / 4;
    color: #ffffff;
    padding-top: 80px;
}

#commercial {height: 200px;
    background-image: url('images/commercial.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
    color: #ffffff;
    padding-top: 80px;
    }

#solar1 {height: 270px;
    background-image: url('images/solar1.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #ffffff;
    padding-top: 70px;
    font-size: x-large;
    grid-row: 3 / 4;
    grid-column: 1 / -1;}

#flex-container a:link {text-decoration: none;
    font-size: large;
    text-align: center;
    padding-top: 200px;}

#flex-container div:hover {background-color: #2b2b2b;}

#contact {float:right}

#clear {clear: both;}

#flex-container {
    display: flex;
    width: 100%;
   }

#flex-container > div{
    float: left;
    width: 100%;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    background-color: #f1f1f1;
    margin: 30px;
    padding-left: 20px;
    font-size: 30px;}

@media only screen and (max-width: 992px) {
    #flex-container {
        width: auto}

    #residential, #commercial {width: 100%;}

    header h1 {background-image: none;
        text-align: center;}

    .column{
        width: 768px;
    
    }
    
@media only screen and (max-width: 768px) {
    nav ul {flex-flow: column nowrap;}

    #solar1 {padding-top: 25px;}
    }
    .column{
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    #solar1 {display: none;}

    #flex-container {
        width: auto}

    #residential, #commercial {background-image: none;
    color: #5a5a5a;}



}