@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;700&family=Palanquin:wght@400;500;600;700&display=swap');

/*make default font because they are using inline style in the web notes.*/
html, body, body p, body span {
    font-family: 'Palanquin', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-weight: 500 !important;
}

/*fonts-loaded class - applied by JS once Google Fonts finish loading (prevents FOUT).
  The base body font-family above already defines the final loaded state, so only the
  heading/menu switch to Antonio needs to be reasserted here.*/
html.fonts-loaded .BannerNote h2,
html.fonts-loaded .BannerNote h2 span,
html.fonts-loaded .GeneralBlueMainPage h1 span {
    font-family: 'Antonio', Impact, 'Arial Narrow', Arial, sans-serif !important;
}

/* Change top menu font to Antonio and override pureCssMenu font shorthand */
.GeneralBlueTop2 ul.pureCssMenu a,
.GeneralBlueTop2 ul.pureCssMenu a:hover,
.GeneralBlueTop2 ul.pureCssMenu a:focus,
.GeneralBlueTop2 ul.pureCssMenu li a:hover,
.GeneralBlueTop2 ul.pureCssMenu li.dis a:hover,
.GeneralBlueTop2 ul.pureCssMenu li.sep a:hover {
    font-family: 'Antonio', Impact, 'Arial Narrow', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.045em !important;
}

/*ensure all pureCssMenu links remain clickable. Explicit pointer-events
  guards against any inherited suppression from positioned ancestor elements
  or stacking context changes introduced by Andar or custom layout rules.*/
.GeneralBlueTop2 ul.pureCssMenu a {
    pointer-events: auto !important;
}

/*extend top nav items to fill the full menu bar height so the hover
  zone covers the entire bar, not just the link text. Flex on the ul
  and li stretches each item vertically; flex on the top-level a centers
  the text within the full-height hit area. Scoped to > li > a to avoid
  affecting pureCssMenu dropdown submenus. Padding and margin on the ul
  and li are zeroed so no vertical gap exists between the bar edges and
  the li hover zone — Andar's pureCssMenu CSS applies padding to these
  elements which would otherwise create dead zones at the top and bottom
  of the bar where li:hover never fires.*/
.GeneralBlueTop2 ul.pureCssMenu {
    display: flex !important;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
}

.GeneralBlueTop2 ul.pureCssMenu > li {
    display: flex !important;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
}

.GeneralBlueTop2 ul.pureCssMenu > li > a {
    display: flex !important;
    align-items: center;
    border-bottom: 4px solid transparent !important;
}

.BannerNote {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 8px !important;
    overflow: hidden;
    transform: translateZ(0);
    /*will-change intentionally omitted - managed entirely by JS*/
}

.BannerNote h2,
.BannerNote h2 span {
    color: #ffffff !important;
    font-family: 'Antonio', Impact, 'Arial Narrow', Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.045em !important;
}

/*make header height more because their logo does not fit vertically*/
.GeneralBlueTop1 {
    height: 71px;
    background-color: #ffffff !important;
}

.GeneralBlueTop2 {
    top: 71px;
    background: rgba(31, 78, 161, 0.92) !important;
    display: flex;
    align-items: stretch;
}

/*collapse vertical padding and margin on every wrapper element between
  .GeneralBlueTop2 and ul.pureCssMenu so the flex hover zone extends from
  the very top edge of the menu bar to the bottom with no gap. CSS handles
  external stylesheet values; JS Section 13 handles any Andar inline styles.
  display:flex and align-items:stretch on each level pass the full height
  of .GeneralBlueTop2 down through the wrapper chain to ul.pureCssMenu,
  so hovering anywhere in the blue bar triggers the gold indicator.*/
.GeneralBlueTop2 .container,
.GeneralBlueTop2 .GeneralBlue1PArea2,
.GeneralBlueTop2 .LFArea,
.GeneralBlueTop2 .Portlet,
.GeneralBlueTop2 .PortletMenu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: stretch;
}

/*change background color for footer and supply controlled top/bottom padding.
  Explicit padding here is the single source of breathing room around the footer;
  the wrapper-strip rules below zero all intermediate Andar and Bootstrap padding
  so nothing accumulates between .GeneralBlueBottom5 and .general-footer.*/
