html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
  font: normal 14px arial,sans-serif;

	font-family: "Helvetica neue";
	font-family: "Futura";
	font-family: Futura, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	letter-spacing: 1.2px;
	line-height: 1.5;
	color: #000000;
}


           *, *:before, *:after {box-sizing:  border-box !important;}


.menu {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;

}

.menu-category {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%;
}

hr {
  border: 2px solid #555;
  //margin: 0px;

}



 h2 {
 	color: #333;
 }
 @media (max-width: 767px) {
 	 h1 {
 		font-size:16px;
 	}
 	 h2 {
 		font-size:14px;
 	}
 }

 .sub-h2 {
 	text-decoration: underline;
 }

 .header-doty {
 	max-width: 500px;
 }
 @media (max-width: 767px) {
 	 .header-doty {
 		max-width: 280px;
 	}
 }

 .menu-category:hover {
 	background-color: rgba(0,0,0,0.05);
 }
 .menu-category img {
 	margin-bottom: 10px;
 }

.icons img {
	max-width: 40px;
}

.contact_form {
  display: block;
  //margin: 0 auto;
  width: 100%;
  max-width: 300px;
}

input, textarea, .btn {
  border: 2px solid #333 !important;
  background-color: #fff
}

textarea {
  min-height: 150px;
}

a {
  color: #333;
}
a:hover {
  color: #000;
}
.btn:hover {
  background-color: #333;
  color: #fff;
}


.projects-grid {
  margin: 0 auto;
}

.project-item {
  width: calc(33.333% - 20px);
  margin: 0 10px 20px;
  padding: 10px;
}

.project-item img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.project-item:hover {
  background-color: rgba(0,0,0,0.05);
}

@media (max-width: 992px) {
  .project-item {
    width: 50%;
    padding: 10px;
  }
}

@media (max-width: 600px) {
  .project-item {
    width: 100%;
    padding: 10px;
  }
}