/*
Theme Name: Avant Child
Theme URI: https://kairaweb.com/wordpress-theme/avant/
Template: avant
Author: Jamie Martell
Author URI: 
Description: Child-theme based on the Avante Wordpress theme.
Tags: two-columns,three-columns,left-sidebar,right-sidebar,grid-layout,flexible-header,custom-background,custom-colors,custom-menu,custom-logo,editor-style,featured-image-header,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,e-commerce,entertainment,portfolio
Version: 1.1.51.1663093431
Updated: 2022-09-13 14:23:51

*/
@media only screen and (max-width: 440px) {
    div#n2-ss-3 .n-uc-u9hFO6bsnNOP {
        display: none !important;
    }
}
@font-face {
    font-family: 'bernhard-tango';
    src: url('fonts/Bernhard Tango BT.ttf')  format('truetype'), /* Safari, Android, iOS */
}

/************************************************/
/**This styles the color of the main h1 titles & links for the same.**/
/************************************************/
h1 {
  font-family: 'bernhard-tango' !important;
  font-size: 38px !important;
  font-weight: bold !important;
  /*font-style: italic !important;*/
  /*color: #2F56B0 !important;*/
}
a.h1link22 {
  font-family: 'bernhard-tango' !important;
  font-size: 38px !important;
  font-weight: bold !important;
  /*font-style: italic !important;*/
  /*color: #2F56B0 !important;*/
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100% !important;
  background-repeat: no-repeat !important;
  background-size: 0% 2px;
  /*transition: background-size cubic-bezier(0,.5,0,1) 0.3s;*/
  /*I think this means speed. Changed to slower speed.*/
  transition: background-size cubic-bezier(0,.5,0,1) 1.5s; border-color:#000000 !important;
}
a.h1link22:link {color: #000000 !important; text-decoration: underline !important; border-color:#000000 !important; }
a.h1link22:visited {color: #000000 !important; text-decoration: none !important; border-color:#000000 !important; }
a.h1link22:hover {color: #457DFB !important; text-decoration: none !important; border-color:#000000 !important; }
a.h1link22:active {color: #000000 !important; text-decoration: underline !important; border-color:#000000 !important; }
a.h1link22 {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  /*transition: background-size cubic-bezier(0,.5,0,1) 0.3s;*/
  /*I think this means speed. Changed to slower speed.*/
  transition: background-size cubic-bezier(0,.5,0,1) 1.5s; border-color:#000000 !important;
}
a.h1link22:hover,
a.h1link22:focus {
  text-decoration: none !important;
  background-size: 100% 2px; border-color:#000000 !important;
}
}

/********************************************************/
/**These 2 price things allow me to recolor the links for the prices..**/
/********************************************************/
div.product p.price {
   color: #2F56B0 !important; font-weight: bold !important;
}
.woocommerce ul.products li.product .price {
  color: #2F56B0 !important; font-weight: bold !important;
}

p.price {
    color: #aa0000 !important; font-weight: bold !important; 
}
/**************************************************************/
/**This controls the active and hover color of the buttons...**/
/**************************************************************/
.woocommerce ul.products li.product .button {
  font-size: 16px;
            font-weight: bold !important;
            color: #000000 !important;
            background-color: #d3d3d3 !important; /* Light grey background */
            border: 2px solid #a0a0a0 !important; /* Darker border */
            padding: 8px 16px !important;
            border-radius: 2px !important;
            text-shadow: 1px 1px 0 #ffffff !important; /* Light shadow for text */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #a0a0a0 !important;
            cursor: pointer !important;
            outline: none !important;
            user-select: none !important; /* Prevent text selection */
            transition: all 0.1s ease-in-out !important;
}
.woocommerce ul.products li.product .button:hover {
            background-color: #b0b0b0 !important; /* Darker grey */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #808080 !important; /* Shadow change on hover */
        }
.woocommerce ul.products li.product .button:active {
            background-color: #a0a0a0 !important; /* Even darker grey */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #505050 !important; /* More pronounced shadow */
        }
/*************************************************************************************************/
/**This controls the active and hover color of the buttons in the product add-to-cart buttons...**/
/*************************************************************************************************/
.woocommerce div.product form.cart .button {
  font-size: 16px;
            font-weight: bold !important;
            color: #000000 !important;
            background-color: #d3d3d3 !important; /* Light grey background */
            border: 2px solid #a0a0a0 !important; /* Darker border */
            padding: 8px 16px !important;
            border-radius: 2px !important;
            text-shadow: 1px 1px 0 #ffffff !important; /* Light shadow for text */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #a0a0a0 !important;
            cursor: pointer !important;
            outline: none !important;
            user-select: none !important; /* Prevent text selection */
            transition: all 0.1s ease-in-out !important;
}
.woocommerce div.product form.cart .button:hover {
            background-color: #b0b0b0 !important; /* Darker grey */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #808080 !important; /* Shadow change on hover */
        }
.woocommerce div.product form.cart .button:active {
            background-color: #a0a0a0 !important; /* Even darker grey */
            box-shadow: inset 2px 2px 4px #ffffff, inset -2px -2px 4px #505050 !important; /* More pronounced shadow */
        }
        
/**************************************************************************************************************/
/**I shutoff the display of the cart also it will interfering with the menu and wasn't lining up correctly...**/
/**************************************************************************************************************/
.vi-wcaio-menu-cart .vi-wcaio-menu-cart-nav-wrap {
    display: flex !important;color:#000000 !important;
}
/*Kept this individual shop menu item to display columns in mobile view.*/
.error404 .content-area, .content-area-full, .page-template-template-full-width-php .content-area, .woocommerce .content-no-sidebar #container, .woocommerce-page .content-no-sidebar #container, .content-no-sidebar .content-area {
    float: none;
    width: 100% !important;
/*Removed the padding in mobile view.*/
    padding: 0px 0px !important;
}
/*Solved about menu item in max-menu not going full-width.*/
#mega-menu-item-text-17 {
width: 100% !important;
}
/*Full width menu*/
.site-header-top {
    color: #aaa;
    float: left !important;
    width: 100% !important;
    padding: 0px !important;
}
/*I added a background-color to each individual product box on the homepage and categories*/
.woocommerce ul.products.columns-4 li.product {
    width: 24%;
    background-color: #f6f6f6 !important;
}
/*Same here!*/
.woocommerce ul.products.columns-3 li.product {
    width: 32.3333%;
    background-color: #f6f6f6 !important;
}
/*Removed background color from the header, making it transparent*/
.site-header {
    background-color: transparent !important;
    box-shadow: none !important;
}
/*Removed background color from the body, making it transparent*/
.woocommerce #container, .woocommerce-page #container, .content-area {
    background-color: transparent !important;
  /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important; padding: 0px !important;*/
  box-shadow: rgba(0, 0, 0, 0.00) 0px 5px 15px !important;
  padding: 0px !important;
}

