#top-nav {
    color: #333;
    background: #ffffff;
    border-style: solid;
    border-color: #cccccc;
}

body {
    background-image: url("background2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
  }



h1 {
    font-family: 'Georgia', Times, Times New Roman, serif;
    padding-left: 30px;
    padding-right: 30px;
}

.logo {
    float: left;
    display: inline;
    background-color: #4aaaa5;
    color: #ffffff;

}


hr {
    width: 95%;
}

.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}


#top-nav {
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    float: right;
 }

li  {
    display: inline;
    margin-right: 20px;
   }

.body-text-container {
    background-color: #ffffff;
    margin-top: 30px;
    margin-right: 30px;
}

.container {
    background-color: #ffffff;
    margin: auto;
    width: 70%;
}

.profile-container {
    background-color: #ffffff;
    margin-top: 40px;
    margin-bottom: 100px;

}

#profile-pic {
    float: left;
    display: inline-block;
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
    background-color: #ffffff;
}

#profile-pic img {
    max-width: 300px;
    width: 100%;
    margin: none;

}      

.body-copy {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    line-height: 40px;
    margin-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-right: 30px;
}
.column {
    float: left;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    background-color: #ffffff;
}

.text-overlay {
    position: relative;
}

.text-overlay p{
    position: absolute;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    background-color: #4aaaa5;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 30px;
    bottom:0px;}
    
.green-footer {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #4aaaa5;
    width: 100%;
    height:5px;
}.footer {
      background-color: #666666;
      padding-top: 15px;
      padding-bottom: 15px;
      text-align: center;
      width: 100%;
    }

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

    #top-nav {
        width: 100%;
        }

    .container {
        width: 100%;
        }

    .profile-container {
        width: 100%;
        margin-left: 10px;
        margin-right: 10px;
        }
  
    #profile-pic {
            width: 40%;
        }
        
    input[type=text], select, textarea {
        display: inline-block;
        width: 768px;
        padding: 20px;
        }
                    
input[type=submit] {
    display: inline-block;
    width: 768px;
    padding: 20px;
     }
        
}
        
@media screen and (max-width: 640px) {
   
     #top-nav {
        width: 100%;
        }
    
    .logo {
        width: 100%;
        text-align: center;
        font-size: 40px;
        }
    
    ul {
        width: 100%;
        text-align: center;
        font-size: 20px;
        }

     h1 {
        font-size: 40px;
        }


    #profile-pic {
        float: none;
        width:100%;
    }
    
    #profile-pic img {
        max-width: unset;
        width: 100%;
    
    }  

    .column {
        width: 100%;
        }
    
    .text-overlay img {
        width: 100%;    
        }

    .text-overlay p {
        width: 100%;
        padding-top: 65px;
        padding-bottom: 65px;
        font-size: 40px;
        } 

    .contact-container {
        width: 100%;
        }

    input[type=text], select, textarea {
            display: inline-block;
            width: 640px;
            padding: 20px;
          }
        
    input[type=submit] {
            display: inline-block;
            width: 640px;
            padding: 20px;
          }
   
}

@media only screen and (max-width: 980px) {
}