@import url('https://fonts.googleapis.com/css?family=Source+Serif+4:100,200,300,400,400i,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+3:100,200,300,400,400i,500,600,700&display=swap');
/* */

body {
	background: #f8f9fa;
}
/* Home Page Title */

#docsSearch h1 {
	font-size: 36px;
	font-weight: 600;
	text-align: center;
	margin-top: .4em;
	font-family: "source sans 3", sans-serif;
	color: #26272c;
	padding: 10px;
}
.navbar .nav li {
	display: inline-block;
	float: none;
	font-family: "source serif 4", sans-serif;
	font-size: 13px;
	letter-spacing: .1em;
}
.navbar .nav li a, .navbar .icon-private-w {
	font-size: 18px;
    font-weight: 400;
}

/* Header Size */

a.brand > img {
	max-width: 100%;
	vertical-align: middle;
	border: 0;
/*	height: 60px; */
	margin-left: 0px;
	width: auto;
}

/* .navbar .navbar-inner {
	background: #ffffff;
	height: 60px;
}
.navbar .navbar-inner .container-fluid {
	padding: 0;
	height: 60px;
}
.navbar .brand {
	float: left;
	display: block;
	padding: 0px;
	margin-left: -18px;
	font-size: 18px;
	font-weight: 180;
	color: #777;
	text-shadow: 0 1px 0 #fff;
} */

.navbar {
  max-width:  1080px;
  margin:  0 auto 2em auto;
}

.navbar .nav {
	position: static;
	margin: 0 auto;
	margin-left: 154px;
	float: left;
	text-align: center;
}
.navbar .nav li a, .navbar .nav li.active a {
	padding:  2em 0.5em;
	font-family: "source sans 3",
	sans-serif;
	color: #26272c;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.navbar .nav li a:hover, .navbar .nav li.active a:hover {
	color: #26272c;
	text-decoration: underline;
}
/* Home Page Search Bar Background */

#docsSearch {
	background-color: #ffffff;
/*	border-top: 1px solid #dadada; */
	margin-bottom: 3em;
	padding: 1.5em 0;
}
/* Search Input Box */

input.search-query {
	padding-right: 18px;
	padding-right: 4px \9;
	padding-left: 18px;
	padding-left: 4px \9;
	margin-bottom: 0;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-family: "source sans 3",
	sans-serif;
	font-size: 18px;
	color: #26272c;
	font-weight: 400;
}

/*
-------------------------------------------------------------------------------
Home page category list
-------------------------------------------------------------------------------
*/

/* Home Page Category Title */

.category-list h3 {
	color: #26272c;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3em;
	font-family: "source sans 3", sans-serif;
}

/* Category Styles */

.category-list .category p {
	color: #26272cb3;
	font-family: "source sans 3", sans-serif;
	font-weight: 400;
	font-size: 18px;
}

.category-list .category .article-count {
	color: #26272cb3 !important;
	Background-color: transparent !important;
	margin: 0;
	display: none;
}

.category-list .category {
	background-color: #fff;
	background-position: top 18px 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: 80px;
	padding: 18px 15px 18px 15px;
	position: relative;
	width: 31.5%;
	transition: all 0.2s;
}
.category-list .category:hover {
	text-decoration: none;
	background: #fbfcfd;
	border: 1px solid #cbcccd;
	font-size: 15px;
}


.collection-category h2 {
    font-weight: 500;
    margin: 0 0 18px;
    text-align: center;
    padding-left: 0%;
    font-family: "source sans 3", sans-serif;
    /* text-transform: uppercase; */
    color: #26272c;
    font-size: 22px;
}

.collection-category h2 a {
    font-family: "source sans 3", sans-serif;
    color: #3db890;
    font-size: 30px;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}

/*
-------------------------------------------------------------------------------
Home page search
-------------------------------------------------------------------------------
*/

/* Typeahead search results */

#serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
	color: #26272c;
	margin-top: 15px;
	text-decoration: none;
	font-family: "source sans 3",
	sans-serif;
	font-size: 18px;
	font-weight: 400;
}
#serp-dd .result a:hover, .most-pop-articles .popArticles a:hover span {
	color: #26272c;
	margin-top: 15px;
	font-family: "source sans 3",
	sans-serif;
	font-size: 18px;
	font-weight: 400;
}
.category-list .category:hover .article-count {
	color: #26272c;
	margin-top: 15px;
	font-family: "source sans 3",
	sans-serif;
	font-size: 18px;
	font-weight: 400;
}

/* Home Page Search Button */

#searchBar button {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #00b5e2;
	border-radius: 0 5px 5px 0;
	border: 1px solid #00b5e2;
	font-family: "source sans 3",
	sans-serif;
	font-size: 18px;
	letter-spacing: 0.01em;
	padding: 0 1.5em;
	height: 50px;
	position: absolute;
}
#searchBar button:hover {
	background: #00a5ce;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	border: 1px solid #2ad7d7;
}
input, button, select, textarea {
	font-family: "source serif 4",
	sans-serif;
}


/* 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-123 {
	background-image: url(https://storage.myhostingprovider.com/public/images/123-getting-started.png);
}

/* Setup Users */
#category-456 {
  background-image: url(https://storage.myhostingprovider.com/public/images/456-setup-users.png);
}

/* Uploading Files */
#category-223 {
  background-image: url(https://storage.myhostingprovider.com/public/images/223-uploading-files.png);
}

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

/*
-------------------------------------------------------------------------------
Category view
-------------------------------------------------------------------------------
*/

/* Side Bar Styles */

