/*  --------------------------------------------------------------------------  *\

    BASE FILES

    These files establish the base of the theme, they include variables, 
    mixins, resets, functions, and fonts.

    Variables, Functions, and Mixins should be loaded with every stylesheet.
    Fonts and resets should only be loaded in the global-elements.scss file to
    reduce the overall file size.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    GLOBAL SITE VARIABLES

    ORGANIZATION OF OUR CSS DEFINITIONS GROUP CLASS DEFINITIONS BY THE FOLLOWING TYPES

    POSITIONING (DISPLAY, FLEX, FLEX ITEM, POSITION, LEFT, TOP, TRANSFORM)
    BOX SIZING (WIDTH, HEIGHT, MARGIN, PADDING)
    BOX STYLING (OPACITY, BACKGROUND, BOX SHADOW, BORDER, BORDER RADIUS, OVERFLOW)
    FONT STYLING (FONT, FONT-FAMILY, FONT-STYLE, FONT-SIZE, LINE-HEIGHT, FONT-WEIGHT)
    TEXT STYLING (TEXT-DECORATION, TEXT-TRANSFORM, TEXT-ALIGN, TEXT-SHADOW)
    OTHER (TRANSITONS, ANIMATIONS, CURSOR)

    IF A MIXIN IS AVAILABLE USE THAT INSTEAD WRITING ALL PROPERTIES OUT

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    COLORS
    
    IT'S IMPORTANT TO USE A GENERIC NAMING SYSTEM FOR COLORS USED THROUGHOUT THE 
    SITE. THIS ALLOWS US TO BUILD UPDATE VARIABLES IN THE FUTURE WITHOUT HAVING 
    POTENTIAL ISSUES LIKE RED BECOMING GREEN DUE TO A RE-BRAND.

    Primary, Seoncdary, and Tertiary refer to the most used, second most used
    and third most used color in the pallete.  These are generally shades of
    gray used to set the color of copy and backgrounds of elements.

    Aceent colors are used to set the brand colors used throughout the web 
    design. These are commonly used to accent an element like when used as a 
    border or design element to a heading, or draw the users attention to a
    call to action like a button.

    The reason we want to stick to this style naming convention for colors
    is so that if the branding of the company changes, we can quickly update
    a variable from a light shade of green to a WCAG compliant shade of green
    and not have to do a find and replace for $lt-green and change it to 
    $dk-green.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    FONT SETTINGS

    These variables define the font settings used throughout the website.

    Setting the copies font family, size, color and line-height allows us to 
    use these variables throughout our files and ensure we are consistently
    setting things up.  These are all used in the reset file on the body and 
    html element, which should mean the only time you need to re-use these
    are when you are resetting a more specific class back to these values.

    The headings file under structure utilize the heading variables.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    MEDIA QUERIES

    Common media queries that we utilize throughout the SCSS for the website.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    GRID SETUP

    Grid variables that are used to set the base variables of the Grid Mixins.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    GUTTER

    This is probably the most used set of variables found throuhgout the base 
    styling of the component library.

    Utilizing a standard set of gutters for spacing will help maintain 
    consistency throughout the website. Most of our designers use at least 3
    common sizes for gutters in their designs.

    We utilize the Normal, Small and Large gutters to create the spacing for
    all of our components that have sm and lg variations.  The core styling
    utilizes the $gutter variable, while the sm and lg utilize $gutterSm
    and $gutterLg respectively.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    FEED SPACING FOR CARDS

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    GLOBAL MIXINS

    These are a common set of mixins that are commonly 

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    SCREEN READER ONLY

    This mixin hides all content from the view, but keeps it audible for 
    screen readers.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    CLEARS

    Both of the following mixins can be used to clear floated elements.

    Clearfix makes the before and after of the wrapping element able to clear
    the floats contained within it. This is good to use when all floated 
    elements are contained with in a single parent element.

    Clear makes the element itself clear the floats, this is used when an 
    element is following a floated element and needs to be on a new row.

    While floating is older and not as prefered as using newer techniques for 
    page layout, it still serves a useful purpose and should be used 
    appropriately.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE APPEARANCE MIXIN

    This is used to reset an objects experience of the default settings applied
    by the browser.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE HOVER/FOCUS MIXIN

    90% of the time when a hover psuedo class is added to an element the focus 
    psuedo class should be defined as well. These psuedo classes are also 
    generally the same styles.

    We've created the hover mixin to apply both the hover & focus states.

    This MUST be used whenever defining a hover state, unless the focus state
    requires different behavior to be applied.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE TRAMSFORM MIXINS

    Transform is used to move an element on the page, without triggering a 
    re-paint.  This is key when animating either through animate or transition
    on an element, the animation will be faster and work better when using the
    transform property rather than the left, top, right, and bottom properties.

    The transform mixins are a set of commonly coupled CSS 3 properties used
    together.  They are each individually defined because they don't all need
    to be used all the time.

    Transform is a must for all of the others to work, and the others are 
    useless without it.

    Transform Origin will change the location where the transform will start
    to take effect from.

    Perspective will be be amount of distance in space the transform should be
    applied from.

    Backface is used to hide the backside of an element when it's rotated and
    the back of the parent element is not visible.  Without this applied, the
    back side of the element will appear behind the front of the element.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE POSITION MIXIN

    The position mixin was created to help position elements by combining 
    severally coupled properties into the mixin.

    When positioning something relative, absolute, fixed, or sticky we almost
    always are defining the z-index, so that is our second variable.  Setting
    the variable to null will ignore the z-index property completely and the
    z-index will be inherited from it's natural position in the dom. Otherwise
    pass in an integer and the z-index will be defined.

    The next variable applies the direction, this can either be an array of 
    directions passed in like (top, left), or it can be a single direction like
    left.

    The next variable applies the coordinates corresponding to the direction. 
    For each direction passed in, a corresponding coordinate needs to accompany
    it. For example if (top, left) is set as our direction, then (0, 0) would 
    set the top: 0; left: 0; properties.

    The last variable to be passed in is the transform property which will 
    call the transform mixin.

    Only the position variable is required to make the mixin wor, which is why
    we default to relative, the rest are preset to null.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE FLEX MIXINS

    This group of mixins can be used to ensure all vendor prefixing is 
    correctly applied to support older browsers.  In addition, we couple the 
    common properties that work with flex.

    When the flex mixin is called, the first property will set the display of
    the object to flex.

    The first variable allows you to set the justify content property which 
    aligns the child elements accross the first axis. 

    Remember:
        - when setting flex-flow to column the first axis is the Y-axis 
        - when setting flex-flow to row the first axis is the X-axis

    The second variable allows you to set the align items property which 
    aligns the child elements accross the second axis. 

    Remember:
        - when setting flex-flow to column the second axis is the Y-axis 
        - when setting flex-flow to row the second axis is the X-axis

    The third variable allows you to set align content, which has no effect
    when there is only one line of items, 

    The final variable is flex-flow which allows you to set the direction and 
    whether the items inside can wrap or not.

    The Flex Item mixin is used to apply properties to the flexed item.

    The first three variables are required in order for this mixin to work.

    The grow variable tells the flex item whether it's allowed to grow to 
    fill the unused space.

    The shrink variable tells the flex item whether it's allowed to shrink
    to accomodate more elements within the space.

    The flex basis variable defines how much space the element should take up
    initially, then scale proportionatly based on that with the other sibling
    elements. Generally we leave this set to auto.

    The final variable defines the order for the element to appear.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE CSS COLUMNS MIXIN

    This is used to set a parent element to X number of columns. This is not to 
    be confused with our grid columns, or grid-template-columns mixins.

    The multicolumn mixin breaks the content contained within a parent element
    into multiple columns.  This is helpful for breaking lists or paragraphs
    into multiple columns.

    The first variable defines how many columns are desired.

    The second variable defines the space between each column.

    The third variable defines the rule styling (same definition as a border)
    applied between each column.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE SET WIDTH MIXIN

    This mixin is used to set the width of an element based on a group of
    media queries and their corresponding widths. For example the div within
    the header, section, and footer elements all use this mixin to set the
    width of the element at a corresponding media query so they are all
    styled with the same width.
    
    The first variable is a set of media queries, the first item in the array
    will be set as the default. The following items will all be set to their
    corresponding media queries.
    
    The second variable is an array of widths, normally % based, but could be
    any value acceptable to be defined in the width property.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE CSS3 GRID MIXINS

    This set of mixins are used to build grid layouts using the CSS3 Grid 
    property.

    Grid Columns is used to set the columns on a parent element.

    Grid Rows is used to set the rows on a parent element.
    
    Grid Column Gap will define the space between the columns.

    Grid Row Gap will define the space between the rows.

    Grid will combine all of the above mixins into 1 mixin used to define
    the base of the parent item.  The above mixins can be used on their own
    to change their values at various media queries.

    IE11 does support grid, so we can utilize it to create complex layouts, 
    however there are some elements of the grid which it does not support.  
    This mixin will fix all of that and write out the proper settings to 
    support IE.

    We utilize the @supports feature which is not supported by IE11, but is
    supported by all browsers that also happen to use grid.  So using this 
    feature we can reset some of the settings applied to IE11.

    The grid item mixin will set specific values needed for the placement of
    the item itself.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE GRID LAYOUT MIXINS

    This mixin is used to create a row and column based grid structure, like 
    the one found in bootstrap, actually exactly like the one found in bootstrap.

    The Set Col Widths mixin is looped over and sets the width based of an 
    element based on how many columns are defined.

    Generate Columns is used to loop over each media query and then calls the 
    Set Col Widths mixin to build each group out.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    CSS 3 EFFECTS

    These mixins in the past have had lots of browser prefixes to make them
    work across all the browsers.

    We will maintain the prefixes, and remove them as needed.

    The mixins will continue to work, as to not break the code, but as older
    browsers decline in use, we will remove unnecessary prefixes to help keep
    our file size limited.

    Effects include:
    * Box Shadow
    * Animations
    * Filters
    * Tranistions

\*  --------------------------------------------------------------------------  */
/*--- FILTERS ---*/
/*--- TRANSITION ---*/
/*  --------------------------------------------------------------------------  *\

    THE FONT SIZE MIXIN

    This mixin was originally used to support REM and PX based measurement for
    fonts.  However, since we have moved to a completely rem based measurement
    this mixin is less likely to be used.

    This is marked for deletion in an upcoming update, but we want to keep this
    around for a little while longer.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    THE BUTTON MIXIN

    This mixin controls the base button styles since there are several different
    buttons class structures used throughout BigCommerce.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    BORDER MIXIN

    This mixin creates border around given selector for testing purposes

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    FOCUS TOOLTIP

    This mixin creates a tooltip on focus for accessibility

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    HOME PAGE COMPONENTS

    Only files that are used by the Home Page template should be loaded below.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    FEEDS

    Only files that are used by the Product Feeds Components should be loaded.

\*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------  *\

    PRODUCT > FEEDS > STATIC

\*  --------------------------------------------------------------------------  */
.feeds-static > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.4375rem;
  row-gap: 1rem; }
  @media (min-width: 768px) {
    .feeds-static > div {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 1rem;
      row-gap: 1.5rem; } }
  @media (min-width: 992px) {
    .feeds-static > div {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 1.5rem;
      row-gap: 2rem; } }

