/*
CTC Separate Stylesheet
Updated: 2024-05-16 03:56:20
Theme Name: Preslav Child
Theme URI: https://nasiothemes.com/themes/preslav
Template: preslav
Author: Atanas Yonkov
Author URI: https://nasiothemes.com/
Description: Preslav is a fast, reliable and easy to use WordPress theme. It is perfect for a blog, portfolio website, digital agency, e-commerce shop or any type of small and medium business. The theme has generous theme options and is a perfect match with the Gutenberg editor. It features beautiful block patterns with high quality illustrations that will help you get started in minutes. The theme is optimized for speed, it is mobile-first and SEO-friendly. Preslav is highly customizable and easy to adapt to any design. It has different header presets to change the position of the site title and the logo and features custom button styles with stunning hover animations. Site visitors can switch between day and night mode (light and dark mode) with a single click. It is developer-friendly, written using core WordPress functions and following best development practices. Support for WooCommerce and popular WordPress plugins is fully guarantied. If you are looking for a high quality WordPress theme, you have found it. Digital agency theme demo: https://preslav-demo.nasiothemes.com/
Tags: blog,portfolio,e-commerce,one-column,two-columns,three-columns,four-columns,block-patterns,block-styles,wide-blocks,custom-header,custom-logo,custom-menu,featured-images,footer-widgets,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.4.6.1715831780
*/

h1, h2, h3, h4 {
  font-weight: 800;
}
.site-title a {
    font-family: var(--wp--preset--font-family--montserrat);
    font-size: clamp(1.4375rem, 1.2025rem + 1.175vw, 1.83625rem);
    font-weight: 800;
    line-height: 0;
    margin: 0;
}

@media screen and (min-width:54em) {
    .site-title a {
        font-size: clamp(1.6rem, -0.1835rem + 3.3028vw, 2.5rem);
    }
}

.entry-content h2:not(.wc-block-grid__product-title) {
    background: #f2f2f2;
    padding: 5px 0 5px 35px;
    color: #000;
    position: relative;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
    display: block;
    margin: 12px -16px 12px -35px;
}

@media screen and (min-width:1450px){
  .entry-content h2:not(.wc-block-grid__product-title) {  
    margin: 12px -35px;
    width: auto;
  }
  .entry-content h2:not(.wc-block-grid__product-title) {  
    transform: skew(-34deg);
  }

  .entry-content h2 span {
    transform: skew(34deg);
    display: inline-block;
  }
}


.entry-content h3 {
    margin-bottom: 0;
}

.entry-content h4 {
    margin-top: 0;
    margin-bottom: 0;
}

.entry-content h4 + p {
    margin-top: 0;
    font-style: italic;
}

.entry-content .woocommerce-Tabs-panel h2::before,
.entry-content .related.products h2:not(.woocommerce-loop-product__title)::before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skew(-34deg);
    left: -20px;
    top: 0;
    /* right: -20px; */
    background: #f2f2f2;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
    z-index: -1;
}

.entry-content .woocommerce-Tabs-panel h2,
.entry-content .related.products h2,
.entry-content h2.woocommerce-loop-category__title,
.entry-content h2.woocommerce-loop-product__title{
    background: transparent;
    box-shadow: none;
    transform: skew(0deg);
}

.columns {
    column-count: 1;    
}

@media screen and (min-width: 28.125em) {
    .columns {
        column-count: 2;    
    }
}
@media screen and (min-width: 43.75em) {
    .columns {
        column-count: 3;    
    }
}
@media screen and (min-width: 56.25em) {
    .columns {
        column-count: 4;    
    }
}

@media print {
    .top-menu, .main-navigation-container, footer {
        display: none;
    }

    .entry-content h2 {
        background-color: transparent;
        box-shadow: none;
        color: #000;
        margin: 5px 0;
        padding: 0;
        border-bottom: 1px solid #000;
        transform: initial;
    }
    .entry-content h2 span {
        
        transform: initial;
    }
    .entry-content h3 {
        margin: 0;
    }

    .entry-content h4 + p {
        margin-bottom: 5px;
    }

    .entry-content p {
        margin: 0;
    }

    .columns {
        column-count: 3;    
    }

    .break-before {
        page-break-before: always;
    }
}