#sidebar .nav-list a {
	display: inline-block;
	color: #26272C;
	font-size: 18px;
	padding: 6px 15px 6px 0;
	line-height: 18px;
	margin-left: 0;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 400;
}
#sidebar .nav-list a:hover {
	display: inline-block;
	color: #26272C;
	font-size: 18px;
	padding: 6px 15px 6px 0;
	line-height: 18px;
	margin-left: 0;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 400;
	text-decoration: underline;
}
#sidebar .nav-list a:focus {
	display: inline-block;
	color: #0b0b0d;
	font-size: 18px;
	padding: 6px 15px 6px 0;
	line-height: 18px;
	margin-left: 0;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 500;
	text-decoration: underline;
}
#sidebar .nav-list .active a {
	font-family: "source sans 3",
	sans-serif;
	font-weight: 600;
	color: #26272C;
	font-size: 18px;
	background: 0 0;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: .01em;
}
#sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
	font-family: "source sans 3",
	sans-serif;
	font-weight: 600;
	color: #26272C;
	font-size: 18px;
	background: 0 0;
	text-shadow: none;
	text-decoration: underline;
}
#sidebar h3 {
	text-transform: uppercase;
	font-size: 17px;
	color: #26272C;
	opacity: 0.7;
	font-weight: 700;
	margin-bottom: 4px;
	font-family: "source sans 3",
	sans-serif;
	letter-spacing: 0.00em;
}

#categoryHead p {
	color: #26272cb3;
	font-family: "source sans 3", sans-serif;
	font-weight: 400;
	font-size: 18px;
}

#categoryHead .sort {
  display: none;
}

/* Article list */
.articleList {
	margin: 38px 0 38px 0px;
	font-size: 1em;
}
.articleList span {
	font-size: 20px;
	font-weight: 500;
}
.articleList i {
	display:none;
}


/*
-------------------------------------------------------------------------------
Article view
-------------------------------------------------------------------------------
*/

/* Article view search box font */
#sidebar form .search-query {
    font-size: 18px;
}

/* Article Styles */

.icon-print {
	color: #89898e;
}

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
	margin: 0 30px .5em 0;
	font-family: "source sans 3",
	sans-serif;
	color: #26272c;
	font-weight: 600;
	font-size: 36px;
}
#fullArticle .printArticle {
	position: absolute;
	right: 46px;
	top: 40px;
}
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
	color: #26272c;
	font-family: "Source Serif 4",
	sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -.01em;
}
#categoryHead .sort select {
	width: 232px;
	height: 32px;
	margin: 0;
	line-height: 24px;
	font-size: 16px;
	color: #26272c;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 400;
}


/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
	color: #26272c;
}
#fullArticle h2 {
	font-size: 28px;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 600;
	color: #26272c;
}
#fullArticle h3 {
	font-size: 22px;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 600;
	color: #26272c;
}
#fullArticle h4 {
	font-size: 20px;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 600;
	color: #26272c;
    font-style: italic;
}
.contentWrapper p {
	margin-top: -4px;
	word-wrap: break-word;
	font-family: "source serif 4",
	sans-serif;
	color: red;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
	color: #26272c;
	display: none;
/*	display: inline-block; */
	font-family: "source serif 4",
	sans-serif;
	font-weight: 400;
	font-style: italic;
}

/* Page Footers */

footer p a {
	color: #808080;
	font-family: "source sans 3",
	sans-serif;
	font-weight: 400;
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
	background: #fff;
	margin: 0;
	padding: 11px 0 10px 18px;
	font-size: 22px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	font-family: "source serif 4",
	sans-serif;
	color: #58A4B0;
	font-weight: 400;
}
#contactModal .control-label {
	width: 110px;
	font-family: "source serif 4",
	sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #26272c;
}

.btn {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #03d3d5;
	border-radius: 5px;
	border: 1px solid #b98389;
	font-size: 18px;
	padding: .5em;
	/* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
	border-radius: 5px;
	border: 1px solid #9da39a;
	font-size: 18px;
	padding: 0 1.5em;
	height: 50px;
}

.category-list {
    text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
	section.category-list .category {
		width: 48.2%;
		padding: 18px 18px 15px;
	}
}
@media screen and (max-width: 760px) {
	section.category-list .category {
		box-sizing: border-box;
		margin: 0 0 18px;
		padding: 18px 18px 15px;
		width: 100%;
	}
}
/* RESPONSIVE */

@media (max-width: 768px) {
	.navbar .btn-navbar {
		margin-top: 16px;
		right: -10px;
	}
	.related {
		padding: 30px 25px 25px;
	}
	.related ul {
		margin-left: 0;
	}
	.related h3 {
		padding-left: 0;
	}
	.related ul>li a {
		margin-left: 0;
	}
}
@media (max-width: 480px) {
	#searchBar button {
		color: transparent;
		text-shadow: 0;
		background: transparent;
		border-radius: 0 5px 5px 0;
		border: 0;
		font-size: 18px;
		padding: 0 1.5em;
		height: 50px;
		position: absolute;
	}
	#searchBar button .icon-search {
		display: block;
		text-shadow: none;
		margin-top: 15px;
	}
	#searchBar button:hover .icon-search:hover {
		display: block;
		text-shadow: none;
		margin-top: 15px;
		background-color: transparent;
	}
}
@media (max-width: 480px) {
	#fullArticle .title, .contentWrapper h1 {
		font-size: 24px;
	}
	#fullArticle h2 {
		font-size: 18px;
	}
}


/* Collection Titles  */
.collection-category h2 a {
    color: #26272c;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 18px;
    padding-left: .65%;
    font-family: "source serif 4",
    sans-serif;
    text-align: center;
}