/*Removed margin from blockquote*/
blockquote {
  border-left: none !important;
  padding-top: 12px !important;
  padding-bottom: 14px !important;margin-left:10px !important;margin-right:10px !important;
}

/*Styles for blockquote NewBlock*/
.newblock {
  background-color:#fff !important; padding:6px !important;margin:6px !important;border-top:1px #000000 solid !important;
}

/*This code fixes the product boxes not lining up when background-color is applied.*/
@media screen and (min-width: 768px) {  
  ul.products {
    display: flex;
    flex-wrap: wrap;
  }
   
  ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   
  ul.products li.product .button {
    align-self: center;
  }
}
/*This code hides bottom footer bar.*/
.site-footer-bottom-bar {
    display: none !important;
}
.site-footer-standard {
    background-color: transparent !important;
    color: #000000 !important;
}
/*This code sets paragraph styles for all paragraphs.*/
p {
    margin: 0 0 20px;
    font-size: 18px !important;
    font-family: "Open Sans", "Arial", sans-serif !important;
    /*color: #36454f !important;*/
    color: #000000 !important;
    line-height: normal !important;
}

.ghostp {
    font-size: 30px !important; line-height: 1.2px !important;
}

.article {margin: 0 0 20px;
    font-size: 20px !important;
    font-family: "Open Sans", "Arial", sans-serif !important;
    color: #000000 !important;
}

