/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* /*********************************************/
/* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */
/*                                           */
/* Hubspot POWER THEME V1.1.4                */
/* by maka Ageny                             */
/*                                           */
/* STYLE SETTINGS V1.0                       */
/*                                           */
/* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */
/*********************************************/

/****************************************************************************/
/*                                                                          */
/* With this file we provide you with comfortable options to adjust         */
/* some global style aspects of the POWER theme to your needs.              */
/*                                                                          */
/* Please clone the theme to be able to edit the code files if you need     */
/* to do so.                                                                */
/*                                                                          */
/****************************************************************************/

/*****************************************************************************

    INDEX:

    1. BASIC COLOR DEFINITIONS                              #bcd

    2. SPECIFIC COLOR DEFINITIONS                           #scd
        - Background
        - Accent Background  
        - Text
        - Titles
        - Links
        - Buttons
        - Navigation
        - Social Icons & Form Errors

    3. FONT-SETTINGS                                        #fs
        - Basic and accent font types
        - Font smooting
        - Font sizes
        - Font weights

    4. ROUND EDGES                                          #re

    5. EFFECTS                                              #eff
        - 3D box effect
        - Button hover effect

    6. LAYOUT                                               #lay
        - Main header menu position
        - Content width
        - Section padding
        - Responsive breakpoints
        - Mobile responsiveness size reduction factors

*****************************************************************************/


/* ==========================================================================
   1. BASIC COLOR DEFINITIONS                               #bcd

   These colors are used throughout the POWER template.

   ========================================================================== */

/* This color represents e.g. background color for dark-mode, dark text color, 
 * is base for dark borders, ... 
*/


/* This color represents e.g. dark accent background color for boxes in front 
 * of dark background (baseColorDark) 
*/


/* This color represents e.g. background color for light-mode, 
 * light text color, is base for light borders, ... 
*/
 

/* This color represents e.g. light accent background color for boxes in 
 * front of light background (baseColorLight) 
*/


/* This color represents your primary brand color, e.g. 
 * Accents / Hightlights, Hovers, Buttons, ... 
*/



/* ==========================================================================
   2. SPECIFIC COLOR DEFINITIONS                            #scd

   In this section you have the possibility to set more specific colors for
   common elements like text, titles, buttons, etc.

   ========================================================================== */

/* Background Colors */





/* Dark / Light accent background colors */



/* Dark / Light text colors */

 

/* Dark / Light intro title and title colors 
 * For section intro + title, hero title, author page posts title and 
 * blog overview (layout: 1 column)                                           
*/
 
 



/* Link-Colors */



/* Dark / Light Link-Colors for POWER rich-text fields */





/* Primary / Dark / Light button background + text colors */











/* Dark / Light font color for navigation (Header / Footer) */


/* Hover opacity value for top-level navigation items (0 invisible, 1 fully visible) */


/* Hover background and font color for sub-level menu items (Dropdown, Mega-Menu, Burger-Menu) */
 


/* Social Icon color used for Header Top (light), Author Page, Media Content Split module */


/* Colors for HubSpot's form module */








/* Colors for POWER's form modules */








/* ==========================================================================
   3. FONT AND FONT-SIZES                                  #fs

   If you have a custom or purchased font, upload the files via file-manager and
   reference the font format(s) in the @font-face statement

   Please note, that you have to clone the theme before to be able to edit the 
   code files of the theme.

   ========================================================================== */


/* Custom / Purchased fonts configured via @font-face 
 * 
 * @font-face properties explained:
 * font-family -> Official / Configured name of the font - this can be overwritten 
 *                by the function local within src-attribute if a custom name is desired.
 * src         -> Here the links to the different font-formats uploaded in file-manager 
 *                are referenced
 *                *.woff2 - format for all modern browsers
 *                *.woff  - format for IE 11
 *                *.eot   - format for IE 6 - IE 8
 *                *.ttf   - format for Safari, Android, iOS
 *                *.svg   - format for older iOS devices
 * font-weight -> Font weight as number (e.g. 700) or name (e.g. bold)
 * font-style  -> Font style e.g. italic
 * 
*/

