@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

/* Base Styles */

* {
    list-style: none;
}
.clear {
    clear: both;
}
hr {
    height: 1px;
    background-color: #DEDEDE;
    border: none;
    width: 1200px;
    margin: 30px auto;
    size: 10px;
}
strong {
    font-weight: 500;
}
.date {
    font-weight: 500;
    color: #ee5042;
}
.read-more {
    border: 1px solid #D0D0D0;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 14px;
    color: #ee5042;
    border-radius: 4px;
    transition: border .2s;
}
.read-more:hover {
  border-color: #ee5042;
  color: #ee5042;
}
.examples {
    margin-left: 10px;
}

@media (max-width: 750px) {
    hr {
        width: 100%;
        margin: 30px auto;
    }
}

.section-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #141C34;
  background-image: url('../images/Data-1 2.png');
  padding: 60px 0px 100px 0px
}

@media (max-width: 750px) {
  .section-hero {
    padding: 20px 0px 40px 0px
  }
}

.hero-wrap {
    background-color: #141C34;
    position: absolute;
    overflow: hidden;
    height: 100%;
    width:100%;
    z-index: 1;
    top: 0;
    left: 0;
}

#wrapper{
  width: 100%;
  height: 100%;
  overflow: scroll;
}


/* Nav */

#nav {
    padding: 25px 50px 5px;
    background-color: #ee5042;
}
#nav ul {
    float: left;
    margin-right: 10px;
}
#nav ul li {
    float: left;
    margin-top: 20px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}
@media (max-width: 550px) {
    #nav {
        padding: 25px 5% 5px;
    }
}

.navbar-toggler-icon {
  background-image: url("../images/hamburger-menu.svg") !important;
  width: 2em !important;
}

.navbar-toggler {
  border: 0px !important;
} 

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-expand-lg .navbar-collapse {
  align-items: baseline;
}

.navbar-text {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 40px;
  color: #888887;
  text-decoration: none;
}

@media (max-width: 1000px) {
  .navbar-text {
    display: none;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: #F8F6EF;
    margin-top: 10px;
    padding: 20px 10px;
  }
}

.header-section {
  background-color: #141C34;
}

/* Inner Nav */

#inner-nav {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #141C34;
}
#inner-nav ul {
  margin-left: 15px;
}
#inner-nav ul li {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0px;
}

#inner-nav ul li a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  font-family: 'Exo', sans-serif;
  padding-bottom: 2px;
  height: 38px;
  padding-right: .7rem;
}

#inner-nav a {
  color: #FFFFFF;
}

@media (max-width: 991px) {
  #inner-nav a {
    color: #2646B1;
  }

  #inner-nav ul li {
    border-bottom: 1px solid #ECECEC;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Hover / Active Nav Classes */
#feature-guides-hover:hover {
  background-image: url('../images/feature-guides-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

#assessment-hover:hover {
  background-image: url('../images/assessment-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

#podcast-hover:hover {
  background-image: url('../images/podcast-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

#about-hover:hover {
  background-image: url('../images/about-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

/* Active Menu Item Classes */
#assessment-active {
  background-image: url('../images/assessment-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

#podcast-active {
  background-image: url('../images/podcast-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

#about-active {
  background-image: url('../images/about-hover.svg');
  background-repeat: no-repeat;
  background-position: bottom right; 
  z-index: 2;
}

/* Disable Hover and Active Classes on Mobile */
@media (max-width: 991px) {
  #feature-guides-hover:hover {
    background-image: none;
  }
  #assessment-hover:hover {
    background-image: none;
  }
  #podcast-hover:hover {
    background-image: none;
  }
  #about-hover:hover {
    background-image: none;
  }
  #assessment-active{
    background-image: none;
  }
  #assessment-active a {
    color: #F44247;
  }
  #podcast-active {
    background-image: none;
  }
  #podcast-active a {
    color: #F44247;
  }
  #about-active {
    background-image: none;
  }
  #about-active a {
    color: #F44247;
  }
}

/* Nav Dropdown Classes */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  width: 900px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-features {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F8F6EF;
  border: 1px solid #141C34;
  border-radius: 16px 0px;
  padding: 0px 90px 30px 25px;
  margin-top: 20px;
}

.dropdown-column {
  display: flex;
  flex-direction: column;
  align-items: start;
  min-width: 200px;
}

#dropdown-feature {
  display: flex;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  color: #11172B;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  padding: 0px;
  margin-top: 30px;
}

#inner-nav #dropdown-feature a {
  font-family: 'Open Sans', sans-serif;
  color: #11172B;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  padding: 0px;
}

#inner-nav #dropdown-feature a:hover {
  color: #F44247;
  filter: invert(27%) sepia(93%) saturate(2494%) hue-rotate(339deg) brightness(104%) contrast(91%);
}

#dropdown-feature a img {
  width: 35px;
  height: 40px;
  margin-right: 15px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

@media (max-width: 995px) {
    .dropdown:hover .dropdown-content {display: none;}
}


#disguise-link {
  color: #888887;
  transition: color .2s;
  text-decoration: none;
  font-weight: 600;
}

#disguise-link:hover {
  color: #ee5042;
}

#menu {
  display: none;
  float:left;
  font-size:12px;
  font-weight:500;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu ul {
  float: left;
  margin-top: 20px;
}

.menu ul li {
  float: left;
  margin: 0px 8px;
  color: #888887;
}

.menu ul li a {
    color: #CCC;
    text-decoration: none;
    font-family: 'Exo', sans-serif;
  }

#logo {
  float: left;
  display: inline-block;
}

.nav-items {
  display: flex;
  align-items: center;
}

@media (max-width: 750px) {
  #menu {
    display: block;
  }
  .logo {
    text-align: left;
  }
}

.mobile_menu {
  display:none;
  background-color:#ee5042;
  z-index:1;
  width:100%;
  padding: 25px 15px 10px;
  color: white;
}

.mobile_menu hr {
  width: 99%;
  background-color: #BD422D;
  margin: 5px 0px;
  padding: 0px;
}

.mobile_menu a{
  color: white;
}

.mobile_menu ul li:last-child, .mobile_menu ul li:last-child a {
  color:#BD422D;
}

@media (max-width: 750px) {
  .menu {
    display: none;
  }

  .mobile_menu {
    padding: 20px 0px 5px;
  }

  .mobile_menu hr {
    width:96%;
    background-color: white;
  }

}

/* Second Nav */

.second-nav {
  width:100%;
  background-color: #E6E4DD;;
  padding:18px 0px 0px;
  border-top:1px solid #C9C5B6;
  border-bottom:1px solid #C9C5B6;
}

/* Breadcrumbs */

#breadcrumbs {
    font-size: 12px;
    text-transform: uppercase;
    color: #ee5042;
    font-weight: 300;
    margin-bottom: 1.5em;
    z-index: 1;
}
#breadcrumbs span {
    margin: 0px 6px;
}
#breadcrumbs span:last-child {
    color: #222;
}
#breadcrumbs .edit-button {
    font-size: 14px;
    text-transform: none;
    border-radius: 4px;
    border: 1px solid #ee5042;
    padding: 4px 5px;
    color: #ee5042;
    background-color: #ffffff;
    transition: all .2s;
}
#breadcrumbs .edit-button:hover {
    border-color: #BC372B;
    color: #BC372B;
}

