/*
Theme Name: Organic
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Organic is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
/*--------------------------------------------------------------
/** VARIABLES
--------------------------------------------------------------*/
body {
  --heading-font        : "Inter", sans-serif;
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Inter", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: #23C29C;/*09A885;*/
  --bs-primary-rgb: 107, 178, 82;
  
  --bs-secondary: #364127;
  --bs-secondary-rgb: 54, 65, 39;
  
  --bs-danger: #F95F09;
  --bs-danger-rgb: 249, 95, 9;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  
  --bs-border-color: #F7F7F7;

  --bs-dark:#5D6771;

}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg:#0CCBA1 ;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}
.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}
.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}
body {
  letter-spacing: 0.03em;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  color: var(--bs-dark);
  font-weight: 700;
}
.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}
.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}
/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--bs-primary);
  }
  40% {
    box-shadow: 0 2em 0 0 var(--bs-primary);
  }
}

/* *** Start editing below this line *** */
/* .container-fluid {
  max-width: 1600px;
}
*/
@media (min-width: 1400px) {
  .container-lg {
      max-width: 1600px;
  }
} 

.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}
.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
  
  .modal-dialog{
    min-width: 100%;
  }
  .carousel-control-next,.carousel-control-prev{
    width: auto !important;
  }
  .carousel-indicators{
    position: inherit;
  }
  .modal-body{
    width: 100%;
    display: contents;
  }
  .modal-body-images{
    max-width: 100%;
  }

}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}
.swiper-prev:hover,
.swiper-next:hover {
  background: var(--bs-primary);
}

/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0,-10px,0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, 
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--bs-primary);
}

/* products-carousel */
.products-carousel .swiper, .products-carousel .swiper-container {
  overflow: visible;
}

/* product-grid */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
.product-item .button-area .quantity {
  padding: 0.5rem;
}
.product-item .button-area {
  display: none;
  position: absolute;
  text-align: center;
  background: #fff;
  width: 100%;
  left: 0;
  bottom: -55px;
  z-index: 1;
  box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.08);
  /* transition: box-shadow 0.3s ease-out; */
}
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 22px rgba(0, 0, 0, 0);
  /* transition: box-shadow 0.3s ease-out, margin 0.3s ease-out; */
}
.product-item:hover .button-area {
  display: block;
}
.product-item:hover {
  /* z-index: 1; */
  /* margin-bottom: -50px; */
  /* max-height: 500px; */
  box-shadow: 0px 0px 44px rgba(0, 0, 0, 0.08);
}
.product-item figure {
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
  max-width: 100%;
}
.product-item .product-qty {
  width: 85px;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}
@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}
 /* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}
.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }
  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
  .dropdown-menu a {
    padding-left: 0;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}
@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 420px;
  }
}
@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 540px;
  }
}
@media screen and (min-width:1400px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}

/* bootstrap extended */
.border-dashed {
  border-bottom: 1px dashed #d1d1d1;
}
.ls-1 {
  letter-spacing: -0.04em;
}
.button-area .btn-cart {
  text-wrap: nowrap;
  height: 3.3em;
  line-height: 2em;
  width: 100%;
}
.fs-7 {
  font-size: 0.8rem!important;
}

/* button */
.btn-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: var(--bs-body-font-family);
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  text-decoration: none;
}

a.btn-link,
a.btn-link:after {
  transition: all .5s;
}

a.btn-link {
  position: relative;
}

a.btn-link:before,
a.btn-link:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: var(--bs-dark);
  height: 2px;
}

[data-bs-theme=dark] a.btn-link:after {
  background-color: var(--bs-light);
}

a.btn-link:before {
  background-color: rgba( var(--bs-light-rgb), 0.2 );
  width: 100%;
}

a.btn-link.is-checked:after,
a.btn-link:hover:after {
  width: 100%;
}

a.btn-link.text-white:after {
  background-color: var(--bs-light);
}

a.btn-link.text-light:after {
  background-color: var(--bs-light);
}

.navbar .megamenu{ padding: 1rem; }