/*
@font-face {
    font-family: 'internal_font_name';
    src: local('How_you_want_to_call_and_use_the_font'), 
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'),
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.eot?#iefix') format('embedded-opentype'),
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.ttf') format('truetype'),
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*/

/* Font family to use in the template 
 * 
 * You can set the names of the fonts you have imported via
 * @font-face above and optionally configure fall-back fonts (comma-separated) 
 * 
*/


/* You can use a different accent font-family for titles, CTAs, Menu, ... */


/* Switch font smoothing on (true) or off (false) */
 

/*
 * Font-sizes IN PIXELS
*/
/* Font size used in the body and in rich-text fields  */

/* Font size used for paragraphs in the body and in rich-text fields  */

/* Font size used in the blog post body  */

/* Font-size for intro title in section modules */

/* Font-size for text description in section modules */

/* Font-size for buttons */

/* Font-sizes for headings */






/* Font-sizes for navigation (header and footer) - we recommend small variations from the default value */









/* Font-size for forms */






/*
 * Font-weights
*/
/* Font weight used in the body   */

/* Font weight used in paragraphs   */

/* Font weight used in the blog post body  */

/* Font weight for intro title in section modules */

/* Font weight for text description in section modules */

/* Font weight used for headings   */






/* Font weight for buttons        */

/* Font weights Header         */








/* Font weights for forms */







/*
 * Line-heights TRANSFORMED TO EM
*/
/* Line height used in the body   */

/* Line height used in paragraphs   */

/* Line height used in the blog post body  */

/* Line height for intro title in section modules */

/* Line height for text description in section modules */

/* Line height for headings */







/*
 * Letter-spacings IN PIXELS
*/
/* Letter-spacing used in the body   */

/* Letter-spacing used in paragraphs   */

/* Letter-spacing used in the blog post body  */

/* Letter-spacing for intro title in section modules */

/* Letter-spacing for text description in section modules */

/* Letter-spacing used for headings   */






/* Letter-spacing for buttons        */

/* Letter-spacing Header         */








/* Letter-spacing for forms */






/* Accent text-property for e.g. titles, button-texts, menu, ...
 * Standard value -> text-transform: uppercase. To deactivate, use empty single quotation 
*/





/* ==========================================================================
   4. ROUND EDGES                                           #re

   0px is rectangular and 25px already pretty round
   ========================================================================== */


/* Round edges on buttons */

/* Round edges on inputs */

/* Round edges on dropdowns */

/* Round edges on boxes */

/* Round edges on images */

/* Round edges on checkboxes (max 6px) */
 


/* ==========================================================================
   5. EFFECTS                                               #eff
   ========================================================================== */

/* Switch 3D box effect on (true) or off (false) */


/* Switch button hover effect on (true) or off (false) */




/* ==========================================================================
   6. LAYOUT                                                #lay
   ========================================================================== */

/* 
 * Main header menu position
 * 
 * Position in percent.
 * Automatically centered if header is full-width
*/


/* Content width in pixel */


/* Vertical section padding in pixel
 * Relates to 'padding top' and 'padding bottom' setting in modules 
*/




/* Horizontal section padding in pixel */









/* Header Breakpoint (when does it change to a burger menu...) */

/* Responsive Breakpoints */ 
 








/* Mobile responsiveness size reduction factors used by macros */
/* reduces font-sizes for mobile where applicable - by factor e.g. .25 => 25% */

/* Not smaller than ... pixel */

/* Reduces margins, paddings, etc. - by factor e.g. .25 => 25% */
 */

blockquote {
  font-family: 'IntroScript', sans-serif;
}

.pwr-post-item__n-min-read,
.pwr-post-item__name, 
.pwr-post-item__date {
  font-family: 'Raleway' !important;
  letter-spacing: 0.5px;
}


/* Bullet Points */

.hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li:before, .pwr-rich-text ul li:before, .hs_cos_wrapper_type_post_filter ul li:before, .hs_cos_wrapper_type_post_listing ul li:before {
  height: 5px;
  left: -24px;
  top: 18px;
  width: 5px;
  border-radius: 50%;
}