/*  --------------------------------------------------------------------------  *\

    PRODUCT > FEEDS > CAROUSEL

\*  --------------------------------------------------------------------------  */
.feeds-carousel {
  position: relative;
  padding-bottom: 3.125rem; }
  @media (min-width: 576px) {
    .feeds-carousel {
      padding-bottom: 0; } }
  .feeds-carousel .slick-slider {
    margin: 0 -0.21875rem;
    width: calc(100% + 0.4375rem); }
    @media (min-width: 768px) {
      .feeds-carousel .slick-slider {
        margin: 0 -0.5rem;
        width: calc(100% + 1rem); } }
    @media (min-width: 992px) {
      .feeds-carousel .slick-slider {
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem); } }
  .feeds-carousel .slick-initialized .slick-slide {
    display: flex; }
  .feeds-carousel .carousel-heading-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row nowrap;
    margin-bottom: 1rem; }
    @media (min-width: 576px) {
      .feeds-carousel .carousel-heading-container {
        justify-content: flex-start; } }
    .feeds-carousel .carousel-heading-container h2 {
      margin-bottom: 0;
      font-weight: 500;
      font-size: 21px;
      line-height: 30px; }
      @media (min-width: 992px) {
        .feeds-carousel .carousel-heading-container h2 {
          font-weight: 500;
          font-size: 1.75rem;
          line-height: 2.5rem; } }
    @media (min-width: 768px) {
      .feeds-carousel .carousel-heading-container {
        margin-bottom: 1.5rem; } }
    .feeds-carousel .carousel-heading-container .line {
      display: none;
      height: 2px;
      background: #DEDFE1;
      flex: 1;
      margin: 0 1.875rem;
      opacity: 0; }
      @media (min-width: 576px) {
        .feeds-carousel .carousel-heading-container .line {
          display: block; } }
  .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs {
    width: 100%;
    margin: 0 0.21875rem; }
    @media (min-width: 768px) {
      .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs {
        margin: 0 0.5rem; } }
    @media (min-width: 992px) {
      .feeds-carousel .card, .feeds-carousel .thumbnails .thumbs {
        margin: 0 0.75rem; } }

