body {
  font-family: "proxima-nova", sans-serif;
  display: none;
}

body.loaded {
  display: block;
}

.container-fluid {
  max-width: 1250px;
}

#ce-grid h2,
.popular-title {
  color: #3b4246;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 24px;
  font-weight: bold !important;
  line-height: 29px;
}

/*navbar*/

#mainNav.home .navbar-inner button {
  display: none;
}

#mainNav:not(.home) .navbar-inner {
  box-shadow: none;
  background-color: white;
}

#mainNav:not(.home) .navbar-inner {
  padding: 20px;
}

#mainNav button.btn-navbar,
#mainNav div.nav-collapse {
  z-index: 1;
}

@media (max-width: 768px) {
  #mainNav:not(.home) .btn-navbar:hover .icon-bar {
    background: silver;
  }
}

#mainNav li a {
  font-size: 15px;
  font-weight: bold;
  line-height: 17px;
  position: relative;
}

#mainNav.home .nav li a {
  color: white;
}

#mainNav.home .nav li a:hover {
  color: white;
}

#mainNav .nav li:hover a,
#mainNav .nav li.active a {
  color: #0086e6;
}

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

#mainNav li a:hover .caret,
#mainNav li.active a .caret {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 15px;
  border-top: auto;
  left: 15px;
  border-bottom: 2px solid #0086e6;
  border-right: 0;
  border-left: 0;
}

@media (max-width: 768px) {
  #mainNav {
    margin: 0;
  }
  #mainNav li a {
    font-size: 14px;
  }
  #mainNav li a:hover .caret,
  #mainNav li.active a .caret {
    display: none;
  }
  .nav-collapse .nav {
    margin-top: 10px !important;
  }
}

#mainNav.home .brand img {
  display: none;
}

#mainNav.home {
  position: absolute;
  left: 0;
  width: 100%;
}

#mainNav:not(.home) .brand {
  position: relative;
  width: 120px;
  margin: 0px;
  background-image: none;
  z-index: 1;
}

#mainNav .brand {
  position: absolute;
  left: 0;
  padding: 0;
  margin: 30px 0;
  width: 100%;
  max-width: 100%;
  height: 65px;
  background-image: url(https://s3.amazonaws.com/resources.crazyegg.com/help-scout/Logo.svg);
  background-repeat: no-repeat;
  background-size: 120px;
  background-position: center center;
  z-index: 1;
}

@media (max-width: 768px) {
  #mainNav .brand {
    max-width: 100%;
  }
}

/* Search */

#docsSearch {
  padding-top: 30px;
  padding-bottom: 120px;
  position: relative;
  background-color: #0086e6;
}

#docsSearch:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://s3.amazonaws.com/resources.crazyegg.com/help-scout/speckles-mono.svg);
  background-repeat: repeat;
  background-size: cover;
  opacity: 0.3;
}

#docsSearch h1 {
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 2.8rem;
  margin-top: 110px;
  margin-bottom: 40px;
  line-height: 1.2;
}

@media (max-width: 480px) and (max-width: 768px) {
  #docsSearch h1 {
    font-size: 28px !important;
  }
}

#docsSearch form#searchBar {
  width: 90%;
}

#docsSearch input.search-query {
  height: 60px;
  max-width: 482px;
  padding: 20px;
  border: none;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

#docsSearch input.search-query:focus {
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);
}

/* search results */

#docsSearch #serp-dd {
  max-width: 482px;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
}

#sidebar #serp-dd.sb {
  width: 100%;
}

/* Placeholder text color - must be on multi lines... */

#docsSearch input.search-query::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  opacity: 0.5;
  color: #3b4246;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  line-height: 22px;
}

#docsSearch input.search-query::-moz-placeholder {
  /* Firefox 19+ */
  opacity: 0.5;
  color: #3b4246;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  line-height: 22px;
}

#docsSearch input.search-query:-ms-input-placeholder {
  /* IE 10+ */
  opacity: 0.5;
  color: #3b4246;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  line-height: 22px;
}

#docsSearch input.search-query:-moz-placeholder {
  /* Firefox 18- */
  opacity: 0.5;
  color: #3b4246;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  line-height: 22px;
}

#docsSearch #searchBar {
  padding: 0;
  width: 565px;
}

#docsSearch #searchBar button {
  height: 60px;
  color: #0086e6;
  text-shadow: none;
  background-color: transparent;
  border: none;
  position: absolute;
  transform: translateX(-70px);
  right: auto;
  top: auto;
}

@media only screen and (max-width: 490px) {
  #docsSearch #searchBar button {
    transform: translateX(-40px);
  }
}

#docsSearch #searchBar button span {
  display: none;
}

