/*********************************************************
 * Article
 *********************************************************/

.article a:not(.cta) { color: #303030; text-decoration: none; }
.article a:not(.cta):hover { color: #6e3282; text-decoration: underline; }

.article img { display: block; height: auto; max-width: 100% !important; }

.article ul { list-style: none; margin: 0; padding-left: 1.25rem; }
.article ul li::before { content: '•'; font-size: .8rem; margin-right: .5rem; }

.article p,
.article ul,
.article ol
  { margin-bottom: 2rem; }

.article li ul,
.article li ol
  { margin-bottom: 0; }

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 
  { color: #1d1d1b; }

 /* YouTube Responsive CSS for HubSpot */ 

.article .hs-responsive-embed { height: 0; overflow: hidden; padding-left: 0; padding-right: 0; padding-top: 0; position: relative; } 

.article .hs-responsive-embed iframe, 
.article .hs-responsive-embed object, 
.article .hs-responsive-embed embed 
  { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } 

.article .hs-responsive-embed, 
.article .hs-responsive-embed.hs-responsive-embed-youtube, 
.article .hs-responsive-embed.hs-responsive-embed-wistia, 
.article .hs-responsive-embed.hs-responsive-embed-vimeo 
  { padding-bottom: 56.25%; } 

/*****************************************************************************
 * Author
 ***************************************************************************** */
.author { align-items: center; display: flex; }
.author img { border-radius: 50%; max-height: 35px; margin-right: 0.85rem; max-width: 35px; }
.author p { font-size: 0.65rem; }
.author a { color: #6e3282; text-decoration: none; }
.author a:hover { text-decoration: underline; }

/*****************************************************************************
 * Blog card
 ***************************************************************************** */

.blog-card .wrapper { background: #fff; border: 1px solid #e1e1e1; border-radius: .3rem; box-shadow: 0; overflow: hidden; position: relative; transition: box-shadow .3s linear, transform .3s linear; }
.blog-card .wrapper:hover { box-shadow: 0 20px 16px rgba(0,0,0,0.05); transform: translateY(-8px); }

.blog-card a { text-decoration: none; }

.blog-card__image { background-position: center; background-size: cover; height: 185px; }

.blog-card__summary { padding: 1.3rem 1.75rem 1.1rem; }

.blog-card__summary h6 { color: #808080; font-family: "Inter Bold", Helvetica, Arial, sans-serif; font-size: 0.65rem; font-weight: 400; letter-spacing: 0;margin-bottom: 1rem; text-transform: none; }
.blog-card__summary h6 a, .blog-card__author .author-link { color: #6e3282; }
.blog-card__summary h6 a:hover { text-decoration: underline; }
.blog-card__summary h6 span { color: #6e3282; text-transform: uppercase; }

.blog-card__summary .content p { color: #1d1d1b; font-size: 1rem; line-height: 1.5; }

.blog-card__spacer { display: block; height: 90px; width: 100%; }

.blog-card__author { bottom: 0; left: 0; padding: 0 1.75rem 1.2rem; position: absolute; right: 0; }

/*****************************************************************************
 * Error
 ***************************************************************************** */

/* Make the page content fill up the page and push the footer down */
body.hubspot-system-page, html { height: 100%; }
body.hubspot-system-page { display: flex; flex-direction: column; }
body.hubspot-system-page .body-container-wrapper { flex-grow: 1; }

.error { padding: 3rem 0; }
.error .container { max-width: 860px; text-align: center; }

.error__type { color: #6e3282; font-size: 5rem; font-weight: 700; }
.error__image { display: block; line-height: 1; margin-bottom: 2.5rem; }
.error__title { margin: 0 auto 1.2rem; }
.error__action { margin-top: 1.2rem; }

@media only screen and (min-width: 768px ) { 
  .error { padding: 3rem 0; }
}

/*****************************************************************************
 * Filter
 ***************************************************************************** */

.filter__container { font-size: .8rem; margin-bottom: 2rem; }

.filter__select { background: #f4f4f4; box-sizing: border-box; cursor: pointer; display: inline-block; font-weight: 300; margin-bottom: .8rem; padding: .5rem 2.5rem .5rem 1rem; position: relative; width: 310px; }
.filter__select:before { color: #6e3282; content: '\e81b'; font-family: 'hziconen'; font-size: 1.2rem; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); }
.filter__select.active { border: 1px solid #dbdbdb; border-bottom: none; padding-left: 1rem; padding-right: 2.5rem; padding-top: .5rem; z-index: 3; }
.filter__select.active:before { content: '\e81a'; }

.filter__select-title { display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; }

.filter__select-options { background: #f4f4f4; border: 1px solid #dbdbdb; border-top: none; display: none; left: -1px; padding: .7rem 0 0; position: absolute; right: -1px; }
.filter__select-options:before { border-top: 2px solid #1d1d1b; content: ''; left: 1rem; position: absolute; right: 1rem; top: .3rem; }
.filter__select.active .filter__select-options { display: block; }
.filter__select-options a { color: #1d1d1b; display: block; line-height: 1.1rem; padding: .6rem 1rem; }
.filter__select-options a:hover { background: #1d1d1b; }

.filter__result { display: none; }
.filter__result.active { display: block; }

@media only screen and (min-width: 768px ) {
  .filter__container { display: flex; }
  .filter__select { align-self: center; display: inline-block; margin-bottom: 0; margin-right: .8rem; }
}

/*****************************************
 * Hexagon
 *****************************************/

.hexagon { background-color: #fff; box-shadow: 0.25rem 0.55rem 0.8rem rgba(0, 0, 0, 0.07); display: flex; height: 32.33px; justify-content: center; margin: 16.17px 0 21.71px 0; position: relative; width: 56px; }
.hexagon::before,
.hexagon::after 
	{ border-left: 28px solid transparent; border-right: 28px solid transparent; content: ''; left: 0; position: absolute; width: 0; }

.hexagon::before { border-bottom: 16.17px solid #fff; bottom: 100%; }
.hexagon::after { border-top: 16.17px solid #fff; top: 100%; width: 0; }


/*****************************************************************************
 * Newsletter
 ***************************************************************************** */

.newsletter { background: #9fddd2; padding: 2.4rem 1.5rem; width: 100%; }
.newsletter picture { display: block; line-height: 0; max-width: 67px; margin: 0 auto .55rem; }
.newsletter_title { color: #1d1d1b; font-size: 1.2rem; font-weight: 700; line-height: 1.42; margin-bottom: 1rem; padding: 0 10px; text-align: center; }

.newsletter .legal-consent-container,
.newsletter .legal-consent-container p,
.newsletter .legal-consent-container a,
.newsletter .hs-form .legal-consent-container label 
  { color: #1d1d1b; }

.newsletter .newsletter_form .hbspt-form form { margin-bottom: 0; }

.newsletter .newsletter_form .hbspt-form form .hs_email { width: 100%; position: relative; }
.newsletter .newsletter_form .hbspt-form form .hs_email > label { display: none; }
.newsletter .newsletter_form .hbspt-form form .hs_email .input { display: flex; }
.newsletter .newsletter_form .hbspt-form form .hs_email .input input { border: none; border-radius: 0; max-width: 100%; }

.newsletter .newsletter_form .hbspt-form form .hs_submit { width: 100%; background-color: #f9e74b; }
.newsletter .newsletter_form .hbspt-form form .hs_submit .actions { display: flex; margin: 0; padding: 0; }
.newsletter .newsletter_form .hbspt-form form .hs_submit input { font-family: "Inter Bold", Helvetica, Arial, sans-serif; font-size: .8rem; font-weight: 400; padding: 0.75rem 2rem; width: 100%; background-color: #f9e74b;}
.newsletter .newsletter_form .hbspt-form form .hs_submit input: placeholder { color: #1d1d1b; }

.newsletter .newsletter_form .hbspt-form form .hs_error_rollup { display: none; }

.newsletter .newsletter_form .submitted-message { color: #1d1d1b; text-align: center; }

@media only screen and (min-width: 1000px ) {  
  .newsletter .newsletter_form .hbspt-form form .hs_email .hs-error-msgs { position: absolute; }
  
  .newsletter .newsletter_form .submitted-message { color: #1d1d1b; text-align: center; }
}


/*****************************************************************************
 * 
 * Pagination
 * ----------
 * 
 * Used for navigating in lists (blog, resources etc.)
 * 
 * TODO: Add DOM example to description
 * 
 ***************************************************************************** */

.pagination ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.pagination li {  height: 44px; width: 40px; }
.pagination li.active { border: 1px solid #e1e1e1; }

.pagination li a { align-items: center; display:flex; font-size: 1rem; height: 100%; justify-content: center; line-height: 1.7; text-decoration: none; width: 100%; }

@media only screen and (min-width: 1000px) {
  .pagination { margin-bottom: 0; }
  .pagination ul { justify-content: flex-start; }
}

/*****************************************************************************
 * Password prompt
 ***************************************************************************** */

.password-prompt { text-align: center; padding: 3rem 0; }

.password-prompt__info { margin-bottom: 2rem; }
.password-prompt__info ul { text-align: left; }

.password-prompt__form form { align-items: center; display: flex; }
.password-prompt__form form input { background: #fff; border: 1px solid #c9c9c9; color: #1d1d1b; display: block; font-size: 0.7rem; height: 44px !important; margin-top: 0 !important; outline: none; padding: 0.6rem; }
.password-prompt__form form input[type="password"]{ border-radius: .2rem 0 0 .2rem; flex: 1; border-right: 0; }
.password-prompt__form form input[type="submit"]{ border-radius: 0 .2rem .2rem 0; padding: 0 2rem; }

/* This submit button should not be 100% width like in other framed forms */
body .password-prompt .hs-button.primary,
body .password-prompt input[type="submit"],
body .password-prompt input[type="button"] { width: auto; }

@media only screen and (min-width: 768px) {  
  .password-prompt { text-align: center; padding: 20vh 0; }
}


/*****************************************************************************
 * 
 * Play icon
 * ---------
 *
 * Renders a play icon in a semi-transparent circle. Can be applied to pretty
 * much every every DOM element. Example;
 *
 * <a href class="play-icon"></a>
 *
 ***************************************************************************** */

.play-icon { align-items: center; background: #fff; border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); display: flex; height: 100px; justify-content: center; opacity: 0.9; width: 100px; }
.play-icon::after { border-bottom: 18px solid transparent; border-left: 30px solid #1d1d1b; border-top: 18px solid transparent; content: ''; height: 0; margin-left: 5px; width: 0; }

.play-icon:hover { opacity: 1; }

/*****************************************************************************
 * Site logo
 ***************************************************************************** */

.site-logo a { display: block; }
.site-logo a img { display: block; height: 33px !important; width: auto; }

@media only screen and (min-width: 768px ) {
  .site-logo a img { height: auto !important; max-height: 46px; max-width: 205px; }
}

/*****************************************************************************
 * Social sharing
 ***************************************************************************** */

.social-sharing { align-items: center; display: flex; line-height: normal; padding: 3rem 0 2.5rem; }
.social-sharing a { align-items: center;  background: #f9e74b; border-radius: 50%; display: inline-flex; height: 30px; justify-content: center; margin-right: 0.5rem; transition: background .1s linear; width: 30px !important; }
.social-sharing a:hover { background: #6e3282; }
.social-sharing a > img { max-width: 14px !important; max-height: 14px !important; width: 100%; }

/*****************************************************************************
 * Subscription preferences
 ***************************************************************************** */

.subscription-preferences {}

.subscription-preferences__content { padding-bottom: 2rem; }
.subscription-preferences__content h1 { font-size: 1.8rem; line-height: 1.43; font-weight: ; }
.subscription-preferences__content h2 {  color: #1d1d1b; font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.subscription-preferences__content .checkbox-row input { margin-top: .3rem; }

.subscription-preferences__content--unsubscribe form { align-items: center; display: flex; max-width: 500px; }
.subscription-preferences__content--unsubscribe form #content { width: 100%; }
.subscription-preferences__content--unsubscribe form input { background: #fff; border: 1px solid #c9c9c9; border-radius: .2rem; color: #1d1d1b; display: block; font-size: 0.7rem; height: 44px !important; margin-top: 0 !important; outline: none; padding: 0.6rem !important; width: 100% !important; }

/* This submit button should not be 100% width like in other framed forms */
body .subscription-preferences .hs-button.primary,
body .subscription-preferences input[type="submit"],
body .subscription-preferences input[type="button"] { width: auto; }


/*****************************************************************************
* Whitepaper
***************************************************************************** */

.whitepaper { padding: 2rem 0; text-align: center; }
.whitepaper__title { margin-bottom: 1.5rem; }
.whitepaper__title h1 { color: #808080; font-size: .7rem; font-weight: 400; margin-bottom: 0.6rem; text-transform: uppercase; }
.whitepaper__title h2 { color: ; font-size: 1.2rem; }

@media only screen and (min-width: 768px ) {
  .whitepaper { text-align: left; }
  .whitepaper .container { align-items: center; display: flex; }
  .whitepaper picture { margin-right: 1.5rem; max-height: 500px; }
}

@media only screen and (min-width: 1000px ) {
  .whitepaper { padding: 3.5rem 0 2rem; }

  .whitepaper picture { flex: 0 0 35%;  }
  .whitepaper picture img { display: block; height: auto; max-width: 100%; max-height: 500px; }
  .whitepaper__details { flex: 0 0 65%; margin-bottom: 1.2rem; }
}