:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #047DC2;
    --bs-secondary: #4D4D4D;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #d62518;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    --bs-bg-brand: #0066A4;
    --bs-btn-primary-color: #fff;
    --bs-bg-hr-custom: #eee;
    --bs-bg-icon-circle: #343a40;
    --bs-text-icon-circle: #f8f9fa;
    --bs-primary-rgb: 4, 125, 194;
    --bs-secondary-rgb: 77, 77, 77;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 214, 37, 24;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 52, 58, 64;
    --bs-bg-brand-rgb: 0, 102, 164;
    --bs-btn-primary-color-rgb: 255, 255, 255;
    --bs-bg-hr-custom-rgb: 238, 238, 238;
    --bs-bg-icon-circle-rgb: 52, 58, 64;
    --bs-text-icon-circle-rgb: 248, 249, 250;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 77, 77, 77;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: Raleway, Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.42857;
    --bs-body-color: #4D4D4D;
    --bs-body-bg: #fff;
    --bs-bg-banner-eroski: #e30613;
  }
  

.text-white{
    color:var(--bs-white) !important;
}

.bg-banner-eroski{
  background-color: var(--bs-bg-banner-eroski) !important;
}


/*-------------------------------------------------------------------
1. Estilos genéricos Bs5
-------------------------------------------------------------------*/

.card .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.card .col-lg-4, .card .col-lg-8{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display:flex
}

html{
    text-rendering: optimizeLegibility;
}

.card-bs5 .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

.text-center{
  text-align:center 
}

.w-25 {
    width: 25% !important;
}

.w-60 {
  width: 60% !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.ps-0{
    padding-left:0rem !important;
}

.ps-3{
    padding-left:1rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
  }

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 2rem !important;
}

.me-5 {
    margin-right: 2rem !important;
}

.mt-1 {
  margin-top: .25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.fw-bold {
    font-weight: 700 !important;
}

@media (min-width: 992px) {
    .pt-lg-4 {
        padding-top: 1.5rem !important;
    }
}   

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  
  .d-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .align-items-center {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

  .align-content-stretch {
    -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
  }

  .flex-shrink-0 {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }

  .flex-grow-1 {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }

  .flex-wrap {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  
  .flex-nowrap {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
  }

  .justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }


  @media (min-width: 576px){
  .justify-content-sm-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
}

@media (min-width: 768px){
.mt-md-0 {
  margin-top: 0 !important;
}
.text-md-start {
  text-align: left !important;
}
}


/*-------------------------------------------------------------------
2. Cards genéricos Bs5
-------------------------------------------------------------------*/

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.55rem;
  }
  
  .card > hr {
    margin-right: 0;
    margin-left: 0;
  }
  
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
  }
  
  .card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: calc(0.55rem - 1px);
    border-top-right-radius: calc(0.55rem - 1px);
  }
  
  .card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: calc(0.55rem - 1px);
    border-bottom-left-radius: calc(0.55rem - 1px);
  }
  
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0;
  }
  
  .card-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 2rem 2rem;
  }
  
  .card-title {
    margin-bottom: 1rem;
  }
  
  .card-subtitle {
    margin-top: -0.25rem;
    margin-bottom: 0;
  }
  
  .card-text:last-child {
    margin-bottom: 0;
  }
  
  .card-link + .card-link {
    margin-left: 1rem;
  }
  
  .card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .card-header:first-child {
    border-radius: calc(0.55rem - 1px) calc(0.55rem - 1px) 0 0;
  }
  
  .card-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .card-footer:last-child {
    border-radius: 0 0 calc(0.55rem - 1px) calc(0.55rem - 1px);
  }
  
  .card-header-tabs {
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
    margin-left: -0.5rem;
    border-bottom: 0;
  }
  
  .card-header-pills {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }
  
  .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: calc(0.55rem - 1px);
  }
  
  .card-img,
  .card-img-top,
  .card-img-bottom {
    width: 100%;
  }
  
  .card-img,
  .card-img-top {
    border-top-left-radius: calc(0.55rem - 1px);
    border-top-right-radius: calc(0.55rem - 1px);
  }
  
  .card-img,
  .card-img-bottom {
    border-bottom-right-radius: calc(0.55rem - 1px);
    border-bottom-left-radius: calc(0.55rem - 1px);
  }
  
  .card-group > .card {
    margin-bottom: 0.75rem;
  }
  
  @media (min-width: 576px) {
    .card-group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
    }
    .card-group > .card {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 0%;
              flex: 1 0 0%;
      margin-bottom: 0;
    }
    .card-group > .card + .card {
      margin-left: 0;
      border-left: 0;
    }
    .card-group > .card:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .card-group > .card:not(:last-child) .card-img-top,
    .card-group > .card:not(:last-child) .card-header {
      border-top-right-radius: 0;
    }
    .card-group > .card:not(:last-child) .card-img-bottom,
    .card-group > .card:not(:last-child) .card-footer {
      border-bottom-right-radius: 0;
    }
    .card-group > .card:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .card-group > .card:not(:first-child) .card-img-top,
    .card-group > .card:not(:first-child) .card-header {
      border-top-left-radius: 0;
    }
    .card-group > .card:not(:first-child) .card-img-bottom,
    .card-group > .card:not(:first-child) .card-footer {
      border-bottom-left-radius: 0;
    }
  }


/*-------------------------------------------------------------------
3. Ajustes TC Cards Bs5
-------------------------------------------------------------------*/

.card{
    color:rgb(77, 77, 77);
    font-size: 1.60rem;
    font-weight:400;
}

.card h5, .card .h5 {
    font-size: 2rem;
    color:inherit
  }


