/* Colors and fonts*/
body {
	background: #E9E7DD;
	color: #9F9A8E;
	font-family: "Lato", serif;
	font-size: 17px;
	line-height: 1.5;
}
h1, h2, h3 {
	font-family: "Roboto", sans-serif;
	color: #4C4B42;
	letter-spacing: 0.07em;
}
h1 {
	font-size: 34px;
	font-weight: 700;
	font-style: normal;
}
h2 {
	font-size: 24px;
	font-weight: 500;
}
a {
  color: #9D9A8E;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: black;
  text-decoration: none;
}



/*Custom design*/

.container {
	width: 700px;
	margin: 40px auto;
}

@media (max-width: 960px) {
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  .container {
    width: 300px;
  }
}

.card-white {
	background-color: white;
	padding: 40px;
	box-shadow: 0px 10px 30 px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	margin: 20px 0px;
	text-align: center;
}
.img-circle {
	border-radius: 50%;
}
.btn-brown {
	background-color: #9D9A8E;
	color: #E9E7DD;
	padding: 15px 20px;
	border-radius: 4px;
}
.btn-brown:hover {
	background-color: #4C4B42;
	color: black;
}
.list-inline {
	list-style: none;
	padding-left: 0px;
}
.list-inline Li {
	display: inline;
	padding: 10px;
}
.list-inline i {
	font-size: 50px;
	color: #9D9A8E;
}
.list-inline i:hover {
	color: #4C4B42;
}

#introduction p {
	margin-bottom: 40px;
}