@font-face {
  font-family: "hkgrotesk_regular";
  src: local("hkgrotesk-regular"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-regular-webfont.woff2")
      format("woff2"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-regular-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "hkgrotesk_bold";
  src: local("hkgrotesk-bold"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-bold-webfont.woff2")
      format("woff2"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-bold-webfont.woff")
      format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "hkgrotesk_bolditalic";
  src: local("hkgrotesk-bolditalic"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-bolditalic-webfont.woff2")
      format("woff2"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-bolditalic-webfont.woff")
      format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "hkgrotesk_semibold";
  src: local("hkgrotesk-semibold"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-semibold-webfont.woff2")
      format("woff2"),
    url("https://relode2prodimages.blob.core.windows.net/public/fonts/hkgrotesk-semibold-webfont.woff")
      format("woff");
  font-weight: bold;
  font-style: italic;
}

:root {
  --green: #6eedb8;
  --darkgreen: #3db890;
  --white: #ffffff;
  --navy: #21006e;
  --lightblue: #a6d3f4;
  --black: #000000;
  --grey: #7e8287;
  --pink: #e35afc;
}

body {
  background: #fbfbfc;
}

/* establishing the link hover effect */
a {
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 2px 0px 0px var(--green), 0 0 0 0 var(--green) inset;
  cursor: "pointer";
  font-family: "hkgrotesk_semibold", sans-serif;
  color: #000000;
  font-size: 18px;
}

a :hover {
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 2px 0px 0px var(--green), 0 -0.8rem 0 0 var(--green) inset;
  text-decoration: none;
}

.navbar .nav .active .caret {
  display: none;
}

.icon-arrow::before {
  display: none;
}

/* disabling the link hover effect in category cards */
a h3:hover,
a p:hover,
a span:hover {
  box-shadow: none;
  text-decoration: none;
}

/* hiding the carot icon */
.icon-article-doc {
  display: none;
}

/* Home Page Title */

#docsSearch h1 {
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  margin-top: 0.4em;
  font-family: "hkgrotesk_bold", sans-serif;
  color: var(--navy);
  padding: 10px;
  text-transform: lowercase;
}
.navbar .nav li {
  display: inline-block;
  float: none;
  font-family: "hkgrotesk_bold", sans-serif;
  color: var(--navy);
  font-size: 16px;
  text-transform: lowercase;
}
.navbar .nav li a,
.navbar .icon-private-w {
  font-size: 16px;
  color: var(--navy);
}

.navbar .nav li a:hover {
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 2px 0px 0px var(--green), 0 -0.8rem 0 0 var(--green) inset;
  text-decoration: none;
  color: var(--navy);
}

.navbar .nav > li > a {
  padding: 0;
}

/* Header Size */

a.brand > img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  height: 40px;
  margin-left: 15px;
  width: auto;
  box-shadow: none;
}

.navbar .navbar-inner {
  background: #ffffff;
  /* height: 60px; */
}

.navbar .brand {
  box-shadow: none;
  text-decoration: none;
}
/* Home Page Search Bar Background */

#docsSearch h1 {
  color: var(--navy);
  display: block;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.35px;
  line-height: 55px;
  margin: 0;
  /* padding-top: 3.25em; */
  position: relative;
  text-align: center;
  z-index: 2;
  margin-top: 48px;
}

#docsSearch {
  background: var(--lightblue);
  border-top: 1px solid #dadada;
  margin-bottom: 3em;
  padding: 1.5em 0;
  background-image: url("https://cdn-img.relode.com/public/helpscout/helpscoutsearchbackground.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  image-rendering: -webkit-optimize-contrast;
}

/* Home Page Category Title*/

.category-list h3 {
  color: var(--navy);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3em;
  font-family: "hkgrotesk_bold", sans-serif;
  text-transform: lowercase;
}

/* Category Styles */

.category-list .category p {
  color: #7e8287;
  font-family: "hkgrotesk_regular", 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; */
  box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px,
    rgba(220, 223, 226, 0.3) 0px 30px 60px 0px,
    rgba(0, 0, 0, 0.1) 0px 8px 20px 0px;
  background-color: #fff;
}

.collection-category h2 {
  font-weight: 500;
  margin-bottom: 20px;
  font-family: "hkgrotesk_bold", sans-serif;
  text-transform: lowercase;
  color: var(--black);
  font-size: 26px;
}

.collection-category h2 a {
  text-transform: lowercase;
  font-size: 26px;
  box-shadow: none;
}

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

input,
button,
select,
textarea {
  font-family: "hkgrotesk_regular", sans-serif, "Helvetica Neue", Helvetica,
    Arial, 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.
*/

/* Sourcer User Role - getting started */
#category-171 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/getting started.png');
}

/* Sourcer User Role - how it works */
#category-168 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/howitworks.png');
}

/* Sourcer User Role - networking */
#category-191 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/networking.png');
}

/* Sourcer User Role - sourcing tools & partners */
#category-177 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/sourcing.png');
}

/* Sourcer User Role - understanding your platform */
#category-185 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/platform.png');
}