#breadcrumbs a {
  color: #004E86;
}

/* Masthead */

.masthead-wrapper {
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    z-index: 1;
}

@media (max-width: 750px) {
  .masthead-wrapper {
    padding: 60px 0px 70px 0px; 
  }
}

.hero-main-frame-background {
  background: url('../images/hero-main-frame.svg');
  background-repeat: no-repeat;
  background-position: top left;
  padding: 50px 50px 50px 50px;
}

@media (max-width: 750px) {
  .hero-main-frame-background{
    background: none;
    padding: 0px;
  }
}

.masthead-wrapper h2 {
    font-size: 50px;
    color: #F44247;
    font-weight: 400;
}

.masthead-wrapper h3 a {
  font-size: 25px;
  color: #F44247;
  font-weight: 300;
}

.masthead-wrapper a {
  text-decoration: none;
}

.masthead-wrapper p {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    line-height: 35px;
    color: #e2dfd4;
    margin-top: 20px;
}

.main-content {
    max-width: 500px;
    width: 500px;
    margin: 50px 50px 0 50px;
}

.fixed-width-podcast {
    max-width: 350px;
    width: 100%;
    margin: 100px 0px 0px 15px;
}

.fixed-width-podcast h3 a {
  font-size: 34px;
}

#podcast-small {
  color: #ee5042;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
}

@media (max-width: 750px) {
  .masthead-wrapper h2 {
    font-size: 38px;
  }

  .masthead-wrapper p {
    font-size: 24px;
  }

  .main-content {
    max-width: 328px;
    margin: 0px;
    width: 100%;
  }

  .fixed-width-podcast {
    margin: 70px 0px 0px 0px;
  }
}

/* Call to action  */

.call-to-action {
  display: flex;
  justify-content: center;
  background-color: #F44247;
  align-items: flex-end;
  padding: 20px 0px 40px 0px;
  font-family: 'Exo', sans-serif;
  font-size: 28px;
}

@media (max-width: 800px) {
  .call-to-action {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.call-to-action h3{
  font-size: 28px;
  font-weight: 300;
}


/* Main */

#main {
    background-color: #ee5042;
    padding: 30px 0px 50px;
    margin-top: -25px;
}
#main h1, #main h4 {
    color: white;
}

/* Intro */

#intro {
    padding: 0px 100px 0px;
}
#intro p {
    font-size: 16px;
}
#intro .row {
    margin-bottom: 40px;
}
#intro .row:last-child {
    margin-bottom: 0px;
}
@media (max-width: 550px) {
    #intro {
        padding: 50px 5% 0px;
    }
    #intro .row {
        margin-bottom: 0px;
    }
}

h1.section-header {
  font-size: 40px;
  margin-bottom: 50px;
  color: #004E86;
  font-weight: 300;
}

h3.section-header.sub {
  font-size: 24px;
  margin-bottom: 5px;
  color: #434343;
}

.header-desc-copy {
  max-width: 660px;
}


/* Checklist */

.features-intro {
  text-align: center;
  margin-bottom: 120px;
  max-width: 1075px;
  margin-left: auto;
  margin-right: auto;
}

.features-intro h1 {
  font-weight: 600;
  font-size: 62px;
}

.features-intro p {
  color: #3c3c3c;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  line-height: 34px;
}

#checklist {
  padding-top: 150px;
  padding-bottom: 100px;
  overflow: hidden;
  padding-left: 50px;
  padding-right: 50px;
  max-width: 1300px;
}

@media (max-width: 550px) {
  #checklist {
    max-width: 95%;
    padding: 0px;
  }
}


.guides-section {
  background-color: #F8F6EF;
}

.guidebook {
  transform: rotate(6.88deg);
  background-repeat: no-repeat;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -63px;
  margin-left: -250px;
  width: 525px;
  height: 625px;
  z-index: -1;
  opacity: .1;
}

@media (max-width: 550px) {
  .features-intro {
    margin-bottom: 20px;
  }

  .features-intro h1 {
    font-size: 34px;
    line-height: 40px;
  }

  .features-intro p {
    font-weight: 300;
    font-size: 12px;
    line-height: 22px;
  }

  #checklist {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .guidebook {
    width: 162px;
    height: 192px;
    left: 55%;
    top: 30px;
    margin-left: -100px;
  }
}

.guide-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.checklist-item-container {
  width: 30%;
  margin-top: 90px;
  background: url('../images/single-frame-corner.svg');
  background-repeat: no-repeat;
  background-position: top left;
}

.checklist-item {
  margin-top: 45px;
  margin-left: 42px;
}

@media (max-width: 750px) {

  .checklist-item-container {
    width: 48%;
    margin-top: 45px;
  }

  .checklist-item {
    margin-top: 25px;
    margin-left: 25px;
  }
}

.checklist-item img {
  height: 110px;
  margin-bottom: 35px;
}

.checklist-item h3 {
  margin-bottom: 30px;
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 33px;
}

.checklist-item p {
  font-family: 'Open Sans', sans-serif;;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  color: #3c3c3c;
  margin-bottom: 25px;
}

@media (max-width: 995px) {
  .checklist-item-container {
    background: url('../images/single-frame-corner-mobile.svg');
    background-repeat: no-repeat;
    background-position: top left;
  }

  .checklist-item img {
    height: 55px;
    margin-bottom: 30px;
  }

  .checklist-item h3 {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 15px;
  }

  .checklist-item p {
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 15px;
  }

  .checklist-item a.button.button-primary {
    text-align: center;
    width: 150px;
    height: 38px;
    font-size: 13px;
    line-height: 40px;
    padding: 0 10px;
  }
}

#checklist .checklist-icon {
    width: 60px;
    min-height: 60px;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    display: block;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 10px 10px 2px;
}

#checklist h3.section-header {
  margin-bottom: 40px;
}
#checklist .article-header {
    font-weight: 500;
    margin-bottom: 12px;
    font-size: 18px;
}
#checklist h2 + p {
    width: 650px;
    margin: 0px auto;
}
@media (max-width: 750px) {
    #checklist h2+ p {
        width: 90%;
        margin: 20px;
    }

}
#checklist .company-links {
    display: block;
}
#checklist .row {
    margin-top: 50px;
    margin-bottom: 95px;
    justify-content: center;
}
@media (max-width: 750px) {
    #checklist .row {
      margin-bottom: 0px;
      margin-top: 0px;
    }

    #checklist .columns {
        margin: 0px auto 60px;
    }
}
.company-tag {
    font-size: 18px;
    font-weight: 500;
}

.checklist-top {
  display: flex;
  align-items: flex-end;
}

.article-icon {
  min-height: 100px;
  margin-bottom: 20px;
  position: relative;
}