.card.shadow {
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .06) !important;
    transition: all 0.2s ease;
}

.card-transition:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2), 0 0 0px 0 rgba(0, 0, 0, 0.25);
}

.card-brand { 
	margin-bottom: 1rem;
	max-width: 10rem;
	border-radius: 6px 6px 0px 0px;
	padding: 0px 10px;
	background-color: transparent;
}

.card hr {
    margin: 1rem 0;
    color: inherit;
    background-color: #6c757d;
    border: 0;
    opacity: 0.25;
    height:1px;
}

a.card-link {
    color: #047DC2;
}

a.card-link i, a.card-link:hover{
    text-decoration: none !important
}

a.card-link .text-underline, a.card-link.text-underline{
    text-decoration:underline
}

/* ajustes cards horizontales */

.card-stretched-vertical .card-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column; 
    height: 100%;
}

.card-stretched-vertical .card-body .card-footer {
    padding: 0;
    padding-bottom: 0px;
    margin-top: auto;
}

.card-stretched-vertical .card-footer {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border-top: none
}

.card .btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.42857;
    color: #4D4D4D;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    padding: 1.3rem 2rem;
    font-size: 1.5rem;
    border-radius: 0.50rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  }

  .card .btn-primary {
    color: #000;
    background-color: #047DC2;
    border-color: #047DC2;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .card .btn-primary:hover {
    color: #000;
    background-color: #2a91cb;
    border-color: #1d8ac8;
  }

  .card .btn-check:focus + .card .btn-primary, .card .btn-primary:focus, .card .btn-primary:hover {
    color: rgba(var(--bs-btn-primary-color-rgb),.75) !important;
    box-shadow: 0 4px 11px rgba(var(--bs-btn-primary-color-rgb),.85);
  }

  .card .btn-primary {
    color: var(--bs-btn-primary-color);
  }

  .no_underline:hover {
    text-transform:none !important;
    color:inherit !important;
    text-decoration: none !important
  }

  .bg-banner-eroski, .bg-banner-descuento1500{
    margin-bottom:1.6rem !important;
  }

  .bg-banner-eroski  h3, .bg-banner-descuento1500 h3 {
    font-size: 2.75rem;
    color:#fff !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
 }

 .bg-banner-eroski .border-dashed,  .bg-banner-descuento1500 .border-dashed {
    border-style: dashed !important;
    border-color: #eaeaea;
  }


  .bg-banner-descuento1500{
    background:url(/canjearptos/puntazos/assets/img/tarjeta-regalo.jpg)no-repeat; 
    background-size: contain; 
    background-position: 100% 40%;
    background-color: #67b5c9 !important;
  }



 @media (min-width: 768px){
  .bg-banner-eroski .text-md-start, .bg-banner-descuento1500 .text-md-start{
   text-align: left !important;
 }
}
 @media (min-width: 500px){
  .bg-banner-eroski.p-sm-3, .bg-banner-descuento1500.p-sm-3 {
   padding: 2rem !important;
 }

}

@media (max-width: 768px){
  .bg-banner-descuento1500{
    background-image: none !important;
  }

}


@media  (max-width: 1199.98px) { 
  .lh-sm-4  {
    line-height:4rem !important
  }
}

.banners_bs5 .h1-bf-2024 {
    font-size: calc(2.3rem + 1.5vw);
    line-height: calc(2.3rem + 1.5vw);
  }

  @media (max-width: 576px) {     
    .date-item-compras{
        font-size: 2.6rem !important;
    }
  .item-compras{
    font-size: 1.2rem !important;
  }
}

@media (min-width: 576px) {     
    .text-md-nowrap {
        white-space: nowrap !important;
    } 
}


@media (min-width: 768px) { 
    .text-md-nowrap {
        white-space: nowrap !important;
    }

 }


@media (min-width: 992px) {
    .text-lg-nowrap {
        white-space: nowrap !important;
    }
    .banners_bs5 .h1-bf-2024 {
      font-size: calc(30px + 6vh);
      line-height: calc(20px + 8vh);
    /*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
        0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
      color: #fccaff; */
       /* text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;  */
        color: #fecc15 !important;
      text-align: center;
      animation: blink 8s infinite;
      -webkit-animation: blink 8s infinite;
    }
 }


@media (min-width: 1200px) {     
    .text-xl-nowrap {
    white-space: nowrap !important;
} 
}


@media (min-width: 1400px) {     
    .text-xxl-nowrap {
    white-space: nowrap !important;
} 
}


.banners_bs5 .bg-bf2024 {
    background-image:url(https://travelclub.s3.eu-west-1.amazonaws.com/web/black_friday_24/bg_friday_2024.webp); 
    background-position:bottom center;
    background-size:cover; 
    background-attachment:fixed;
}

.shadow-bf{
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(217, 216, 135, 0.5) -3px -3px 6px 1px inset;
  transform:rotate(-2deg)
  }

  .rotate-n2{transform:rotate(2deg)}

  .anim1{
    animation: blink 10s infinite;
    -webkit-animation: blink 10s infinite;
  }

  .anim2{
    animation: blink 12s infinite;
    -webkit-animation: blink 12s infinite;
  }


  @-webkit-keyframes blink {
    20%,
    24%,
    55% {
      color: #111;
      text-shadow: none;
    }
  
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
  /*     color: #fccaff;
      text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
        0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
      color: #fff6a9;
    }
  }
  
  @keyframes blink {
    20%,
    24%,
    55% {
      color: #111;
      text-shadow: none;
    }
  
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
  /*     color: #fccaff;
      text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
        0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
      color: #fff6a9;
    }
  }