/* TA Candidate Management */
#category-37 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/candidates.png');
}

/* TA Getting Started */
#category-10 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/getting started.png');
}

/* TA Sourcing Tools and Partners */
#category-107 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/sourcing.png');
}

/* TA Understanding Your Platform */
#category-25 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/platform.png');
}

/* Candidates - How it works */
#category-159 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/howitworks.png');
}

/* Networkers - Candidates and Contractors */
#category-82 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/candidates.png');
}

/* Networkers - How To's */
#category-55 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/networking.png');
}

/* Networkers - Platform How To's */
#category-56 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/platform.png');
}

/* Networkers - Relode Process */
#category-57 {
  background-image: url('https://relode2prodimages.blob.core.windows.net/public/helpscout/process.png');
}

/* Client - ATS Connectors */
#category-132 {
  background-image: url(https://cdn-img.relode.com/public/helpscout/connector.png);
}

/* Client - Insights */
#category-96 {
  background-image: url(https://cdn-img.relode.com/public/helpscout/insights.png);
}

/* Client - Relode system */
#category-151 {
  background-image: url(https://cdn-img.relode.com/public/helpscout/platform.png);
}

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

/* Side Bar Styles */

#sidebar .nav-list a {
  display: inline-block;
  color: #000000;
  font-size: 16px;
  text-transform: lowercase;
  line-height: 20px;
  margin-left: 0;
  font-family: "hkgrotesk_regular", sans-serif;
  font-weight: 300;
  box-shadow: none;
}
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  font-family: "hkgrotesk_semibold", sans-serif;
  font-weight: 500;
  color: var(--navy);
  background: 0 0;
  text-shadow: none;
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 0px 0px 0px var(--green), 0 -0.1rem 0 0 var(--green) inset;
  text-decoration: none;
  text-transform: lowercase;
}

.nav-list li active {
  box-shadow: 0 0px 0px 0px var(--green), 0 -0.1rem 0 0 var(--green) inset;
}

#sidebar .nav-list a:hover {
  box-shadow: 0 2px 0px 0px var(--green), 0 -0.8rem 0 0 var(--green) inset;
}

#sidebar h3 {
  font-size: 22px;
  color: #000000;
  margin-bottom: 4px;
  font-family: "hkgrotesk_semibold", sans-serif;
  text-transform: lowercase;
}

/* Article Styles */

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

#fullArticle .title,
.contentWrapper h1 {
  margin: 0 1em 1.2em 0;
  margin: 0 30px 0.5em 0;
  font-family: "hkgrotesk_regular", sans-serif;
  color: var(--navy);
  font-weight: 700;
  text-transform: lowercase;
}

#fullArticle .printArticle {
  position: absolute;
  right: 46px;
  top: 40px;
  margin: 0;
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--black);
  font-family: "hkgrotesk_regular", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 1.5em;
}
#categoryHead .sort select {
  width: 150px;
  height: 24px;
  margin: 0;
  line-height: 24px;
  font-size: 13px;
  color: var(--black);
  font-family: "hkgrotesk_regular", sans-serif;
  font-weight: 300;
}

#sortBy {
  display: none;
}

/* Header Size */

.navbar .navbar-inner .container-fluid {
  padding: 0;
  height: 60px;
}

.navbar .nav {
  padding-top: 14px;
  margin: 0;
}

.navbar .nav li a {
  padding-bottom: 0;
}