.hs_cos_wrapper_type_rich_text ul:not(.inputs-list), .pwr-rich-text ul, .hs_cos_wrapper_type_post_filter ul, .hs_cos_wrapper_type_post_listing ul {
  -webkit-padding-start: 24px;
  padding-inline-start: 24px;
}


.pwr-sec-image-boxes__intro-sec,
.pwr-sec__title-intro--narrow, 
.pwr-sec__title--narrow{
  max-width: initial;
}

h3{
  color: #F26854;
}

.pwr-image-box:hover .pwr-image-box__back.pwr-3D-box__info-box, 
.pwr-image-box:hover .pwr-image-box__back.pwr-3D-box__info-box a, 
.pwr-image-box:hover .pwr-image-box__back.pwr-3D-box__info-box a .pwr-image-box__icon {
  color: #000000;
}



/******************************* System Pages  Css ********************************************/

.error-pages  .blog-header {
  background-color:#f5f3f0;
  min-height:200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
  width: 100%;
  padding: 70px 20px;
  text-align: center;
}
.error-pages .blog-header h1 {
  width: 100%;
  color: #ff3e1f;
}
.body-section {
  padding: 60px 0 0;
}
main.body-container-wrapper.error-pages {
  background-color: #fff;
}
.page-header h2{
  font-size: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
}
header.page-header, .email-subscription .page-header{
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color:#f5f3f0;
  border-bottom: 1px solid rgba(0,0,0,.125);
}
.error-pages .page-wrapper, .email-subscription {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
}
.error-pages .page-content, .email-subscription .success {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}
.error-pages p, .email-subscription .success{
  margin:10px 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.social-sharing {
  padding-bottom: 60px;
  padding-top: 60px;
} 
.products-section-title {
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-bottom: 1rem;
  font-size: 2.25rem;
}
.social-sharing-hashtag {
  color: #ff5f45;
  font-size: 1.25em;
  margin: 0.5em 0 1.5em;
  text-transform: uppercase;
  text-align: center;
}
.footer_social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}
.footer_social__item {
  margin: 0 0 0 2rem;
}
.footer_social__item:first-child {
  margin-left: 0;
}
.footer_social__item__link {
  border-radius: 100%;
  display: block;
  height: 4rem;
  line-height: 3.75;
  text-align: center;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer_social__item__link, .footer_social__item__link:visited {
  background: #ff5f45;
  color: #fff;
}
.footer_social__item svg.svg-inline--fa.fa-envelope.fa-w-16.fa-3x {
  width: 35px;
  height: 35px;
}
.server-error .body-section {
  padding-bottom: 60px;
}
.email-subscription .page-header {
  font-family: Averia Sans Libre,sans-serif;
}
.email-subscription .success {
  margin: 0;
}
.error-pages p.pwr-password-prompt__desc {
  font-size: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom:20px;
  color: #212529;
  line-height: 1.3;
}
.error-pages #hs-pwd-widget-password, .error-pages input.email-edit.hs-input, .search-block input#pwr-search-results__input {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin-bottom: 25px;
  margin-top:0 !important;
  max-width: 450px !important;
}
body .error-pages input[type="submit"].hs-button {
  border-radius: 0 !important;
  padding: 0.375rem 0.75rem !important;
  background-color:#ff5f45 !important;
  box-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 15%), 0 1px 1px rgb(0 0 0 / 8%);
  border: 1px solid #ff5f45 !important;
  line-height: 1.5;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
  min-height: 38px;
  margin-top: 0 !important;
}
body .error-pages input[type="submit"].hs-button:hover {
  color: #fff;
  background-color: #ff3e1f !important;
  border-color: #ff3312 !important;
}
.error-pages #hs-pwd-widget-password:focus, .error-pages input.email-edit.hs-input:focus, .search-block input#pwr-search-results__input:focus{
  background-color: #fff;  
  border-color:#ffcdc5;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 0 0.2rem rgb( 255 95 69 / 25% );
  outline:0;
}
.error-pages #hs-pwd-widget-password::-webkit-input-placeholder, .error-pages input.email-edit.hs-input::-webkit-input-placeholder,
input#pwr-search-results__input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #495057;
}
.error-pages #hs-pwd-widget-password::-moz-placeholder, .error-pages input.email-edit.hs-input::-moz-placeholder,
input#pwr-search-results__input::-moz-placeholder { /* Firefox 19+ */
  color: #495057;
}
.error-pages #hs-pwd-widget-password:-ms-input-placeholder, .error-pages input.email-edit.hs-input:-ms-input-placeholder,
input#pwr-search-results__input:-ms-input-placeholder { /* IE 10+ */
  color: #495057;
}
.error-pages #hs-pwd-widget-password:-moz-placeholder, .error-pages input.email-edit.hs-input:-moz-placeholder,
input#pwr-search-results__input:-moz-placeholder { /* Firefox 18- */
  color: #495057;
}
.error-pages .pwr-email-unsub #email-prefs-form .email-edit {
  font-size: 1rem !important;
  padding: 0.375rem 0.75rem !important;
  margin-bottom:15px !important;
  max-width: 450px !important;
}
.error-pages .pwr-email-unsub #email-prefs-form #content>h3 {
  font-family: Averia Sans Libre,sans-serif;
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 22px;
  font-weight: 900 !important;
  color: #212529;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0;
}
.subscription-pref .blog-header h4 {
  margin-top: 10px;
}
.subscription-pref  [type="checkbox"]+span:before {
  background-color:#FF5F44 !important;
  border-radius: 0;
  height: 1rem;
  width: 1rem;
  color: #fff;
  border-color: #ff5f45;
  box-shadow: none;
}
.subscription-pref [type="checkbox"]:checked+span:after {
  background-image: url(https://19545004.fs1.hubspotusercontent-na1.net/hubfs/19545004/System_Template/download.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-color:transparent;
  left: 1px !important;
}
.subscription-pref .pwr-email-prefs .email-prefs .item .item-inner {
  background-color: #f5f3f0 !important;

}
.subscription-pref .pwr-email-prefs .subscribe-options>p span {
  padding-left: 30px !important;
}
.subscription-pref  .pwr-email-prefs .email-prefs .item .item-inner p {
  margin: 0 20px 0 131px !important;
}
.subscription-pref .pwr-email-prefs .email-prefs .item .item-inner * {
  margin-top:0 !important;
  margin-bottom: 0 !important;
}
.subscription-pref  .pwr-email-prefs #email-prefs-form .page-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.subscription-pref p.header, .subscription-pref .pwr-email-prefs .email-prefs .item .item-inner p {
  margin: 10px 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.subscription-pref .pwr-email-prefs #email-prefs-form .page-header {
  font-family: Averia Sans Libre,sans-serif;
  line-height: 1.5;
  padding-bottom: 25px;
}
.search-block .pwr-sec-search-results {
  background-color: transparent !important;
}
.search-block input#pwr-search-results__input {
  max-width: 100% !important;
  margin-bottom: 0;
  padding-right: 35px !important
}
.search-block .pwr-search-field__icon svg path {
  fill: #ff3e1f;
}
.search-block .pwr-sec-search-results {
  padding-bottom: 40px;
}