.footer-menu{
  text-align: center;
}
.footer-menu img {
  margin: 10px;
  border-radius: 50%;
  /*box-shadow: 0px 0px 9px 9px #fff; *//* #747DE8;*/
  /*animation: glow 1.5s linear infinite alternate;*/
  background-color: #fff;
  padding: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* .container-lg-backward {
  position: relative;
    margin-top: -15.8em;
} */

.img-fluid {
  max-width: 100%;
}

.img-fluid {
  margin: 10px;
  border-radius: 50%;
  /*box-shadow: 0px 0px 9px 9px #fff; *//* #747DE8;*/
  /*animation: glow 1.5s linear infinite alternate;*/
  background-color: #fff;
  padding: 3.5%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

@keyframes glow{
  to {
    box-shadow: 0px 0px 30px 20px #535FED;
  }
}

.container-header-first-section {
  background-image: url('images/banner-1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  /* max-height: 258px; */
}

.main-logo{
  max-width: 10em;
  margin: auto;
  float: inline-start;
}
/*.navbar-toggler svg, div .list-unstyled {
  margin-top: -6em;
}*/

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	
	.navbar .has-megamenu{position:static!important;}
	.navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }	
}	
/* ============ desktop view .end// ============ */


/* ============ mobile view ============ */
@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
  .main-logo{
    float: none;
  }
}
/* ============ mobile view .end// ============ */

div.bee {
  position: fixed;
  transition: all 0.5s;
  max-width: 1em;
  z-index: 99;
}

.flipped {
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -khtml-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transition: all 0.5s;
}

.luciernaga {
  width: 1px;
  height: 1px;
  border-radius: 100px;
  background-color: #ccc;
  animation: glow 1s infinite alternate;
  z-index: 1;
}

@keyframes luciernaga {
  from {
    box-shadow: 0 0 10px -10px #ffc107;
  }
  to {
    box-shadow: 0 0 10px 10px #ffc107;
  }
}

.offcanvas-body {
  background-image: url('images/patito_audifonos.png');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.tab-image{
  /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;*/
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

a {
  cursor: pointer;
}

div .card{
  opacity: 0.9;
  height: 100%;
}

/* .product-unavailable{
  filter: grayscale(100%);
  opacity: 0.5;
} */

.sparkle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 0.5em;
  /* background: #EDC951;
  mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
  background-image: url('images/star.gif');
  /* background-position: bottom; */
  background-repeat: no-repeat;
  background-size: contain;
  rotate: 30deg;
}



/* Two */
.button-shine {
  background-repeat: no-repeat;
  background-position: -120px -120px, 0 0;
  
  background-image: -webkit-linear-gradient(
    top left,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  background-image: -moz-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );    
  background-image: -o-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  background-image: linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  
  -moz-background-size: 250% 250%, 100% 100%;
       background-size: 250% 250%, 100% 100%;
  
  -webkit-transition: background-position 0s ease;
     -moz-transition: background-position 0s ease;       
       -o-transition: background-position 0s ease;
          transition: background-position 0s ease;
}

.button-shine:hover {
  background-position: 0 0, 0 0;
  
  -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.product-cart-quantity {
  width: 4.5em;
}

.text-body-secondary {
  display: ruby;
}

.text-body-secondary, #cart-total{
  font-weight: bold;
}

.modal-body{
  display: flex;
}
.modal-body-images{
  max-width: 50%;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.modal-body-images-main img{
  width: 100%;
  min-width: 100%;
  max-height: 80%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.modal-body-product{
  padding-left: 1.5em;
  padding-right: 1.5em;
  max-width: 50%;
}

.modal-dialog{
  width:70% !important;
  max-width:70% !important;
  margin:auto !important;
}

#productModal {
  display: none;
}

#cartModal {
  display: none;
}

#quote-text {
  font-size: 1em;
  font-weight: normal;
  color:rgba(var(--bs-link-color-rgb));
  text-shadow: 0 0 0px rgba(var(--bs-link-color-rgb)), 0 0 2px #fff;
}

#quote-author {
  font-size: 0.8em;
  float: inline-end;
  font-weight: normal;
  color:rgba(var(--bs-link-color-rgb));
  text-shadow: 0 0 0px rgba(var(--bs-link-color-rgb)), 0 0 2px #fff;
}

.checkout-modal{
  width: 100%;
}

.checkout-modal .btn{
  width: 100%;
}

.carousel{
  width: 100%;
}