.article-icon span {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

span.pa {
  background: url('../images/Product Assortment.svg');
  background-size: 167px 161px;
  width: 167px;
  height: 161px;
  background-repeat: no-repeat;
}
span.sso {
  background: url('../images/article-icons/sso@2x.png');
  background-size: 84px 100px;
  width: 84px;
  height: 100px;
}
span.al {
  background: url('../images/article-icons/audit-logs@2x.png');
  background-size: 202px 92px;
  width: 202px;
  height: 92px;
}
span.rbac {
  background: url('../images/article-icons/rbac@2x.png');
  background-size: 191px 87px;
  width: 191px;
  height: 87px;
}
span.cm {
  background: url('../images/article-icons/change-management@2x.png');
  background-size: 118px 86px;
  width: 118px;
  height: 86px;
}
span.ps {
  background: url('../images/article-icons/product-security@2x.png');
  background-size: 67px 75px;
  width: 67px;
  height: 75px;
}
span.dm {
  background: url('../images/article-icons/deployment-model@2x.png');
  background-size: 190px 83px;
  width: 190px;
  height: 83px;
}
span.tm {
  background: url('../images/article-icons/team-management@2x.png');
  background-size: 126px 81px;
  width: 126px;
  height: 81px;
}
span.sla {
  background: url('../images/article-icons/sla@2x.png');
  background-size: 130px 91px;
  width: 130px;
  height: 91px;
}

span.gdpr {
  background: url('../images/article-icons/gdpr@2x.png');
  background-size: 108px 108px;
  width: 109px;
  height: 108px;
}
span.int {
  background: url('../images/article-icons/integrations@2x.png');
  background-size: 155px 98px;
  width: 155px;
  height: 98px;
}
span.ar {
  background: url('../images/article-icons/advanced-reporting@2x.png');
  background-size: 130px 62px;
  width: 130px;
  height: 62px;
}

/* Big Testimonial */

.big-testimonial {
  background-color: #F44247;
  overflow: hidden;
  background-image: url("../images/big-app-icon.svg");
  background-repeat: no-repeat;
  background-position: 85% 80%;;
  background-attachment: fixed;
}

@media (max-width: 912px) {
  .big-testimonial {
    display: none;
  }
}

#big-testimonial {
  max-width: 930px;
}

.big-testimonial-section {
  display: flex;
  flex-direction: column;
  padding: 130px 0px 130px 0px;
  color: #FFFFFF;
}

.big-testimonial-section p {
  float: right;
  color: #2D2D2D;
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  line-height: 23px;
}

.big-testimonial-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 930px;
  margin-bottom: 80px;
}

.big-testimonial-content img{
  width: 111px;
  height: 108px;
}

.big-testimonial-content h2{
  margin-right: 70px;
  max-width: 750px;
  font-family: 'Exo', sans-serif;
  font-weight: 300;;
  font-size: 40px;
  line-height: 55px;
}

.big-testimonial-background {
  background-repeat: no-repeat;
  text-align: center;
  position: absolute;
  left: 65%;
  bottom: -80px;
  margin-left: -250px;
  width: 740px;
  height: 740px;
  z-index: -1;
  opacity: 1;
}

.twtr-bird {
  width: 33px; 
  float: left;
  margin-bottom: 50px;
}

#alexis {
  border: 7px solid #F8585E;
  border-radius: 12px;
}

/* Podcast Section */

.podcast-section {
  position: relative;
  background-color: #DBE6E9;
  padding: 140px 0px 130px 0px;
  overflow: hidden;
  background-image: url("../images/podcast-blue.svg");
  background-repeat: no-repeat;
  background-position: 0% 90%;
  background-attachment: fixed;
}

@media (max-width: 500px) {
  .podcast-section{
      background-attachment: scroll;
  }
} 




#podcast-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
}

.podcast-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 700px;
  margin-right: 10px;
}

.podcast-content h3 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  color: #F44247;
  margin-bottom: 25px;
}

.podcast-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
  color: #11172B;
  margin-bottom: 50px;
}

.podcast-background {
  background-repeat: no-repeat;
  text-align: center;
  position: absolute;
  left: -10px;
  bottom: -40px;
  width: 571px;
  height: 695px;
  z-index: 1;
  opacity: 1;
}

@media (max-width: 912px) {
  .podcast-section {
    padding: 60px 0px 80px 0px;
  }

  .podcast-background {
    left: -20%; 
  }

  #podcast-container {
    flex-direction: column;
    max-width: 100%;
  }

  .podcast-content .button {
    width: 90%;
    font-size: 14px;
  }

  .podcast-content {
    align-items: center;
    text-align: center;
    margin-right: 0px;
  }

  .podcast-content h3 {
    font-weight: 500;
    margin: 0 30px 25px 30px;
  }

  .podcast-content p {
    font-size: 14px;
    line-height: 28px;
    margin: 0 30px 50px 30px;
  }

  .podcast-image {
    display: none;
  }
}

/* Example Implementations */

.example-implementations-section {
  padding: 80px 0px 80px 0px;
  background-color: #F8F6EF;
}

.example-implementations {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30px;
  margin-right: 30px;
}

.example-implementations h3 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
}

.example-implementations p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
  color: #3c3c3c;
  margin-bottom: 50px;
  margin-top: 30px;
}

@media (max-width: 550px) {
  .example-implementations {
    margin: 0px;
  }

  .example-implementations h3 {
    font-size: 22px;
    font-weight: 500;
    margin: 0px 50px;
  }

  .example-implementations p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 50px;
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 50px;
  }
}

.example-implementations-tabs {
  max-width: 920px;
  width: 100%;
}

.example-implementations-tabs .nav {
  justify-content: space-around;
  align-items: center;
}

.example-implementations-tabs .tab-content {
  margin-bottom: 22px;
}

.implementation-background {
  text-align: center;
  align-content: center;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 377px;
  background: url('../images/implementation-background.svg');
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px 100px 80px 90px;
}

@media (max-width: 912px) {
  .implementation-background {
    text-align: center;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 375px;
    background: url('../images/implementation-background-mobile.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
  }
}

.feature-analysis-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}

.feature-analysis-column h3 {
  color: #F8F6EF;
  margin-bottom: 10px;
}

@media (max-width: 912px) {
  .feature-analysis-column h3 {
    display: none;
  }
  .feature-analysis-column {
    order: 2;
    width: 250px;
    justify-content: flex-end;
  }
}

.feature-analysis-column .button {
  width: 320px;
  margin-bottom: 0px;
  margin-top: 16px;
  padding: 0 10px;
}
@media (max-width: 912px) {
  .feature-analysis-column .button {
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
  }
}

.nav-link {
  background-repeat: no-repeat;
}

/* Zendesk Logo */
#zendesk-tab.nav-link {
  background-image: url("../images/zendesk-inactive.svg");
  height: 31px;
  width: 154px;
}

#zendesk-tab.nav-link.active {
  background-image: url("../images/zendesk-active.svg");
  height: 31px;
  width: 154px;
}


/* Hubspot Logo */
#hubspot-tab.nav-link {
  background-image: url("../images/hubspot-inactive.svg");
  height: 46px;
  width: 153px;
}

