/* Custom Help Scout StyleSheet - by Devan Sabaratnam (founder of HR Partner - www.hrpartner.io) */
/* Color pallette chosen from https://coolors.co/54494b-7e8287-9da39a-b98389-db2955 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,400i,500,700');
/* */

/* Home Page Category Title*/

.category-list h3 {
	color: #db2955;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3em;
	font-family: "Open Sans", sans-serif;
}

/* Category Styles */

.category-list .category p {
	color: #7e8287;
	font-family: "Open Sans", sans-serif;
	font-weight: 100;
	font-size: 15px;
	letter-spacing: 0.25px;
}
.category-list .category {
	background-color: #fff;
	background-position: top 20px center !important;
	background-repeat: no-repeat !important;
	background-size: 100px auto !important;
	box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	min-height: 183px;
	padding: 120px 20px 15px;
	position: relative;
	width: 31.5%;
	transition: all 0.2s;
}
.category-list .category:hover {
	text-decoration: none;
	background: #f7f7f9;
}


/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/


/* Getting Started (use your actual category names here in the comment to make it easier) */
#category-22 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235fc26b' d='M9.499 15.09a.41.41 0 0 1-.41.41h-2.18a.41.41 0 0 1 0-.818H9.09a.41.41 0 0 1 .409.409m-1.5-7.772a.682.682 0 1 0 0-1.363a.682.682 0 0 0 0 1.363m6.386 3.096l-.843 3.79a.955.955 0 0 1-1.52.546l-1.896-1.432H5.874L3.976 14.75a.954.954 0 0 1-1.523-.545l-.84-3.791a.96.96 0 0 1 .198-.818l1.977-2.37c.061-.86.256-1.704.578-2.503C5.233 2.549 6.788 1.186 7.416.7a.955.955 0 0 1 1.17 0c.628.486 2.181 1.85 3.05 4.023c.321.799.516 1.643.578 2.503l1.977 2.37a.96.96 0 0 1 .194.818M5.971 12.5h4.055c1.495-2.622 1.781-5.136.848-7.474c-.815-2.045-2.342-3.332-2.79-3.681a.136.136 0 0 0-.17 0c-.449.347-1.977 1.636-2.79 3.681c-.934 2.338-.648 4.852.847 7.474m-.768.3c-.818-1.465-1.288-2.904-1.406-4.308L2.44 10.119a.14.14 0 0 0-.028.117l.843 3.793a.136.136 0 0 0 .218.077l.01-.007zm8.357-2.68l-1.356-1.628c-.117 1.404-.586 2.843-1.406 4.308l1.72 1.295l.01.008a.14.14 0 0 0 .13.022a.14.14 0 0 0 .087-.099l.844-3.79a.14.14 0 0 0-.031-.117z'/%3E%3C/svg%3E");
}

/* etc... keep going and add one CSS ID selector for each category. */