a[target^=_blank] {
    position: relative;
    padding-right: 20px;
    white-space: nowrap;
}

a[target^=_blank]::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24.00 24.00' fill='none' xmlns='http://www.w3.org/2000/svg' transform='matrix(1, 0, 0, 1, 0, 0)rotate(0)' stroke='%23757575'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23CCCCCC' stroke-width='0.048'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg id='Interface / External_Link'%3E%3Cpath id='Vector' d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='%23757575' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    top: 0;
  }

  /* Style for the modal container */
  .modal {
    position: fixed;
    left: -3px;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 0;
    opacity: 0;
    transition:all .2s ease;
    display: flex;
    top:0;
    z-index: 1100;
  }

  .modal.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  @media screen and (max-height: 600px) and (max-width: 915px) {
    .modal {
      padding: 0 !important;
    }
  }
  @media screen and (min-width: 48em) {
    .modal {
      top: 50%;
      left: 50%;
      padding: 14px;
      transform: translate(-50%, -50%);
    }
  }
  .modal.open {
    display: flex;
  }
  .modal-title {
    max-width: 75%;
    color: #FFF;
    padding: 0 10px;
    grid-column: 1/span 5;
    height: min-content;
    font-family: var(--wp--preset--font-family--montserrat);
    font-size: clamp(1rem, 1.2025rem + 1.175vw, 2.83625rem);
    font-weight: 800;
    line-height: 0;
    margin: 30px 0 30px -10px;
  }
  @media screen and (max-height: 600px) and (max-width: 915px) {
    .modal-title {
      max-width: 75% !important;
    }
  }
  @media screen and (min-width: 48em) {
    .modal-title {
      max-width: initial;
      color: #000;
      padding: 0;
      line-height: inherit;
      margin: 20px 0 12px;
    }
  }
  .modal-wrapper {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    width: 100%;
    height: 100%;
    transition: all 0.1s linear;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-content: start;
  }
  @media screen and (max-height: 600px) and (max-width: 915px) {
    .modal-wrapper {
      max-width: 100% !important;
      max-height: 100% !important;
      background-color: rgba(0, 0, 0, 0.5) !important;
      padding: 10px !important;
    }
  }
  @media screen and (min-width: 48em) {
    .modal-wrapper {
      display: block;
      background-color: #fff;
      padding: 20px;
      max-width: 80%;
      max-height: 80%;
      border-radius: 5px;
    }
  }
  @media screen and (min-width: 1100px) {
    .modal-wrapper {
      max-width: 50%;
    }
  }
  @media screen and (min-width: 1630px) {
    .modal-wrapper {
      max-width: 700px;
    }
  }
  .modal-wrapper.ext {
    margin: 0;
    background: #FFF !important;
    display: block;
  }
  @media screen and (min-width: 48em) {
    .modal-wrapper.ext {
      height: min-content;
    }
  }
  .modal-wrapper.ext .modal-title {
    color: #000;
  }
  .modal-wrapper.ext button:not(.modal-close-button), .modal-wrapper.ext .ext-link {
    width: 100%;
    border: 1px solid #000;
    border-radius: 3px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.1s linear;
  }
  .modal-wrapper.ext button:not(.modal-close-button):focus, .modal-wrapper.ext button:not(.modal-close-button):hover, .modal-wrapper.ext .ext-link:focus, .modal-wrapper.ext .ext-link:hover {
    background: #000;
    color: #FFF;
  }
  @media screen and (min-width: 48em) {
    .modal-wrapper.ext button:not(.modal-close-button), .modal-wrapper.ext .ext-link {
      width: 30%;
    }
  }
  .modal-wrapper.ext .ext-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    text-transform: uppercase;    
  }
  .modal-wrapper.ext div {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-evenly;
  }
  .modal-content { /* Style for the modal content */
    overflow-y: auto;
    height: 100%;
    text-align: center;
    grid-row: 2;
    grid-column: 1/span 5;
    margin: 0 -10px;
  }
  @media screen and (max-height: 600px) and (max-width: 915px) {
    .modal-content {
      max-height: 90% !important;
    }
  }
  @media screen and (min-width: 48em) {
    .modal-content {
      margin: 0;
      height: 90%;
    }
  }
  .modal-close-button {
    position: absolute;
    top: 20px;
    right: 10px;
    border: 1px solid #000;
    cursor: pointer;
    border-radius: 3px;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 10px;
    background: #f2f2f2;
    transition: all 0.1s linear;
  }

  .modal-close-button:hover {
    background: #000;
    color: #FFF;
  }
  @media screen and (max-height: 600px) and (max-width: 915px) {
    .modal-close-button {
      top: 20px !important;
      right: 18px !important;
      border-radius: 1rem !important;
      padding: 10px !important;
    }
  }
  @media screen and (min-width: 48em) and (min-height: 600px) {
    .modal-close-button {
      top: 0;
      right: 0;
      margin-top: -15px;
      margin-right: -15px;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      padding: 0;      
    }
    .modal-close-button:hover {
      background: #f2f2f2;
    }
    .modal-close-button .visually-hidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    .modal-close-button .visually-hidden.focusable:active, .modal-close-button .visually-hidden.focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
    }
    .modal-close-button::before {
      content: "❌";
      display: block;
      color: #000;
      filter: brightness(0);
    }
  }
  
  #js-ext-target {
    font-weight: bold;
  }