.navbar .nav .active {
  box-shadow: 0 0px 0px 0px var(--green), 0 -0.1rem 0 0 var(--green) inset;
}

.nav li {
  margin-bottom: 12px;
  margin-right: 40px;
}

.nav li a {
  padding: 0;
}

/* Home Page Link Style */

#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 {
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--grey);
  margin-top: 15px;
  text-transform: lowercase;
  text-decoration: none;
  font-family: "hkgrotesk_regular", sans-serif;
  font-weight: 500;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count,
.contentWrapper a {
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--black);
  margin-top: 15px;
  text-transform: lowercase;
  font-family: "hkgrotesk_regular", sans-serif;
  font-weight: 500;
}

.result a {
  box-shadow: none;
}

.result a:hover {
  background: var(--green);
  background-color: var(--green);
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background-color: var(--green);
  background: var(--green);
}

.articleList a:hover {
  text-decoration: none;
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 2px 0px 0px var(--green), 0 -0.8rem 0 0 var(--green) inset;
  color: var(--black);
}

.articleList a span {
  font-size: 20px;
  text-transform: lowercase;
  text-decoration: none;
}

.articleList a span:hover {
  font-size: 20px;
  text-transform: lowercase;
  text-decoration: none;
}

.articleList a {
  margin: 0;
  margin-bottom: 8px;
}

.articleList li {
  padding-left: 0;
}

#categoryHead .sort select {
  width: 150px;
  height: 24px;
  margin: 0;
  line-height: 24px;
  font-size: 13px;
  color: #7e8287;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
  color: var(--pink);
}
#fullArticle h2 {
  text-transform: lowercase;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: var(--pink);
}
#fullArticle h3 {
  text-transform: lowercase;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--pink);
}
#fullArticle h4 {
  text-transform: lowercase;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: var(--pink);
  font-style: italic;
}
.contentWrapper p {
  margin-top: -4px;
  word-wrap: break-word;
  font-family: "Open Sans", sans-serif;
  color: var(--pink);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* Article Footers */

.articleFoot p.lu,
.articleFoot time.lu {
  display: none;
}

/* Page Footers */

footer p a {
  color: #7e8287;
  font-family: "hkgrotesk_regular", sans-serif;
  font-weight: 300;
  font-size: 11px;
  box-shadow: none;
  text-decoration: none;
}

/* 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: "Open Sans", sans-serif;
  color: #58a4b0;
  font-weight: 300;
}
#contactModal .control-label {
  width: 110px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #7e8287;
}

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

#fullArticle .title,
.contentWrapper h1 {
  font-family: "hkgrotesk_bold";
  font-weight: 400;
}

/* 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%;
  }
  #docsSearch h1 {
    padding-top: 0;
  }
}

@media screen and (max-width: 760px) {
  section.category-list .category {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 120px 20px 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) {
  #fullArticle .title,
  .contentWrapper h1 {
    font-size: 24px;
    font-family: "hkgrotesk_bold";
  }

  #fullArticle h2 {
    font-size: 20px;
  }
}

.contentWrapper,
.related {
  background-color: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
    rgb(241, 243, 245) 0px 5px 20px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px;
  padding: 30px;
  word-break: break-word;
  font-size: 18px;
  text-decoration: none;
}

.related h3 {
  text-transform: lowercase;
}

.related ul > li a {
  font-size: 18px;
  text-decoration: none;
}

.related ul > li a:hover {
  transition: box-shadow 400ms cubic-bezier(0.33, 0, 0, 1);
  box-shadow: 0 2px 0px 0px var(--green), 0 -0.8rem 0 0 var(--green) inset;
  text-decoration: none;
  color: var(--black);
}

.related span {
  font-family: "hkgrotesk_regular";
  text-transform: lowercase;
}

.related a:hover {
  text-decoration: none;
}

.related ul li a span:hover {
  text-decoration: none;
  color: var(--black);
}

#fullArticle .printArticle {
  box-shadow: none;
}

#searchBar button {
  font-family: "hkgrotesk_semibold", sans-serif;
  color: var(--navy);
  background: var(--green);
  border: none;
  text-shadow: none;
  text-transform: lowercase;
}

#searchBar button:hover {
  background: var(--darkgreen);
}

#searchBar button i {
  color: var(--navy);
}