* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family:'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
    display: grid;
    grid-template-columns: 80px auto 80px;
    grid-template-rows: 300px auto 50px;
    grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";
 }
body header {
    background-image: url("header.png");
    height: 300px;
    background-size: cover;
    position: relative;
    grid-area: header;
}
main {
    grid-area: main;
}
footer {
    grid-area: footer;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: initial;
    text-align: center;
    font-size: 1.2rem;
}
body header nav {
    position: absolute;
    bottom: 0px;
    }
nav a {
    display: inline-block;
    padding: 2rem;
    color: rgb(11, 11, 48);
    text-decoration: none;
    padding: 20px;
    font-style: italic;
}

nav a:hover {
    background-color: rgb(250, 208, 215);
}
nav {
    left: 0;
    right: 0;
}
.green div {
    border-bottom: white 3px solid;
}
.green {
    padding: 5px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
}
.green5 {
    padding: 5px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
}
nav ul {
    position:sticky;
    background-color: #f5f5dc;
    opacity: 75%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
nav li {
    display: inline-block;
}
.title {
    color: rgb(11, 11, 48);
    font-size: 1.8em;
    font-family: Arial, Helvetica, sans-serif;
}
.pink {
    background-color: rgb(250, 208, 215);
    height: 30px;
}
.testim {
    text-align: center;
    margin-top: 50px;
    width: 650px;
    display: inline-block;
    margin: 0 auto;
    display: block;
}
.testim2 {
    text-align: center;
    margin-top: 50px;
    width: 950px;
    display: inline-block;
    margin: 0 auto;
    display: block;
}
.contacttitle {
    font-size: 1.5rem;
    color: rgb(87, 168, 107);
    text-align: center;
}
.acorn {
    background-image: url("acorn.jpg");
    height: 346px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 400px;
    margin: 50px 50px 50px 50px;
    float: left;
}
.simgreen {
    color: rgb(26, 126, 68);
    text-align: center;
}
.picture {
    background-image: url("katiepic2.jpg");
    height: 346px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 400px;
    margin: 50px 50px 50px 50px;
    float: left;
}

.air {
    margin-top: 50px;
    width: 650px;
    display: inline-block;
}
.testimonials {
    margin: 0 auto;
    display: block;
}

.pain {
    font-size: 1.4rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.clearfix::before {
    content: "";
    clear: both;
    display: table;
  }
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: relative;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
 
  .air2 {
    margin-top: 50px;
    width: 650px;
    float: left;
}

.pain2 {
    font-size: 1.4rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.serviced {
    margin: 0 auto;
    display: block;
    margin-top: 50px;
    width: 650px;
    display: inline-block;
}
.othertitle {
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
    color: rgb(87, 168, 107);
}
.othertitle2 {
    margin-left: 40px;
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
    color: rgb(87, 168, 107);
}
.greenthin {
    padding: 1px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: Arial, Helvetica, sans-serif; 
}
.green2 {
    padding: 5px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: 'Alternate Gothic', Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
}
.picture2 {
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    margin: 50px 50px 50px 125px;
    display: inline-block;
}
.green2 div {
    border-bottom: white 3px solid;
}
#contact {
    float: right;
    font-size: 1.3rem;
    border-radius: 5px;
}
#contact:hover {
    background-color: rgb(179, 119, 170);
}
input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc; 
    box-sizing: border-box;
    margin-top: 6px; 
    margin-bottom: 16px;
}
.links img {
    height: 100px;
    width: 100px;
    margin: 50px 50px 50px 50px;
}
.nodecor {
    text-decoration: none;
    font-size: 1.8em;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory;
}
.face {
    background-image: url("katiepic3.jpg");
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 400px;
    margin: 50px 50px 50px 50px;
    float: left;
}
.indent p {
    margin-left: 30px;
}
.indent ul {
    margin-left: 30px;
}
.readtext {
    font-family:"Times New Roman", Bodoni, Garamond, "Minion Web", "ITC Stone Serif";
  }
  iframe {
    margin: 0 auto;
    display: block;
}
@media only screen and (max-width: 1125px) {
    .container {
        grid-template-columns: auto 650px auto;
    }
}
@media only screen and (max-width: 992px) {
    .container {grid-template-columns: 80px 768px 80px;
        grid-template-rows: 600px auto 50px;
    }
    iframe {
            width:900px;
            height:500px;
    }
  .picture {
        width: 100%;
        margin: 0px;
        background-position: center;
        max-width: 450px;
    }

  .picture2 {
    width: 100%;
    height: auto;
    margin: 0px;
    max-width: 450px;
}
    nav a {
        display: block;
    }
    .morepain {
        text-align: center;
        margin: 0 auto;
        display: block;
        font-style: italic;
    }
    body header {
        background-image: url("tallheader.png");
        height: 600px;
    }
    .air, .air2 {
        width: auto;
    }
    .picture {
        width: 100%;
        margin: 0 auto;
        text-align: center;}
  .picture2 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;}
    nav ul {
        display: block;
        grid-template-columns: none;
    }
    nav li {
        display: block;
    }
}
  @media only screen and (max-width: 768px) {
    .container {grid-template-columns: 0px 100% 0px;}
    iframe {
        width:700px;
        height:500px;
    }
    .picture {
        margin: 0 auto;
        text-align: center;
    }
    .picture2 {
        margin: 0 auto;
        text-align: center;
    }

  }