@media screen and (min-width: 54.0625em) {
    .main-navigation-container {
        position: relative !important;
    }
    .main-navigation-container.fixed-header {
        position: fixed !important;
    }
    .main-navigation-container::before {
        content: '';
        display: block;
        height: 100%;
        width: clamp(3.102538rem, -21.1412rem + 25.4485vw, 18.6220625rem);
        background: #c6c6c6;
        position: absolute;
        margin-left: -50px;
        transform: skew(-30deg, 0deg);
        top: 0;
    }
}

@media screen and (min-width: 1530px) {
    .main-navigation-container::after {
        content: '';
        display: block;
        height: 100%;
        width: clamp(3.102538rem, -21.1412rem + 25.4485vw, 18.6220625rem);
        background: #c6c6c6;
        position: absolute;
        margin-right: -50px;
        top: 0;
        right: 0;
    }
    
}

.dividers h2 {
  transform: skew(0deg);
  margin: 12px -16px 12px -35px !important;
}

.dividers h2 span {
  transform: skew(0deg);
  display: inline-block;
}

@media screen and (min-width: 782px){
  .dividers h2 {
    font-size: clamp(1.1875rem, -0.8303rem + 4.1284vw, 1.75rem);
    transform: skew(-34deg);
    margin: auto !important;
  }  
  .dividers h2 span {
    transform: skew(34deg);
  }
}

.dividers p {
  padding-left: 0;
  font-style: italic;
}

.entry-content .dividers ul {
    padding-left: 30px;
  }
  

@media screen and (min-width: 782px){
  .dividers p {
    padding-left: 35px;
  }
}

.header-image-wrapper {
  margin-bottom: 0 !important;
}

.site-wrapper {
  position: relative;
  max-width: 100% !important;
}

.site-wrapper::before {
  content: '';
  display:  none;
  height: 100%;
  width: clamp(3.102538rem, -21.1412rem + 25.4485vw, 18.6220625rem);
  background: #c6c6c6;
  position: absolute;
  margin-left: -84.86px;
  top: 0;
  left: auto;
  z-index: 1000;
}

.site-wrapper::after {
  content: '';
  display: none;
  height: 100%;
  width: clamp(3.102538rem, -21.1412rem + 25.4485vw, 18.6220625rem);
  background: #c6c6c6;
  position: absolute;
  margin-right: -50px;
  top: 0;
  right: 0;
  z-index: 1000;
}

@media screen and (min-width: 1530px) {
    .site-wrapper::before, .site-wrapper::after {
  display: block;
}
}


.site-main {
  width: 100%;
  max-width: 1400px;
  margin: auto;
}

.back-to-top {
  z-index: 1000;
}

.modal-close {
  background: #FFF !important;
  color: #000;
}

