
/* Theming CSS */

  /* Header text color */
  .u-org--header {
    color: #393b3d;
  }

  button.u-org--header.appheader__button:hover,
  button.u-org--header.appheader__button:active {
    background-color: rgba(57, 59, 61, 0.1) !important;
  }

  button.u-org--header:not(.appnav__link):hover,
  button.u-org--header:not(.appnav__link):active,
  button.u-org--header:not(.appnav__link):focus {
    color: #393b3d;
  }

  button.u-org--header.appheader__searchbutton,
  button.u-org--header.appheader__categoriesbutton,
  input[type="search"].u-org--header {
    border-color: rgba(57, 59, 61, 0.3) !important;
  }

  button.u-org--header.appheader__searchbutton:hover,
  button.u-org--header.appheader__searchbutton:active,
  button.u-org--header.appheader__searchbutton:focus,
  button.u-org--header.appheader__searchbutton:focus-visible,
  button.u-org--header.appheader__categoriesbutton:hover,
  button.u-org--header.appheader__categoriesbutton:active,
  button.u-org--header.appheader__categoriesbutton:focus,
  button.u-org--header.appheader__categoriesbutton:focus-visible,
  input[type="search"].u-org--header:hover,
  input[type="search"].u-org--header:active,
  input[type="search"].u-org--header:focus,
  input[type="search"].u-org--header:focus-visible {
    border-color: rgba(57, 59, 61, 0.5) !important;
  }

  input[type="search"].u-org--header:focus {
    border-color: transparent !important;
  }

  .u-org--header .search__input--appheader:not(:focus):-ms-input-placeholder {
    color: #393b3d;
  }

  .u-org--header .search__input--appheader:not(:focus)::-ms-input-placeholder {
    color: #393b3d;
  }

  .u-org--header .search__input--appheader:not(:focus)::placeholder {
    color: #393b3d;
  }


  /* Organization color */
  .u-orgcolor--color,
  .u-orgcolor--hovercolor:hover {
    color: #fe5000 !important;
  }
  .u-orgcolor--bg,
  .u-orgcolor--hoverbg:hover {
    background-color: #fe5000 !important;
  }
  .u-orgcolor--border,
  .u-orgcolor--border:link,
  .u-orgcolor--border:visited,
  .u-orgcolor--border:hover,
  .u-orgcolor--border:active,
  .u-orgcolor--border:focus {
    border-color: #fe5000;
    color: #fe5000;
  }
  .u-orgcolor--borderonly,
  .u-orgcolor--borderonly:link,
  .u-orgcolor--borderonly:visited,
  .u-orgcolor--borderonly:hover,
  .u-orgcolor--borderonly:active,
  .u-orgcolor--borderonly:focus {
    border-color: #fe5000;
  }
  .u-orgcolor--borderhover:hover,
  .u-orgcolor--borderhover:hover {
    border-color: #fe5000;
  }
  .u-orgcolor--svgfill {
    color: #fe5000;
    fill: #fe5000;
  }
  .u-orgcolor--svgstroke {
    color: #fe5000;
    stroke: #fe5000;
  }
  .u-orgcolor--svgall {
    color: #fe5000;
    fill: #fe5000;
    stroke: #fe5000;
  }
  .u-org--svgactive[data-active="true"],
  .u-org--svgactive:hover {
    color: #fe5000 !important;
    stroke: #fe5000 !important;
  }
  .u-org--barchart:after {
    background-color: #fe5000 !important;
  }
  .u-org--piechart {
    color: rgba(0, 0, 0, 0.15);
    stroke: #fe5000;
  }
  .u-org--tooltip {
    background-color: #fe5000;
  }
  .u-org--tooltiptop:before {
    border-top-color: #fe5000;
  }
  .u-org--tooltipright:before {
    border-right-color: #fe5000;
  }
  .u-org--tooltipbottom:before {
    border-bottom-color: #fe5000;
  }
  .u-org--tooltipleft:before {
    border-left-color: #fe5000;
  }
  .updatecard__heading--new:before {
    background-color: #fe5000;
  }
  .session:before {
    background-color: #fe5000;
  }
  .activityprogress__value {
    background-color: #fe5000;
  }
}
  .iconbutton,
  .comments__headerbutton, {
    color: #fe5000;
  }

  .u-org--catalogflag {
    background-image: linear-gradient(225deg, #fe5000 50%, transparent 50%);
  }

  .u-org--catalogflagsearch {
    background-image: linear-gradient(225deg, #fe5000 50%, transparent 50%);
  }

  .u-org--catalogflag-in-progress {
    background-image: linear-gradient(225deg, #fff 47%, #fe5000 3%, transparent 50%);
    border-top: 1px solid #fe5000;
    border-right: 1px solid #fe5000;
    svg {
      color: #fe5000;
    }
  }

  .u-org--enrollmentmsgimage {
    background-color: #fe5000
  }

  .u-org--catalogflagbg {
    background-image: linear-gradient(225deg, #fe5000 50%, transparent 50%);
  }
  .u-org--catalogflagfill {
    color: #fe5000;
    fill: #fe5000;
  }

  .u-org--tabactive,
  .u-org--tab:hover,
  .u-org--tab:active,
  .u-org--tab:focus {
    border-color: #fe5000;
  }
  .link--primary,
  .u-org--link,
  .u-org--link:link,
  .u-org--link:visited,
  .u-org--link:hover,
  .u-org--link:active,
  .u-org--link:focus {
    color: #fe5000;
  }
  .u-org--linkhover:hover,
  .u-org--linkhover:active,
  .u-org--linkhover:focus {
    color: #fe5000;
  }

.button--primary:not([disabled]),
  .button--primary:link,
  .button--primary:visited,
  .button--primary:hover,
  .button--primary:active,
  .button--primary:focus,
  .blankslate .button,
  .coursebar__btn--active,
  .coursebar__btn--active:hover,
  .coursebar__btn--active:focus,
  .tagbutton--selected:not(.tagbutton--taxonomy) {
    background-color: #fe5000 !important;
    border-color: #fe5000 !important;
    color: #fff !important;
  }


  .tooltip {
    background-color: #fe5000;
  }
  .tooltip--left::before {
    border-left-color: #fe5000;
  }
  .tooltip--right::before {
    border-right-color: #fe5000;
  }
  .tooltip--bottom::before,
  .tooltip--bottom-left::before,
  .tooltip--bottom-right::before {
    border-bottom-color: #fe5000;
  }
  .tooltip--top::before,
  .tooltip--top-left::before,
  .tooltip--top-right::before {
    border-top-color: #fe5000;
  }
  .checkbox--primary .checkbox__input:checked + .checkbox__ui {
    background-color: #fe5000;
    border: 2px solid #fe5000;
  }
  .question .checkbox__input:checked + .checkbox__ui {
    background-color: #fe5000;
    border: 1px solid #fe5000;
  }
  .question .radio__input:checked + .radio__ui {
    border-color: #fe5000;
  }
  .question .radio__input:checked + .radio__ui::before {
    background-color: #fe5000;
  }
  .assessment__completedicon, .assessment__gradingicon {
    background-color: #fe5000;
  }
  .enrollmentmsg__image.enrollmentmsg__image--complete  {
    background-color: #fe5000;
  }

  .rank__listitem .radio__input:checked + .radio__ui {
    border-color: #fe5000;
  }
  .rank__listitem .radio__input:checked + .radio__ui::before {
    background-color: #fe5000;
  }
  .sharelinks__link:hover,
  .sharelinks__link:focus,
  .sharelinks__link.button:hover,
  .sharelinks__link.button:focus {
    color: #fe5000;
  }
  .rating input[type="radio"]:not([disabled]) + label {
    color: #fe5000;
  }
  .courselist__item[data-status="completed"] .courselist__marker, .courselist__item[data-status="in-progress"] .courselist__marker,
  .pathmenu__sectionitem[data-status="completed"] .pathmenu__itemmarker, .pathmenu__sectionitem[data-status="in-progress"] .pathmenu__itemmarker {
    color: #fe5000;
  }
  .courselist__item[data-status="in-progress"]:not([data-shape]) .courselist__marker {
    border-color: #fe5000;
  }

    .u-org--catalogflag-in-progress svg {
    color: #fe5000;
  }
}
  .pageoutline__currentlink,
  .pageoutline__currentlink:hover,
  .pageoutline__currentlink:focus {
    color: #fe5000;
  }
  .tagbutton--selected,
  .tagbutton--selected:hover,
  .tagbutton--selected:active,
  .tagbutton--selected.tagbutton--taxonomy:hover,
  .tagbutton--selected.tagbutton--taxonomy:active {
    border-color: inherit !important;
    background-color: #fe5000;
  }
  .tagbutton--selected.tagbutton--taxonomy {
    background-color: #fe50000c !important;
    border-color: #fe5000 !important;
  }
  .datepicker .pika-prev,
  .datepicker .pika-next {
    border: 1px solid #fe5000;
  }
  .datepicker .pika-prev,
  .datepicker .is-rtl .pika-next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2025'%20version%3D'1.1'%3E%3Cpolyline%20fill%3D'none'%20stroke%3D'%23fe5000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20points%3D'16.7%209.4%2011.6%2012.4%2016.6%2015.3'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .pika-next,
  .datepicker .is-rtl .pika-prev {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20version%3D'1.1'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M12.6%209.5L17.7%2012.4%2012.6%2015.3'%20fill-opacity%3D'0'%20stroke%3D'%23fe5000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .is-today .pika-button {
    color: #fe5000;
  }
  .datepicker .is-selected .pika-button,
  .datepicker .is-selected .pika-button:hover {
    background: #fe5000;
  }
  .banner__icon {
    color: #fe5000;
    background: #fe5000;
  }

  /* Branding logo */
  .header__titleicon.u-org--titleicon {
    max-width: 120px;
  }
  @media (min-width: 370px) {
    .header__titleicon.u-org--titleicon {
      max-width: 160px;
    }
  }
  .u-org--titleicon + .header__titletext,
  .u-org--titleicon + .sidemenu__titletext {
    display: none;
  }
  .u-org--header .header__titlelink {
    text-overflow: clip;
  }

  /* Custom CSS */
  /*font*/
p {
    font-family: 'Inter', sans-serif !important;
}

html {
  scroll-behavior: smooth;
}


/* Leveraging the global.css file with bootstrap */

/* Bootstrap main container */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Responsive column classes */
.col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Extra small devices (phones) */
@media (max-width: 575.98px) {

    /* Bootstrap main container */
    .container {
        max-width: 100%;
    }

    /* Responsive column classes */
    .col {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
}

/* Small devices (tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Bootstrap main container */
    .container {
        max-width: 540px;
    }
}

/* Medium devices (desktops) */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Bootstrap main container */
    .container {
        max-width: 720px;
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Bootstrap main container */
    .container {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) {

    /* Bootstrap main container */
    .container {
        max-width: 1140px;
    }
}

.appnav__link {
    font-size: 16px;
    font-weight: 600;
}



.appnav__listitem--text {
    padding: 0px 7px 5px 7px;
}

.appnav__link:hover,
.appnav__link:active {
    border-bottom: 6px solid #fe5000;
    color: #d69930;
}

@media only screen and (min-width: 992px) {

    .appnav__link:hover,
    .appnav__link:active {
        border-bottom: 6px solid #fe5000;
        color: #d69930;
    }
}

@media only screen and (min-width: 992px) {
    .appnav__link--current {
        border-bottom: 6px solid #fe5000;
        border-bottom: 6px solid;
        border-color: #d69930;
    }
}

.u-orgcolor--borderonly,
.u-orgcolor--borderonly:link,
.u-orgcolor--borderonly:visited,
.u-orgcolor--borderonly:hover,
.u-orgcolor--borderonly:active,
.u-orgcolor--borderonly:focus {
    border-color: #fe5000;
    border-bottom: 6px solid #fe5000;
    color: #d69930 !important;
}


.appfooter__item:last-child,
p.appfooter__item:last-child {
    display: none;
}

.appfooter__content {
    display: inline !important;
}



.main__content {
    max-width: 100%;
    margin-bottom: 0px;
}

@media screen and (min-width: 992px) {
    .main__content--catalog {
        padding: 0;
    }
}

#page-footer {
    display: none;
}

@media screen and (min-width: 992px) {
    .main__content--catalog {
        margin: 0px;
    }
}

.catalogcards__htmlcontent div {
    margin-bottom: 0px;
}

.catalogcards:last-of-type {
    margin: 0;
    /* Set margin to 0 */
}

/* Find the first element with the class .catalogcards */
.catalogcards:first-of-type {
    /* Apply the same styles as Bootstrap's .container class */
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

    /* Apply max-width for larger screens */
    max-width: 100%;
}

/* Media query for larger screens */
@media (min-width: 576px) {

    /* Adjust max-width for larger screens */
    .catalogcards:first-of-type {
        max-width: 540px;
        /* Bootstrap's small container width */
    }
}

@media (min-width: 768px) {

    /* Adjust max-width for medium screens */
    .catalogcards:first-of-type {
        max-width: 720px;
        /* Bootstrap's medium container width */
    }
}

@media (min-width: 992px) {

    /* Adjust max-width for large screens */
    .catalogcards:first-of-type {
        max-width: 960px;
        /* Bootstrap's large container width */
    }
}

@media (min-width: 1200px) {

    /* Adjust max-width for extra-large screens */
    .catalogcards:first-of-type {
        max-width: 1140px;
        /* Bootstrap's extra-large container width */
    }
}



.carousel div {
    position: relative;
}



.btn {
    margin: 10px;
    padding: 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

.btn:hover {
    background-color: #0056b3;
}

.carousel div img.second-image {
    width: 35%;
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFromRight 1s ease forwards;
    animation-delay: 2s;
    height: 89%;

margin-top: auto;

}
.carousel div img.first-image {
    width: 44%;
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFromRight 1s ease forwards;
    animation-delay: 2s;
    height: 110%;
    object-fit: cover;
    display: flex;
    justify-content: flex-end;
}

.carousel h1,
.carousel h2 {
    font-size: 4.5rem;
    color: white;
    display: flex;
    justify-content: left;
    text-align: left;
}

@media (max-width: 1200px) {
    .carousel {
        width: 70%;
        /* Smaller screens might need a different width */
        top: 13%;
        /* Adjust vertical positioning if necessary */
    }

    .carousel h1,
    h2 {
        font-size: 2.5rem;
    }
}

/* Override the default Slick dots style */
.slick-dots li button:before {
    content: '—';
    font-size: 34px;
    line-height: 30px;
    color: 1c1c1c;
    opacity: .3;
}

/* Style for the active dot */
.slick-dots li.slick-active button:before {
    color: 1c1c1c;
    /* Change color for the active dot/dash */
}

.slick-dots {
    bottom: -10px;
    /* Adjust the position of the dots container if necessary */
    width: 100%;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    margin: 0 5px;
    /* Adds spacing between the dots/dashes */
}

.carousel .slick-list {
    overflow: hidden;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        /* Start from the right */
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /* Move to final position */
        opacity: 1;
    }
}

/* End of Hero Image and Section */

.catalogcards {
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0;
}

.catalogcards__header {
    margin-bottom: 0px;
}

.catalogcards__htmlcontent a {
    text-decoration: none !important;
}



.pgcomponent[data-display-style="normal"] {
    max-width: 100%;
}

.course__fullwidthcontainer {
display:none;
}



      :root {
        --vds-color-primary-orange-70: #ffaa64;
        --vds-color-primary-orange-60: #fa782e;
        --vds-color-primary-orange-50: #fe5000;
        --vds-color-primary-orange-40: #cc4000;
        --vds-color-primary-orange-30: #993000;
        --vds-color-primary-canvas-100: #faf7f1;
        --vds-color-primary-canvas-90: #f3ead8;
        --vds-color-primary-canvas-80: #e8dabf;
        --vds-color-primary-neutral-white: #ffffff;
        --vds-color-primary-neutral-100: #f8f8f8;
        --vds-color-primary-neutral-90: #ededed;
        --vds-color-primary-neutral-80: #dadada;
        --vds-color-primary-neutral-30: #474747;
        --vds-color-primary-neutral-20: #2c2c2c;
        --vds-color-primary-neutral-10: #1c1c1c;
        --vds-color-primary-neutral-0: #0f0f0f;
        --vds-color-primary-neutral-black: #000000;
        --vds-color-secondary-honey-70: #fddf8d;
        --vds-color-secondary-honey-60: #fbd170;
        --vds-color-secondary-honey-50: #f9bc42;
        --vds-color-secondary-honey-40: #d69930;
        --vds-color-secondary-honey-30: #b37821;
        --vds-color-secondary-raspberry-70: #f76f87;
        --vds-color-secondary-raspberry-60: #f04a79;
        --vds-color-secondary-raspberry-50: #e61363;
        --vds-color-secondary-raspberry-40: #c50d65;
        --vds-color-secondary-raspberry-30: #a50963;
        --vds-color-secondary-slate-70: #6bb6cb;
        --vds-color-secondary-slate-60: #3e7e97;
        --vds-color-secondary-slate-50: #123c52;
        --vds-color-secondary-slate-40: #0d2f46;
        --vds-color-secondary-slate-30: #09233b;
        --vds-color-secondary-ice-70: #cffffe;
        --vds-color-secondary-ice-60: #c9f5f9;
        --vds-color-secondary-ice-50: #b8edf7;
        --vds-color-secondary-ice-40: #80c6db;
        --vds-color-secondary-ice-30: #589ab7;
        --vds-color-feedback-success-90: #eafce1;
        --vds-color-feedback-success-80: #d0fac4;
        --vds-color-feedback-success-70: #aef1a3;
        --vds-color-feedback-success-60: #8ce487;
        --vds-color-feedback-success-50: #61d365;
        --vds-color-feedback-success-40: #46b554;
        --vds-color-feedback-success-30: #309746;
        --vds-color-feedback-success-20: #1e7a3a;
        --vds-color-feedback-success-10: #126532;
        --vds-color-feedback-info-90: #d7fbff;
        --vds-color-feedback-info-80: #b0f3ff;
        --vds-color-feedback-info-70: #88e6ff;
        --vds-color-feedback-info-60: #6bd6ff;
        --vds-color-feedback-info-50: #3abdff;
        --vds-color-feedback-info-40: #2a94db;
        --vds-color-feedback-info-30: #1d70b7;
        --vds-color-feedback-info-20: #124f93;
        --vds-color-feedback-info-10: #0b387a;
        --vds-color-feedback-notice-90: #fefcd8;
        --vds-color-feedback-notice-80: #fdf8b2;
        --vds-color-feedback-notice-70: #fbf28b;
        --vds-color-feedback-notice-60: #f8ec6e;
        --vds-color-feedback-notice-50: #f4e23f;
        --vds-color-feedback-notice-40: #d1bf2e;
        --vds-color-feedback-notice-30: #af9e1f;
        --vds-color-feedback-notice-20: #8d7d14;
        --vds-color-feedback-notice-10: #75660c;
        --vds-color-feedback-problem-90: #fee2da;
        --vds-color-feedback-problem-80: #fdc0b6;
        --vds-color-feedback-problem-70: #f99590;
        --vds-color-feedback-problem-60: #f37379;
        --vds-color-feedback-problem-50: #ec475e;
        --vds-color-feedback-problem-40: #ca3356;
        --vds-color-feedback-problem-30: #a9234f;
        --vds-color-feedback-problem-20: #881646;
        --vds-color-feedback-problem-10: #710d40;
        --vds-color-gradient-canvas: linear-gradient(
          180deg,
          #faf7f1 0%,
          #ffffff 100%
        );
        --vds-color-gradient-orange: linear-gradient(
          180deg,
          #fe5000 0%,
          #cc4000 100%
        );
        --vds-color-gradient-black: linear-gradient(
          180deg,
          #1c1c1c 0%,
          #000000 100%
        );
        --vds-color-esg-campaign-eco-60: #8fbc55;
        --vds-color-esg-campaign-eco-50: #65954e;
        --vds-color-esg-campaign-eco-40: #3d7307;
        --vds-color-esg-campaign-eco-30: #0a5103;
        --vds-color-esg-campaign-eco-20: #063f00;
        --vds-color-esg-campaign-gradient-eco-light: linear-gradient(
          0deg,
          #0a5103 0%,
          #8fbc55 100%
        );
        --vds-color-esg-campaign-gradient-eco-dark: linear-gradient(
          0deg,
          #0a5103 0%,
          #65954e 100%
        );
      }

      /*3/12/2024, 3:12:17 PM*/
      @keyframes color-change {
        from {
          color: var(--start-color);
        }

        to {
          color: var(--end-color);
        }
      }

      .ps-doodles {
        position: relative;
        z-index: 0;
      }

      .ps-doodles [class^="ps-doodle-"] {
        position: relative;
        color: var(--vds-color-primary-orange-50);
        z-index: -1;
      }

      .ps-doodles [class^="ps-doodle-"]:after {
        content: "";
        display: block;
        position: absolute;
        background-color: var(--vds-color-primary-orange-60);
        z-index: -1;
      }

      .ps-doodles .ps-doodle-circle-l:after,
      .ps-doodles .ps-doodle-circle-m:after,
      .ps-doodles .ps-doodle-circle-s:after {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }

      .ps-doodles .ps-doodle-heart:after {
        top: 50%;
        left: 50%;
        transform: translate3d(-45%, -47%, 0);
        height: 102px;
        width: 94px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-heart-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-heart-s.svg);
      }

      .ps-doodles .ps-doodle-circle-s:after {
        height: 56px;
        width: 78px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-small-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-small-s.svg);
      }

      .ps-doodles .ps-doodle-circle-m:after {
        height: 56px;
        width: 122px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-medium-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-medium-s.svg);
      }

      .ps-doodles .ps-doodle-circle-l:after {
        height: 56px;
        width: 152px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-large-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-large-s.svg);
      }

      .ps-doodles .ps-doodle-underline:after {
        left: 50%;
        transform: translateX(-50%);
        height: 15px;
        width: 124px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-underline-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-underline-s.svg);
      }

      .ps-doodles .ps-doodle-squiggle:after {
        top: 86%;
        left: 50%;
        transform: translateX(-50%);
        height: 17px;
        width: 162px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-squiggle-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-squiggle-s.svg);
      }

      .ps-doodles .ps-doodle-arrow-down:after {
        top: 38%;
        right: -41px;
        height: 47px;
        width: 46px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-arrow-down-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-arrow-down-s.svg);
      }

      .ps-doodles .ps-doodle-exclamation:after {
        top: -28%;
        right: -20px;
        height: 44px;
        width: 15px;
        -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-exclamation-s.svg);
        mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-exclamation-s.svg);
      }

      @media (min-width: 640px) {
        .ps-doodles .ps-doodle-heart:after {
          height: 243px;
          width: 221px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-heart-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-heart-l.svg);
        }

        .ps-doodles .ps-doodle-circle-s:after {
          height: 131px;
          width: 186px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-small-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-small-l.svg);
        }

        .ps-doodles .ps-doodle-circle-m:after {
          height: 131px;
          width: 290px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-medium-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-medium-l.svg);
        }

        .ps-doodles .ps-doodle-circle-l:after {
          height: 131px;
          width: 363px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-large-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-circle-large-l.svg);
        }

        .ps-doodles .ps-doodle-underline:after {
          height: 34px;
          width: 294px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-underline-large.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-underline-large.svg);
        }

        .ps-doodles .ps-doodle-squiggle:after {
          height: 40px;
          width: 387px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-squiggle-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-squiggle-l.svg);
        }

        .ps-doodles .ps-doodle-arrow-down:after {
          right: -100px;
          height: 112px;
          width: 108px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-arrow-down-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-arrow-down-l.svg);
        }

        .ps-doodles .ps-doodle-exclamation:after {
          top: -30%;
          right: -43px;
          height: 103px;
          width: 33px;
          -webkit-mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-exclamation-l.svg);
          mask-image: url(/etc.clientlibs/purestorage-com/clientlibs/clientlib-page-v2/resources//img/ps-doodle-exclamation-l.svg);
        }
      }

      .ps-animated-doodle {
        --start-color: inherit;
        --end-color: var(--vds-color-primary-orange-50);
        position: relative;
      }

      .ps-animated-doodle svg {
        position: absolute;
        width: var(--width-em-value) !important;
        height: var(--height-em-value) !important;
        left: 50%;
        top: 50%;
        opacity: 0;
        z-index: -1;
      }

      .ps-animated-doodle svg path {
        stroke: var(--vds-color-primary-orange-60);
      }

      .ps-animated-doodle--visible {
        animation: color-change 1s linear;
        animation-fill-mode: forwards;
      }

      .ps-dark-theme [class^="ps-doodle-"]:after {
        background-color: var(--vds-color-primary-orange-40);
      }

      .ps-dark-theme .ps-animated-doodle svg path {
        stroke: var(--vds-color-primary-orange-40);
      }

      .ps-orange-theme [class^="ps-doodle-"] {
        color: var(--vds-color-primary-neutral-10);
      }

      .ps-orange-theme [class^="ps-doodle-"]:after {
        background-color: #feaa65;
      }

      .ps-orange-theme .ps-animated-doodle {
        --start-color: #fa782e;
        --end-color: var(--vds-color-primary-neutral-white);
      }

      .ps-orange-theme .ps-animated-doodle svg path {
        stroke: #feaa65;
      }

      @keyframes _ps-motion-fade-in {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      .hero-intro__eyebrow {
        font: normal 600 24px/28px Inter, sans-serif;
        letter-spacing: -0.03em;
      }

      @supports (font-variation-settings: normal) {
        .hero-intro__eyebrow {
          font-variation-settings: "wght" 600;
        }
      }

      /*.hero-intro__heading {
        font: normal 700 32px/36px Inter, sans-serif;
        letter-spacing: -0.03em;
      }*/

      @supports (font-variation-settings: normal) {
        .hero-intro__heading {
          font-variation-settings: "wght" 700;
        }
      }

      @media (min-width: 1040px) {
        .hero-intro__heading {
          font: normal 700 76px/80px Inter, sans-serif;
          letter-spacing: -0.03em;
        }}

      @media (max-width: 1040px) {
        .hero-intro__heading {
          font: normal 700 55px/64px Inter, sans-serif;
          letter-spacing: -0.03em;
        }}

      @media (max-width: 640px) {
        .hero-intro__heading {
    font: normal 700 3rem / 4rem Inter, sans-serif;
    letter-spacing: -0.03em;
    text-align: left;
        }}

        @supports (font-variation-settings: normal) {
          .hero-intro__heading {
            font-variation-settings: "wght" 700;
          }
        }
      

      .hero-intro {
        --word-appearance-delay: 35ms;
        width: 100%;
      }

      .hero-intro__content-wrapper {
        display: flex;
        flex-direction: column;
        background: 0 0;
        color: var(--vds-color-primary-neutral-white);
      }

      .hero-intro__content-wrapper.ps-light-theme {
        color: var(--vds-color-primary-neutral-10);
      }

      .hero-intro.ps-doodles
        .hero-intro__content-wrapper.ps-orange-theme
        .ps-animated-doodle {
        color: #fa782e;
      }

      .hero-intro__eyebrow,
      .hero-intro__heading {
        position: relative;
        text-align: center;
      }

      .hero-intro__eyebrow {
        margin-bottom: 8px;
        opacity: 1;
        top: 0;
        transition: opacity 0.5s, top 0.5s;
      }

      .hero-intro__eyebrow.stealth {
        opacity: 0;
        top: 40px;
      }

      .hero-intro__heading {
        margin: 0 0 40px 0;
      }

      .hero-intro__heading p {
        margin: 0;
      }

      .hero-intro__heading .heading-animation {
        position: relative;
        opacity: 1;
        top: 0;
        transition: opacity 0.5s, top 0.5s;
        transition-delay: calc(
          var(--word-appearance-delay) * var(--span-index)
        );
      }

      .hero-intro__heading .heading-animation.stealth {
        opacity: 0;
        top: 40px;
      }

      .hero-intro__heading--initial {
        visibility: hidden;
      }

      .hero-intro__cta-list-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero-intro__cta {
        display: none;
      }

      .hero-intro__cta--visible {
        display: block;
        opacity: 0;
      }

      .hero-intro__cta--visible.cta-animation {
        opacity: 0;
        animation: _ps-motion-fade-in 0.5s linear;
        animation-fill-mode: forwards;
      }

      .hero-intro__cta--visible.cta-animation.ps-btn--secondary-alt {
        animation-delay: 0.3s;
      }

      .hero-intro__cta--visible ~ .hero-intro__cta--visible {
        margin: 16px 0 0 0;
      }

      .hero-intro .ps-animated-doodle svg {
        transform: translate3d(-50%, -50%, 0) !important;
      }

      .hero-intro .ps-animated-doodle--last svg,
      .hero-intro .ps-animated-doodle:last-child svg {
        transform: translate3d(-40%, -47%, 0) !important;
      }

      .hero-intro .ps-animated-doodle:last-child svg {
        left: 100%;
      }

      @media (min-width: 640px) {
        .hero-intro__heading {
          margin-bottom: 64px;
        }

        .hero-intro__cta-list-wrapper {
          flex-direction: row;
          justify-content: center;
        }

        .hero-intro__cta--visible ~ .hero-intro__cta--visible {
          margin: 0 0 0 16px;
        }
      }


      @media (min-width: 1024px) {
        .hero-intro__content-wrapper {
          margin: 0 40px;
        }

        .hero-intro__eyebrow,
        .hero-intro__heading {
          text-align: center;
        }


        .hero-intro__heading {
          margin-bottom: 56px;
        }

        .hero-intro__cta-list-wrapper {
          justify-content: start;
        }
      }

@media(max-width: 991px) {.marquee.text-reveal-animation-disabled .marquee__title {
font-size: 4rem !important;
}
.catalogcards__htmlcontent {
margin: 0 0 !important;
}
}

@media (max-width: 768px) {
.sub-menu__wrapper {
display: none;
}
}

@media (max-width: 639.98px) {
.marquee-standard .marquee__main-cell {
display: none;
}
}

.sub-menu__main-item--title.active {
    background-color: #1c1c1c !important;
}
.sub-menu__main-item--title {
    padding: 12px !important;
}

/* Hide Login Username and Password Fields SF 00116104 */
.login__form {
display: none
}