#hubspot-tab.nav-link.active {
  background-image: url("../images/hubspot-active.svg");
  height: 46px;
  width: 153px;
}

/* Google Logo */
#google-tab.nav-link {
  background-image: url("../images/google-inactive.svg");
  height: 46px;
  width: 132px;
}

#google-tab.nav-link.active {
  background-image: url("../images/google-active.svg");
  height: 46px;
  width: 132px;
}

/* Slack Logo */
#slack-tab.nav-link {
  background-image: url("../images/slack-inactive.svg");
  height: 38px;
  width: 123px;
}

#slack-tab.nav-link.active  {
  background-image: url("../images/slack-active.svg");
  height: 38px;
  width: 123px;
}

/* Mobile Logos */
@media (max-width: 750px) {
  #zendesk-tab.nav-link {
    height: 40px;
    width: 59px;
    background-size: 59px 12px;
    background-position: center;
  }

  #zendesk-tab.nav-link.active {
    height: 40px;
    width: 59px;
    background-size: 59px 12px;
    background-position: center;
  }

  #hubspot-tab.nav-link  {
    height: 40px;
    width: 59px;
    background-size: 59px 18px;
    background-position: center;
  }

  #hubspot-tab.nav-link.active {
    height: 40px;
    width: 59px;
    background-size: 59px 18px;
    background-position: center;
  }

  #google-tab.nav-link {
    height: 40px;
    width: 51px;
    background-size: 51px 18px;
    background-position: center;
  }

  #google-tab.nav-link.active {
    height: 40px;
    width: 51px;
    background-size: 51px 18px;
    background-position: center;
  }

  #slack-tab.nav-link {
    height: 40px;
    width: 48px;
    background-size: 48px 14px;
    background-position: center;
  }

  #slack-tab.nav-link.active {
    height: 40px;
    width: 48px;
    background-size: 48px 14px;
    background-position: center;
  }

  #pills-tab .nav-item {
    padding-left: 2px;
  }
}

@media (max-width: 912px) {
  .example-logo {
    order: 1;
    height: 85px;
  }
}

/* Top Article */

#top-article img {
    float: right;
    margin-bottom: 20px;
}
@media (max-width: 550px) {
    #top-article img {
        display: none;
    }
}
#top-article h3 {
    font-weight: 400;
    margin-bottom: 5px;
}

/* Footer */

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footer p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 40px;
  color: #F8F6EF;
}

.footer-wrapper {
  padding: 20px 0 50px 0;
  background: #11172B;
}

/* Subscribe */

.subscribe-wrapper {
  padding: 90px 0 100px;
  background-color:#F44247;
  color: #F8F6EF;
}

.subscribe-wrapper h3 {
  margin-bottom: 70px;
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  text-align: center;
}

@media (max-width: 550px) {
  .subscribe-wrapper {
    padding: 60px 0 100px;
  }
  .subscribe-wrapper h3 {
    font-weight: 500;
    font-size: 25px;
  }
}

/* Override HubSpot Styling */
.subscribe-wrapper .hs-button.primary.large {
  color: #11172B !important;
  background-color: #FAE7E7 !important;
  border-color: #FAE7E7 !important;
  border-radius: 0px 0 12px 0 !important;
  text-transform: uppercase !important;
  line-height: 35px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  height: 62px;
}

@media (max-width: 550px) {
  .subscribe-wrapper .hs-button.primary.large {
    font-size: 12px !important;
    padding: 0px 20px !important;
  }
}

.legal-consent-container {
  position: absolute;
  bottom: -30px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
  font-size: 8px !important;
  width: 100% !important;
  max-width: 600px !important;
}

.legal-consent-container.hs_submit, .input {
  width: 100% !important;
  max-width: 600px !important;
}

.legal-consent-container .inputs-list {
  margin-left: 0px;
  padding-left: 0px;
}

.legal-consent-container label {
  color: #F8F6EF;
  display: flex;
  align-items: center;
}

.legal-consent-container label p {
  color: #F8F6EF !important;
  font-size: 14px;
}

.legal-consent-container label a {
  color: #F8F6EF !important;
}

.legal-consent-container span {
  color: #F8F6EF;
}

.hs-form-booleancheckbox {
  color: #F8F6EF !important;
  padding-left: 40px;
}

.hs_error_rollup {
  position: absolute;
}

.legal-consent-container .hs-error-msgs label {
  position: absolute;
  color: #F8F6EF;
  width: 100%;
}

.legal-consent-container .hs-error-msg label{
  width: 100% !important;
}

.no-list.hs-error-msgs.inputs-list {
  width: 100% !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

.no-list.hs-error-msgs.inputs-list li {
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.no-list.hs-error-msgs.inputs-list li label a {
  color: #F8F6EF !important;
}


.hs-main-font-element p {
  color: #F8F6EF !important;
  z-index: -10 !important;
}

.hs-main-font-element  {
  display: none !important;
}

.submitted-message {
  display: flex !important; 
  text-align: center !important;
}

.legal-consent-container .hs-error-msgs label {
  color: #F8F6EF !important;
  padding-left: 42px;
}

@media (max-width: 800px) {
  .legal-consent-container {
    bottom: -50px;
  }
  .legal-consent-container label p {
    color: #F8F6EF !important;
    font-size: 12px;
  }
  .legal-consent-container {
    max-width: 280px !important;
  }

  .hs-form-booleancheckbox {
    padding-left: 0px;
  }

  .no-list.hs-error-msgs.inputs-list {
    width: 300px !important;
    padding-left: 0px;
  }

  .hs-error-msg {
    font-size: 10px;
    padding-left: 0px !important;
  }
  
}


#subscribe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* #subscribe input[type="email"] {
    width: 400px;
    height: 62px;
} */
@media (max-width: 600px) {
    #email-cf19513d-014d-4435-b0ad-ac186f0ce56f {
        width: 160px !important;
    }
    #subscribe .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {
      width: 160px !important;
    }
    #subscribe .three {
        display: none;
    }
}

/* Article */

#article {
    padding: 40px 12%;
    z-index: 1;
    font-family: 'Open Sans', sans-serif;
}

.article-container {
  z-index: -1;
  background: #F8F6EF;
}

#article .checklist-icon {}
.article-feature {
    width: 250px;
    padding: 25px;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    float: right;
    margin-top: 5px;
    margin-left: 20px;
}
#article p {
    font-size: 16px;
    line-height: 1.8;
}
#article ul {
    margin-left: 15px;
}
#article ul li {
    list-style: disc;
    font-size: 16px;
}
#article ol li {
    list-style: disc;
    font-size: 16px;
}
#article h1 {
    text-align: center;
    margin-bottom: 40px;
}
#article h1, #article h2 {
    padding-top: 2rem;
}
#article h2 {
  color: red;
}

#article h4 {
    margin: 25px 0px 0px;
    font-weight: 400;
}

#article hr {
  margin: 0px 0px 20px 0px;
  width: 100%;
}

#article img {
    display: block;
    margin: 35px auto 0px auto;
    max-width: 500px;
}

