@media (min-width: 233px) {

  main {

    padding-top: 8rem;

    padding-bottom: 6rem;

    padding-left: 1rem;

    padding-right: 1rem;

  }

}



@media (max-width: 600px) {

  .max-w-4xl {

    flex-direction: column;

    padding-left: 1rem;

    padding-right: 1rem;

  }

  .max-w-4xl p {

    text-align: left;

  }

  .about-page .max-w-4xl {

    flex-direction: initial; 

    padding-left: initial;

    padding-right: initial; 

  }

  .about-page .max-w-4xl p {

    text-align: center; 

  }

}





html,

body {

  height: 100%;

}



body {

  display: flex;

  flex-direction: column;

}



main {

  flex: 1;

}



h2 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 1rem;

}



h3 {

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 1rem;

}



a {

  color: #f1881f;

}



a:hover {

  color: #804c19;

  text-decoration: underline;

  font-weight: bold;

}



p a {

  color: #f1881f;

  font-weight: bold;

}



p a:hover {

  color: #804c19;

  text-decoration: underline;

  font-weight: bold;

}



.text-hover-orange:hover {

  color: #f1881f;

  text-decoration: underline;

}



/*contact*/

#contact-form {

  clear: both;

  margin: 24px 0 0 0;

  border: none;

}



#contact-form input[type="text"],

#contact-form input[type="email"],

#contact-form textarea {

  width: 250px;

  border: 1px #eee solid;

  margin: 0 0 15px 0;

  padding: 10px;

  color: #444;

  font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;

}



#contact-form textarea {

  width: 350px;

  height: 150px;

}

#contact-form input[type="submit"] {

  background: url(../submit-button-orange.jpg) no-repeat;

  width: 109px;

  height: 38px;

  border: none;

  cursor: pointer;

  margin-top: 2px;

  margin-bottom: 12px;

  margin-left: 0;

  display: block;

}



#contact-form input[type="submit"]:hover {

  background: url(../submit-button-orange-hover.jpg) no-repeat;

}



#response {

  padding: 10px;

  border: 1px #ddd solid;

  background-color: #eee;

  color: #9e0616;

}



.max-w-4xl {

  display: flex;

  align-items: flex-start;

}



.content-wrapper {

  flex-grow: 1;

}



.contact-sidebar {

  margin-left: 0;

}



.contact-sidebar p a {

  color: #f1881f;

  text-decoration: underline;

  font-weight: 600;

}



.contact-sidebar p a:hover {

  color: #804c19;

  text-decoration: underline;

  font-weight: 600;

}



.hide {

  display: none;

}



.form-container {

  display: block;

}



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

  #contact-form input[type="text"],

  #contact-form input[type="email"],

  #contact-form textarea {

    width: 100%;

    max-width: 100%;

  }

}

/* end contact*/



/* about picture */ 

.app_top img {

  float: left;

  margin: 6px 20px 6px 5px;

}

/* end about picture */



/* navbar */

#navbar {

  overflow: hidden;

}



#navbar a {

  float: left;

  display: block;

  color: black;

  text-align: center;

  text-decoration: none;

}



#navbar a:hover {

  text-decoration: underline;

  font-weight: 600;

  color: #f1881f;

}



.icon {

  float: left;

  display: block;

  font-size: 32px;

}



@media screen and (min-width: 767px) {

  .icon {

    display: none;

  }

}



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

  #navbar:not(.responsive) a:not(:last-child) {

    display: none;

  }

  #navbar:not(.responsive) a.icon {

    margin-left: 2%;

    float: left;

    display: block;

  }

}



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

  #navbar.responsive {

    position: relative;

  }



  #navbar.responsive a {

    float: none;

    display: block;

    text-align: left;

  }



  #navbar.responsive a:not(:last-child) {

    margin-top: 0;

  }



  #navbar.responsive a:not(:last-child):first-child {

    margin-top: 45px;

  }



  #navbar.responsive a.icon {

    position: absolute;

    left: 0;

    top: 0;

  }

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

}



.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



.dropdown-content a:hover {

  background-color: #f1f1f1;

}



.icon {

  position: relative;

}



.icon .dropdown-content {

  position: absolute;

  top: 100%;

  left: 0;

  display: none;

}



.icon:hover .dropdown-content {

  display: block;

}



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

  #navbar {

    display: none;

  }



  #responsiveNavbar:not(.responsive) {

    display: none;

  }



  #responsiveNavbar.responsive {

    display: flex;

  }

}

/* end navbar */



/* footer */

#footer p a {

  color: #f1881f;

  text-decoration: underline;

  font-weight: normal;

}

.footword {

  white-space: nowrap;

}



#footer p a:hover {

  color: #804c19;

  text-decoration: underline;

  font-weight: normal;

}



@media (max-width: 600px) {

  #footer {

    padding-left: 6rem;

    padding-right: 6rem;

  }

}

.tab-space {

  display: inline-block;

  width: 6px;

}

/* end footer */