/*blue color of links for main content on homepage.*/
/*a.newanchor:link {color: #0000EE !important; text-decoration: underline !important; }*/
/*a.newanchor:visited {color: #551A8B !important; text-decoration: underline !important; }*/
/*a.newanchor:hover {color: #551A8B !important; text-decoration: none !important; }*/
/*a.newanchor:active {color: #0000EE !important; text-decoration: underline !important;}*/
/*color of links for main content on homepage.*/
a.newanchor:link {color: #2F56B0 !important; text-decoration: none !important; border-color:#000000 !important; }
a.newanchor:visited {color: #457DFB !important; text-decoration: none !important; border-color:#000000 !important; }
a.newanchor:hover {color: #457DFB !important; text-decoration: none !important; border-color:#000000 !important; }
a.newanchor:active {color: #2F56B0 !important; text-decoration: none !important; border-color:#000000 !important; }
a.newanchor {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  /*transition: background-size cubic-bezier(0,.5,0,1) 0.3s;*/
  /*I think this means speed. Changed to slower speed.*/
  transition: background-size cubic-bezier(0,.5,0,1) 1.5s; border-color:#000000 !important;
}
a.newanchor:hover,
a.newanchor:focus {
  text-decoration: none;
  background-size: 100% 2px; border-color:#000000 !important;
}

/*Remove original woocommerce header cart.*/
.header-cart {
    display: none !important;
}
/* Align cart right beside other menu items. */
li.vi-wcaio-menu-cart {
    display: inline-block !important;
    max-width: 100% !important;
    width: 140px !important;
}
/* Change top bar bar background to transparent. */
.site-top-bar, .site-top-bar-left, .site-top-bar-right {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    background-color: transparent !important;
    color: #000 !important;
}
/* Changed ridiculously difficult to change numbers background color. */
.woocommerce nav.woocommerce-pagination ul li {
    background-color: #ffffff !important;
    color: #000000 !important;
}
.woocommerce nav.woocommerce-pagination a {
    background-color: #ffffff !important;
    color: #000000 !important;
}
/* Changed size of text in shop menu dropdown. */
#mega-menu-wrap-primary #mega-menu-primary p {
    margin-bottom: 10px;
    font-size: 16px !important;
    text-align: center !important;
    line-height: normal !important;
}
/* Inserts a boxshadow to each submenu in megamenu. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    /*box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 9px;padding:10px !important;*/
}
/* Aligns breadcrumbs menu to the left and increases font size. */
.breadcrumbs, .woocommerce-breadcrumb {
  float: left !important; font-size: 14px !important;
}
/* Applies background color to individual product pages, and add boxshadow. */
.woocommerce div.product {
    background-color: transparent !important;
    padding: 0px !important;
    box-shadow: 0px !important;
}
/* Hides category menu button in main menu. */
.mega-menu-item-1470 {
 display: none !important;
}
/* Removes padding from sites footer. */
.site-footer {
    box-shadow: none !important;
    margin-top: 50px !important;
}
.site-footer-standard .site-footer-widgets {
    padding: 0px 0 0px !important;
}
/* Applies background color to wc forms. */
.woocommerce .col2-set, .woocommerce-page .col2-set, woocommerce-ResetPassword lost_reset_password {
    background-color: #ffffff !important;
    padding: 10px !important;
}
/* The following applies to the tabs on the MyAccount page. */
.woocommerce-account .is-active {
    box-shadow: 4px 0 0 rgba(0, 0, 0, 0.3) inset !important;
    background-color: #dfdcde !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
    color: #36454f !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
    color: #36454f !important;
    background-color: #dfdcde !important;
}
/* The following changes I made refer to the checkout page boxes and backgrounds. */
.woocommerce-billing-fields__field-wrapper {
    float: none;
    width: 100%;
    background-color: #fff !important;
    padding: 8px !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}
.woocommerce #order_review, .woocommerce-page #order_review {
    border-top: 0;
    padding: 8px !important;
    background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}
.woocommerce-additional-fields__field-wrapper {
 border-top: 0;
    padding: 8px !important;
    background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}   
/* Change free shipping tag to red. */
.woocommerce ul#shipping_method li label {
    color: #cc0000 !important;
}
/* Error notification background. I'll just leave this, it doesn't seem to wanna work. */
.woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error {
    border-radius: 1px;
    box-shadow: none;
    background: none;
        background-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0.08);
}
/* Cart page backgrounds. */
.woocommerce-cart-form {
  background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width: 44%;
    max-width: 350px;
    background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;padding:8px !important;
}
/* Main widget area background color. */
.widget-area {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0px !important;
}
/* Apply paddings and boxshadows to main widget area. */
.widget-area .widget {
  margin: 0 0 50px;
  background-color: #fff !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
  padding: 22px !important;
}
/* I expanded the width for the shipping options so I can read them. */
.woocommerce .cart-collaterals .cart_totals table td, .woocommerce-page .cart-collaterals .cart_totals table td {
  padding: 15px 0 15px 10px;
  text-align: right;
  width: auto !important;
}
/* I cannot remember why I did this, but has something to do with the homepage background transparency, I think. */
.error404 .content-area, .content-area-full, .page-template-template-full-width-php .content-area, .woocommerce .content-no-sidebar #container, .woocommerce-page .content-no-sidebar #container, .content-no-sidebar .content-area {
  float: none;
  width: 100% !important;
  padding: 0px 0px !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* I expanded the cart totals box so that it will fill the width. */
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
  width: 100% !important;
  max-width: 100% !important;
}
/* Places categories titles under bookmarks. */
.site-main > .entry-header .entry-title, header.woocommerce-products-header {
  float: inherit !important;
}
.woocommerce-store-notice, p.demo_store {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  font-size: 1em;
  padding: 1em 0;
  text-align: center;
  background-color: #a46497;
  color: #fff;
  z-index: 99998;
  box-shadow: 0 1px 1em rgba(0,0,0,.2);
  display: none;
  color: #fff !important;
}
/* Changed icon size for products in sidebar widget. */
.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img {
  float: right;
  margin-left: 4px;
  width: 62px;
  height: auto;
  box-shadow: none;
}

button.mycustombutton {
  background-color: #B0B0B0 !important;
  border: 1px solid #a0a0a0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 #F8F8F8, 0 1px 2px rgba(0,0,0,0.25) !important;
  color: #333 !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

button.mycustombutton:hover, button.mycustombutton:focus {
  background-color: #B0B0B0 !important;
  border: 1px solid #a0a0a0 !important;
  box-shadow: 0 1px 0 #ffffff, inset 0 1px 2px rgba(0,0,0,0.15), 0 0 4px rgba(0,0,0,0.15) !important;
  color: #333 !important;
  outline: none !important;
}

.n2-ss-slider {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
  /*padding: 6px !important; border-radius: 10px !important;*/
}