#docsSearch #searchBar button i {
  display: block;
}

#docsSearch #searchBar button i::before {
  color: #0086e6;
  font-size: 22px;
}

#docsSearch #searchBar button:hover {
  background-color: transparent;
}

/* -------------- CATEGORY VIEW -------------------- */

.contentWrapper {
  padding: 0;
}

.contentWrapper #categoryHead {
  padding: 25px 45px 20px 45px;
  background-color: #0086e6;
  border-radius: 8px 8px 0 0;
}

.contentWrapper #categoryHead h1 {
  margin-bottom: 5px;
  color: #ffffff;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}

.contentWrapper #categoryHead p {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 18px;
}

#categoryHead .sort {
  right: 20px;
  top: 25px;
}

.contentWrapper .articleList {
  margin: 40px 50px;
}

.contentWrapper .articleList li {
  font-size: 1.2em;
}

.icon-article-doc:before {
  margin-right: 10px;
}

/* -------------- ARTICLE VIEW -------------------- */

#fullArticle .title,
.contentWrapper > h1 {
  margin: -1px -1px 30px -1px;
  padding: 25px 45px 25px 45px;
  background-color: #0086e6;
  border-radius: 8px 8px 0 0;
  color: #ffffff;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}

#fullArticle > * {
  margin: 0 45px;
}

#fullArticle p {
  font-size: 16px;
}

#fullArticle div {
  font-size: 16px;
}

#fullArticle section div {
  font-size: 16px;
}

#fullArticle .printArticle {
  right: 25px;
  top: 40px;
}

#fullArticle .printArticle {
  margin: 0 15px;
}

#fullArticle .printArticle i {
  color: white;
  opacity: 0.5;
}

#fullArticle table {
  width: initial;
}

#fullArticle li {
  font-size: 16px;
  margin-left: 30px;
}

.articleFoot {
  margin: 0 45px;
}

/*@media only screen and (max-width: 768px) {
  #fullArticle>*,
  .articleFoot,
  ul.articleList {
    margin: 0 20px !important;
  }
}*/
/* This appears to cause tablet article spacing to break */

/* -------------- SIDEBAR -------------------- */

#sidebar input.search-query {
  height: 40px;
  border: 1px solid #c8cdd6;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: none;
  color: #3b4246;
  font-family: "proxima-nova", sans-serif;
  font-size: 15px;
  line-height: 18px;
}

#sidebar h3 {
  font-size: 14px;
  font-weight: 600;
  color: #7786a0;
  margin-bottom: 15px;
}

#sidebar .nav-list li {
  margin-bottom: 20px;
}

#sidebar .nav-list a {
  padding: 0 15px 0 0;
  font-size: 16px;
  font-weight: normal;
}

#sidebar .nav-list li.active a {
  color: #0086e6;
}

#sidebar .nav-list li.active a:hover {
  color: #0086e6;
}

/* -------------- MAIN CONTENT -------------------- */

#main-content {
  background: none;
}

#main-content .contentWrapper {
  border-radius: 8px;
  border-color: #c8cdd6;
}

#main-content .contentWrapper.withRelated {
  border-radius: 8px 8px 0 0;
  border-bottom-style: dashed;
}

section.related {
  border-color: #c8cdd6;
  border-radius: 0 0 8px 8px;
  background-color: #fbfcfd;
}

@media only screen and (max-width: 768px) {
  #fullArticle .title,
  #categoryHead,
  .contentWrapper,
  .contentWrapper > h1,
  section.related {
    border-radius: 0 !important;
  }
  section.related {
    border-right: none;
    border-left: none;
  }
}

section.related h3 {
  color: #7786a0;
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
}

section.related li a {
  color: #0086e6;
}

/* -------------- CATEGORY LIST -------------------- */

.category-list {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  justify-content: center;
}

.category-list .category {
  display: block;
  margin: 0;
  width: auto;
  height: auto; 
  border: 1px solid #c8cdd6;
  border-radius: 6px;
  background-size: 60px;
  background-position: center 30px;
  background-repeat: no-repeat;
  transition: all ease 0.15s;
}

.category-list .category:hover {
  background-color: white;
  background-size: 60px;
  background-position: center 30px;
  background-repeat: no-repeat;
  border-color: white;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05), 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.category-list .category h3 {
  margin: 90px auto 7px;
  color: #3b4246;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .category-list .category {
    background-position: center 20px;
    background-size: 45px;
  }
  .category-list .category h3 {
    margin-top: 60px;
  }
}

.category-list .category p {
  max-width: 90%;
  margin: 0 auto;
  color: #6d6d6d;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
}

.category-list .category .article-count {
  margin: 10px auto 20px;
  color: #0086E6;
}