.carousel-control-next, .carousel-control-prev {
  top:auto;
  background: var(--bs-primary);
  opacity: 1 !important;
  padding: 0.5em;
  width: 13em;
}

form .form-control{
  /*border-color: #ccc !important;*/
}

.modal-content{
  min-height: 678px;
}

.modal-cart-tab {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.2em;
  display: block;
  border-radius: 5px;
  font-size: 1.1em;
  text-indent: 0.5em;
}

.checkout-thumb{
  width: 10%;
  max-width: 10%;
}

.checkout-list{
  margin-top: 1rem !important;
  margin-bottom: 3rem !important;
}

.my-4,.my-5{
  margin-top:0px !important;
  margin-bottom:0px !important;
}
.mb-5 {
  margin-bottom: 1rem !important;
}

.py-5 {
  padding-bottom: 0rem !important;
}

form.row.g-3{
    width: 98%;
    margin: auto;
    padding-bottom: 4em;
}

form.row.g-4{
  margin: auto;
}

.form-label {
  margin-bottom: 0rem;
}

.webpay-logo{
  width: 100%;
}

.webpay-logo-payment{
  width: 75%;
}

.middle-label{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.thanks-order-image{
  width: 100%;
}


.form-control {
  transition: all .3s;
}

.text-base {
  line-height: 1;
  margin: 0;
  /*height: 20px;*/
  padding: 5px 8px;
  border: 2px solid #aaa;
  border-radius: 6px;
  transition: all .3s;
}

.text-base:focus {
  border: 2px solid #0074d9;
  outline: 0;
}

.text-field {
  position: relative;
}


.text-field input,
.text-field textarea,
.text-field select {
  display: inline-block;
  padding: 10px;
}

.text-field span {
  color: #aaa;
  position: absolute;
  pointer-events: none;
  left: 1.2em;
  top: 15px;
  transition: 0.3s;
}

.text-field input:focus+span,
.text-field input:not(:placeholder-shown)+span,
.text-field textarea:focus+span,
.text-field textarea:not(:placeholder-shown)+span,
.text-field select:focus+span,
.text-field select:not(:placeholder-shown)+span {
  top: -0.2em;
  left: 1.2em;
  font-size: small;
  background-color: #fff;
  padding: 0 5px 0 5px;
}

.text-field input:focus:invalid+span,
.text-field input:not(:placeholder-shown):invalid+span,
.text-field textarea:focus:invalid+span,
.text-field textarea:not(:placeholder-shown):invalid+span,
.text-field select:focus:invalid+span,
.text-field select:not(:placeholder-shown):invalid+span {
  /*color: red;*/
}

.w100p {
  width: 100%;
  margin: 10px 0;
}

.w100p textarea {
  height: 120px;
}

.login-dialog {
  width: inherit !important;
  max-width: fit-content !important;
  margin: auto !important;
}

.login-dialog .modal-content{
  min-height: fit-content;
}

.btn{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.btn-4 figure img {
	-webkit-transform: scale(1.2);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.btn-4 figure:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

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

.badge {
  background-color: var(--bs-primary) !important;
  color:#fff !important;
}

h4:not(.category-title):not(.offcanvas-header){
  border-bottom-style: dashed;
  border-width: 2px;
  border-color: #ccc;
  padding-bottom: 0.2em;
  width: 100%;
}

.carousel-control-validator {
  top: auto;
  background: var(--bs-primary);
  opacity: 1 !important;
  padding: 0.5em;
  width: 13em;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.electonic-transfer-info{
  list-style: none;
}

.glass-background{
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color:rgba(var(--bs-link-color-rgb));
  /*text-shadow: #000 1px 0 4px;*/
}

.navbar-nav {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color:rgba(var(--bs-link-color-rgb));
  /*text-shadow: #000 1px 0 4px;*/
}

.menu-icons {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: #000 1px 0 4px;
}

.navbar-toggler {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.col-md-9 {
  width: 100%;
}

.iconCheckmarkLg{
  fill:white;
}

.p-4 {
  padding: 1rem !important;
}

#hello-user{
  font-size: 0.9em;
}

.rounded-4.glass-background{
  margin-bottom: 0.2em;
}

.login-span{
  padding-left: 1em;
}

#UserInfoValidator{
  width: 30%;
}
.navbar-nav {
 --bs-nav-link-padding-y: 0.rem;
}

.logged-user{
  text-align: end; 
  margin-top: -0.9em;
  font-size: 0.9em;
  color: rgba(var(--bs-link-color-rgb));
}

.splash-screen{
  background-image: url('/images/splash.png');
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.faq-list{
  list-style: none;
  padding-left: 0rem;
  text-align: justify;
}

.faq-list li{
  padding: 0.4rem;
}

.faq-list-title{
  font-weight: bold;
}

.faq-list-title img{
  width: 20px;
  padding-right: 0.1rem;
}

.faq-list-text {
  border-bottom: #ccc;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-left: 1.5rem;
}

.swiper-wrapper{
  margin-top: 1rem;
}

li:has(span[id="cart-total"]){
  background-color:#beffe9;
}
.modal-body-images-list{
  margin-top: 1rem;
}
.modal-body-images-list img{
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

span[id="product-subtotal"] {
    margin-left: auto;
}

#frmWebpay{
  text-align: end;
}

.btn-webpay{
  width: 10rem;
}

#cart-badge{
  position: absolute;
  right: -0.3rem;
  top: -0.5rem;
}

.badge-red {
   background-color: #FF0000 !important;
}

@media(max-width: 991px){
  .product-details-body{
    display: contents !important;
  }

  .modal-body-images{
    max-width: 100% !important;
  }

  .modal-body-product{
    max-width: 100% !important;
    padding-top: 1.5em;
  }

  .checkout-thumb {
    width: 30%;
    max-width: 30%;
    padding: 0.5em;
  }

  .list-group-item div,.list-group-item span{
    padding: 0.5em;
  }
  .container-header-first-section {
    background-position: 25% 50%;
    }
    
    .splash-screen{
      background-size: auto;
    }
}

.list-group-item.checkout-totals {
  width: 100% !important;
  text-align: end !important;
  margin-right: 1em !important;
}

.balloon-message{
  width: 100px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  margin-top: 110%;
  } 

.globo{
  border-radius: 25px;
     padding: 1.5em;
     background: gray;
     color: white;
  
  position: relative;
  width: 200px;
  margin: 0 auto;
  font-family: sans-serif;
  z-index: 1;
  }
.globo::after {
  content: '';
  position: absolute;
  bottom: 0; 
  left: 80px;
  background: transparent;
  width: 0px; height: 0px;
  border-bottom: 40px solid gray;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  transform: rotate(90deg);
  z-index: -1;
  }
.imagen {
  width: 141px;
  border-radius: 50%;
  border: 8px double #f5e8e8;
  width: 100px;
} 

.glow-text {
  text-shadow: 
        0 0 2px var(--bs-dark),
        0 0 2px var(--bs-dark),
        0 0 2px var(--bs-dark);
} 

.checkout-product-title {
  white-space: nowrap;
} 

.checkout-product-amount {
  width: 100%;
  text-align: end;
  padding-right: 3em;
} 
.payment-process-background {
  background-image: url(images/banner-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 1em;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  /* --f: .5em; */
    /* position: absolute; */
    /* top: 0; */
    left: 4.2em;
    /* margin-left: 19.5%; */
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51% / var(--f);
    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    /* transform: translate(calc((cos(45deg) - 1)* 100%), -100%) rotate(-45deg); */
    transform-origin: 100% 100%;
    background-color: #F07818;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    border-radius: 4px;
}

.ribbon-red  {
  background-color: #f01818;
}

.product-thumbnail {
  cursor: pointer;
}

#overlay {
  position: fixed;       
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 9999;         
  /* display: none;          */
}

.logo-big {
  max-width: 20em;
  margin: auto;
  float: none;
}

.hello-glass-background {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);

  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.3);

  position: relative;
  display: block;
  z-index: 1;

  color: rgba(var(--bs-link-color-rgb));
}

.hello-phrase {
  margin-top: 2em;
  color: white;
  padding-left: 1em;
  font-size: 2em;
}

.btn-icon {
  display: flex;
}

.btn-icon:hover {
  background-color: var(--bs-primary);
  color:#fff;
}

.guest-checkbox {
    margin-top: 0.55em;
    padding: 0.55em;
}