#article #gdpr-img {
  max-width: 250px;
}

#article ol li {
    list-style: decimal;
    list-style-position: inside;
}
#article ol li ul li {
    list-style: disc;
    list-style-position: inside;
}
#article #article-nav {
    border-bottom: 1px solid #DEDEDE;
    height: 49px;
}
#article #article-nav a {
    display: block;
    padding: 15px 0px;
    margin-right: 50px;
    text-transform: uppercase;
    float: left;
    font-size: 12px;
}

#article a {
  color: #004E86;
}

#article #article-nav a:hover, #article #article-nav a:focus {
    border-bottom: 3px solid #ee5042;
    padding-bottom: 13px;
    color: #ee5042;
}
@media (max-width: 550px) {
    #article {
        padding: 20px 5%;
    }
    .article-feature {
        width: 90%;
        margin: 10px 0px 20px;
        padding: 5%;
    }
    #article #article-nav a {
        font-size: 10px;
        margin-right: 25px;
    }
    #article #article-nav a:hover {
        border-bottom: 3px solid #ee5042;
        padding-bottom: 16px;
    }
    #article img {
        max-width: 100%;
    }
}

.gdpr blockquote {
    position: relative;
    background-color: #F5F8FC;
    padding: 20px 25px;
    margin: 20px 0;
    border-radius: 4px;
}

.gdpr blockquote p { margin-bottom: 0; }
.gdpr blockquote a {
    color: #4a4a4a;
    font-weight: 500;
}
.gdpr blockquote a:hover {
    text-decoration: underline;
}

.gdpr blockquote::before {
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #62A7CF;
}

.gdpr blockquote > blockquote {
    margin: 0;
}
.gdpr blockquote > blockquote::before {
    display: none;
}

.table-of-contents  {
    position: relative;
    background-color: #FCF5F5;
    padding: 25px 30px;
    margin: 20px 0;
    border-radius: 4px;
}

.table-of-contents  { margin-bottom: 0; }
.table-of-contents a {
    color: #EC5147;
    font-weight: 500;
    text-decoration: underline;
}
.table-of-contents  a:hover {
    text-decoration: underline;
}

.table-of-contents::before {
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #EC5147;
}

.gdpr .table-of-contents blockquote > blockquote {
    margin: 0;
}
.gdpr .table-of-contents blockquote > blockquote::before {
    display: none;
}

.feather img {
  cursor: pointer;
}

.example {
  float: left;
  border-radius: 4px;
  border: 1px solid #DFDFDF;
  background-color: #F8F8F8;
  margin-right: 30px;
  margin-bottom: 30px;
  width: 280px;
  min-height: 274px;
  overflow: hidden;
}

.example:hover {
  border-color: #CCC;
  -webkit-box-shadow: 0 8px 6px -6px #ccc;
  -moz-box-shadow: 0 8px 6px -6px #ccc;
  box-shadow: 0 8px 6px -6px #ccc;
}

.example img {
  border-bottom: 1px solid #DFDFDF;

}

.example h3 {
  padding: 15px;
  font-weight: 400;
}

@media (max-width: 750px) {

  .example {
    width: 280px;
    margin: 15px auto !important;
    float: none;
  }
}

/* Podcast Page */

#episodelist {
  padding-top: 70px;
  padding-bottom: 0px;
  overflow: hidden;
  padding-left: 50px;
  padding-right: 50px;
  max-width: 1300px;
}

@media (max-width: 550px) {
  #episodelist {
    max-width: 95%;
    padding: 0px;
  }
}

.episode-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 50px;
}

.episode-outer {
  background: url('../images/single-frame-corner.svg');
  background-repeat: no-repeat;
  background-position: top left;
  margin-bottom: 50px;
  width: 30%;
  max-height: 450px;
}

.episode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 45px;
  margin-left: 42px;
  text-align: left;
}


.episode a img {
  width: 90%;
  margin-bottom: 10px;
}

.episode a {
  text-decoration: none;
  width: 100%;
}

.episode a h3 { 
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 33px;
  text-decoration: none !important;
  color: #11172B;
  text-align: left;
  margin: 0px;
}

.episode a h4 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  text-decoration: none;
  color: #11172B;
} 

.episode .episode-play {
  vertical-align: -2px;
  height: 22px;
  width: 23px;
  margin: 0px;
}

@media (max-width: 1000px) {
  .episode-outer {
    width: 48%;
  }
}

@media (max-width: 550px) {
  .episode-outer {
    width: 48%;
    background: url('../images/single-frame-corner-mobile.svg');
    background-repeat: no-repeat;
    background-position: top left;
  }

  .episode {
    margin-top: 22px;
    margin-left: 20px;
  }

  .episode a h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .episode a h4 {
    font-size: 16px;
    line-height: 24px;
  } 

  .episode .episode-play {
    height: 16px;
    width: 16px;
  }
}

.coming-soon-container {      
  position: relative; 
}

.coming-soon-container img {
  height: auto;
  align-self: center;
}

.coming-soon {
  color: #FFF;
  font-size: 1.3em;
  position: absolute;  
  left: 50%;                  
  top: 50%;                      
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

/* Contribtors */
.contributors a{
float: left;
margin-right: 10px;
}

.contributors a img {
  margin: 0px !important;
  border-radius: 4px;
}

/* Breakdowns */

.breakdowns-wrapper {
  background-color: #F5F5F5;
  padding: 50px 0 60px;
}
#breakdowns .row {
  margin-top: 40px;
}
#breakdowns .three {
    min-height: 250px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 0 18px 20px;
    background: #ffffff;
}
#breakdowns .three div {
    height: 110px;
    width: 150px;
    position: relative;
    margin: 0px auto
}
#breakdowns .three div img {
    max-width: 125px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#breakdowns .row p {
    font-size: 18px;
    margin-bottom: 0;
    color: #323232;
}
@media (max-width: 550px) {
    #breakdowns .three {
        margin-bottom: 20px;
    }
}

.analysis-list {
  margin: 0;
  list-style-type: none;
}
.analysis-list li {
  margin-top: 6px;
  margin-bottom: 0;
}
.analysis-list li a {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}

.background-wrapper {
  padding: 60px 0;
  border-bottom: 1px solid #D6D6D6;
}

#breakdown-request-form {
  text-align: center;
  max-width: 100%;
}

.freebirdFormviewerViewCenteredContent {
  max-width: 100%;
}

.freebirdLightBackground {
  background-color: #F8F6EF;
}

/* SaaS Feature Table */

#feature-table {
    padding: 10px 0px;
}
#feature-table {
    width: 1200px;
    margin: 0px auto 25px;

}
#feature-table::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 3px;
}
#feature-table::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 0px rgba(255, 255, 255, .5);
}

@media (max-width: 550px) {
    #feature-table {
        width: 100%;
        margin: 0 5%;
        overflow-x: scroll;
        background: -webkit-linear-gradient(left, rgba(173, 183, 191, 0) 0, rgba(173, 183, 191, 0.2) 100%);
        background: linear-gradient(to right, rgba(173, 183, 191, 0) 0, rgba(173, 183, 191, 0.2) 100%);
        background-size: 10px 100%;
        background-position: right;
        background-repeat: no-repeat;
    }

    #feature-table div {

    }
}