#category-345 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/getting-started-install/getstart-demos-img.svg");
}

#category-347 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/getting-started-install/getstart-install-img.svg");
}

#category-342 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/getting-started-install/getstart-101-guides-img.svg");
}

#category-343 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/snapshots/snaps-tracking-opt-img.svg");
}

#category-349 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/snapshots/snaps-faq-img.svg");
}

#category-346 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/snapshots/snaps-troubleshoot-img.svg");
}

#category-341 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/editor/edit-get-started-img.svg");
}

#category-344 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/account-management/acct-manage-img.svg");
}

#category-360 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/getting-started-install/getstart-demos-img.svg");
}

#category-389 {
  background-image: url("https://s3.amazonaws.com/resources.crazyegg.com/help-scout/icons/snapshots/snap-results-reports-img.svg");
}


@media (max-width: 768px) {
  .category-list {
    grid-template-columns: 49% 49%;
  }
  .category-list .category {
    margin-bottom: 10px;
  }
/*  .collection-category h2 {
    text-align: left !important;
  }*/
}

@media (max-width: 450px) {
  category-list {
    display: block;
  }
  .category-list .category {
    margin-bottom: 10px;
  }
/*  .collection-category h2 {
    text-align: left !important;
  }*/
}

/* -------------- PAGINATION -------------- */

.pagination {
  margin: 18px 50px;
}

.pagination li {
  font-size: 16px;
  font-weight: 600;
}

.pagination li.active {
  font-weight: 400;
}


/* -------------- DEFINITION LIST -------------- */

#fullArticle dt {
  font-size: 15px;
  min-width: 9px;
  background: #0086e6;
}

/* -------------- CONTACT PAGE -------------- */

#contactForm {
  padding: 45px;
}

#contactForm .control-group label {
  color: #3b4246;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 5px;
}

#contactForm .controls input[type="text"],
#contactForm .controls input[type="email"],
#contactForm .controls textarea {
  border: 1px solid #e1e6ef;
  padding: 0 10px;
  height: 35px;
  border-radius: 2px;
  background-color: #ffffff;
  color: #3b4246;
  font-size: 14px;
  line-height: 17px;
}

#contactForm .controls textarea {
  padding-top: 5px;
}

#contactForm .controls input[type="text"]:focus,
#contactForm .controls input[type="email"]:focus,
#contactForm .controls textarea:focus {
  border: 1px solid #0086e6;
  box-shadow: 0 0 3px 0 rgba(0, 134, 230, 0.3);
}

#contactForm input.btn {
  height: 35px;
  width: 60px;
  border: 1px solid #0086e6;
  border-radius: 2px;
  background: #0086e6;
  color: #ffffff;
  box-shadow: none;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

#fullArticle .callout.index-list {
  background: #F7F7F7;
  padding: 30px 30px 20px 30px;
}

#fullArticle .index-list:before, 
#fullArticle .index-list:after {
  display: table;
  content: "";
  line-height: 0
}
#fullArticle .index-list::after {
  clear: both;
}

#fullArticle .index-list h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 15px;
}

#fullArticle .index-list ul {
  float: left;
  width: 100%;
  list-style: none;
  padding-left: 0 !important;
  margin-left: 0;
}

#fullArticle .index-list li {
  float: left;
  width: 33.33%;
  list-style-type: none;
  font-size: 16px;
  margin-left: 0;
  padding-right: 15px;
  box-sizing: border-box;
}

/* -------------- FOOTER -------------- */

.footer-seperator {
  position: relative;
}

.footer-seperator hr {
  position: absolute;
  width: 100%;
  top: -215px;
  background: none;
  border-top: 1px dashed #c8cdd6;
  z-index: 1;
}

@media (max-width: 768px) {
  .footer-seperator {
    width: calc(100% + 40px);
    margin-left: -20px;
  }
}

footer {
  margin-top: 200px;
}

footer .contact-img {
  position: absolute;
  margin-top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

footer p {
  text-align: center;
}

footer p.contact-cta {
  margin-top: 55px;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

footer p.contact-cta a {
  color: #0086e6;
  font-weight: bold;
}

/* -------------- CONTACT MODAL -------------- */

#contactModal {
  border: none;
  border-radius: 10px 10px 8px 8px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

#contactModal h2 {
  background: #0086e6;
  margin: 0;
  padding: 18px;
  color: #ffffff;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
  border-radius: 8px 8px 0 0;
}

.modal #closeBtn {
  top: 20px;
}

#contactModal .icon-close:before,
.modal #closeBtn:hover .icon-close:before {
  color: white;
}

#contactModal form {
  margin: 10px;
}