.categories-carousel {
  margin-top: 3rem; }
  @media (max-width: 599px) {
    .categories-carousel {
      margin-bottom: 5.125rem; } }
  @media (min-width: 992px) {
    .categories-carousel {
      margin-top: 3.5rem; } }
  @media (min-width: 768px) {
    .categories-carousel .carousel {
      padding: 0 0.5625rem; } }
  .categories-carousel .category-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row;
    margin-bottom: 1.5rem; }
    .categories-carousel .category-header h2 {
      margin-bottom: 0; }
    @media (min-width: 992px) {
      .categories-carousel .category-header {
        margin-bottom: 2rem; } }
    .categories-carousel .category-header .custom-prev-cat, .categories-carousel .category-header .custom-next-cat {
      background-color: transparent;
      color: rgba(34, 36, 38, 0.25); }
      @media (max-width: 767.9px) {
        .categories-carousel .category-header .custom-prev-cat, .categories-carousel .category-header .custom-next-cat {
          display: none; } }
      .categories-carousel .category-header .custom-prev-cat:hover, .categories-carousel .category-header .custom-prev-cat:focus, .categories-carousel .category-header .custom-next-cat:hover, .categories-carousel .category-header .custom-next-cat:focus {
        background-color: rgba(165, 169, 173, 0.25);
        color: #222426; }
      .categories-carousel .category-header .custom-prev-cat:focus, .categories-carousel .category-header .custom-next-cat:focus {
        background-color: rgba(86, 90, 94, 0.25);
        color: #222426; }
  .categories-carousel .category {
    width: 21.5rem;
    height: 12rem;
    border-radius: 0.25rem;
    overflow: hidden;
    transition: .25s all ease-in-out;
    margin: 0 0.9375rem; }
    @media (min-width: 768px) {
      .categories-carousel .category {
        margin: 0 0.46875rem; } }
    @media (min-width: 768px) and (max-width: 991.9px) {
      .categories-carousel .category {
        height: 10rem; } }
    .categories-carousel .category img {
      height: 12rem;
      width: 100%;
      object-fit: cover; }
      @media (min-width: 768px) and (max-width: 991.9px) {
        .categories-carousel .category img {
          height: 10rem;
          object-fit: cover; } }
    .categories-carousel .category .content {
      position: relative;
      text-align: center;
      padding: 0.3125rem 0;
      height: 12rem;
      color: #fff;
      border-radius: 0.25rem;
      top: -54px;
      border-radius: 0;
      padding-top: 0.75rem;
      background-color: rgba(14, 59, 94, 0.75);
      transition: .25s all ease-in-out; }
      @media (min-width: 768px) and (max-width: 991.9px) {
        .categories-carousel .category .content {
          top: -40px;
          padding-top: 0.5rem; } }
      .categories-carousel .category .content .text strong {
        font-size: 1rem;
        font-weight: 600; }
      .categories-carousel .category .content .text hr {
        width: 10%;
        background: #fff;
        margin: 1.375rem auto; }
      .categories-carousel .category .content .text p, .categories-carousel .category .content .text a {
        padding: 0 0.625rem;
        margin: 0;
        font-size: 1.25rem;
        text-transform: capitalize;
        color: #fff; }
        @media (min-width: 768px) and (max-width: 991.9px) {
          .categories-carousel .category .content .text p, .categories-carousel .category .content .text a {
            font-size: 1rem; } }
        .categories-carousel .category .content .text p:last-of-type, .categories-carousel .category .content .text a:last-of-type {
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: row; }
          .categories-carousel .category .content .text p:last-of-type span, .categories-carousel .category .content .text a:last-of-type span {
            margin-left: 0.5rem;
            font-size: 0.625rem;
            color: #fff; }
        .categories-carousel .category .content .text p:hover, .categories-carousel .category .content .text p:focus, .categories-carousel .category .content .text a:hover, .categories-carousel .category .content .text a:focus {
          text-decoration: none; }
    .categories-carousel .category:hover .content, .categories-carousel .category:focus .content {
      top: -192px;
      padding-top: 2.8125rem; }
      @media (min-width: 768px) and (max-width: 991.9px) {
        .categories-carousel .category:hover .content, .categories-carousel .category:focus .content {
          top: -170px; } }

@media (min-width: 768px) {
  .cta-banner .container .flex-cont {
    display: flex; } }

.cta-banner .container .flex-cont.img-left {
  flex-direction: row; }

.cta-banner .container .flex-cont.img-right {
  flex-direction: row-reverse; }

.cta-banner .container .flex-cont .img-cont img {
  border-radius: 4px 4px 0 0;
  width: 100%;
  display: block; }
  @media (min-width: 768px) {
    .cta-banner .container .flex-cont .img-cont img {
      border-radius: 4px 0 0 4px; } }

.cta-banner .container .flex-cont .img-cont .tablet {
  display: none; }
  @media (min-width: 768px) {
    .cta-banner .container .flex-cont .img-cont .tablet {
      display: block;
      height: 100%;
      object-fit: cover; } }
  @media (min-width: 1200px) {
    .cta-banner .container .flex-cont .img-cont .tablet {
      display: none; } }

@media (min-width: 768px) {
  .cta-banner .container .flex-cont .img-cont .default {
    display: none; } }

@media (min-width: 1200px) {
  .cta-banner .container .flex-cont .img-cont .default {
    display: block;
    height: 100%;
    object-fit: cover; } }

@media (min-width: 768px) {
  .cta-banner .container .flex-cont .img-cont {
    width: 40%; } }

@media (min-width: 1200px) {
  .cta-banner .container .flex-cont .img-cont {
    width: 50%; } }

.cta-banner .container .flex-cont .content {
  background: #F2F4F5;
  padding: 1.5rem 1rem;
  border-radius: 0 0 4px 4px; }
  @media (min-width: 768px) {
    .cta-banner .container .flex-cont .content {
      border-radius: 0 4px 4px 0;
      padding: 32px 48px;
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; } }
  @media (min-width: 1200px) {
    .cta-banner .container .flex-cont .content {
      width: 50%;
      padding: 56px 72px; } }
  .cta-banner .container .flex-cont .content h3 {
    color: #222426;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin: 0 0 16px; }
    @media (min-width: 992px) {
      .cta-banner .container .flex-cont .content h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin: 0 0 24px; } }
  .cta-banner .container .flex-cont .content p {
    color: #565A5E;
    font-size: 1rem;
    line-height: 1.5rem; }
    @media (min-width: 992px) {
      .cta-banner .container .flex-cont .content p {
        margin-bottom: 2rem; } }