.pull-right {
  float: right;
}

/* Tool Tip */

#tool-tip {
    float: left;
}
.tool-tip {
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    position: absolute;
    background-color: white;
    display: none;
    z-index: 1;
}
.tool-tip ul li {
    padding: 10px 15px 0px;
}
.tool-tip ul li:last-child {
    border: none;
    padding-bottom: none;
}
.tool-tip ul hr {
    width: 100%;
    margin: 0px;
}

.clearfix {
  clear:both;
  height: 0;
}

/* note */

.admonition {
    background: #F8F8F8;
    border-radius: 8px;
    padding: .85em 1.5em 0.01em;
    margin: 1em 0em 1em;
}
.admonition p {
  color: #323232;
  font-size: 14px;
}
#article .admonition img {
  display: inline;
  margin: 0 4px;
}

/* Twitter */
.testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #DBE6E9;
  padding: 80px 0px 80px 0px;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  font-size: 34px;
  font-style: normal;
}

.testimonials h2{
  font-size: 34px;
  font-weight: 400;
  text-align: center;
}

.testimonials p{
  font-size: 24px;
  line-height: 30px;
  color: #11172B;
}

.testimonial-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}

@media (max-width: 1100px) {
  .testimonials {
    padding: 50px 0px 50px 0px;
    text-align: center;
  }
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  max-width: 615px;
}

.carousel {
  max-width: 748px;
  width: 100%;
}

.carousel-inner {
  height: 100%;
}

.carousel-item {
  height: 100%;
}

.carousel-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 10px 0 10px;
  max-width: 1100px;
  width: 100%;
  height: 150px;
}

.carousel-container a img {
  margin: 15px;
}

.avatar-container {
  position: relative;
  height: 160px;
  width: 250px;
}

.avatar-image {
  width: 93px;
  margin-right: 40px;
}

@media (max-width: 1100px) {
  .carousel-container {
    height: 350px;
  }

  .avatar-image {
    margin-bottom: 20px;
    margin-right: 0px;
  }
}

.avatar-squares {
  position: absolute;
  width: 140px;
}

@media (max-width: 835px) {
  .carousel {
    max-width: 400px;
    height: 372px;
  }

  .testimonials h2{
    font-size: 28px;
    font-weight: 400;
  }
  
  .testimonials p{
    font-size: 18px;
    line-height: 30px;
    color: #11172B;
  }

  .avatar-container {
    position: relative;
    height: 160px;
    width: 250px;
  }
  
  .avatar-squares {
    position: absolute;
    width: 100px;
  }
}
@media (max-width: 550px) {
  .carousel-buttons {
    width: 30px;
  }

  .testimonial-content {
    max-width: 300px;
  }
}

#twtr-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#twtr-scroll::-webkit-scrollbar {display:none;}

#twtr-content {
  width: 11200px;
  height: 105px;
  padding: 0px;
  margin: 0px;
  margin-top: 10px;
}

.twtr-card {
  float: left;
  border-radius: 4px;
  border: 1px solid #DFDFDF;
  background-color: white;
  margin-top: 5px;
  margin-right: 30px;
  margin-left: 30px;
  width: 475px;
  overflow: hidden;
  font-size: 12px;
  padding: 15px 20px 5px;
}

.twtr-card:hover {
  border-color: #CCC;
  -webkit-box-shadow: 0 8px 6px -6px #ccc;
  -moz-box-shadow: 0 8px 6px -6px #ccc;
  box-shadow: 0 8px 6px -6px #ccc;
}

@media (max-width: 550px) {
  .testimonials {
    overflow: hidden;
  }
  #twtr-scroll {
    overflow-y: hidden;
  }
  #twtr-content {
    width: 8200px!important;
    overflow: auto;
  }
  .twtr-card {
    width: 340px;
    margin-left: 10px;
  }
  .twtr-card img {
    width: 50px!important;
    height: 50px!important;
  }
  .twtr-card p{
    font-size: 11px!important;
  }
  .twtr-card p:nth-child(3){
    font-size: 10px!important;
  }
}

.twtr-card img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  margin: 0px 15px 10px 0px;
  border: 1px solid #DFDFDF;
}

.twtr-card p{
  font-size: 14px;
  color: #222;
  margin-bottom: 3px;
}

.twtr-card p:nth-child(3){
  text-transform: uppercase;
  color: #F46853;
  font-size: 12px;
}

.hiring {
    background-color: #ED2D2D;
    border-radius: 2px;
    padding: 3px 7px;
    color: white;
}

.hiring:hover{
    background-color: #BC4752;
    color: white;
}

/* PODCAST PAGE */

.podcast-page-hero {
  background-color: #141C34; 
  padding: 130px 0px 90px 0px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .podcast-page-hero {
    padding: 70px 0px 90px 0px;
  }
}

.podcast-page-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 368px;
  max-width: 925px;
  margin-left: auto;
  margin-right: auto;
  background: url('../images/podcast-page-content-background.svg');
  background-repeat: no-repeat;
  background-position: top left;
}

.podcast-page-hero-content h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 45px;
  text-align: center;
  color: #F8F6EF;
  z-index: 10;
  margin: 15px;
}

@media (max-width: 940px) {
  .podcast-page-hero-content {
    background: none;
  }
}

.podcast-background-holder {
  position: relative;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.podcast-page-hero-background {
  position: absolute;
  top: -500px;
  left: -230px;
  z-index: 1;
}

.podcast-page-content-background {
  background-color: #F44247;
}

.podcast-page-content {
  position: relative;
  padding: 80px 0px 80px 0px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.podcast-page-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  line-height: 34px;
  color: #F8F6EF;
  margin: 0px 20px 20px 20px;
}

@media (max-width: 940px) {
  .podcast-page-content p  {
    font-size: 18px;
    font-weight: normal;
  }
}

@media (max-width: 600px) {
  .podcast-page-content p  {
    font-size: 14px;
    font-weight: normal;
  }
}

.podcast-page-content a {
  color: #222;
  text-decoration: none;
  font-weight: 600;
}

.podcast-page-content a:hover {
  color: #222;
  text-decoration: none;
  font-weight: 600;
}

.podcast-red {
  position: absolute;
  right: 0px;
  bottom: -710px;
}

@media (max-width: 500px) { 
  .podcast-red {
    bottom: -810px;
  }
}

.episode-section-wrapper {
  background-color: #F8F6EF;
  padding: 100px 0px 80px 0px;
  text-align: center;
  overflow: hidden;
}

.episode-section-wrapper h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  line-height: 40px;
  text-align: center;
  color: #004E8A;
  margin-bottom: 90px;
}

.episode-section-wrapper h3 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  color: #11172B;
  margin: 0px 20px 0px 20px;
}

@media (max-width: 600px) { 
  .episode-section-wrapper h1 {
    font-size: 40px;
  }
  .episode-section-wrapper h3 {
    font-size: 18px;
  }
}

