* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .topnav {
    /* overflow: hidden; */
    background-color: #4a4a49;
    position: fixed;
height: 10vh;
width: 100vw;
z-index: 2;
  }
  .topnav #myLinks {
    display: none;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
text-align: right;
padding-top: 3vh;
padding-right: 3vw;
z-index: 2;
  }
.icon{
    padding-top: 3vh;
  }
  .topnav a {
    color: #4a4a49;
    text-decoration: none;
    display: block;
  }
  
  .topnav a.icon {
    background: #ec6608;
    display: block;
    position: absolute;
    text-align: center;
    font-size: 4vh;
    height: 10vh;
    width: 10vh;
    right: 3vw;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #4a4a49;
    display: inline;
    color: #ec6608;
  }

.logo{
    z-index: 2;
    padding-left: 3vw;
    height: 8vh;
    transform: translateY(1vh);
}
h1{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 5vh;
}
h2{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    color: #ec6608;
    text-transform: uppercase;
}
h3{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    color: #ec6608;
    text-transform: uppercase;
}
p{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
}

/* Title */
.titlecontainer {
    height: 100vh;
    width: 100vw;
    background-image: url(/images/shutterstock_176712890-ret.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.titletext {
    position: relative;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding-left: 5vw;
    padding-right: 5vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* what we do */
.whatwedocontainer {
    background-color: white;
}
.whatwedotext {
    position: relative;
    padding: 10vw;
    text-align: center;
}
/* associations */
.assoccontainer{
    display: flex;
    flex-wrap: wrap;
}
.assocleft{
    flex: 50%;
    background-image: url(/images/shutterstock_15508138.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.assocright{
    background-color: #656565;
    flex: 50%;
}
.assoctext {
    position: relative;
    padding: 5vw;
    text-align: center;
    color: white;
}
/* Responsive layout for associations */
@media (max-width: 800px) {
    .assocleft {
      flex: 100%;
      position: relative;
      height: 50vh;   
}
  }
  @media (max-width: 800px) {
    .assocright {
      flex: 100%;
      z-index: 1;
    }
  }

  /* oversize text media query */
  @media (max-width: 800px) {
    .assoctext, .sfhtext {
z-index: 1;   }
  }

/* single family homes */
.sfhcontainer{
    display: flex;
    flex-wrap: wrap;
}
.sfhleft{
    flex: 50%;
    background-image: url(/images/shutterstock_1948890070.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sfhright{
    background-color: #808080;
    flex: 50%;
}
.sfhtext {
    position: relative;
    padding: 5vw;
    text-align: center;
    color: white;
}

/* Responsive layout for sfh */
@media (max-width: 800px) {
    .sfhleft {
      flex: 100%;
      position: relative;
      height: 50vh;   
 }
  }
  @media (max-width: 800px) {
    .sfhright {
      flex: 100%;
    }
  }


/* Responsive layout for text */
/* @media (max-width: 800px) {
    .sfhtext, .whatwedotext, .assoctext, .briana, .james, .aboutheader, .aboutleft, .aboutcontainer {
      text-align: left;
    }
  } */


/* where we work */
.wherecontainer {
    height: 100vh;
    width: 100vw;
    background-image: url(/images/shutterstock_704675365.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
.wheretext {
    position: relative;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 5vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
/* about us */
.aboutcontainer{
    display: flex;
    flex-wrap: wrap;
}
.aboutleft{
    flex: 50%;
}
.aboutright{
    flex: 50%;
}
.aboutheader{
    text-align: center;
    padding-top: 10vh;
padding-bottom: 5vh;}
.briana{
    position: relative;
    padding-left: 5vw;
    padding-right: 5vw;
    text-align: center;
}
.cmca{
    justify-content: center;
}
.james{
    position: relative;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5vh;
    text-align: center;
}
/* Responsive layout for about us */
@media (max-width: 800px) {
    .aboutleft, .aboutright {
      flex: 100%;
    }
  }
.contactcontainer{
  display: flex;
  flex-wrap: wrap;
    background-color: #656565;
    text-align: center;
    padding-top: 5vh;
}
.contactheader{
  background-color: #656565;
  text-align: center;
  padding-top: 5vh;
}
.contactleft{
  flex: 50%;
}
.contactright{
  flex: 50%;
}
.contactcopy{
  position: relative;
  color: white;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-bottom: 5vh;
  text-align: center;
}
.contactdetails{
  position: relative;
  color: white;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-bottom: 5vh;
  text-align: center;
}
/* Responsive layout for contact */
@media (max-width: 800px) {
  .contactleft, .contactright {
    flex: 100%;
  }
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=email], select, textarea {
  display: inline-block;
  width: 50vw;
  padding: 12px;
  border-radius: 4px;
  margin-top: 6px;
  margin-bottom: 16px;
  font-family: Arial, Helvetica, sans-serif;
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Responsive layout for about us */
@media (max-width: 800px) {
  input[type=text], input[type=email], select, textarea {
    flex: 100%;
    width: 90vw;
  }
}


/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #ec6608;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  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: #4a4a49;
}

/* Add a background color and some padding around the form */
.formcontainer {
  border-radius: 5px;
  padding: 20px;
}
label{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: white;
}
.footer{
    background-color: #c00d0d;
    text-align: center;
    padding: 10px;
}