.GeneralBlueBottom5 {
    background-color: #21296B !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/*footer container - strip padding from every Andar and Bootstrap wrapper
  between .GeneralBlueBottom5 and .general-footer so the footer controls
  its own internal spacing entirely. Without this, DefaultStyle.css padding
  on .Portlet and .PortletNote, plus Bootstrap's 15px horizontal gutter on
  .container, accumulate alongside the footer's own .footer-inner padding.
  The Bootstrap .container horizontal padding is zeroed here because
  .footer-inner already supplies padding: 0 40px with its own max-width.*/

.GeneralBlueBottom5 .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.GeneralBlueBottom5 .GeneralBlue1PArea14,
.GeneralBlueBottom5 .LFArea,
.GeneralBlueBottom5 .Portlet,
.GeneralBlueBottom5 .PortletNote {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*Andar "Powered by" bar below the footer - same wrapper-strip treatment
  for the GeneralBlueFooter shell and its inner container. The LMMouseText
  line retains its own natural line-height; we only remove structural gaps.*/
.GeneralBlueFooter .container,
.GeneralBlueFooter .GeneralBlueFooter1 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*change background color for caption in banner*/
.carousel-caption {
    background-color: rgba(33, 41, 107, 0.8) !important;
    text-align: center;
    border-radius: 8px !important;
    overflow: hidden;
    transform: translateZ(0);
}

/*gold indicator bar on hover and keyboard focus for all top nav items.
  li:hover > a extends the trigger zone to the full <li> height so the
  bar appears when hovering anywhere in the menu bar, not just over the
  link text. :focus retains the indicator for keyboard navigation.
  No permanent selected-state bar - all items respond to interaction only.*/
.GeneralBlueTop2 ul.pureCssMenu li:hover > a,
.GeneralBlueTop2 ul.pureCssMenu a:focus {
    border-bottom: 4px solid #F5A800 !important;
}

/*focus indicator for keyboard and assistive technology users*/
.GeneralBlueTop2 ul.pureCssMenu a:focus {
    outline: 2px solid #F5A800;
    outline-offset: -2px;
}

/*remove text shadow*/
.GeneralBlueTop2 ul.pureCssMenu a,
.GeneralBlueTop2 ul.pureCssMenu a:hover,
.GeneralBlueTop2 ul.pureCssMenu li.dis a:hover,
.GeneralBlueTop2 ul.pureCssMenu li.sep a:hover {
    text-shadow: none !important;
}

/*remove float from company logo area*/
.GeneralBlueMainTop.row {
    float: none !important;
}

/*remove width to allow bigger images*/
.PortletLogo .WebLogoR img {
    max-width: 100% !important;
    max-height: inherit !important;
    margin: 4px 0 0 0 !important;
}

/*center employer logo - all page variants (N, L, P, and any future letters).
  All variants share the same structure: .PortletLogo > .Logo.WebLogoR > img.
  Scoping to .PortletLogo is sufficient - only employer logo portlets use this
  class. The img renders as display:block (confirmed via browser inspection on
  multiple pages), so margin:auto on the img is the correct centering method.
  Selector specificity (3 classes + 1 element) beats the existing
  .PortletLogo .WebLogoR img rule (2 classes + 1 element), so auto margins
  override the margin:10px 0 !important set there.*/
.PortletLogo .Logo.WebLogoR {
    float: none !important;
    display: block;
    width: 100%;
}

.PortletLogo .Logo.WebLogoR img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*put multiple employer logos beside each other on pages that render more
  than one (Area4 P-variant). Flex centers the group; the universal rule
  above centers each individual logo within its own portlet wrapper.*/
.LFArea.Area-GeneralBlue1PArea4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.LFArea.Area-GeneralBlue1PArea4 > div {
    float: none !important;
}

.LFArea.Area-GeneralBlue1PArea4 .Portlet {
    display: inline-block;
    float: none !important;
}

.LFArea.Area-GeneralBlue1PArea4 .Portlet-Separator {
    display: none;
}

/*prevent inline style from overriding font*/
.GeneralBlueMainPage h1 span {
    font-size: 2.5rem !important;
    line-height: 1.25;
    margin-bottom: 30px;
    font-family: 'Antonio', Impact, 'Arial Narrow', Arial, sans-serif !important;
}

/*restore Andar's invisible h1 placeholder to its intended zero-space state
  on the home page. Andar renders <h1><p><span style="font-size:1pt;
  color:#ffffff;">b</span></p></h1> as a spacer. Without this override our
  h1 span rule inflates it to 2.5rem, adding ~70px of unwanted vertical
  space between the logo row and the greeting letter.*/
.Body-Page-Home .GeneralBlueMainPage h1 span {
    font-size: 1pt !important;
    line-height: 0 !important;
    margin-bottom: 0 !important;
}

/*collapse top margin/padding between the logo row and main content body.
  DefaultStyle.css likely adds margin/padding to these wrapper divs; without
  zeroing them the gap between Logo 2 and the first line of content is large.
  !important needed to beat DefaultStyle.css declarations on these containers.
  A small padding-top is applied to give non-home pages breathing room between
  the logo and the page heading. The home page zeroes it back via the body
  class since the greeting letter should sit tightly against the logo.*/
.GeneralBlueMainContent {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

.Body-Page-Home .GeneralBlueMainContent {
    padding-top: 0 !important;
}

.Area-HomePage,
.Page-Home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/*collapse bottom spacing on the banner area so no gap appears between
  the banner and Logo 2. Targets the outer shell, its Andar wrappers, and
  the <p> tag wrapping the banner image (which carries a default paragraph
  bottom margin that adds visible space below the image).*/
.GeneralBlueTop3,
.GeneralBlueTop3 .LFArea,
.GeneralBlueTop3 .Portlet,
.GeneralBlueTop3 .PortletWebNote {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.GeneralBlueTop3 p {
    margin-bottom: 0 !important;
}

/*zero top margin/padding on the Role-Donor wrapper that sits between the
  GeneralBlueSecondaryMenu and GeneralBlueMainPage; DefaultStyle.css may
  add spacing here that contributes to the gap above Logo 2.*/
.Role-Donor {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/*thermometer/progress section: zero vertical margin and padding so an empty
  ThermometerSection contributes no space. JS Section 14 collapses it entirely
  when empty; this rule reduces residual space even before JS runs.*/
.ThermometerSection {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*floated content images - JS relocates these into the innermost content
  container (.note or .HomeSection) so float:right wraps the body text correctly.
  clear:right prevents stacking below any earlier right-floated element.
  !important required to override float:none rules elsewhere in sheet.
    .LeaderShipImage   - home page leadership headshot (home page only)
    .RTCGivingLevels   - Rockland Trust giving-levels graphic (account/page specific)*/
.LeaderShipImage,
.RTCGivingLevels {
    float: right !important;
    display: block;
    margin: 0 0 15px 20px;
    clear: right;
}

.LeaderShipImage img,
.RTCGivingLevels img {
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    display: block;
    max-width: 100%;
}

/*when the class is placed directly on the <img> in the Andar note (rather than
  on a wrapping element), the same border treatment must apply to the image
  itself. Harmless when the class is on a wrapper, since img descendants are
  covered by the rule above.*/
img.RTCGivingLevels {
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    max-width: 100%;
}

/*ensure the h1 sits flush at the top so the floated leadership image
  aligns with its top edge rather than dropping below leading whitespace*/
.GeneralBlueMainPage > h1 {
    margin-top: 0;
    padding-top: 0;
}

/*collapse empty Andar structural wrapper divs - Andar emits .PortletHeader,
  .PortletFooter, .AreaHeader, and .AreaFooter on every portlet and area
  regardless of whether they hold content. On most pages they are truly empty
  (no children at all) but their default margins and padding from DefaultStyle.css
  accumulate into visible vertical gaps. Targeting :empty ensures only content-free
  instances are collapsed; any portlet that injects content into these wrappers is
  unaffected.*/
.PortletHeader:empty,
.PortletFooter:empty,
.AreaHeader:empty,
.AreaFooter:empty,
.FooterMes:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*collapse the secondary menu region when its inner area div is empty.
  On accounts or page types with no sub-navigation configured, Andar still
  renders the .GeneralBlueSecondaryMenu shell, which adds a visible gap
  between the top nav and page content. The :has() fallback for older
  browsers is handled in JS Section 14.*/
.GeneralBlueSecondaryMenu:has(.GeneralBlue1PSecMenu:empty) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/*social icon list in the header bar: flex row with centered icons, gap
  between items, and brand-blue icon color. The display:flex and
  justify-content:center were previously set as an inline style on the
  wrapper div in the web note; the color was previously an inline style on
  each <i> element. !important on color beats any FontAwesome defaults.*/
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icons ul {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-icons i {
    color: #1F4EA1 !important;
    font-size: 1.25rem;
}

/*footer - full styles including layout, icons, and responsive rules.
  Footer body copy is intentionally 400; !important is required on these
  weights to win against the global body/p/span 500 !important rule above.*/
.general-footer {
    font-family: 'Palanquin', sans-serif;
    font-weight: 400 !important;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
}

.general-footer a,
.general-footer span,
.general-footer p,
.general-footer ul,
.general-footer ol,
.general-footer li {
    font-family: inherit;
    font-weight: 400 !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.general-footer h6 {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700 !important;
    color: #F5A800;
    margin: 0;
    padding: 0 0 4px 0;
    line-height: 1.2;
}

.general-footer a,
.general-footer a:visited {
    color: #ffffff;
    text-decoration: none;
}

.general-footer a:hover,
.general-footer a:focus {
    text-decoration: underline;
}

.general-footer ul {
    list-style: none;
}

.general-footer .footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.general-footer .footer-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    width: 100%;
    gap: 60px;
}

.general-footer .footer-col {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

/*role menu column desktop indent - mirrors the 25px padding-left previously
  set as an inline style on the .footer-col-role-menu div in the web note.
  The mobile block below zeroes this with !important.*/
.general-footer .footer-col-role-menu {
    padding-left: 25px;
}

/*contact column h6 indent - aligns the "Contact Us" heading with the
  28px left-padded address and phone icon rows beneath it. Previously set
  as an inline style on the h6 in the web note; the general h6 rule already
  supplies padding-bottom: 8px, so only padding-left is needed here.
  .footer-col-contact is the JS-applied fallback class for browsers without
  :has() support (Firefox < 121, Safari < 15.4) - see JS Section 14.*/
.general-footer .footer-col:has(.address-icon) h6,
.general-footer .footer-col-contact h6 {
    padding-left: 28px;
}

.general-footer .bottom-logo img {
    width: 240px;
    max-width: 100%;
    height: auto;
    display: block;
}

.general-footer .site-link {
    margin-top: 4px;
}

.general-footer .address-icon,
.general-footer .phone-icon {
    position: relative;
    padding-left: 28px;
    margin: 0 0 6px 0;
    background-repeat: no-repeat;
    background-position: 0 4px;
    background-size: 18px 18px;
}

.general-footer .address-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}

.general-footer .phone-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.21 2.2z'/></svg>");
}

@media (max-width: 768px) {
    .general-footer .footer-inner {
        padding: 0 24px;
    }

    .general-footer .footer-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .general-footer .footer-col {
        flex: 1 1 100% !important;
        padding-left: 0 !important;
        text-align: center;
    }

    .general-footer .footer-col h6 {
        padding-left: 0 !important;
    }

    .general-footer .bottom-logo img {
        margin: 0 auto;
    }

    .general-footer .address-icon,
    .general-footer .phone-icon {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    /*Role menu column: zero every possible left offset across the entire
      subtree (column, Andar wrappers, table, cells) then re-center the
      table as a block element using margin:auto. The * reset is safe here
      because this column contains only a heading and a single menu link.*/
    .general-footer .footer-col-role-menu,
    .general-footer .footer-col-role-menu * {
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    .general-footer .footer-col-role-menu table {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .general-footer .footer-col-role-menu td {
        padding: 0 !important;
        text-align: center !important;
    }
}

/*custom radio buttons - rounded corners, top menu color, transparent fill*/
input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px;
    height: 18px;
    border: 3px solid #1F4EA1;
    border-radius: 5px !important;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

input[type="radio"]:hover:not(:disabled) {
    border-color: #21296B;
    background-color: rgba(31, 78, 161, 0.08);
}

/*checked state uses background-image to avoid pseudo-element on void element*/
input[type="radio"]:checked {
    background-image: linear-gradient(#1F4EA1, #1F4EA1);
}

input[type="radio"]:focus {
    outline: 2px solid #1F4EA1;
    outline-offset: 2px;
}

input[type="radio"]:disabled {
    border-color: #a0a0a0;
    cursor: not-allowed;
    opacity: 0.55;
}

/*radio label styling - three native :has()/sibling cases plus the two JS
  polyfill classes share one set of base properties (color, font, weight,
  cursor). Case-specific layout (display, gap, alignment) is split out below.
  Case 1: <input> <label>        - label is adjacent sibling after input
  Case 2: <label><input> text</label> - label wraps input
  Case 3: <label for><input>     - label precedes input*/
input[type="radio"] + label,
label:has(input[type="radio"]),
label:has(+ input[type="radio"]),
label.has-radio,
label.precedes-radio {
    color: #1F4EA1;
    font-family: 'Palanquin', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    cursor: pointer;
}

/*cases that need inline-flex layout (wrapping label and JS polyfill wrapper)*/
label:has(input[type="radio"]),
label.has-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/*cases that sit inline alongside the input rather than wrapping it*/
input[type="radio"] + label,
label:has(+ input[type="radio"]),
label.precedes-radio {
    vertical-align: middle;
}

/*disabled label state for all native and polyfill cases*/
input[type="radio"]:disabled + label,
label:has(input[type="radio"]:disabled),
label:has(+ input[type="radio"]:disabled),
input[type="radio"] + label.is-disabled,
label.has-radio.is-disabled,
label.precedes-radio.is-disabled {
    color: #a0a0a0;
    cursor: not-allowed;
}

/*respect user motion preferences*/
@media (prefers-reduced-motion: reduce) {
    input[type="radio"] {
        transition: none;
    }
}

/*windows high contrast mode*/
@media (forced-colors: active) {
    input[type="radio"] {
        border-color: ButtonText;
    }

    input[type="radio"]:checked {
        background-image: linear-gradient(ButtonText, ButtonText);
    }
}

/*safari high contrast mode*/
@media (prefers-contrast: more) {
    input[type="radio"] {
        border-width: 4px;
        border-color: #000000;
    }

    input[type="radio"]:checked {
        background-image: linear-gradient(#000000, #000000);
    }

    input[type="radio"] + label,
    label:has(input[type="radio"]),
    label:has(+ input[type="radio"]),
    label.has-radio,
    label.precedes-radio {
        color: #000000;
    }
}

/*session timeout modal - label replaced with div in corrected HTML template.
  These rules target the new div-based structure and the original label-based
  structure (in case the template has not been updated yet) so styles hold
  regardless of which markup is rendered*/
.SessionTimeoutTimerLabel div,
.SessionTimeoutTimerLabel p,
.SessionTimeoutTimerLabel span.SessionTimeoutDialogText {
    display: inline;
}

div.SessionTimeoutTimerLabel,
label.SessionTimeoutTimerLabel {
    font-family: 'Palanquin', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 500;
}

/*mobile*/
@media only screen and (max-width: 767px) {
    .GeneralBlueMainPage {
        margin-top: 0;
    }

    .GeneralBlueMainPage h1 span {
        font-size: 1.75rem !important;
        line-height: 1.25;
    }

    /*stack floated content images above content on mobile*/
    .LeaderShipImage,
    .RTCGivingLevels {
        float: none !important;
        display: block;
        margin: 0 0 15px 0;
        width: 100%;
    }

}

/*tablet*/
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .GeneralBlueMainPage {
        margin-top: 85px;
    }
}