.episode-section-wrapper h3 a{
  color: #F44247;
  text-decoration: none;
}

/* EPISODE PAGE */

.podcast-info-wrapper {
  padding: 100px 0px 100px 0px;
  background-color: #F8F6EF;
}

.podcast-info {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.podcast-info p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
  color: #3c3c3c;
  margin-bottom: 40px;
}

.podcast-info a {
  color: #F44247;
  text-decoration: none;
}

.podcast-info a:hover {
  color: #F44247;
  text-decoration: none;
}

.podcast-info h2 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  color: #11172B;
  margin-bottom: 40px;
}

.episode-page-hero {
  position: relative;
  background-color: #141C34;
  padding: 0px 0px 10px 0px;
}

.episode-hero {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 368px;
  max-width: 925px;
  margin-left: auto;
  margin-right: auto;
  background: url('../images/podcast-page-content-background.svg');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  padding: 100px 200px 100px 200px;
  margin-bottom: 100px;
  z-index: 3;
}

@media (max-width: 1000px) { 
  .episode-hero {
    background: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0px;
    text-align: center;
  }
}

.episode-hero h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 45px;
  color: #F8F6EF;
  max-width: 320px;
}

.episode-page-hero-background {
  position: absolute;
  top: -500px;
  left: -230px;
  z-index: 1;
}

.episode-hero-section {
  padding: 100px 0px 10px 0px;
  background-image: url("../images/podcast-episode-hero.png");
  background-repeat: no-repeat;
  background-position: center;
}

.episode-hero-content {
  max-width: 900px;
  margin: 0 auto;
  z-index: 10;
}


.episode-hero-content h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 45px;
  color: #F8F6EF;
}

.episode-hero-content h2 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  color: #F8F6EF;
  margin-bottom: 40px;
}

.episode-hero-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
  color: #F8F6EF;
  margin-bottom: 40px;
}

.episode-hero-content a {
  color: #F44247;
  text-decoration: none;
}

.episode-hero-content a:hover {
  color: #F44247;
  text-decoration: none;
}

@media (max-width: 1000px) { 
  .podcast-info {
    padding: 0 5%;
  }

  .episode-hero h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .podcast-info h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .podcast-info p {
    font-size: 18px;
    line-height: 28px;
  }

  .episode-hero-content {
    padding: 0 5%;
  }

  .episode-hero-content p {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ABOUT PAGE */

.about-hero-section {
  background-color:#141C34;
  background-image: url('../images/Data-1 2.png');
}

.about-hero-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 70px 30px;
}

.about-hero-main {
  background: url("../images/about-hero-wrapper.svg");
  background-repeat: no-repeat;
  background-position: top left;
  height: 372px;
  width: 681px;
  padding: 100px 100px 100px 100px;
}

.about-hero-main h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  color: #F44247;
  margin-bottom: 20px;
}

.about-hero-main p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 34px;
  color: #F8F6EF;
}

@media (max-width: 1170px) { 
  .about-hero-image {
    display: none;
  }
  .about-hero-content {
    justify-content: center;
  }
}

@media (max-width: 745px) { 

  .about-hero-main {
    background: none;
    padding: 0px;
    height: 100%;
  }

  .about-hero-content {
    width: 90%
  }
}

.about-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

.about-content {
  margin-right: 50px;
  max-width: 685px;
}

.about-content h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 45px;
  margin-bottom: 20px;
}

.about-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 34px;
}

@media (max-width: 1170px) { 
  .about-flex-container {
    flex-direction: column;
  }

  .about-who-for-section .about-flex-container {
    max-width: 685px;
    align-items: flex-start;
  }

  .about-content {
    margin-right: 0px;
  }

  .about-content h1 {
    font-size: 26px;
    line-height: 40px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 24px;
  }

  .about-flex-container img {
    width: 200px;
    margin-top: 10px;
  }
}

@media (max-width: 745px) {
  .about-flex-container {
    margin-left: 30px;
    margin-right: 30px;
  }
}

.about-content a {
  color:#F44247;
  text-decoration: none;
}

.about-content a:hover {
  color:#F44247;
  text-decoration: none;
}

 .about-who-for-section {
  position: relative;
  background-color: #F44247;
  padding: 170px 0px 275px 0px;
  overflow: hidden;
}

.engineers-right {
  position: absolute;
  right: 80px;
  bottom:0;
}

.engineers-left {
  position: absolute;
  left: -20px;
  bottom: -20px;
}

@media (max-width: 1400px) { 
  .engineers-left {
    display: none;
}
}

#who-for {
  max-width: 515px;
  color: #F8F6EF;
 }

 .about-who-for-section .about-flex-container {
   flex-direction: column;
   align-items: flex-start;
 }

 #who-for p {
  max-width: 515px;
  color: #F8F6EF;
 }

.about-who-from-section {
  background-color: #DBE6E9;
  padding: 100px 0px 100px 0px;
}

#who-from {
  color: #11172B;
}

#who-from p {
  color: #11172B;
}

.about-why-section {
  background-color: #F8F6EF;;
  padding: 100px 0px 100px 0px;
}

#why p {
  color:#3c3c3c;
}

@media (max-width: 1170px) { 

  .about-who-for-section {
    padding: 100px 0px 220px 0px;
  }

  .about-who-from-section {
    background-color: #DBE6E9;
    padding: 70px 0px 70px 0px;
  }

  .about-why-section {
    background-color: #F8F6EF;;
    padding: 70px 0px 70px 0px;
  }

  .engineers-right {
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; /* Need a specific value to work */
  }
}

/* Assessment Page */

.assessment-hero-section {
  background-color: #141C34;
  background-image: url('../images/Data-1 2.png');
}

.assessment-hero-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0px 90px 0px;
}

.assessment-main-content {
  background: url("/images/assessment-hero-wrapper.svg");
  background-repeat: no-repeat;
  background-position: top left;
  height: 394px;
  width: 781px;
  padding: 90px 100px 100px 100px;
}

.assessment-main-content h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  color: #F44247;
  margin-bottom: 20px;
}

.assessment-main-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 34px;
  color: #F8F6EF;
  margin-bottom: 40px;
}

.assessment-content-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1170px) { 
  .assessment-hero-content {
    flex-direction: column;
  }

  .assessment-hero-content img {
    margin-top: 40px;
    width: 350px;
  }
}

@media (max-width: 805px) { 
  .assessment-main-content {
    background: none;
    padding: 0px;
    width: 80%;
    max-width: 412px;
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
  }

  .assessment-hero-content img {
    width: 200px;
  }

  .assessment-content-buttons {
    flex-direction: column;
  }
}

.assessment-section {
  background-color: #F44247;
  padding: 165px 40px 165px 40px;
  background-image: url("/images/clipboard-assessment.png");
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: left 65% bottom 90%;
}

.assessment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.assessment-info h1 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  line-height: 40px;
  text-align: center;
  color: #F8F6EF;
  margin-bottom: 80px;
  width: 100%;
  text-align: center;
}