.modal-close:hover, .modal-close:focus {
  color: #fff;
  background: #000 !important;
}

.entry-content a {
  text-decoration: none !important;
}

.entry-content a:hover {
  text-decoration: underline !important;
}

.slider-button {
  font-weight: 800;
  transition: all 0.1s linear;
}
.slider-button:hover {
  background: #000 !important;
  outline: 1px solid #FFF !important;
}

.card-wrapper ul,
.card-container ul {
    list-style: none;
}

.card-wrapper ul li::before,
.card-container ul li::before{
    margin-left: -20px;
    padding-right: 10px;
    color: transparent;
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}

/* Product cards*/

li.wc-block-grid__product.wc-block-layout {
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  counter-increment: num;
  overflow: hidden;
  height: 100%;
  z-index: 100;
}

.diamond {
  --suit: '\a\2666';
}
.heart {
  --suit: '\a\2665';
}
.spade {
    --suit: '\a\2660';
}
.club {
  --suit: '\a\2663';
}

.diamond, .heart {
  color: transparent;
  text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}
.spade, .club {
  color: transparent;
   text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

li.product:nth-child(13n-12) .flip-card-back::before,
li.product:nth-child(13n-12) .flip-card-back::after{
  content:  'A' var(--suit) '';
}

li.product:nth-child(13n-2) .flip-card-back::before,
li.product:nth-child(13n-2) .flip-card-back::after{
  content:  'J' var(--suit) '';
}

li.product:nth-child(13n-1) .flip-card-back::before,
li.product:nth-child(13n-1) .flip-card-back::after{
  content:  'Q' var(--suit) '';
}

li.product:nth-child(13n) .flip-card-back::before,
li.product:nth-child(13n) .flip-card-back::after{
  content:  'K' var(--suit) '';
}

li.product .flip-card-back::before, 
li.product .flip-card-back::after {
    content: counter(num) var(--suit);
    display: block;
    position: absolute;
    font-size: 3em;
    font-weight: 900;
    line-height: 1;
    white-space: pre-wrap;
    z-index: 100;
    font-family: var(--wp--preset--font-family--montserrat);
    text-align: center;
}

@media screen and (min-width: 768px) {
    li.product .flip-card-back::before, 
    li.product .flip-card-back::after {
        line-height: 0.8;
    }
}

li.product .flip-card-back:nth-child(13n+1),
li.product .flip-card-back:nth-child(13n+1){
  counter-reset: num;
}

li.product .flip-card-back::before {
  top: 10px;
  left: 10px;
}

li.product .flip-card-back::after {
     bottom: 10px;
     right: 10px;
     transform: rotate(180deg);
}

ul.wc-block-grid__products {
  gap: 10px;
  transition: all .8s ease;
  position: relative;
}
@media (max-width: 480px) {
  .wc-block-grid.has-3-columns .wc-block-grid__product {
  
    margin-bottom: 10px;
  }
}

@media (min-width: 481px) {
  .wc-block-grid.has-3-columns .wc-block-grid__product {
    max-width: 48% !important;
  }
}
@media (min-width: 768px) {
.wc-block-grid.has-3-columns .wc-block-grid__product {
  max-width: 32.333333% !important;
}
}
.card-container {
    border: 1px solid #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.card-container::before,
.card-container::after {
    display: block;
    position: absolute;
    font-size: 3em;
    font-weight: 900;
    line-height: 1;
    white-space: pre-wrap;
    z-index: 99;
    text-align: center;
    font-family: var(--wp--preset--font-family--montserrat);
}

.card-container::before {
    top: 0;
    left: 10px;
}

.card-container::after {
    bottom: 0;
    right: 10px;
    transform: rotate(180deg);
}

.card-container.diamond::before,
.card-container.diamond::after {
	content: 'J \a O \a K \a E \a R ';
    white-space: pre-wrap;
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container.club::before,
.card-container.club::after {
	content: 'J\a\2663';
    white-space: pre-wrap;
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container.heart::before,
.card-container.heart::after {
    content: 'Q\a\2665';
    white-space: pre-wrap;
    color: transparent;
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container.spade::before,
.card-container.spade::after {
    content: 'K\a\2660';
    white-space: pre-wrap;
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

.entry-content .card-container h2 {
    margin: 0;
    box-shadow: none;
    border-style: solid;
    border-color: #000;
    
}

.entry-content .card-container h2::before,
.entry-content .card-container h2::after{
    transform: skew(0deg);
    display: inline-block;
}

@media screen and (min-width:1450px) {
    .entry-content .card-container h2::before,
.entry-content .card-container h2::after{
    transform: skew(34deg);
}
}


.entry-content .card-container h2::before {
    margin-left: -20px;
    margin-right:10px
}


.entry-content .card-container h2::after {
    margin-left: 10px;
}

.entry-content .card-container h2{
    width: 100vw;
    border-width: 1px 0;
}

.entry-content .card-container.club h2,
.entry-content .card-container.spade h2{
    width: auto;
}

@media screen and (min-width: 782px) {
    .entry-content .card-container.heart h2,
    .entry-content .card-container.diamond h2{
        border-width: 0 0 1px 1px;
    }
}

.entry-content .card-container.club,
.entry-content .card-container.spade {
   color: #000;
   flex-direction: column-reverse;
}

.entry-content .card-container.heart p,
.entry-content .card-container.diamond p,
.entry-content .card-container.heart ul,
.entry-content .card-container.diamond ul {
   color: #000;
}

.entry-content .card-container p {
   padding: 0 10px;
}

.entry-content ul{
    padding-left: 20px;
}
    
.entry-content .card-container ul{
    padding-left: 30px;
}
@media screen and (min-width: 782px) {
    .entry-content .card-container.club,
    .entry-content .card-container.spade {
       flex-direction: row;
    }
    .entry-content .card-container p {
       padding: initial;
    }
    .entry-content .card-container.club p,
    .entry-content .card-container.spade p {
       padding-left: 70px;
    }
    .entry-content .card-container.club h2,
    .entry-content .card-container.spade h2{
        border-width: 0 1px 1px 0;
        margin-left: -15px;
        padding-left: 100px;
    }
    .entry-content .card-container.club ul,
    .entry-content .card-container.spade ul{
        padding-left: 90px;
    }
    
    .entry-content .card-container.heart ul{
        padding-left: 20px;
    }
}

.card-container.club h2::before,
.card-container.club h2::after,
.entry-content .card-container.club ul li::before{
    content: '\2663';
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container.spade h2::before,
.card-container.spade h2::after,
.entry-content .card-container.spade ul li::before{
    content: '\2660';
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}


.card-container.heart h2::before,
.card-container.heart h2::after,
.entry-content .card-container.heart ul li::before{
    content: '\2665';
    color: transparent;
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container.diamond h2::before,
.card-container.diamond h2::after,
.entry-content .card-container.diamond ul li::before{
    content: '\2666';
    color: transparent;
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}

.card-container {
    opacity: 0;
    transition:all .8s ease;
}

@media screen and (max-width: 781px) {
    .card-container {
        left: -50%;
    }
}

@media screen and (min-width: 782px) {
    .card-container.heart,
    .card-container.diamond{
        left: -50%;
    }
    
    .card-container.club,
    .card-container.spade{
        left: 50%;
    }
}

.card-container.on{
    opacity: 1;
    left: 0;
}


    ul.wc-block-grid__products.is-loading-products {
        height: auto;
        position: relative;
    }
    ul.wc-block-grid__products.is-loading-products::before {
       content: '';
       position: fixed;
       background: url(/wp-content/uploads/2024/03/87236-41-300x300.jpg);
       width: 300px;
       height: 300px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       z-index: 101;
    }
    
    ul.wc-block-grid__products.is-loading-products::after {
       content: '';
       position: fixed;
       background: transparent url(/wp-content/uploads/2024/03/loading.gif) center center/contain no-repeat;
       background-size: 100px;
       background-color: rgba(0, 0, 0 , .2);
       width: 100vw;
       height: 100vh;
       left: 0;
       top: 0;
       z-index: 101;
    }
    
    
    ul.wc-block-grid__products li {
       transition: all .8s ease;
       background: #fff;
    }
    
    .wc-block-grid.has-3-columns .wc-block-grid__product.card-on {
       position: relative;
       top: auto;
       left: auto;
       width: auto;
       height: 100% !important;
       background: #FFF;
    }
    
    #top-navigation {
        z-index: 102;
    }
    
    .card-wrapper {
    border: 1px solid #000;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
.card-wrapper::before,
.card-wrapper::after {
    white-space: pre-wrap;
    color: transparent;
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
    position: absolute;
    font-size: 2em;
    line-height: 1;
}

.card-wrapper::before {
    top: 0;
    left: 5px;
}
.card-wrapper::after {
    bottom: 0;
    right: 5px;
    transform: rotate(180deg);
}

.card-wrapper ul li::before {
    margin-left: -20px;
    padding-right: 10px;
    color: transparent;
}

.card-wrapper.club::before,
.card-wrapper.club::after,
.card-wrapper.club ul li::before {
    content: '\2663';
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}

.card-wrapper.heart,
.card-wrapper.heart ul {
    color: #000;
    text-shadow: none;
}

.card-wrapper.heart::before,
.card-wrapper.heart::after,
.card-wrapper.heart ul li::before{
    content: '\2665';
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
}

.card-wrapper.spade::before,
.card-wrapper.spade::after,
.card-wrapper.spade ul li::before {
    content: '\2660';
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
}


.dividers {
    display: grid !important;
    grid-template-columns: 1fr;
}


@media screen and (min-width: 782px) {
    .dividers {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: clamp(1.25rem, -2.335rem + 7.335vw, 5rem) !important;
    }
}

.dividers h3 {
    background: #f2f2f2;
    padding: 5px 0 5px 35px;
    border-bottom: 1px solid #000;
    font-size: clamp(1rem, 0.7831rem + 1.0846vw, 1.3125rem);
}

@media screen and (min-width: 782px) {
    .dividers h2 {
       width: 100% !important;
    }
    .dividers h3 {
        font-size: clamp(0.875rem, 0.4568rem + 0.8557vw, 1.3125rem);
    }
}
.dividers .wp-block-column {
    display: grid;
    height: 100% !important;
    align-items: start;
    grid-template-rows: min-content;
}

.flipper {
    height: 100%;
    width: 100%;
}

.flip-card-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: transform 1.0s;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    min-height: 215px;
}


.flip-card-wrapper.on {
    transform: rotateX(180deg);
}

.flip-card-front {
    grid-row: 1;
    grid-column: 1 / span 2;
    border: 1px solid #000;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    backface-visibility: hidden;
    background: url(https://staging.dukeofdev.com/wp-content/uploads/2024/03/icon_tile.png), url(https://staging.dukeofdev.com/wp-content/uploads/2024/03/icon_tile.png);
    background-repeat: repeat;
    background-position: 20px 10px, 70px 45px;
    background-size: 100px;
    outline: 15px solid #FFF;
    outline-offset: -16px;
    box-sizing: border-box;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75), inset 0px 0px 0px 16px rgba(0,0,0,1);
}

.flip-card-front .wp-block-image {
    margin: auto;
    width: 50%;
}

.flip-card-back {
    grid-row: 1;
    grid-column: 1 / span 2;
    margin: 0;
    background: #fff;
    backface-visibility: hidden;
    transform: rotateX(180deg);
    transition: all 0.1s linear;
}

.flip-card-back.product-card {
    transform: rotateX(0deg);
    transform: rotateY(180deg);
    display: grid;
    justify-items: center;
    padding: 1px;
}

@media (min-width: 54rem) {
    .site-menu ul li.focus>ul:not(.sub-menu), .site-menu ul li:hover>ul:not(.sub-menu) {
        left: -290px;
    }
}

.main-navigation-container {
    z-index: 100 !important;
}

@media (max-width: 54rem) {
.toggled .slide-menu {
    z-index: 101 !important;
}
}

.card-container-inner {
    padding: 0px 50px 5px 0;
}

.hide-wrap {
    display: none;
}


.boing {
    position: fixed;
    left: -140px;
    bottom: 10%;
    transform: rotate(55deg);
    z-index: 1100;
    transition: all .5s ease;
    background: url(/wp-content/uploads/2024/03/boing.gif);
    background-repeat: no-repeat;
    background-size: contain;
    width: 500px;
    height: 500px;
}

.boing.hide {
    left: -250%;
}

.visually-hidden, #myAudio, #playButton {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

#myAudio, #playButton {
  position: fixed;
}


@media screen and (min-width: 768px){
    .entry-content .contact-form .grunion-radio-options {
        flex-direction: row;
    }
}

.entry-content .contact-form .grunion-field-wrap input.radio {
    width: 20px;
    height: 20px;
}

.entry-content .contact-form .grunion-field-wrap input.radio:checked::before {
    font-size: 2em;
    color: transparent;
}

.entry-content .contact-form .grunion-field-wrap input.radio:checked {
    border: none;
}

    
.entry-content .contact-form .grunion-field-wrap .contact-form-field:nth-of-type(1) input.radio:checked::before {
     content: '\2663';
     text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
     top: -14px;
     left: -5px;
}

.entry-content .contact-form .grunion-field-wrap .contact-form-field:nth-of-type(2) input.radio:checked::before {
    content: '\2665';
    text-shadow: 0 0 0 rgb(171, 1, 1),
        0px 0px 5px rgb(255, 255, 255);
    top: -12px;
    left: -5px;
}

.entry-content .contact-form .grunion-field-wrap .contact-form-field:nth-of-type(3) input.radio:checked::before {
     content: '\2660';
    text-shadow: 0 0 0 rgb(0, 0, 0),
        0px 0px 5px rgb(255, 255, 255);
    top: -14px;
    left: -4.5px;
}
.card-container ul {
    margin: .7em 0;
}

.main-navigation-container.fixed-header {
    position: static !important;
}

@media screen and (min-width: 54.0625em) and (min-height: 600px) {
    .main-navigation-container.fixed-header {
    position: fixed !important;
}

}

@media screen and (min-width: 54rem) {
.site-footer .widget-area {
    flex-wrap: wrap;
}
}
.widget-column-full {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;
}

.widget-column-full p {
    margin: 0.5em;
}

.comment-form label {
    font-weight: 800;
}

.comment-form .required {
    color: #f00;
    font-size: 28px;
    line-height: 0;
}

@media screen and (min-width: 54.0625em) {
    .comment-form input[type=text], 
    .comment-form input[type=email] {
        width: 100%;
    }
    
    .comment-form p {
        margin: 0 0 1rem;
    }
    
    p.comment-form-author {
        padding: 0 1rem 0 0;
        width: 50%;
        float: left;
    }
    
    p.comment-form-email {
        padding: 0 0 0 1rem;
        width: 50%;
        float: left;
    }
}

ins, mark {
    background: transparent;
}

body:not(.page) .hentry {
    margin: 0 !important;
}
body:not(.page):not(.single) .hentry {
    opacity: 1 !important;
    transform: none !important;
}

body:not(.page):not(.dark-mode) .hentry {
    background: transparent !important;
}

.flex-control-nav {
  display: flex;
}

.flex-control-nav > * {
  width: 25%;
  flex: 0 0 auto;
}

.flex-control-nav li {
    display: block;
    font-weight: 700;
}

.flex-control-nav li img {
    width: auto !important;
    border: 1px solid #000;
    margin: auto !important;
}

.a11y-slider-container {
  position: relative;
  direction: ltr;
}

.a11y-slider {
  position: relative;
  overflow: hidden;
  -webkit-scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.a11y-slider::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.a11y-slider > * {
  scroll-snap-align: start;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.a11y-slider-sr-only,
.a11y-slider-status {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  text-align: center;
  font-family: inherit;
  font-size: 1em;
}

.a11y-slider-sr-only:focus {
  position: static;
  background: #000;
  color: #fff;
  width: 100%;
  height: auto;
  margin: 0;
  clip: auto;
  padding: 10px;
}

.a11y-slider-hide {
  display: none;
}

.a11y-slider-scrolling {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-scroll-snap-type: none;
  -ms-scroll-snap-type: none;
  scroll-snap-type: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scroll-behavior: auto;
}

.a11y-slider-dots {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.a11y-slider-dots li {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 5px 3px;
  color: #FFF;
}

.a11y-slider-dots li button {
  display: block;
  font-size: 0;
  text-indent: -9999px;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: #000;
}

.a11y-slider-dots li button.active,
.a11y-slider-dots li button:focus,
.a11y-slider-dots li button:hover {
  background: #FFF;
  outline: 1px solid #000;
}

button.a11y-slider-prev {
    position: absolute;
    top: 40%;
    left: -30px;
    box-sizing: border-box;
    display: block;
    transform: scale(var(--ggs,1))  translateY(-50%);
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 5px;
    color: transparent;
    transition: all .3s ease;
}

button.a11y-slider-prev:hover {
    background: #ab0101;
}

button.a11y-slider-prev::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-left: 2px solid;
    transform: rotate(45deg) translate(-50%);
    left: 50%;
    top: 50%;
    color: #000;
}

button.a11y-slider-prev:hover::after {
    color: #FFF;
}

button.a11y-slider-next {
    position: absolute;
    top: 40%;
    right: -30px;
    /* left: auto; */
    box-sizing: border-box;
    display: block;
    transform: scale(var(--ggs,1))  translateY(-50%);
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 5px;
    color: transparent;
    transition: all .3s ease;
}

button.a11y-slider-next:hover {
    background: #ab0101;
}

button.a11y-slider-next::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    top: 20%;
    left: 40%;
    transform: rotate(-45deg) translate(-50%);
    color: #000;
}

button.a11y-slider-next:hover::after {
    color: #FFF;
}


/* product categories */
li.product:nth-child(13n+1),
li.product:nth-child(13n+1){
  counter-reset: num;
}

li.product {
    border-bottom: 1px solid;
}

.entry-content ul.products {
    gap: 20px;
    transition: all .8s ease;
    position: relative;
    background-clip: padding-box;
    display: grid;
    padding: 0;
    height: auto;
}

@media screen and (min-width: 768px) {
    .entry-content ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .entry-content ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1300px) {
    .entry-content ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

.entry-content ul.products::before,
.entry-content ul.products::after {
    display: none;
}

.entry-content ul.products li {
    top: auto;
    left: auto;
    width: auto !important;
    background: #FFF;
    flex: 1 0 31.3333333333%;
    margin: 0 !important;
    border: 0;
    counter-increment: num;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: transform 1.0s;
    transform-style: preserve-3d;
    text-align: center;
}

.entry-content ul.products .product-category {
    flex: 1 0 33.3333333333%;
}

.entry-content ul.products li.on {
    transform: rotateY(180deg);
}

.entry-content .woocommerce ul.products li.product .button {
    margin: auto 0 1em;
}


h2.woocommerce-loop-product__title {
    text-align: center;
}

.woocommerce ul.products li.product .price {
    text-align: center;
}

.categories + .products {
    display: none !important;
}

@media(min-width: 54rem) {
    .site-menu ul ul li.focus>ul,.site-menu ul ul li:hover>ul {
        left: -100%;
         right: 100%;
    }
    
    .site-menu li li.menu-item-has-children>a:after,.site-menu li li.page_item_has_children>a:after {
            content: "\25C0";
            left: 5px;
            position: absolute;
            top: 50%;
            line-height: 0;
            transform: translateX(-50%);
    }
}

.card-wrapper a,
.card-wrapper a:focus,
.card-wrapper a:hover{
    outline: none;
   text-decoration: none !important;
   color: #000;
   transition: all 0.1s linear;
}

.card-wrapper a:focus {
   outline: 2px dotted #c41a1a;
   outline-offset: -5px;
}

body:not(.dark-mode) .card-wrapper a.button:focus {
   outline: none;
   background: #000 !important;
}


.card-wrapper.flip-card-back.product-card:hover,
.card-wrapper.flip-card-back.product-card:focus-within {
     border: 1px solid #c41a1a;
     box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75), inset 0px 0px 0px 1px rgba(196,26,26,0.75);
}