@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
* {
	font-family: 'Open Sans', sans-serif;
}

a, .nav-item a{
	color: #396a48 !important;
}
a:hover, .nav-item a:hover{
	color: #333 !important;
}
a.dropdown-item:focus{
	background-color: #f7f7f7 !important;
}
a.btn:focus{
	background-color: #44694b !important;
}
h1, h2, h3, h4{
	color: #58595b !important;
}
h4#brandbook{
	color: #1e2f29 !important;
}

.logo img{
	max-width: 285px;
	height: auto;
	margin: 0 auto; 
	padding: 56px 0 0 0;

}

footer p{
	text-align: center;
}

.icon-list {
	padding-left: 0;
	list-style: none;
  }
  .icon-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: .25rem;
  }
  .icon-list li::before {
	display: block;
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	margin-right: .5rem;
	content: "";
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b9cbc4' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
  }


  /* SUB TOPICS */
  .topic h1{
	  font-weight: 700;
	  font-size: xx-large;
  }
  .topic h2{
	  font-weight: 700;
	  font-size: x-large;
	  color: #b9cbc4 !important;
	  padding-bottom: 8px;
  }
  .topic h3{
	  font-weight: 600;
	  font-size: large;
	  /* font-style: italic; */
	  font-variant: small-caps;
  }

  ul.sub-topic{
	  margin: 0;
	  padding: 0;
  }
  ul.sub-topic li{
	  list-style-type: none;
  }
  ul.sub-topic li ul li{
	  list-style-type: square;
  }
  ul.sub-topic li ul li ul li{
	list-style-type: circle;
}
	ul.sub-topic li p.social-brand{
	text-transform: uppercase;
	color: #396a48;
	font-size: 1.2rem;
	border-bottom: 1px solid #ccc;
  }

  ul.sub-topic li p.social-brand.not-first{
	  margin-top: 20px;
  }

  .btn-primary{
	  color: rgba(255,255,255,0.9) !important;
	  background-color: #396a48 !important;
	  border: 1px solid #396a48;
  }
  .btn-primary:hover{
	  color: #fff !important;
  }
  i.bi{
	  color:#396a48;
  }

  img.profile-img{
	  /* max-width: 100%;
	  height: auto; */
  }
  .profile-example{
	  padding: 15px;
	  margin-bottom: 10px;
	  border: 1px solid #eee;
	  border-radius: 6px;
	  background-color: #f8f8f8;
	  text-align: center;
  }
  img.img-screenshot{
	  padding: 5px;
	  border-radius: 3px;
	  border: 1px solid #eee;
  }