.assessment-info p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 34px;
  color: #F8F6EF;
  margin-bottom: 40px;
}

.assessment-benchmark-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.assessment-features {
  display: flex;
  align-items: center;
  width: 32%;
  margin-bottom: 20px;
  margin-right: 10px;
}

.assessment-features p {
  font-size: 20px;
  margin-bottom: 0px;
}

.assessment-features img {
  width: 44px;
  margin-right: 10px;
}

@media (max-width: 980px) { 
  .assessment-features {
    width: 40%;
  }

  .assessment-benchmark-features {
    justify-content: center;
  }
}

@media (max-width: 575px) { 

  .assessment-features {
    width: 75%;
  }
  .assessment-features img {
    width: 28px;
  }

  .assessment-features p {
    font-size: 14px;
  }

  .assessment-section {
    padding: 165px 20px 165px 20px;
  }
}

.assessment-breakdown-section {
  background-color: #F8F6EF;
  padding: 150px 0px 150px 0px;
  max-width: 100%;
  text-align: center;
}

.assessment-breakdown-content {
  display: flex;
  flex-direction: column;
  align-content: center;
  max-width: 830px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

.assessment-breakdown-content h3 {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 34px;
  line-height: 40px;
  text-align: center;
  color: #11172B;
  margin: 0 0px 60px 0px;
}

.assessment-breakdown-content p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 34px;
  color: #3c3c3c;
  margin: 0 40px 0px 40px;
}

.results-wrapper {
  position: relative;
  display: flex;
  align-items: start;
  max-width: 1050px;
  width: 100%;
  margin: auto;
}

.results-example {
  background: url("/images/example-assessment.png") no-repeat;
  background-size: 100%;
  display: block;
  margin: 65px 0;
  width: 800px;
  height: 1100px;
}

.results-info {
  position: absolute;
  background: url("/images/call-out-box.png") no-repeat;
  background-size: contain;
  max-width: 500px;
  padding: 30px 50px 50px 35px;
}

.results-info h3 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  color: #11172B;
  margin-bottom: 10px;
  text-align: left;
}

.results-info p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 30px;
  color: #3c3c3c;
  max-width: 280px;
  text-align: left;
}

#letter-grade {
  right: 0;
  top: 100px;
}

#category-breakdown {
  right: 0;
  top: 500px;
}

#share-results {
  right: 0;
  top: 900px;
}


/*--- Hubspot Cookie Banner Override ---*/
body div#hs-eu-cookie-confirmation {
	max-height: 80px !important;
	position: fixed !important;
	top: auto !important;
  bottom: 0px !important;
	left: 0px !important;
	text-align: center!important;
	border: none !important;
	z-index: 1000000 !important;
	box-shadow: none !important;
	border-top: 1px solid #BEBEBE !important;
}
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-cookie-settings-button {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 15px !important;
	color: #555 !important;
	text-decoration: underline !important;
	}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	max-width: 1200px !important;
	padding: 10px 15px !important;
  background-color: transparent !important;
	background-image: url('../images/cookie.png') !important;
	background-repeat: no-repeat !important;
	background-position: top 15px left 40px !important;
	background-size: 40px 40px !important;
	text-align: center!important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording {
	margin-bottom: 0px !important;	
	margin-left: 80px !important;
}
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
  font-family: 'Open Sans', sans-serif !important;;
	font-size: 15px!important;
	color: #585858 !important;
	line-height: 24px!important;
	text-align: center!important;
	margin-bottom: 0px !important;
 }
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a {
	color: #4DB9C0 !important;
	font-size: 15px !important;
	text-decoration: underline !important;
}
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area {
  text-align: center!important;
	margin: 0px !important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area {
  margin-top: 0px !important;
}
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
  background: #B7F3D3!important;
  border: 1px solid #B7F3D3!important;
  box-shadow: none;
	margin-left: 20px !important;
  font-family: 'Poppins', sans-serif!important;
	color: #2F2F2F !important;
	font-size: 16px!important;
	font-weight: 500!important;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover {
  background: #38CC97 !important;
  box-shadow: none;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
 }
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-decline-button {
	display: none !important;
}
@media (max-width: 1150px) {
	body div#hs-eu-cookie-confirmation {
		max-height: 450px !important;
		height: auto;
		padding: 20px 20px !important;
		text-align: center!important;
	}
	div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
		flex-direction: column !important;
	}
	div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
		background-image: none !important;
	}
	div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
		text-align: left !important;
	}
	div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording {
		margin-bottom: 20px !important;	
		margin-left: 0px !important;
	}
}
@media (max-width: 350px) {
	body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
	  margin-left: 0px !important;
	}
}

/* Subscribe Form Styling */

.subscribe-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 100%;
}

.subscribe-form label {
  font-weight: 400;
}

.subscribe-email-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.subscribe-checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.subscribe-checkbox-container a {
  color: #F8F6EF;
}

.subscribe-checkbox-container a:hover {
  color: #F8F6EF;
}

.subscribe-checkbox {
  margin-right: 10px;
}

#subscribe-button {
  color: #11172B !important;
  background-color: #FAE7E7 !important;
  border: 0px;
  border-color: #FAE7E7;
  border-radius: 0px 0 12px 0;
  text-transform: uppercase;
  line-height: 35px;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  height: 62px;
}

@media (max-width: 550px) {
  #subscribe-button {
    font-size: 12px !important;
    padding: 0px 20px !important;
  }
}

.subscribe-form input[type="email"] {
  width: 400px;
  height: 62px;
  font-size: 20px;
  padding: 8px 15px;
}

@media (max-width: 400px) {

  .subscribe-form input[type="email"] {
    width: 100%;
    height: 62px;
    font-size: 15px;
    padding: 8px 12px
  }
}

#subscribe-thanks {
  font-size: 18px
}

/* Hide Recaptcha */

.grecaptcha-badge {
  visibility: hidden;
}

  /* Cookie banner */

  #pi_tracking_opt_in_yes {
    visibility: hidden;
  }

  #pi_tracking_opt_in_yes:after {
    content: 'ACCEPT';
    visibility: visible;
    display: block;
    background: #B7F3D3!important;
    border: 1px solid #B7F3D3!important;
    box-shadow: none;
    margin-left: 20px !important;
    font-family: 'Poppins', sans-serif!important;
    color: #2F2F2F !important;
    font-size: 16px!important;
    font-weight: 600!important;
    border-radius: 3px;
    display: inline-block;
    padding: 7px 16px!important;
    text-decoration: none!important;
  }

  #pi_tracking_opt_in_no {
    visibility: hidden;
  }

  #pi_tracking_opt_in_no:after {
    visibility: visible;
    content: 'Decline';
    text-decoration: underline;
  }

  #pi_tracking_opt_in_div {
    background-image: url(/images/cookie.png) !important;
    background-repeat: no-repeat !important;
    background-position: top 15px left 40px !important;
    background-size: 40px 40px !important;
    padding-left: 100px !important;
  }

  #pi_tracking_opt_in_div a:link {
    color: #777;
  }