.body-container-wrapper div:not(.bread-crumb-menu) > ul, .body-container-wrapper .pwr-post-content ul {
  padding: 0 !important;
  list-style-type: none !important;
}

.body-container-wrapper div:not(.bread-crumb-menu) > ul li, .body-container-wrapper .pwr-post-content ul li {
  list-style-type: none !important;
  padding:0 0 0 40px;
}

.body-container-wrapper div:not(.bread-crumb-menu) > ul li:before, .body-container-wrapper .pwr-post-content ul li:before {
  content: '';
  background-image: url(https://19545004.fs1.hubspotusercontent-na1.net/hubfs/19545004/TomAndCo%20Branding/bullet%20point%20design.svg);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent!important;
  border-radius: 0;
  top: 10px;
  left: 10px;
}
.body-container-wrapper div:not(.bread-crumb-menu) > ul>li>ul>li:before, .body-container-wrapper .pwr-post-content ul>li>ul>li:before {
  content: '';
  background-image: url(https://19545004.fs1.hubspotusercontent-na1.net/hubfs/19545004/TomAndCo%20Branding/WORTEL-01.svg);
  width: 26px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent !important;
  border-radius: 0;
  top: 6px;
  left: 20px;
}
.pwr-footer ul li.hs-menu-item {
    padding-left: 0 !important;
}

.blog-index .pwr-background-img {
  object-fit: contain!important;
}

.tomco-tag {
  border-radius: 7px;
  display: inline-block;
  line-height: 1;
  padding: 5px 8px;
  transform: rotate(-3deg);
  margin: auto 5px;
  font-family: 'tom_and_coregular';
  margin: auto 5px;
  padding: 7px 13px;
  transform: rotate(-3deg);
  font-size: 1.15rem;
}

.pwr-blog-listing .tomco-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.tomco-tag.color-red {
  background-color: #e56a54;
  color: #ffbeaf;
}

.tomco-tag.color-green {
  background-color: #00594E;
  color: #B6EFC6;
}

h1 .tomco-tag,
h2 .tomco-tag,
h3 .tomco-tag,
h4 .tomco-tag,
h5 .tomco-tag,
h6 .tomco-tag,
h7 .tomco-tag {
  font-size: 68%;
  position: relative;
  top: -3px;
}

.pwr-post-item__img-container {
  overflow: hidden;
  border-radius: 30px;
  max-height: 238px;
  height: 100%;
}

.tomco-teaser-image {
  visibility: hidden;
}

.pwr-post-item .pwr-post-item__img {
  transition: all 1s ease-in-out;
}

.pwr-post-item:hover .pwr-post-item__img {
  transform: scale(1.25);
}

.body-container-wrapper div:not(.bread-crumb-menu) > ul.green li:before, 
.body-container-wrapper .pwr-post-content ul li:before {
  background-image: url("https://19545004.fs1.hubspotusercontent-na1.net/hubfs/19545004/TomAndCo%20Branding/bullet%20point%20design-green.svg");
}

.body-container-wrapper div:not(.bread-crumb-menu) > ul.white li:before, 
.body-container-wrapper .pwr-post-content ul li:before {
  background-image: url("https://19545004.fs1.hubspotusercontent-na1.net/hubfs/19545004/TomAndCo%20Branding/bullet%20point%20design-white.svg");
}


@media (max-width:767px){
  .subscription-pref .pwr-email-prefs .email-prefs .item .item-inner p {
    margin: 0 20px 0 32px !important;
  }
  .subscription-pref [type="checkbox"]:checked+span, .subscription-pref [type="checkbox"]:not(:checked)+span {
    padding-left: 8px !important;
  }
  .subscription-pref p.header, .subscription-pref .pwr-email-prefs .email-prefs .item .item-inner p {
    font-size: 15px;
  }
  .subscription-pref .pwr-email-prefs .email-prefs .item .item-inner {
    border-radius: 0;
  }
  .subscription-pref  .pwr-email-prefs .email-prefs .item .item-inner * {
    padding-top: 0;
  } 
  .subscription-pref span.fakelabel ::before {
    left: -20px;
  }
  .subscription-pref span.fakelabel {
    display: inline-block;
    position: relative;
    padding-left: 20px;
  }
  .subscription-pref [type="checkbox"]:checked+span:after {
    left: -19px!important;
  } 
  .subscribe-options [type="checkbox"]:checked+span:after  {
    left:1px !important;
  }
}


@media (max-width:480px){
  .footer_social__item {
    margin: 0 0 0 1rem;
  }
  .subscription-pref .pwr-email-prefs .subscribe-options>p span {
    line-height: 18px;
  }
} 

@media (min-width: 768px){
  .subscription-pref .pwr-email-prefs .email-prefs .item [type="checkbox"]+span:before {
    left: 60px;
  }
  .subscription-pref .pwr-email-prefs .email-prefs .item [type="checkbox"]:checked+span:after, .subscription-pref .pwr-email-prefs .email-prefs .item [type="checkbox"]:not(:checked)+span:after {
    left: 61px !important;
  }
}