main{
    max-width: 800PX;
    margin: 0 auto;
    padding: 20px;
}
header{
    padding-bottom: 700px;
    max-width: 100%;   
}
#faq{
    background-image: url(images/faq.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
#privacy{
    background-image: url(images/privacy.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
#resources{
    background-image: url(images/resources.jpg);
    background-size: 100%;
    background-repeat: no-repeat; 
}
#home{
    background-image: url(images/home.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
#services{
    background-image: url(images/services.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
#teams{
    background-image: url(images/teams.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
#contact{
    background-image: url(images/contact.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
body{
    margin: 0;
    background-color: #efe8d5;
    font-size: 18px;
    line-height: 33px;
}
h1,h2{
    text-align: center;
}
h2{
    font-size: 24px;
    padding: 10px 0;
}
footer{
    background-color: #bc9c5a;
    text-align: center;
    color: #efe8d5;
    padding: 30px;
}
footer p{
    margin: 0;
}
footer a{
    color: #efe8d5;
}
/*Opacity from 0 to 1, used for transparent level of an element 1 not transparent 0 transparent */
footer a:hover{
    opacity: .5;
    background-color: transparent;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ddcca6;
}

header li {
float: left;
}

header li a {
display: block;
color: #8d8073;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
header li a:hover {
background-color:  #a0895c;
color: #efe8d5;
}
.active{
    background-color: #bc9c5a;
    color: #efe8d5;
}
/*Team coolumns side by side 
.column{
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
}
/*display columns below each other for small screens 
@media screen and (max-width: 650px){
.column{
    width:100%;
    display: block;
}
}
/*Shadows for card effect 
.card{
    box-shadow: 0 4px 8px 0 rgba(0,0, 0, 0.2);
}
/* Some left and right padding inside the container 
.container {
    padding: 0 16px;
}

/* Clear floats 
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;
}
*/
.column{
    box-sizing: border-box;
    float: left;
  width: 50%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */

}
.title {
    color: grey;
    text-align: center;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */ 
border: 1px solid #bc9c5a; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #bc9c5a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #a5884d;
}

/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*/
padding: 20px;
}
.map{
    text-align: center;
}
.cost{
    display: block;
    margin: 0 auto;
    width: 50%;
}  
.service{
    text-align: center;
}
.box{
    box-sizing: border-box;
    float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}