#contactModal .controls {
  margin-left: 90px;
}

#contactModal .form-actions {
  padding-left: 90px;
}

#contactModal .control-label {
  width: 75px;
}

#contactModal label {
  color: #3b4246;
  font-size: 14px;
  line-height: 17px;
  text-align: right;
  padding-top: 0px;
}

#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal textarea,
#contactModal #md-message {
  width: 100%;
  max-width: 380px;
  box-sizing: content-box;
  padding: 0 10px;
  border: 1px solid #e1e6ef;
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: none;
}

#contactModal input[type="text"]:focus,
#contactModal input[type="email"]:focus,
#contactModal textarea:focus,
#contactModal #md-message:focus {
  border: 1px solid #0086e6;
  box-shadow: 0 0 3px 0 rgba(0, 134, 230, 0.3);
}

#contactModal input[type="text"],
#contactModal input[type="email"] {
  height: 30px;
}

#contactModal #md-message {
  padding: 10px;
}

#contactModal input[type="file"] {
  padding-top: 0;
}

#contactModal input.btn {
  height: 35px;
  width: 62px;
  border: 1px solid #0086e6;
  border-radius: 2px;
  background-color: #0086e6;
  background-image: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

.appMessage {
  top: -145px !important;
  width: 100% !important;
  font-size: 16px !important;
  line-height: 20px !important;
}

.appMessage.success {
  height: 20px;
  width: 193px;
  color: #ffffff;
  font-family: "proxima-nova", sans-serif;
  background: none !important;
  position: absolute;
}

.appMessage.success em {
  position: relative;
  background: none !important;
  color: #ffffff;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
}

.appMessage.success em:before {
  position: absolute;
  content: "✔";
  width: 20px;
  height: 20px;
  top: 2px;
  left: -30px;
  padding: 2px;
  border-radius: 50%;
  font-size: 14px;
  color: #0086e6;
  background: #ffffff;
}

/* -------------- CUSTOM ELEMENTS -------------- */

/*  ce-grid  */

#ce-grid {
  height: 100%;
  width: 90%;
  margin: -90px auto 60px;
  background: white;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

#ce-grid a {
  display: inline-block;
  padding: 0 10px;
  width: 50%;
  height: 310px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

#ce-grid a:hover {
  background: #f4f9fd;
  cursor: pointer;
}

#ce-grid img {
  margin: 45px auto 0;
}

#ce-grid h1 {
  margin: 15px auto 10px;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  color: #3b4246;
  font-size: 28px;
  line-height: 30px;
}

#ce-grid p {
  max-width: 360px;
  margin: 0 auto;
  color: #3b4246;
  font-family: "proxima-soft", "proxima-nova", sans-serif;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
}

#ce-grid a:nth-child(1) {
  border-top-left-radius: 8px;
  border-bottom: 1px dashed #c8cdd6;
  border-right: 1px dashed #c8cdd6;
}

#ce-grid a:nth-child(2) {
  border-top-right-radius: 8px;
  border-bottom: 1px dashed #c8cdd6;
}

#ce-grid a:nth-child(3) {
  border-bottom-left-radius: 8px;
  border-right: 1px dashed #c8cdd6;
}

#ce-grid a:nth-child(4) {
  border-bottom-right-radius: 8px;
}

@media (max-width: 750px) {
  #ce-grid img {
    max-width: 70px;
  }
  #ce-grid a {
    width: 100%;
    height: 300px;
    border-right: none !important;
    border-bottom: 1px dashed #c8cdd6;
  }
  #ce-grid h1 {
    font-size: 20px;
    line-height: 24px;
  }
  #ce-grid a:nth-child(1) {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  #ce-grid a:nth-child(3) {
    border-bottom-left-radius: 0px;
  }
  #ce-grid a:nth-child(4) {
    border-bottom: none;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}

@media (max-width: 320px) {
  #ce-grid img {
    max-width: 60px;
  }
  #ce-grid h1 {
    font-size: 20px;
    margin: 10px auto;
  }
}

/*  ce-popular  */

#ce-popular {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 20px auto 50px;
  padding: 30px 25px;
  border: 1px solid #c8cdd6;
  border-radius: 4px;
  background-color: rgba(0, 134, 230, 0.03);
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-row-gap: 15px;
}

@media (max-width: 768px) {
  #ce-popular {
    display: block;
  }
  #ce-popular li:not(:last-child) {
    margin-bottom: 15px;
  }
}

#ce-popular li {
  margin-left: 22px;
}

#ce-popular li a {
  color: #0086e6;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  vertical-align: middle;
}

#ce-popular li a:hover {
  color: #0086e6;
  text-decoration: none;
}