/* var2css
https://www.figma.com/community/plugin/1261234393153346915/variables2css */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@font-face{
  font-family: 'Lacrima Serif';
  src: url(../fonts/LacrimaSerif-Light.woff) format('woff');
  font-weight:300;
  font-style:normal;
}

@font-face{
  font-family: 'Lacrima Serif';
  src: url(../fonts/LacrimaSerif-Regular.woff) format('woff');
  font-weight:400;
  font-style:normal;
}

@font-face{
  font-family: 'Lacrima Serif';
  src: url(../fonts/LacrimaSerif-Medium.woff) format('woff');
  font-weight:500;
  font-style:normal;
}

@font-face{
  font-family: 'Lacrima Serif';
  src: url(../fonts/LacrimaSerif-Bold.woff) format('woff');
  font-weight:700;
  font-style:normal;
}

  .layout-container {
    font-family: 'Work Sans', sans-serif;
  }

  h1{
    font-family: var(--type-font-family-heading, "Lacrima Serif");
    font-size: var(--fontsize-heading-h1, 60px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h1, 72px);
    margin-block-start: 0;
    margin-block-end: 0;
  }

  h2{
    font-family: var(--type-font-family-heading, "Lacrima Serif");
    font-size: var(--fontsize-heading-h2, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h2, 56px);
    margin-block-start: 0;
    margin-block-end: 0;
  }

  h3{
    font-family: var(--type-font-family-heading, "Lacrima Serif");
    font-size: var(--fontsize-heading-h3, 40px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h3, 48px);
    margin-block-start: 0;
    margin-block-end: 0;
  }

  h4{
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h4, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h4, 40px);
    margin-block-start: 0;
    margin-block-end: 0;
    }

  h5{
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h5, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h5, 28px);
    margin-block-start: 0;
    margin-block-end: 0;
  }

  h6{
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h6, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h6, 24px);
    margin-block-start: 0;
    margin-block-end: 0;
  }

  p{
    margin-block-start: 0;
    margin-block-end: 0;
  }


     /* Base Placeholder Templates */

    .placeholder-secondary{
      border: var(--border-width-sm, 1px) solid var(--border-primary, #F2F2F3);
      background: var(--surface-tertiary, #E4EAE8);
    }

    .placeholder-background-image{
      background-color:transparent;
    }

    .placeholder-ctn-bg-img .placeholder-padding-ctn{
      background-color:transparent!important;
    }

    .placeholder-ctn-bg-img{
      background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/bg_placeholder.svg");
      background-size: 75%;
      background-position: center right;
      background-repeat:no-repeat;
    }

    /* Text Block - Site specific styling */

    .paragraph--type--text-block h3{
      color: var(--text-headings-secondary, #22302C);
    }

    .paragraph--type--text-block h5{
      color: var(--text-sub-headings-2, #6E837D);
    }

    .paragraph--type--text-block p,.paragraph--type--text-block li,.paragraph--type--text-block ul{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px);
    }

    .paragraph--type--text-block a:not(.button-basic), .paragraph--type--text-block a:not(.button-basic):hover{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px);
      text-decoration:underline;
    }

    .text-block-divider-ctn{
      display:flex;
      justify-content: center;
      align-items: center;
      gap:16px;
      padding-top:16px;
    }

    .text-block-divider-ctn svg{
      width: 56px;
      height: 56px;
    }

    .text-block-divider-ctn .text-block-divider-line{
      height:1px;
      flex:1;
      background-color: var(--border-primary, #F2F2F3);
    }

     /* Button - Site specific styling */

  .button-basic{
    font-family: var(--type-font-family-body, "Work Sans");
  }

  .button-primary{
    background: var(--surface-action1, #5B97EF);
    color: var(--text-on-action, #F2F2F3);
  }

  .button-primary:hover{
    background: var(--surface-action1-hover, #4979BF);
  }

  .button-secondary{
    background: var(--surface-action2, #E4EAE8);
    color: var(--text-action2, #5F756E);
  }

  .button-secondary:hover{
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .button-transparent{
    color: var(--text-action1, #5B97EF);
  }

  .button-transparent:hover{
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .button-transparent span{
    color: var(--text-action1, #5B97EF);
  }

  .button-outline{
    border: var(--border-width-sm, 1px) solid var(--border-action1, #5B97EF);
    color: var(--text-action1, #5B97EF);
  }

  .button-outline:hover{
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .button-outline span{
    color: var(--text-action1, #5B97EF);
  }

  .button-outline:hover span{
    color: var(--text-action1, #5B97EF);
  }

  .button-outline_inverse{
    border: var(--border-width-sm, 1px) solid var(--border-action-inverse, #F2F2F3);
    color: var(--text-inverse, #F2F2F3);
  }

  .button-outline_inverse:hover{
    color: var(--text-action1-hover, #4979BF);
    border: var(--border-width-sm, 1px) solid var(--border-action-inverse-hover, #FAFAFA);
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .button-outline_inverse span{
    color: #F2F2F3;
  }

  .button-outline_inverse:hover span{
    color: #4979BF;
  }

  .button-inverse{
    color: var(--text-action1, #5B97EF);
    background: var(--surface-action-inverse, #F2F2F3);
  }

  .button-inverse:hover{
    background: var(--surface-action-inverse-hover, #FAFAFA);
    color: var(--text-action1-hover, #4979BF);
  }

  .button-inverse:focus{
    color: var(--text-action1, #5B97EF);
    outline: var(--border-width-md, 2px) solid var(--border-focus-inverse, #FAFAFA);
  }

  .button-inverse span{
    color: #5B97EF;
  }

  .button-inverse:hover span{
    color: #4979BF;
  }


  .button-primary:focus,.button-secondary:focus,.button-transparent:focus,.button-outline:focus,.button-outline_inverse:focus{
    outline: var(--border-width-md, 2px) solid var(--border-focus, #375B8F);
  }

    /* Accordion Module - Site specific styling */

    .accordion-module h3{
      color: var(--text-headings-secondary, #22302C);
    }

    .accordion-module p,.accordion-module li,.accordion-module ul{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px); /* 160% */
    }

    .accordion-module a,.accordion-module a:hover{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px); /* 160% */
      text-decoration: underline;
    }

    .accordion-item .accordion-item-text p,.accordion-item .accordion-item-text li,.accordion-item .accordion-item-text ul{
      color: var(--text-body-secondary, #181818);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }
  
    .accordion-item .accordion-item-text a,.accordion-item .accordion-item-text a:hover{
      color: var(--text-body-secondary, #181818);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
      text-decoration: underline;
    }

    .accordion-item{
      border: var(--border-width-sm, 1px) solid var(--border-action2, #5F756E);
      background: var(--quaternary-300, #EFF2F1);
    }

    .accordion-item span.accordion-item-title {
      color: var(--text-action2-hover, #4C5E58);
    }

    .accordion-item span.accordion-item-title:hover {
      color: var(--text-action2-hover, #4C5E58);

    }

    .accordion-item.expanded span.accordion-item-title {
      border-bottom: 1px solid #5F756E;
    }

    .accordion-item span.accordion-item-title {
      background-image: url("/themes/custom/roost/components/accordion-section/images/etown/expand.svg");
    }

    .accordion-item span.accordion-item-title:hover {
      background-image: url("/themes/custom/roost/components/accordion-section/images/etown/expandhover.svg");
    }

    .accordion-item.expanded span.accordion-item-title {
      background-image: url("/themes/custom/roost/components/accordion-section/images/etown/collapse.svg");
    }

    .accordion-item.expanded span.accordion-item-title:hover {
      background-image: url("/themes/custom/roost/components/accordion-section/images/etown/collapsehover.svg");
    }

     /* Link Image Module - Site specific styling */
    .overlay-text p {
      padding-left:24px;
      padding-right:24px;
      color: var(--text-on-image, #F2F2F3);
      text-align: center;
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h4, 32px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h4, 40px); /* 125% */
    }

    .overlay-text {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .overlay-text:hover {
      border-radius: var(--border-radius-lg, 8px);
      background-color:  rgba(34, 48, 44, 0.80) ;
    }


    @media only screen and (max-width: 1000px) {
      .overlay-text p{
        font-size: 28px;
        line-height: 32px;
      }
    }

    @media only screen and (max-width: 743px) {
      .overlay-text {
        font-size: 28px;
      }
      .overlay-text p{
        font-size: 24px;
        line-height: 28px;
      }
    }


    /* Featured Link Image Module - Site specific styling */
    .featured-overlay-text p {
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h5, 24px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
      color: var(--text-headings-secondary, #22302C);
      background: var(--White-75, rgba(255, 255, 255, 0.75));
    }

    .featured-overlay-text svg g path{
      fill: #5F756E !important;
  }

    @media only screen and (max-width: 743px) {
      .featured-overlay-text {
        font-size: 28px;
      }
      .featured-overlay-text p{
        font-size: 20px;
        line-height: 24px;
      }
    }

    /* Profile Module - Site specific styling */
  .profile-name{
    color: var(--text-sub-headings, #22302C);
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h5, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
  }

  .profile-title{
    color: var(--text-body-primary, #5F756E);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }

  #block-etown-views-block-profile-module-block-1 h2{
    color: var(--text-headings-primary, #5B97EF);
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h4, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h4, 40px); /* 125% */
  }

  .profile-email,
  .profile-phone{
    color: var(--text-body-primary, #5F756E);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }
  .profile-email a{
    color: var(--text-body-primary, #5F756E);
  }

  .profile-body p{
    color: var(--text-body-primary, #5F756E);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-sm, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-sm, 20px); /* 166.667% */
  }

  @media (max-width: 1000px) {
    #block-etown-views-block-profile-module-block-1 h2{
      font-size:28px;
    }
  }

  @media (max-width: 743px) {
    .profile-name{
      font-size: 20px;
    }
    #block-etown-views-block-profile-module-block-1 h2{
      font-size:24px;
    }
  }


   /* Resource Cards Module - Site specific styling */

   .resource-body{
    color: var(--text-body-primary, #5F756E);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }

  .resource-card-module h4{
    color: var(--text-headings-primary, #5B97EF);
  }

  .resource-overlay-text .resource-title {
    color: var(--text-headings-secondary, #22302C);
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h5, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
  }

  .resource-title svg g path{
    fill:#5F756E!important;
  }

  .resource-overlay-text svg:hover{
    background: var(--surface-action2-hover, #EFF2F1);
  }

  @media only screen and (max-width: 1000px) {
    .resource-card-module h4{
      font-size: 28px;
    }
  }

  @media only screen and (max-width: 743px) {
    .resource-card-module h4{
      font-size: 24px;
      line-height: 24px;
    }
    .resource-overlay-text .resource-title{
      font-size: 20px;
      line-height: 20px;
    }
    .resource-overlay-text {
      font-size: 28px;
    }

    .resource-overlay-text p{
      font-size: 20px;
      line-height: 24px;
    }
  }
    /* Form Module - Site specific styling */

    .js-form-item.form-item.form-type-textfield.js-form-type-textfield.form-item-your-name.js-form-item-your-name{
      bottom: 350px;
      position: absolute;
      right:24px;
    }

    .webform-submission-contact-form h2{
      color: var(--text-headings-primary, #5B97EF);
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h4, 32px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h4, 40px)!important;
    }

    .webform-submission-contact-form p{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-sm, 12px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-sm, 20px);
    }

    #edit-message-value{
      border-radius: var(--border-radius-md, 4px);
      border: var(--border-width-sm, 1px) solid var(--border-primary, #F2F2F3);
      background: var(--surface-primary, #F2F2F3);
      width: 100%;
      color: #616161;
      transition: all 0.3s ease-in-out;
      padding: 8px 12px;
    }
  
    #edit-message-value:hover{
      border: var(--border-width-sm, 1px) solid var(--border-action1-hover, #5B97EF);
      background: var(--surface-action2-hover, #EFF2F1);
    }
  
    #edit-message-value:focus-visible {
      outline: 2px solid var(--text-headings-secondary, #22302C)!important;
    }

    .js-form-item label{
      color: var(--text-headings-secondary, #22302C);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 500;
      line-height: var(--line-height-body-md, 24px);
    }

    .js-form-item label.option{
      color: var(--text-headings-secondary, #22302C);
    }

    #edit-actions-submit.webform-button--submit.button.button--primary.js-form-submit.form-submit,
    #edit-actions-submit--2.webform-button--submit.button.button--primary.js-form-submit.form-submit,
    #edit-actions-submit--3.webform-button--submit.button.button--primary.js-form-submit.form-submit,
    #edit-actions-submit--4.webform-button--submit.button.button--primary.js-form-submit.form-submit{
      background: var(--surface-action1, #5B97EF);
      color: var(--text-on-action, #F2F2F3);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 500;
      line-height: var(--line-height-body-md, 24px);
      border: 1px solid #5B97EF;
      background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/arrow_right_alt_light.svg"); /* NEED TO ADD FOR ETOWN */
    }

    #edit-actions-submit.webform-button--submit.button.button--primary.js-form-submit.form-submit:hover,
    #edit-actions-submit--2.webform-button--submit.button.button--primary.js-form-submit.form-submit:hover,
    #edit-actions-submit--3.webform-button--submit.button.button--primary.js-form-submit.form-submit:hover,
    #edit-actions-submit--4.webform-button--submit.button.button--primary.js-form-submit.form-submit:hover{
      background: var(--surface-action1-hover, #4979BF);
      background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/arrow_right_alt_light.svg"); /* NEED TO ADD FOR ETOWN */
    }

    #edit-actions-submit.webform-button--submit.button.button--primary.js-form-submit.form-submit:focus,
    #edit-actions-submit--2.webform-button--submit.button.button--primary.js-form-submit.form-submit:focus,
    #edit-actions-submit--3.webform-button--submit.button.button--primary.js-form-submit.form-submit:focus,
    #edit-actions-submit--4.webform-button--submit.button.button--primary.js-form-submit.form-submit:focus{
      outline: 2px solid #375B8F;
      background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/arrow_right_alt_light.svg"); /* NEED TO ADD FOR ETOWN */
    }

    .js-form-type-textfield input,
    .js-form-type-email input,
    .js-form-type-tel input{
      color: var(--text-disabled, #A9A9AA);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    input#edit-name.form-text:focus-visible,
    input#edit-your-name.form-text:focus-visible,
    input#edit-email.form-email:focus-visible,
    input#edit-phone-number.form-tel:focus-visible{
      outline: 2px solid var(--text-headings-secondary, #22302C)!important;
    }

    input.form-text:focus-visible,
    input.form-text:focus-visible,
    input.form-email:focus-visible,
    input.form-tel:focus-visible{
      outline: 2px solid var(--text-headings-secondary, #22302C)!important;
    }

    form.webform-submission-form .js-form-type-checkbox input[type="checkbox"].form-checkbox:checked {
      accent-color: #5B97EF;
      --bs-form-switch-bg: url("/sites/etown.roostadk.com/themes/custom/etown/i/check_light.svg")!important; /* NEED TO ADD FOR ETOWN */
    }

    /* Region Call Out - Site specific styling */

    .callout-logo svg{
      padding:32px;
      max-width:625px;
      width:max-content;
    }

    .callout-title{
      color: var(--text-inverse, #F2F2F3);
      font-family: var(--type-font-family-sub-heading, Inter);
      font-size: var(--fontsize-heading-h4, 32px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h4, 40px); /* 125% */
    }

    .callout-body {
      color: var(--text-inverse, #F2F2F3);
      font-family: var(--type-font-family-body, Inter);
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px); /* 160% */
    }

    .callout-body span,
    .callout-body p{
      color:#F2F2F3!important;
    }

    .callout-btn{
      color: #FAFAFA;
      font-family: var(--type-font-family-body, Inter);
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 500;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .callout-btn a{
      background: #00A0E4;
      color: #FAFAFA!important;
    }

    .callout-btn a:hover{
      background:#4979BF;
    }

    .callout-btn a:active{
      background:#00A0E4;
    }

    .autumn { background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/callout-background-fall.jpg"); }
    .winter { background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/callout-background-winter.jpg"); }
    .spring { background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/callout-background-spring.jpg"); }
    .summer { background-image: url("/sites/etown.roostadk.com/themes/custom/etown/i/callout-background-summer.jpg"); }

    @media only screen and (max-width: 1440px) {
      .callout-logo svg{
        padding:32px;
        width:407px;
      }
    }

    @media only screen and (max-width: 1000px) {
      .callout-logo svg{
        padding:32px;
        width:507px;
      }
    }

    @media only screen and (max-width: 743px) {
      .callout-logo svg {
        height: 224px;
        width: 349px;
        padding:0!important;
      }
    }

    @media only screen and (max-width: 375px) {
      .callout-logo svg{
        width:340px;
      }
    }

  /* Story/Newsletter Listings Module - Site specific styling */
  .story-listings .story-listing-wrapper .story-listing-tag{
    border: var(--border-width-sm, 1px) solid var(--surface-disabled, #FAFAFA);
    background: var(--surface-primary, #F2F2F3);
    color: var(--text-body-primary, #5F756E);
    text-align: center;
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-sm, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-sm, 20px); /* 166.667% */
  }

  .story-listings h4{
    color: var(--text-headings-primary, #5B97EF);
  }

  .story-listings .story-listing-wrapper .views-row a h5{
    color: var(--text-headings-secondary, #22302C);
    font-family: var(--type-font-family-sub-heading, "Work Sans");
    font-size: var(--fontsize-heading-h5, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-heading-h5, 28px); /* 116.667% */
  }

  .story-listings h6{
    color: var(--text-headings-secondary, #22302C);
    margin-top:8px;
  }

  .story-listings .story-listing-wrapper .views-row p{
    color: var(--text-body-primary, #5F756E);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }

  .story-listing-auth-date{
    color: var(--text-headings-secondary, #22302C);
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }

  .bef-toggle--deselect-all{
    border: var(--border-width-sm, 1px) solid var(--border-action2, #5F756E);
    background: var(--surface-action2, #E4EAE8);
    color: var(--text-body-primary, #5F756E);
    text-align: center;
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
    text-decoration:none;
  }

  .story-listings .bef-checkboxes .js-form-item label.option,.story-listings .bef-toggle--select-all{
    border: var(--border-width-sm, 1px) solid var(--border-action2, #5F756E);
    color: var(--text-body-primary, #5F756E);
    text-align: center;
    font-family: var(--type-font-family-body, "Work Sans");
    font-size: var(--fontsize-body-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-body-md, 24px); /* 150% */
  }

  .story-listings .bef-checkboxes .js-form-item label.option:hover,.story-listings .bef-toggle--select-all:hover{
    border: var(--border-width-sm, 1px) solid var(--border-action2-hover, #7F918B);
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .story-listings .bef-checkboxes input[type="checkbox"]:checked + label.option{ 
    border: var(--border-width-sm, 1px) solid var(--border-action2-hover, #7F918B);
    background: var(--surface-action2-hover, #EFF2F1);
  }

  .story-listings .bef-checkboxes input[type="checkbox"]:checked +label.option:after,.bef-toggle--deselect-all::after{
    content: url("/sites/etown.roostadk.com/themes/custom/etown/i/close_small.svg");
    margin-bottom: -8px;
    margin-left: -4px;
  }

  .story-listing-link-ctn svg g path{
    fill:#5F756E;
  }

  .story-listing-link-ctn svg{
    border-radius: var(--border-radius-lg, 8px);
    transition: all 0.3s ease-in-out;
  }

  .story-listing-link-ctn svg:hover{
    background: var(--surface-action2-hover, #EFF2F1);
  }

    /* Share Now Popup - Site specific styling */

    #share-now-ctn {
      background: rgba(73, 121, 191, .90);
    }

    a.shareemail, .sharecopy #copy {
      font-family: var(--type-font-family-sub-heading, "Work Sans");
    }

    /* Event Node - Site specific styling */

    .events-header{
      color: var(--color-gray-light, #fefefe);
    }

    events-header-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    }

    .events-header-content{
    color: var(--text-inverse, #F2F2F3);
    }

    .next-event-date{
      background: var(--surface-highlight, #DDCC76);
    }

    .next-event-date h5{
      color: var(--text-headings-secondary, #22302C);
    }

    /* Listing Node - Site specific styling */

    .listing-all {
      color: var(--text-action1, #5B97EF);
      text-align: center;
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
      gap:12px;
      padding:4px;
    }

    .listing-all svg path{
      fill: var(--icon-action1, #5B97EF);
    }

    .listing-all:hover {
      color: var(--text-action1-hover, #4979BF);
      border-radius: var(--border-radius-md, 4px);
      background: var(--surface-action2-hover, #EFF2F1);
    }

    .listing-all:hover svg path{
      fill: var(--icon-action1-hover, #4979BF);
    }

    .listing-all:focus{
     color: var(--text-action1, #5B97EF);
     background:transparent;
     outline:var(--border-width-md, 2px) solid var(--border-focus, #375B8F);
    }

    .listing-all:focus svg path{
      fill: var(--icon-action1, #5B97EF);
    }

    summary::after {
      content: url("/themes/custom/roost/components/accordion-section/images/etown/expand.svg");
    }

    summary:hover::after {
      content: url("/themes/custom/roost/components/accordion-section/images/etown/expandhover.svg");
    }

    details[open] > summary::after {
      content: url("/themes/custom/roost/components/accordion-section/images/etown/collapse.svg");
    }

    details[open] > summary:hover::after {
      content: url("/themes/custom/roost/components/accordion-section/images/etown/collapsehover.svg");
    }

    .listing-left h1, .listing-left h2, .listing-left h3,.listing-left h4,.listing-left h5,.listing-left h6{
      color: var(--text-headings-secondary, #22302C);
    }

    .listing-right h3{
      color: var(--text-headings-secondary, #22302C);
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h4, 32px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h4, 40px); /* 125% */
    }

    .listing-left p,.listing-left a,.listing-left li{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px); /* 160% */
    }

    .listing-right p{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px);
    }

    .listing-info .remote-file-path-item{
      color: var(--text-body-secondary, #303031);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
      word-wrap: break-word;
      word-break:break-all;
    }

    .share-ctn a{
      background: var(--surface-action1, #5B97EF);
      color: var(--text-on-action, #F2F2F3);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 500;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .share-ctn a:hover{
      background: var(--surface-action1-hover, #4979BF);
    }


    .listings-share-ctn .material-symbols-outlined{
      color:#5B97EF;
    }

    .listings-share-ctn a{
      color: var(--text-action1, #5B97EF);
      text-align: center;
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .listings-share-ctn a:hover{
      color: var(--text-action1, #5B97EF);
    }

    .listing-title{
      color: var(--text-action2, #5F756E);
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h6, 18px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h6, 24px); /* 133.333% */
    }

    .listing-info, .listing-items{
      background: var(--surface-primary, #F2F2F3);
    }

    .listing-media-btns{
      background: var(--surface-primary, #F2F2F3);
    }


    .listing-info .listing-time{
      color: var(--text-body-secondary, #303031);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .show-more-dates{
      color: var(--text-action1, #5B97EF);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
   }

    .listing-items  .listing-address a, .listing-items  .listing-phone a, .listing-items  .listing-email a, .listing-items{
      color: var(--text-body-secondary, #303031);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .listing-third-party svg path{
      fill: var(--text-action2, #5F756E);
    }

    .listing-third-party:hover svg path{
      fill:var(--text-action2, #5F756E);
    }

    .address-name{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-sm, 12px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-sm, 20px); /* 166.667% */
    }

    .listing-info span, .listing-items span, .listing-phone span, .listing-tag-filter span{
      line-height: var(--line-height-body-md, 24px); /* 150% */
      color:#5B97EF;
    }

    .listing-media-btns a svg g path{
      fill:#5F756E;
    }

    .listing-media-btns a svg path{
      fill:#5F756E;
      transition:.25s;
    }

    .listing-media-btns a:hover svg path{
      fill:#52655f;
     }

    /* Story Node - Site specific styling */

    .story-top{
      background: var(--surface-tertiary, #E4EAE8);
    }

    .story-title{
      color: var(--text-headings-secondary, #22302C);
      font-family: var(--type-font-family-heading, "Lacrima Serif");
      font-size: var(--fontsize-heading-h2, 48px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h2, 56px);
    }

    .story-tag a{
      color: var(--text-body-primary, #616161)!important;
    }

    .story-publish{
      color: var(--text-sub-headings, #22302C);
      font-family: var(--type-font-family-sub-heading, "Work Sans");
      font-size: var(--fontsize-heading-h5, 24px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--line-height-heading-h5, 28px);
    }

    .story-summary{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-md, 16px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-md, 24px); /* 150% */
    }

    .story-body p,.story-body li,.story-body ul{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px);
    }

    .story-body a,.story-body a:hover{
      color: var(--text-body-primary, #5F756E);
      font-family: var(--type-font-family-body, "Work Sans");
      font-size: var(--fontsize-body-lg, 20px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--line-height-body-lg, 32px);
      text-decoration:underline;
    }

    .story-page h3,
    .story-page h2,
    .story-page h1{
      color: var(--text-headings-secondary, #22302C);
    }

    @media only screen and (max-width: 1000px) {
      .story-title{
        font-size: 40px;
      }
      .story-page h3{
        font-size: 32px;
      }
    }

    @media only screen and (max-width: 743px) {
      .story-title {
        font-size: 28px;
      }
      .story-publish{
        font-size: 20px;
      }
      .story-page h3 {
        font-size: 24px;
        line-height: 28px;
      }
    }

/* Alert - Site specific styling */
#block-popup{
  background: var(--surface-primary, #F2F2F3)!important;
}


.alert-title {
color: var(--text-action1, #5B97EF)!important;
font-family: var(--type-font-family-body, "Work Sans")!important;
font-size: var(--fontsize-body-md, 16px);
font-style: normal;
font-weight: 500;
line-height: var(--line-height-body-md, 24px); /* 150% */
}

.alert-body p{
color: var(--text-body-primary, #5F756E)!important;
font-family: var(--type-font-family-body, "Work Sans")!important;
font-size: var(--fontsize-body-sm, 12px);
font-style: normal;
font-weight: 400;
line-height: var(--line-height-body-sm, 20px); /* 166.667% */
}

.alert-img svg path {
fill: var(--icon-action1, #5B97EF)!important;
}

.alert-btn a{
color: var(--text-action1, #5B97EF)!important;
text-align: center;
font-family: var(--type-font-family-body, "Work Sans")!important;
font-size: var(--fontsize-body-md, 16px);
font-style: normal;
font-weight: 400;
line-height: var(--line-height-body-md, 24px); /* 150% */
border-radius: 4px;
}
.alert-btn a:hover{
  background:#EFF2F1!important;
  color:#4979BF!important;
}

.alert-btn a:hover svg path{
  fill:#4979BF;
}

.alert-btn a:focus{
  outline: var(--border-width-md, 2px) solid var(--border-focus, #375B8F);
}