/* REMOVE STUFF */

.verproductocta {
  display: none;
}

/* ============================ STYLES ============================ */

:root {
  --black-color: #000;
  --grey-dark-color: #555;
  --grey-color: #777;
  --grey-light-color: #eee;
  --white-color: #fff;
  --dark-color: #333;
  --light-color: #ccc;
  --lighter-color: #f2f2f2;
  --primary-color: #c6362c;
  --primary-light-color: #ffecea /*rgb(198, 54, 44, 0.08)*/;
  --secondary-color: /* #ed5b2d */ #c6362c;
  --secondary-light-color: #c6362c;
  --success-color: #1dab28;
  --heading-font: 'big_john_probold';
  --text-font: 'Montserrat', sans-serif; 
}

/* Body */

body {
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif!important;
  font-size: 16px;
  color(--dark-color);
  color: #333;
}

/* Selection */

::selection {
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color); 
  background: #c6362c; 
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dark-color); 
  background: #333; 
}

::-webkit-scrollbar {
  overflow-y: hidden;
}

/* Shadows */

.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: 0 0 10px 5px rgba(138, 138, 138, 0.26);
}

/* Borders */

.border-top {
  border-top: 1px solid var(--grey-light-color);
  border-top: 1px solid #eee;
}

/* Positions */

.top-0 {
  top: 0;
}

.botom-0 {
  bottom: 0;
}

.right-0 {
    right: 0;
}

.left {
  left: 0;
}

/* Backgrounds */

.btn-comprar {
    background-color: var(--success-color);
    color: #fff;
    border: 1px solid var(--success-color);
    cursor: pointer;
}

.btn-comprar:hover {
    background-color: #fff;
    color: var(--success-color);
}

.btn-primary-light {
  background-color: var(--primary-light-color);
  background-color: #ffecea;
  color: var(--dark-color);
  color: #333;
  border: 1px solid var(--primary-light-color);
  border: 1px solid #ffecea;
}

.btn-primary-light {
  background-color: var(--primary-light-color);
  background-color: #ffecea;
}

.btn-primary-light-menu {
  background-color: #fff;
  color: #333;
  border: 1px solid #dbdbdb;
}

.bg-primary {
  background-color: var(--primary-color) !important;
  background-color: #c6362c !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
  background-color: #ed5b2d !important;
}

.bg-dark {
  background-color: var(--dark-color) !important;
  background-color: #333 !important;
}

.bg-grey {
  background-color: var(--grey-color) !important;
  background-color: #777 !important;
}

.bg-grey-light {
  background-color: var(--grey-light-color) !important;
  background-color: #eee !important;
}

/* ============================ STYLES - TYPOGRAPHY ============================ */

@font-face {
  font-family: 'big_john_probold';
  src: url('https://www.cevagraf.coop/temas/cevagraf/fonts/bigjohn/bigjohnpro-bold-webfont.woff2') format('woff2'),
       url('https://www.cevagraf.coop/temas/cevagraf/fonts/bigjohn/bigjohnpro-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap');

h1, h2, h3, h4, h5, h6, .titbold {
  font-weight: 900;
  font-family: var(--heading-font);
  letter-spacing: 0px;
}

h1 {
  font-size: 90px;
  line-height: 70px;
  color: var(--primary-color);
  color: #c6362c;
  text-transform: uppercase; 
    font-family: 'big_john_probold', sans-serif;
}

h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6, .titbold {
  color: var(--dark-color);
  color: #333;
  font-family: 'Montserrat', sans-serif;
}

h3 {
  font-size: 40px;
}

h2.titulosseccion {
  font-size: 36px !important;
}

.heading-font {
  xfont-family: 'big_john_probold', sans-serif;
  font-family: var(--heading-font);
}

.text-font {
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
}

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

.text-secondary {
  color: var(--secondary-color) !important;
  color: #ed5b2d !important;
}

.text-dark {
  color: var(--dark-color) !important;
  color: #333 !important;
}

.text-grey {
  color: var(--grey-color) !important;
  color: #777 !important;
}

.text-grey-light {
  color: var(--grey-light-color) !important;
  color: #eee !important;
}

/* ============================ STYLES - BUTTONS ============================ */

.btn {
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
  border-radius: 5px;
  margin: 0;
  font-weight: 500 !important;
  padding: 8px;
  font-size: 14px;
  white-space: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-light {
  color: #555;
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--primary-color);
  color: #c6362c;
  border-color: var(--primary-color);
  border-color: #c6362c;
}

.btn-grey-light, .btn-outline-grey-light:hover, .btn-grey-light.active {
  background-color: var(--grey-light-color);
  background-color: #eee;
  color: var(--dark-color);
  color: #333;
  border: 1px solid var(--grey-light-color);
  border: 1px solid #eee;
}

.btn-outline-grey-light, .btn-grey-light:hover {
  background-color: transparent;
  color: var(--grey-color);
  color: #777;
  border: 1px solid var(--grey-light-color);
  border: 1px solid #eee;
}

.btn-success {
  background-color: var(--success-color);
  background-color: #1dab28 !important;
  color: #fff;
  border-color: var(--success-color) !important;
  border-color: #1dab28 !important;
}

.btn-success:hover {
  background-color: transparent !important;
  color: var(--success-color) !important;
  color: #1dab28 !important;
}

.btn-sm {
  font-size: 12px !important;
}

.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
  background-color: var(--primary-color);
  background-color: #c6362c;
  border-color: var(--primary-color);
  border-color: #c6362c;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(198, 54, 44, 0.11);
}

.btn-dark, .btn-outline-dark:hover {
  background-color: var(--dark-color);
  background-color: #333;
}

.btn-dark:hover, .btn-outline-dark {
  background-color: transparent;
  color: var(--dark-color);
  color: #333;
  border-color: var(--dark-color) !important;
  border-color: #333 !important;
}

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: none;
}

button.close {
  outline: 0;
  font-size: 30px;
  position: absolute;
  top: 8px;
  right: 0;
  line-height: 0;
}

#myBtn {
  display: none;
}

.btn-link:hover {
  text-decoration: none;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
  border-color: var(--primary-color);
  border-color: #c6362c;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  box-shadow: none;
}

.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  background-color: var(--primary-color);
  background-color: #c6362c;
  border-color: var(--primary-color);
  border-color: #c6362c;
}

.btn-primary, .btn-secondary {
  transition: ease-in-out .15s,box-shadow ease-in-out .15s;
}

.btn-primary {
  color: #fff;
  background-color:  var(--primary-color);
  background-color:  #c6362c !important;
  border: 1px solid !important;
  border-color: var(--primary-color) !important;
  border-color: #c6362c !important;
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
}

.btn-primary:hover {
  background-color: transparent !important;
  border: 1px solid var(--primary-color) !important;
  border: 1px solid #c6362c !important;
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

.btn-outline-primary {
  border-color: var(--primary-color) !important;
  border-color: #c6362c !important;
}

.btn-primarycover {
  color: #fff;
  background-color: #eabe00 !important;
  border: 1px solid !important;
  border-color: var(--primary-color);
  border-color: #c6362c;
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

.btn-primarycover:hover {
  background-color: #fff !important;
  opacity: 0.9;
  border: 1px solid var(--primary-color) !important;
  border: 1px solid #c6362c !important;
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

.btn-secondary {
  color: var(--secondary-color);
  color: #ed5b2d;
  background-color: #fff;
  border: 1px solid;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #fff !important;
  opacity: 0.9;
  color: var(--primary-color) !important;
  color: #c6362c !important;
  border: 1px solid var(--primary-color) !important;
  border: 1px solid #c6362c !important;
}

button#myBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--primary-color);
  background-color: #c6362c;
  border: 1px solid var(--primary-color);
  border: 1px solid #c6362c;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  outline: none;
}

button#myBtn:hover {
  background-color: #fff;
  color: var(--primary-color);
  color: #c6362c;
}

/* ============================ STYLES - ICONS ============================ */

.fa-eye:before {
  font-family: inherit !important;
}

/* ============================ ELEMENTS - BADGES ============================ */

.badge {
  border-radius: 30px;
}

.badge-primary {
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
}

.badge-dark {
  background-color: var(--dark-color);
  background-color: #333;
  color: #fff;
}

.badge-light {
  background-color: var(--light-color);
  background-color: #ccc;
  color: var(--dark-color);
  color: #333;
}

.badge-grey-light {
  background-color: var(--grey-light-color);
  background-color: #eee;
}

/* ============================ ELEMENTS - BREADCRUMBS ============================ */

.breadcrumb-item.breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  padding-left: .5rem;
  font-size: 11px;
  color: #868e96;
  content: ">";
}

/* ============================ ELEMENTS - FORMS ============================ */

select.form-control {
  padding-right: 20px !important;
}

.form-control, input {
  border: 1px solid var(--light-color) !important;
  border: 1px solid #ccc !important;
}

.form-control:focus, input:focus {
  color: var(--grey-color);
  color: #777;
  background-color: #fff;
  border-color: var(--primary-light-color) !important;
  border-color: #c6362c;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(198, 54, 44, 0.11) !important;
}

button#password_visibility {
  padding: 8px 9px;
  font-weight: 900 !important;
  font-family: 'Font Awesome\ 5 Free';
}

.g-recaptcha > div {
  margin: 0px auto !important;
}

select.form-control:not([size]):not([multiple]) {
    height: auto;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
  background-color: #fff;
  margin-top: -10px;
  margin-left: 10px;
}

select {
  border: 1px solid #ccc !important;
}

/* ============================ ELEMENTS - MODALS ============================ */

@media screen and (max-width: 480px) {
  div.cardproducto {
    font-size: 14px !important;
  }
  .offcanvas_nav .container .row.h-100 {
    margin: 15px !important;
  }
  .offcanvas_nav h2 {
    font-size: 22px !important;
  }   
  .offcanvas_nav h4 {
    font-size: 20px !important;
  }
  .offcanvas .proditem {
    margin-bottom: 20px !important;
  }
  .modal img {
    width: 100% !important;
  }
  .modal {
    padding: 20px !important;
}
.modal {
    padding: 20px !important;
}
  }
  a.btn.btn-primary.btn-sm.w-50.mr-2, a.btn.btn-primary.btn-sm.w-50 {
    color: white !important;
  }
  .modal .card-footer .col-md-6:first-child {
    margin-bottom: 10px;
  }
}

.modal .fa-times {
  color: var(--grey-color);
  color: #777;
  font-size: 16px; 
}

.modal-dialog {
  max-width: 650px !important;
}

.modal-content {
  width: 100% !important;
}

.modal-sm {
  max-width: 450px !important;
}

.modal-lg {
  max-width: 850px !important;
}

.modal .btn-close {
  right: 10px; 
  top: 10px;
}

#opborrarsi {
  cursor: pointer;
}

#offcanvas2 .fa-times {
  color: var(--dark-color);
  color: #333;
}

/* ============================ ELEMENTS - MODALS - CUENTA ============================ */

@media screen and (max-width: 480px) {
  .social-buttons .btn {
    width: 100%;
  }
  input#login-submit {
    background-color: var(--primary-color);
    background-color: #c6362c;
  }
  .passconvis {
    width: 85% !important;
  }
}

/* ============================ ELEMENTS - MODALS - CARRITO ============================ */

@media screen and (max-width: 480px) {
  .offcanvas_nav.p-5.h-100 {
    padding: 0px !important;
    padding-top: 20px !important;
  }
  .offcanvas_nav .proditem {
    margin-bottom: 20px !important;
  }
  .offcanvas_nav .carrowrap .col-md-8 {
    padding: 0px;
  }
  .offcanvas_nav .prod-item .col-md-12.text-right.p-0  {
    padding-left: 0px 15px !important;
  }
  .offcanvas_nav .proditem .btn {
    width: 100%;
  }
  #offcanvas div.row.wrapresumen {
    margin-left: 0px !important;
  }
  #offcanvas .col-md-12.p-0.mt-3.mb-4 {
    order: 1;
  }
  #offcanvas .col-md-4.carrowrap {
    order: 2;
  }
  #offcanvas .col-md-8.carrowrap {
    order: 3;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #offcanvas div.row.wrapresumen {
    margin-bottom: 20px !important;
  }
  #offcanvas .preciolinea {
    text-align: left;
    padding: 0;
  }
  #offcanvas .metodos-pago p {
    font-size: 12px !important;
  }
  #offcanvas .metodos-pago {
    padding: 0;
  }
  #offcanvas .alert {
    font-size: 14px !important;
    margin-top: 0px !important;
  }
}

#offcanvas .proditem {
  padding: 20px;
}

ul.listacaracter li {
  list-style: circle;
}

ul.listacaracter.detallesitem {
  padding-left: 70px;
}

/* ============================ ELEMENTS - COLLAPSE ============================ */

#seo .pull-right {
  float: right;
}

#seo a[aria-expanded="false"]:after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 600; 
  content: "\f107";
  color: var(--dark-color);
  color: #333;
  font-size: 18px !important;
}

#seo.seocat a[aria-expanded="false"]:after {
display: none;
}


#seo a[aria-expanded="true"]:after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 600; 
  content: "\f106";
  color: var(--dark-color);
  color: #333;
  font-size: 18px;
}

#seo li, #seo ol {
  letter-spacing: 0px;
  font-size: 14px;
  list-style-type: disc !important;
}

/* ============================ NAVBAR ============================ */

#resbusqueda a:hover {
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

.navbar-brand {
  left: -10px !important;
  top: 11px !important;
}

.nav-open .navbar-brand {
  top: 3px !important;
}

button.mycart {
  padding: 5px;
  font-size: 22px !important;
  border-radius: 0px;
  color: white;
  border: 0;
  font-weight: bold;
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
  background-color: transparent;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  outline: none !important;
}

button.myaccount {
  padding: 5px;font-size: 22px !important;
  border-radius: 0px;
  color: white;
  border: 0;
  font-weight: bold;
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
  background-color: transparent;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  outline: none !important;
}

.nav-open .abrir-prod {
  display: none !important;
}

.nav-open .cerrar-prod, .nav-open .btn-ofertas {
  display: inline !important;
}

a.view-products {
  padding: 10px 15px; 
  font-weight: bold !important;
}

/* Responsive */

@media screen and (max-width: 1540px) {
  .username {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
   .barraNormal img#imglogoacademy {
    width: 320px !important;
  }
  
  .barraFlotante img#imglogoacademy {
    width: 320px !important;
  }
}

@media screen and (max-width: 1200px) {
   .barraNormal img#imglogo {
    width: 160px !important;
    margin-top: -20px !important;
  }
}

@media screen and (max-width: 1040px) {
  .username {
    display: none !important;
  }
}

@media screen and (max-width: 990px) {
  #buscadortopnav {
    margin-bottom: 10px !important;
  }
  #menuuser .dropdown.lang > .dropdown-menu {
    left: -8px !important;
  }
  .topnav li {
    margin: 0px auto !important;
  }
  .account-icons.onlymobile {
    display: flex !important;
  }
  a#trigger2, li.text-usuario {
    display: none !important;
  }
  button.mycart {
    padding-top: 15px !important;
    padding-left: 15px !important;
  }
  button.myaccount {
    display: none !important;
  }
  .menu-promos .col-md-4 {
    max-width: 100% !important;
    flex: 100% !important;
  }
  .tablet-ctas {
    display: flex !important;
  }
  .tablet-ctas .navbar-toggler {
    width: 100% !important; 
    display: flex !important;
  }
  .openmobile ul.nav.flex-row.topnav {
    display: flex;
    padding: 20px 0px;
  }  
}

@media (max-width: 767px) {
  .navbar-brand img {
    width: 140px !important;
  }
}

@media screen and (max-width: 480px) {
  span#txtfechareq24 {
    padding-right: 1rem !important;
}
  a.navbar-brand {
    left: 0 !important;
  }
  .welcome p.h4.font-weight-bold {
    font-size: 20px !important;
  }
}

/* Barra Normal */

.barraNormal .form-control {
    border: 0px !important;
}

.barraNormal i.fas.fa-bars {
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

/* Barra Flotante */

nav.barraFlotante {
  padding: 15px !important;
  padding-top: 0px !important;
}

.barraFlotante .nav-button #nav-icon3 span {
  background: #fff !important;
}
.barraFlotante a.nav-button.view-products {
  background-color: var(--primary-color) !important;
  background-color: #c6362c !important;
  color: #fff !important;
  border: 1px solid var(--primary-color) !important;
  border: 1px solid #c6362c !important;
}

.barraFlotante a.nav-button.view-products:hover #nav-icon3 span {
  background: var(--primary-color) !important;
  background: #c6362c !important;
}
#menuuser.barraFlotante a.btn-ofertas:hover i {
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

.barraFlotante .navbar-brand img {
  margin-right: -15px !important;
}

.nav-open .barraFlotante .navbar-brand img {
  margin-top: 8px !important;
}

.barraFlotante #buscadortopnav input {
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
  border-right: 0px !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.barraFlotante .input-group-append {
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
  border-left: 0px !important;
  height: 39px;
}

.barraFlotante #buscadoricono {
  border-left: 0px !important;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

#buscadortopnav .input-group-append {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-top-left-radius: 0px !important;
  border-left: 0px !important;
}

.barraFlotante .form-control, .barraFlotante #buscadoricono {
  background-color: #fff;
  border: 1px solid var(--grey-light-color);
  border: 1px solid #eee;
  border-right: 0px !important;
}

.barraFlotante a.nav-button.view-products {
  background-color: var(--primary-color) !important;
  background-color: #c6362c !important;
  color: #fff !important;
  border: 1px solid var(--primary-color);
  border: 1px solid #eee;
}

/* ============================ NAVBAR - MENU ============================ */


/* Responsive */

 @media screen and (max-width: 480px) {
  .clcheck .nav-open .barraFlotante .navbar-brand img {
    margin-top: 20px !important;
  }
  nav#menuuser a.btn-sm {
    font-size: 12px !important;
  }
  .clcheck #full-products {
    padding-top: 110px !important;
  }
  .clcheck #full-products .container {
    padding-top: 25px;
  }
  .topnav .dropdown.lang {
  }
  #menuuser.barraFlotante .dropdown.lang > button {
    margin-top: 0px !important;
  }
}

/* General */

.topnav .badge1[data-badge]:after {
  top: 190px;
  right: 35px;
}

.topnav a#trigger {
  padding: 0px;
}

.nav-open #menuuser, .openmobile #menuuser{
  background-color: #fff !important;
}

button#open-mobile-menu {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: #fff;
  outline: none !important;
}

.openmobile button#open-mobile-menu,
.openmobile .navbar-dark .navbar-toggler i, .openmobile li button,
.openmobile button#open-mobile-menu[aria-expanded="false"]:before, 
.openmobile button#open-mobile-menu[aria-expanded="false"]:after, 
.openmobile button#open-mobile-menu[aria-expanded="true"]:after, 
.openmobile button#open-mobile-menu[aria-expanded="true"]:before,
.barraFlotante button#open-mobile-menu[aria-expanded="false"]:before, 
.barraFlotante button#open-mobile-menu[aria-expanded="false"]:after, 
.barraFlotante button#open-mobile-menu[aria-expanded="true"]:after, 
.barraFlotante button#open-mobile-menu[aria-expanded="true"]:before,
.nav-open button#open-mobile-menu[aria-expanded="false"]:before, 
.nav-open button#open-mobile-menu[aria-expanded="false"]:after,
.nav-open button#open-mobile-menu[aria-expanded="true"]:after, 
.nav-open button#open-mobile-menu[aria-expanded="true"]:before {
  color: var(--dark-color) !important;
  color: #333 !important;
}

.openmobile #menuuser .title-nav {
  color: var(--dark-color) !important;
  color: #333 !important;
}

.openmobile .iconsmobile {
  display: inline !important;
  margin: 0px auto;
}

.openmobile #buscadortopnav input {
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
}

.openmobile .input-group-append {
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
  border-left: 0px !important
}

.openmobile #buscadoricono {
  border-left: 1px solid var(--grey-light-color) !important;
  border-left: 1px solid #eee !important;
}

.openmobile .form-control, .openmobile #buscadoricono {
  background-color: #fff;
  border: 1px solid var(--grey-light-color);
  border: 1px solid #eee;
}


.main-menu{
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  visibility: hidden;
}

.nav-open .main-menu {
  opacity: 1; 
  visibility: visible; 
  background: #fff;
  transition: opacity .35s, visibility .35s, height .35s; 
}

.main-menu .nav li a {
  color:#FFF; 
  font-size: 5vh; 
  font-weight: 600; 
}

.main-menu .nav li{
  opacity: 0;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
  -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
  -o-animation-timing-function: cubic-bezier(.45,.005,0,1);
  animation-timing-function: cubic-bezier(.45,.005,0,1);
}

.nav-open .main-menu .nav li{
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: -webkit-transform .2s,opacity .2s;
  transition: transform .2s,opacity .2s;
  animation: fadeInRight .5s ease forwards;
    animation-delay: .35s;
    opacity: .9;
  visibility: visible;
}

.nav-open .col-4 {
  flex: 70%;
  max-width: 70%;
}

.nav-open .navbar-brand {
  z-index: 99999;
}

.nav-open ul.topnav {
  display: none;
}

button#open-mobile-menu[aria-expanded="false"]:before {
  content: 'Menu';
  color: #fff;
  margin-right: 10px;
  padding-top: 3px;
  font-size: 16px;
}

button#selectlang[aria-expanded="false"]:after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  color: #fff;
}

button#selectlang[aria-expanded="true"]:after {
  font-family: "Font Awesome 5 Free";
  content: "\f106";
  color: #fff;
}

button#open-mobile-menu[aria-expanded="false"]:after {
font-family: "Font Awesome 5 Free";
content: "\f0c9";
color: #fff;
}

button#open-mobile-menu[aria-expanded="true"]:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  color: #fff;
}

button#open-mobile-menu[aria-expanded="true"]:before {
  content: 'Cerrar';
  color: #fff;
  margin-right: 10px;
  padding-top: 3px;
  font-size: 16px;
}

.openmobile #selectlang i {
  color: var(--dark-color) !important;
  color: #333 !important;
}

.nav-open button#open-mobile-menu {
  color: var(--dark-color) !important;
  color: #333 !important;
}

.openmobile button.myaccount {
  display: none !important;
}

.openmobile #menuuser .dropdown.lang > button {
  color: var(--dark-color) !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: normal !important;
  margin-top: 5px !important;
}

#menuuser .dropdown.lang > .dropdown-menu {
  width: auto !important;
  right: auto !important;
} 

.openmobile .nav-button.view-products {
  background-color: var(--dark-color) !important;
  background-color: #333 !important;
  color: #fff !important;
}
.openmobile .barraNormal i.fas.fa-bars {
  color: #fff !important;
}

#full-products a.btn.btn-primary {
      color: #fff !important;
  }
 #full-products a.btn.btn-primary:hover {
    color: var(--primary-color) !important;
    color: #c6362c !important;
}
#full-products {
  padding-top: 120px;
  overflow-y: hidden;
  overflow-x: hidden; 
  height: auto; 
  padding-bottom: 20px;
}

#full-products a:hover {
  border-color: transparent;
}
#full-products a p {
  color: var(--dark-color);
  color: #333;
  padding: 0px;
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 16px;
  font-family: 'big_john_probold', sans-serif;
  margin-top: 10px;
  padding: 0px;
}

#full-products .featured-prods .fp-title {
  padding: 0px;
  margin-top: 10px;
  margin-bottom: 3px;
  font-size: 18px;
  font-family: 'big_john_probold', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
#full-products .featured-prods img {
  object-fit: contain;
  
  padding: 0px;
}
#full-products .fp-description {
  padding: 0px;
  color: var(--grey-color);
  color: #777;
  text-transform: none;
  letter-spacing: 0px;
  margin-bottom: 5px;
}
#full-products .featured-prods a.btn {
  padding: 10px;
  font-size: 10px;
  font-weight: normal;
  font-family: var(--text-font);
  font-family: 'Montserrat', sans-serif;
}
.featured-prods {
  text-align: center;
}

/* ============================ PAGE - HOME ============================ */

@media screen and (max-width: 480px) {
  section#footer-cta h3 {
    font-size: 18px !important;
    line-height: 28px !important;
    margin-bottom: 20px !important;
  }
}

/* ============================ PAGE - CATEGORY ============================ */

/* Responsive */

@media (max-width: 760px) {
  #interactivo .nav-pills .nav-link {
    margin: 20px auto !important;
  }
  #interactivo .nav-pills {
    display: block !important;
  }
  #inicio img {
    object-fit: contain !important;
  }
}

@media (max-width: 500px) {
  .resultados img {
    height: 240px !important;
  }
}

@media (max-width: 991px) {
  .circular-menu-container,  #servicios .nota {
    display: none;
  }
}

@media (min-width: 991px) {
  #servicios .lista {
    display: none;
  }
}

/* General */

#servicios .detalles {
  display: none;
}

#servicios h2 {
  margin-top: 100px;
}

#servicios .lista:first-child {
    margin-top: 30px;
}

#servicios .lista:hover {
  box-shadow: none;
}

#servicios .lista h4 {
  font-size: 18px;
  margin-top: 20px;
}

.circular-menu li:nth-child(4) .bg {
  transform: rotate(224deg) skew(-2deg);
}

.circular-menu li:nth-child(2) .bg {
  transform: rotate(44deg) skew(-2deg);
}

#servicios .content p {
  font-size: 14px;
}

.circular-menu li:hover {
    cursor: pointer;
}

.circular-menu li .label.image {
    display: none;
}

.circular-menu li:hover .label.image img {
    display: block !important;
}

#servicios .detalles p + .circular-menu li :hover  {
    display: block !important;
}

#servicios .detalles {
  display: none;
  text-align: center;
  font-size: 16px;
  background-color: var(--dark-color);
  background-color: #333;
  color: #fff;
  max-width: 280px;
  margin: 0px auto;
  padding: 15px 10px 1px 10px;
  margin-bottom: 20px;
}

.circular-menu li:hover p {
  display: block !important;
}

.circular-menu li:nth-child(1) .bg {
  background-size: 115% !important;
}

.circular-menu li div.detalles p {
  z-index: 999999;
  color: var(--dark-color);
  color: #333;
  margin-top: -280px;
  font-size: 18px;
  font-weight: bold;
  max-width: 200px;
  margin-left: -100px;
}

.circular-menu-container {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: none;
  width: auto;
}

.circular-menu {
  width: 450px;
  height: 450px;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
  border-radius: 500px;
  border-radius: 50%;
  z-index: 1;
  list-style: none;
}

.center-section {
  width: 245px;
  height: 245px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -125px;
  padding: 30px;
  border-radius: 50%;
  text-align: center;
  background: #fff;
  display: none;
  z-index: 1;
}

.center-section.section-intro {
  display: block;
}

.circular-menu li:hover ~ .center-section.section-intro,
.touch .circular-menu li:focus ~ .center-section.section-intro {
  display: none;
}

.touch .circular-menu li:focus {
  outline: 0;
}

.circular-menu li div.label, .circular-menu li div.detalles {
  position: absolute;
  width: 180px;
  height: 180px;
  z-index: 2;
}

.circular-menu li div.label p {
  text-align: center;
  max-width: 118.8px;
  margin: 0 auto;
  margin-top: 70px;
  color: #fff;
  font-size: 30px;
}

.circular-menu li span.arrow {
  position: absolute;
  width: 30px;
  height: 30px;
  display: block;
  transition: all 300ms ease-out;
  z-index: 2;
}

.circular-menu li .bg {
  width: 350px;
  height: 300px;
  position: absolute;
  transform-origin: 0 300px;
  margin-top: -300px;
  left: 50%;
  top: 50%;
  transition: all 300ms ease-out;
}

.circular-menu li {
  position: absolute;
  text-decoration: none;
  top: 50%;
  left: 50%;
  display: none;
}

.circular-menu li:nth-child(1) {
  display: block;
}

.circular-menu li:nth-child(1) .bg {
  transform: rotate(-45deg) skew(0deg);
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(1):hover .bg,
.touch .circular-menu li:nth-child(1):focus .bg {
  background: var(--dark-color);
  background: #333;
}

.circular-menu li:nth-child(1) span.arrow {
  transform: rotate(-45deg);
  margin: -225px 0 0 -15px;
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(1):hover span.arrow,
.touch .circular-menu li:nth-child(1):focus span.arrow {
  background: var(--dark-color);
  background: #3333;
  margin: -195px 0 0 -15px;
}

.circular-menu li:nth-child(1) div.label {
  margin: -265px 0 0 -90px;
}

.circular-menu li:nth-child(1):hover div.center-section.section-1,
.touch .circular-menu li:nth-child(1):focus div.center-section.section-1 {
  display: block;
}

.circular-menu li:nth-child(2) {
  display: block;
}

.circular-menu li:nth-child(2) .bg {
  transform: rotate(44deg) skew(0-2deg);
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(2):hover .bg,
.touch .circular-menu li:nth-child(2):focus .bg {
  background: var(--dark-color);
  background: #333;
}

.circular-menu li:nth-child(2) span.arrow {
  transform: rotate(45deg);
  margin: -15px 0 0 195px;
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(2):hover span.arrow,
.touch .circular-menu li:nth-child(2):focus span.arrow {
  background: var(--dark-color);
  background: #333;
  margin: -15px 0 0 165px;
}

.circular-menu li:nth-child(2) div.label {
  margin: -85px 0 0 85px;
}

.circular-menu li:nth-child(2):hover div.center-section.section-2,
.touch .circular-menu li:nth-child(2):focus div.center-section.section-2 {
  display: block;
}

.circular-menu li:nth-child(3) {
  display: block;
}

.circular-menu li:nth-child(3) div.label {
    margin-top: 80px !important;
}

.circular-menu li:nth-child(3) .bg {
  transform: rotate(135deg) skew(0deg);
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(3):hover .bg,
.touch .circular-menu li:nth-child(3):focus .bg {
  background: var(--dark-color);
  background: #333;
}

.circular-menu li:nth-child(3) span.arrow {
  transform: rotate(135deg);
  margin: 195px 0 0 -15px;
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(3):hover span.arrow,
.touch .circular-menu li:nth-child(3):focus span.arrow {
  background: var(--dark-color);
  background: #333;
  margin: 165px 0 0 -15px;
}

.circular-menu li:nth-child(3) div.label {
  margin: 160px 0 0 -90px;
}

.circular-menu li:nth-child(3):hover div.center-section.section-3,
.touch .circular-menu li:nth-child(3):focus div.center-section.section-3 {
  display: block;
}

.circular-menu li:nth-child(4) {
  display: block;
}

.circular-menu li:nth-child(4) .bg {
  transform: rotate(224deg) skew(-2deg);
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(4):hover .bg,
.touch .circular-menu li:nth-child(4):focus .bg {
  background: var(--dark-color);
  background: #333;
}

.circular-menu li:nth-child(4) span.arrow {
  transform: rotate(225deg);
  margin: -14.9999999979px 0 0 -224.9999999841px;
  background: var(--primary-color);
  background: #c6362c;
}

.circular-menu li:nth-child(4):hover span.arrow,
.touch .circular-menu li:nth-child(4):focus span.arrow {
  background: var(--dark-color);
  background: #333;
  margin: -14.9999999982px 0 0 -194.9999999864px;
}

.circular-menu li:nth-child(4) div.label {
  margin: -85px 0 0 -260px;
}

.circular-menu li:nth-child(4):hover div.center-section.section-4,
.touch .circular-menu li:nth-child(4):focus div.center-section.section-4 {
  display: block;
}

span.arrow {
    display: none !important;
}

.circular-menu h4 {
  font-size: 22px;
}

.circular-menu .descripcion {
  margin-bottom: 0px;
  font-size: 14px;
}

.circular-menu .content {
  height: 100%;
  vertical-align: middle;
  display: grid;
  align-items: center;
}

#ventajas {
  background-color: #eee;
    background: url(https://www.cevagraf.coop/img/fondonew6.jpg);
    background-size: cover;
}

#ventajas h3 {
  font-size: 20px;
  margin-bottom: 0px; 
  color: var(--primary-color);
  color: #c6362c;
}

#ventajas img {
  margin: 20px 0px;
  border-radius: 5px;
}


/* ============================ PRODUCT CATEGORY ============================ */

/* Responsive */

@media (min-width: 1300px) {
  .seccionpromo  .container-fluid {
    max-width: 100%;
    margin: 0px auto;
    padding-top: 50px;
  }
}

@media screen and (max-width: 480px) {
  header.masthead.gama.text-white.text-left {
    padding-top: 70px !important;
  }
  header.masthead.gama .bannercat h2 {
    padding-bottom: 0px !important;
    text-align: center !important;
  }
  section#productos {
    padding: 20px !important;
  }
  #productos h4 {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }
  #productos .col-lg-4 {
    margin-bottom: 10px !important;
  }
  #galeria div a span {
    display: none;
  }
}

/* Section Nav */

#navsection {
  display: none !important;
  background-color: #fff; 
  z-index: 99; 
  top: 70; 
  padding: 0px !important; 
  box-shadow: 0 0 10px 0px rgba(109, 109, 109, 0.26);
}

.navsec .nav-link {
  color: var(--grey-color);
  color: #777;
  border-bottom: 2px solid transparent;
  padding: 15px;
  font-weight: 500;
}

.navsec a.nav-link.active {
  border-bottom: 2px solid;
}

.navsec a.nav-link:hover {
  color: var(--primary-color);
  color: #c6362c;
}

/* ============================ SECTION ============================ */

.nav-open .badge1[data-badge]:after {
    top: 25px;
}

/* Responsive */

@media (min-width: 992px) {
  section .container-fluid {
    max-width: 1140px;
    margin: 0px auto;
  }
}

@media screen and (max-width: 1024px) {
  #pagina-direnvio button {
    width: 100%;
    margin-top: 10px;
}
  #listado p.badge.badge-success.estado {
    font-size: 10px !important;
}
  i.fas.fa-sign-out-alt {
    font-size: 18px;
  }
  #disenologo .col-md-6 {
    max-width: 100%;
}
#disenologo .col-md-6:first-child {
  margin-bottom: 20px;
}
  .lista_cli p.solomovil {
    margin-bottom: 10px !important;
}
  .lista_cli .card-header {
    padding-top: 10px !important;
}
  .lista_cli .card {
      border-bottom: 1px solid #ccc;
  }
  #pagina-presupuestos .pedido p {
    font-size: 14px !important;
}
  #lista_presupuestos p.car_producto {
    font-size: 14px !important;
  }
  #pagina-presupuestos .pedido .row.px-3.pt-0 {
    background-color: #fff;
    margin: 0px 1px;
}
  #lista_presupuestos .col-lg-6, #lista_presupuestos .col-lg-12 {
    text-align: left !important;
}
  #pagina-presupuestos h6.titulo_apartados {
    text-align: left !important;
}
#pagina-presupuestos .accionespres {
    margin-bottom: 15px;
}
  #lista_presupuestos .row.titulos p {
    font-size: 14px !important;
  }
  #pagina-presupuestos .pedido[aria-expanded="false"]:after, #pagina-presupuestos .pedido[aria-expanded="true"]:after {
    color: #fff !important;
  }
  #listadoarchivados .card-header {
    padding: 0px !important;
  }
  #lista_presupuestos .btn-link.pedido {
    color: white !important;
    margin-top: 0px !important;
}
  #listadoarchivados .card-header {
    padding: 0px !important;
    padding-bottom: 15px !important;
  }

  #pagina-presupuestos div#titulos {
    display: none;
}
  #listadoarchivados .row.titulos > div:first-child {
    margin-bottom: 10px;
    background-color: #333;
    color: white !important;
    padding: 10px 0px;
    font-size: 14px;
    margin: 15px;
    margin-top: 0px !important;
}
  #resumen_prods {
    width: 100% !important;
}
  #buscadortopnav {
    flex: 60% !important;
}
  .checkout .carrowrap {
    margin-left: 0px !important;
    max-width: 100% !important;
    flex: 100% !important;
  }
  .checkout .col-lg-4.carrowrap {
    max-width: 100% !important;
  }
  button.btn.btn-dark.btn-block.btn-sm.d-block.d-lg-none {
    display: block !important;
  }
  .welcome .row.wrapresumenarea.position-sticky {
    text-align: center;
}
.col-md-12.col-lg-3.welcome {
    max-width: 100%;
    flex: 100%;
}
.col-md-12.col-lg-8.carrowrap {
    max-width: 100%;
    flex: 100%;
    margin-left: 0px !important;
}
}

#lista_presupuestos p.solomovil {
    font-weight: bold;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #pagina-direnvio.checkout #accordion .col-lg-1 {
    max-width: 100% !important;
}
  .carrowrap .alert.alert-warning {
    margin-top: 100px;
  }
  .favoritos button.btn.btn-outline-dark.btn-sm {
    width: 90%;
    margin-top: 10px;
}
  #lista_presupuestos .accionesdatoscli .col-lg-6 {
    max-width: 50% !important;
  }
  .col-lg-5.carrowrap.areacliente:first-child {
    margin-top: 70px !important;
}
  #pagina-presupuestos .pedido .col-lg-4.px-3.bg-white {
    text-align: left;
    max-width: 33.33%;
    padding: 0px !important;
}

  #listadoarchivados .row.titulos > div {
    max-width: 33.33%;
    flex: 33.33%;
}
#listadoarchivados .row.titulos > div:first-child {
    max-width: 100%;
    flex: 100%;
}

.checkout #accordion .col-lg-1 {
  max-width: 50%;
  }
  #pagina-presupuestos .checkout #accordion .text-left {
    max-width: 33.33%;
}
  #listado .campocab {
    max-width: 33.33% !important;
    flex: 33.33% !important;
}
  .checkout {
    padding-top: 100px !important;
  }
  .welcome .row.wrapresumenarea.position-sticky {
    margin-top: 0px !important;
  }
  .topnav .badge1[data-badge]:after {
    top: 215px;
    right: 75px;
}
  .col-lg-6.seltipopago {
    max-width: 50%;
  }
  div#tiotpago {
      font-size: 20px !important;
  }
  div#subtctpago {
      margin-top: 0px !important;
  }
  header.masthead h1{font-size: 60px;}
  header.masthead h2 {font-size: 26px !important;}
  nav.navbar.navbar-expand.fixed-top.left.menu{width:100%;}
  .design {max-width: 240px;max-height: 240px;}
  #opciones .col-lg-4{flex: 0 0 25%;}
  #modelos .table td {height: 170px;}
  #modelos th{height: 70px;}
  #modelos .badge-success{margin-top: 55px;}
  #modelos > div > div.row.contenido > div > div:nth-child(1) > div.col-md-3 > img{width:150px !important; height:150px !important;}
  .imgprodico {font-size: 12px;    max-width: 30.33% !important; margin: 0px auto;}
  header.masthead.gama .bannercat {
    max-width: 100% !important;
}
  .bannercat .col-md-12.text-center.featured img {width:210%;}
  #servicios div.col-md-6:first-of-type {flex: 0 0 35%;max-width: 35%;}
  #servicios div.col-md-6:last-of-type{flex: 0 0 65%;max-width:65%;}
  #servicios h2{margin-top:0px;}
  #servicios p{font-size: 13px;}
  #proceso h2{font-size:30px;}
  #proceso h4{font-size:12px;}
  #proceso .nav-link{padding:5px;}
  #proceso .col-md-7{flex: 0 0 45%;}
  #proceso .col-md-5{flex: 0 0 55%; max-width:100%;}

  #descarga h4{padding-left:20px;margin-top:0px !important;}
  #descarga p{padding-left:20px;}
  #descarga h4{padding-left:20px;margin-top:0px !important;}
  #descarga p{padding-left:20px;}
  #diseno .card.opcion{margin: 0px auto;}
  #ventajas h3{font-size: 24px;}
  #opciones .col-lg-4{flex: 0 0 50%;}
  section#productos{padding: 13px !important;}
  #interactivo .nav-pills .nav-link {font-size: 8px;padding:6px;}
  #maquetacion img{width:200px;height:200px;}
  #plantilla div.col-md-2 > img{width:30px;}
  #plantilla h4{font-size:16px !important;}
  #plantilla p{font-size:15px !important;padding-left:10px !important;}
  #carouselExampleIndicators{top:30px;}
  #discover2 div.col-md-4.text-right img{height:200px !important; width:200px !important;}

}

@media (min-width: 481px) and (max-width: 767px) {
  #newsletter{width:42%;margin-right: 8px;font-size:22px;}
  #main_content > section.seccion.seccionnewsletter h3{font-size: 42px;}
  section#productos{padding: 13px !important;}
  #galeria > div > a:nth-child(1) > img{display:none;}
  #servicios h2{margin-top:0px;}

}

/* General */

section#testimonios, section#servicios, section#ventajas, section#diseno,
section#descarga, section#descarga2, section#descarga3, section#descarga4, 
section#modelos, section#papeles, section#proceso, section#revision,
section#maquetacion, section#seo, section#interactivo, section#blog,
section.seo-content, section#plantilla {
  padding: 50px 20px !important;
}

.animated {
  animation-duration: 0.75s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

/* ============================ SECTION - DISCOVER ============================ */

#discover2 {
  background-color: var(--grey-light-color);
  background-color: #eee;
  padding-top: 50px;
}

#discover2 img {
  object-fit: contain !important;
  background-color: white;
  padding: 0px 5px;
  border-radius: 100%;
  height: 250px;
  width: 250px;
}

/* ============================ SECTION - ENCUADERNACION ============================ */

#interactivo .tab-pane img {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

#interactivo img {
  object-fit: cover;
}

#interactivo .nav-pills .nav-link {
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  padding: 10px;
  margin: 14px 13px;
  border: 1px solid var(--primary-color);
  border: 1px solid #c6362c;
  border-radius: 50px;
}

#interactivo .notas {
  font-size: 14px; 
  font-style: italic;
}

.opciones_pri {
  margin-top: 80px;
}

#interactivo h4 {
  margin-bottom: 0px;
}

#interactivo .libros h4 {
  max-width: 80%;
  margin: 0px auto;
}

#interactivo .nav-pills .nav-link:hover {
  border: 1px solid var(--primary-color);
  border: 1px solid #c6362c;
  background-color: #fff;
  color: var(--primary-color);
  color: #c6362c;
}

#interactivo .nav-pills .nav-link.active {
  background-color: #fff !important;
  color: var(--primary-color) !important;
  color: #c6362c !important;
  border-color: var(--primary-color) !important;
  border-color: #c6362c !important;
}

#interactivo .nav-pills .nav-link:hover:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f00c";
  color: var(--primary-color);
  color: #c6362c;
  margin-right: 15px;
  margin-left: 10px;
}

#interactivo .nav-pills .nav-link:hover img {
  display: none;
}

#interactivo a[aria-selected="true"]:before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 600; 
  content: "\f00c";
  color: var(--primary-color);
  color: #c6362c;
  margin-right: 15px;
  margin-left: 10px;
}

#interactivo a[aria-selected="true"] img {
  margin-right: -15px !important;
  display: none;
}

#interactivo .resultados a {
  border-bottom: 1px solid;
  color: var(--primary-color);
  color: #c6362c;
}

#interactivo .botones {
  background-color: var(--grey-light-color); 
  background-color: #eee;
  padding: 20px; 
  padding-bottom: 50px;
}

#interactivo .botones img {
  margin-right: 10px; 
  margin-left: 8px;
}

a#menos_72, a#mas_72 {
  background-color: var(--primary-color)70 !important;
  color: var(--dark-color) !important;
  color: #333;
  border: 1px solid var(--primary-color)70 !important;
}

a#menos_72:hover, a#mas_72:hover {
  border: 1px solid var(--primary-color) !important;
  border: 1px solid #c6362c !important;
  background-color: #fff !important;
  color: var(--primary-color) !important;
  color: #c6362c !important;
}

#interactivo .resultados img {
  height: 360px;
  object-fit: cover;
}

#interactivo .resultados {
  background-color: var(--grey-light-color);
  background-color: #eee;
  padding: 20px;
}

#interactivo .tab-pane {
  padding: 20px !important;
  background-color: #fff;
}

/* ============================ SECTION - MODELOS ============================ */

section#modelos {
  background-color: #eeeeee73;
}

#modelos .contenido {
  padding: 20px; 
}

#modelos h3 {
  font-size: 30px; 
  margin-bottom: 20px;
}

#modelos img {
  object-fit: contain; 
  box-shadow: 0 0 20px 1px rgba(138, 138, 138, 0.26); 
  border-radius: 100%; 
  object-position: left; 
  padding: 0px 5px;
}

#modelos .table td {
  background-color: #fff;
  height: 110px;
}

#modelos .table thead th {
  padding: 10px;
  font-size: 12px ;
  letter-spacing: 2px;
  font-weight: normal;
}

#modelos .table td, .table th, .table thead th {
    border: 0px !important;
}

#modelos .table td {
  letter-spacing: 0px;
  font-size: 28px;
  font-weight: bold;
}

td.sin_ahorro {
  background-color: #21252914 !important;
}

td.con_ahorro {
  background-color: #28a74530 !important;
}

#modelos .badge {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px;
}

#modelos .bg-dark, #modelos .bg-success {
  color: #fff;
}

#modelos th {
  font-weight: bold;
}

/* ============================ SECTION - PAPELES ============================ */

/* Responsive */

@media (max-width: 568px) {
  #papeles .column-chart {
    width: 80%;
    margin-left: -40%;
    display: none !important;
  }
}

@media (min-width: 568px) {
  #papeles .column-chart {
    width: 80%;
    margin-left: -40%;
  }
}

@media (min-width: 768px) {
  #papeles .column-chart {
    margin-left: -22%;
    width: 70%;
  }
}

/* General */

#papeles {
  background-color: #eee;
  padding-bottom: 50px !important;
}

#papeles .column-chart {
  position: relative;
  z-index: 20;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 320px;
  margin-top: 40px;
  margin-left: -33%;
}

#papeles .column-chart:before,
#papeles .column-chart:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: calc(100% + 30px);
  height: 25%;
  margin-left: -15px;
}

#papeles .column-chart:after {
  top: 50%;
}

#papeles .column-chart > .legend {
  position: absolute;
  z-index: -1;
  top: 0;
}

#papeles .column-chart > .legend.legend-left {
  left: 0;
  width: 25px;
  height: 100%;
  margin-left: -35px;
  border: 1px solid #b4b4b5;
  border-right: none;
}

#papeles .column-chart > .legend.legend-left > .legend-title {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 300px;
  height: 50px;
  line-height: 50px;
  margin-top: -10px;
  margin-left: -30px;
  font-size: 20px;
  letter-spacing: 1px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  text-align: center;
}

#papeles .column-chart > .legend.legend-right {
  left: 0;
  width: 100px;
  height: 100%;
  margin-left: -145px;
}

#papeles .column-chart > .legend.legend-right > .item {
  position: relative;
  width: 100%;
  height: 25%;
}

#papeles .column-chart > .legend.legend-right > .item > h4 {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin-top: -20px;
  font-size: 16px;
  text-align: right;
}

#papeles .column-chart > .chart {
  position: relative;
  z-index: 20;
  bottom: 0;
  left: 50%;
  width: 98%;
  height: 100%;
  margin-left: -49%;
}

#papeles .column-chart > .chart > .item {
  position: relative;
  float: left;
  height: 100%;
}

#papeles .column-chart > .chart > .item:before {
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  left: 50%;
  width: 1px;
  height: calc(100% + 15px);
}

#papeles .column-chart > .chart > .item > .bar {
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 94%;
  height: 100%;
}

#papeles .column-chart > .chart > .item > .bar > span.percent {
  display: block;
  position: absolute;
  z-index: 25;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26px;
  line-height: 26px;
  color: #fff;
  background-color: #3e50b4;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

#papeles .column-chart > .chart > .item > .bar > .item-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  color: var(--dark-color);
  color: #333;
  background-color: #fff;
}

#papeles .column-chart > .chart > .item > .bar > .item-progress > .title {
  position: absolute;
  top: calc(50% - 100px);
  left: 50%;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  width: 300px;
  font-weight: bold;
}

#papeles .ceva {
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
}

/* ============================ SECTION - PERSONALIZACION ============================ */

#personalizacion {
  background-color: var(--grey-light-color);
  background-color: #eee;
}

#personalizacion img {
  border-radius: 100%;
}

/* ============================ SECTION - MAQUETACION ============================ */

#maquetacion_bloque .pasos .card:hover {
  box-shadow: none;
}

#maquetacion_bloque ul.pasos {
  padding-left: 12px;
}

#maquetacion_bloque .badge {
  background-color: #2f8cc3;
}

#maquetacion_bloque .atencion {
  color: #2f8cc3;
}

#maquetacion_bloque .pasos hr.horizontal, #maquetacion_bloque .pasos hr.vertical {
  border-color: #2f8cc3;
}

#maquetacion_bloque .pasos.first hr.vertical {
  width: 182px;
  margin-top: 4px;
}

/* ============================ SECTION - PROCESO ============================ */

#proceso .interactivo {
  background-color: #fafafa;
  padding: 20px;
}

#proceso a:hover p {
  border-bottom: 0px;
}

#proceso h4 {
  text-transform: none;
  font-weight: normal;
}

#proceso a[aria-selected="true"] h4  {
  color: #fff !important;
}

#proceso a[aria-selected="true"] .step-circle {
  background-color: #fff !important;
}

#proceso p {
  margin-bottom: 0px;
}

#proceso .nav-link {
  padding: 20px;
  margin: 10px 0px;
  max-width: 90%;
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
}

#proceso .nav-link:hover {
  border: 1px solid var(--grey-light-color) !important;
  border: 1px solid #eee !important;
  background-color: #eee;
}

#proceso .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: var(--primary-color);
  background-color: #c6362c;
}

#proceso .step-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: var(--grey-light-color);
  background: #eee;
  color: #777;
  text-align: center;
  -webkit-transition: background-color .35s ease;
  transition: background-color .35s ease;
}

/* ============================ SECTION - PLEGADOS ============================ */

#discover3 {
  background-color: var(--grey-light-color);
  background-color: #eee;
}

#discover3 .card {
  box-shadow: none;
}

#discover3 .carousel {
  background-color: #fff;
}

#discover3 .carousel-control-prev, #discover3 .carousel-control-next {
    font-size: 35px;
    padding: 20px;
}

/* ============================ SECTION - REVISION ============================ */

#revision {
  background-color: rgba(155, 255, 112, 0.30980392156862746);
}

#revision p:last-child {
    font-size: 16px;
}

#revision th {
  font-size: 14px;
  font-weight: normal;
}

#revision .table tbody th {
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}

#revision tbody {
    background-color: #fff;
}

/* ============================ SECTION - DESCARGA ============================ */

#descarga {
      background-color: #eee;
    background: url(https://www.cevagraf.coop/img/fondonew6.jpg);
    background-size: cover;
}

#descarga .carousel-item img {
  width: 100% !important;
  height: 345px !important;
  object-fit: cover !important;
}


#descarga2 {
      background-color: #eee !important;
    /*background: url(https://www.cevagraf.coop/img/fondonew6.jpg);*/
    background-size: cover;
}

#descarga3 {
      background-color: #eee !important;
    background: url(https://www.cevagraf.coop/img/fondonew6.jpg);
    background-size: cover;
}

#descarga4 {
      background-color: #eee !important;
    /*background: url(https://www.cevagraf.coop/img/fondonew6.jpg);*/
    background-size: cover;
}


#descarga6 {
      background-color: #eee !important;
    background: url(https://www.cevagraf.coop/img/fondonew6.jpg);
    background-size: cover;
    margin-top: 30px;
}





/* ============================ SECTION - DISEÑO ============================ */

@media (max-width: 940px) {
  #diseno ul.pasos {
    display: block !important;
  }
  #diseno ul.pasos li {
    width: 100% !important;
  }
  #diseno hr.horizontal, #diseno hr.vertical {
    display: none !important;
  }
  #diseno ul.pasos.first li:last-child {
    display: none !important;
  }
  #diseno ul.pasos.last {
    float: none !important;
  }
}

 @media (min-width: 1150px) {
  #diseno .container-fluid {
    max-width: 1133px;
  }
}

#diseno {
  background-color: #eee;
}

#diseno .card:hover {
  cursor: pointer;
}


#diseno .card.opcion {
  width: 100%;
  padding: 20px 0px;
}


#diseno .card p {
  font-size: 13px !important;
}

#diseno .card img {
  margin: 0px auto; 
  width: 60px !important; 
  margin-bottom: 20px;
}

#opciones .collapse {
  background-color: var(--grey-light-color);
  background-color: #eee;
  padding: 50px;
}

#diseno .opciones {
  border-top: 5px solid;
  border-color: var(--primary-color);
  border-color: #c6362c;
}

#diseno .card.opcion {
  border: 2px solid transparent;
}

#diseno .opcion h4 {
  font-size: 14px;
}

#diseno .opcion .btn {
  font-size: 12px;
}

#diseno .opcion p {
  font-size: 14px;
  color: var(--dark-color);
  color: #333;
  margin-bottom: 0px;
}

#diseno a.card {
  border: 5px solid #fff;
}

#diseno a:hover .card p {
  border-bottom: 0px;
}

#diseno a[aria-expanded="true"] .card {
  border: 2px solid var(--primary-color);
  border: 2px solid #c6362c;
}


#diseno a[aria-expanded="true"] img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 180px;
  padding-left: 60px;
}

/* Opciones - Plantilla */
#diseno a img.plantilla {
 background: url('../../../img/iconos/plantilla-b.png') no-repeat;
 background-size: 60px;
}

#diseno a[aria-expanded="true"] img.plantilla {
 background: url('../../../img/iconos/plantilla-r.png') no-repeat;
 background-size: 60px;
 height: 60px;
}

/* Opciones - PDF */
#diseno a img.pdf {
 background: url('../../../img/iconos/pdf-b.png') no-repeat;
 background-size: 60px;
}

#diseno a[aria-expanded="true"] img.pdf {
 background: url('../../../img/iconos/pdf.svg') no-repeat;
 background-size: 60px;
 height: 60px;
}



/* Opciones - Diseñador */
#diseno a img.disenador {
 background: url('../../../img/iconos/disenador-b.png') no-repeat;
 background-size: 60px;
}

#diseno a[aria-expanded="true"] img.disenador {
 background: url('../../../img/iconos/disenador.svg') no-repeat;
 background-size: 60px;
 height: 60px;
}

/* Opciones - Maquetación */
#diseno a img.maquetacion {
 background: url('../../../img/iconos/maquetacion-b.png') no-repeat;
 background-size: 60px;
}

#diseno a[aria-expanded="true"] img.maquetacion {
 background: url('../../../img/iconos/maquetacion.svg') no-repeat;
 background-size: 60px;
 height: 60px;
}

/* Pasos */

/* Pasos - Responsive */

@media (max-width: 780px) {
  #diseno .line {
    display: none;
  }
  #diseno .paso {
    margin: 30px 0px;
    padding: 20px 0px;
    background-color: #fff;
  }
  #diseno .line.mobile {
    display: block;
  }
}

@media (max-width: 580px) {
  #diseno .collapse {
    padding: 0px !important;
  }
  #diseno ul.pasos {
    display: block !important;
  }
  #diseno ul.pasos li {
    width: 100% !important;
    height: 190px !important;
  }
  #diseno .pasos hr {
    visibility: hidden !important;
  }
  #diseno ul.pasos.last {
    float: none !important;
  }
}

@media screen and (max-width: 1049px) {
  #diseno .container-fluid {
    width: 100% !important;
  }
}

/* Pasos - General */

.card.info {
  width: 100%;
}

.card.info img {
  width: 60px !important;
  margin: 0px auto;
  margin-bottom: 30px;
}

.info {
  background-color: transparent;
}

.info:hover {
  box-shadow: none;
}

.info h4 {
  font-size: 16px;
}

.atencion {
  color: var(--primary-color);
  color: #c6362c;
  font-size: 16px;
}

.pasos a {
  color: var(--dark-color);
  color: #333;
  border-bottom: 2px solid;
}

ul.pasos {
  display: flex; 
  list-style: none; 
  padding: 0px; 
}

ul.pasos li {
    height: 165px;
    width: 252px;
}

.pasos .card-body {
  padding: 0;
}

/* Pasos - Separadores - General */

.pasos hr.horizontal {
  border-top: 3px solid;
  border-color: var(--primary-color);
  border-color: #c6362c;
  margin-top: -20px;
}

.pasos hr.vertical {
  border-top: 3px solid;
  border-color: var(--primary-color);
  border-color: #c6362c;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.pasos.first hr.vertical {
    width: 182px;
}

ul.pasos.first li:last-child {
  right: -58px;
  top: 340px;
  position: absolute;
}

/* Pasos - Separadores - Plantilla */

#plantilla ul.pasos.last li:first-child {
  left: -60px;
  bottom: 73px;
  position: absolute
}

#plantilla .pasos.last hr.vertical {
    width: 182px;
}

/* ============================ SECTION - GALERIA ============================ */

/* Responsive */

@media (max-width: 770px) {
  #testimonios .col-md-4 {
  padding: 20px;
  }
}

/* General */

#galeria{
  padding: 0;
}

/*body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}*/

.example-image{
  width: 20%;
}

/*.lb-outerContainer {
  display: none;
}*/

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: -100%;
  width: 100%;
  z-index: 10000000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  top:0;
  display:none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;


  background-color: transparent;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url('../images/prev.png') left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url'../images/next.png') right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: var(--grey-light-color);
  color: #eee;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  /*background: url('../images/close.png') top right no-repeat;*/
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

#testimonios {
      background-color: #fff;
    background: url(https://www.cevagraf.coop/img/fondonew6.jpg);
    background-size: contain;
    margin-top: 50px;
}

#testimonios .card-body {
  padding: 0px;
}

#testimonios .card {
  padding: 20px;
  align-content: center;
  display: grid;
}

#testimonios .card img {
  max-height: 70px;
  max-width: 150px;
  margin: 0px auto;
  margin-bottom: 20px;
  object-fit: contain;
}

/* ============================ SECTION - GALERIA ============================ */

#galeria a.example-image-link {
  position: relative;
  cursor:pointer;
}

#galeria div a span { 
  display:block; 
  background-image:url(../../../img/productos/lupa.png); 
  background-repeat: no-repeat;
  opacity: 0.4;
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  margin-bottom: -40%;
  margin-right: 5%;
  /*display: none;*/
}

/* ============================ SECTION - BLOG ============================ */

/* Responsive */

@media (max-width: 991px) {
  .topnav .badge1[data-badge]:after {
    top: 218px;
    right: 84px;
  }
  .welcome .row.wrapresumenarea.position-sticky  {
    margin-top: 80px !important;
  }
  #blog .col-md-4 {
    padding: 20px;
    max-width: 100%;
    flex: 100%;
  }
  #productos .catlistlargo .col-lg-4 {
    width: 100% !important;
    padding: 0px 15px !important;
  }
}

/* General */

#blog {
  background-color: var(--grey-light-color);
  background-color: #eee;
}

#blog img {
  height: 240px;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* ============================ PAGE - PRODUCT ============================ */

/* Responsive */

@media screen and (max-width: 480px) {
  #papeles .column-chart > .chart {
    width: 80% !important;
  }
  #papeles .column-chart > .legend.legend-left > .legend-title {
    margin-left: -15px !important;
    font-size: 12px !important;
  }
  .linkdesign {
    display: none;
  }
  #seo h2 {
    font-size: 22px !important;
  }
  #seo p {
    margin-bottom: 0px;
  }
  #seo .card h3 {
    margin-right: 24px;
  }
  .pagina-producto ul#pasos_compra {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }
  #modo-simple h4 {
    font-size: 16px !important;
    margin-top: 20px !important;
  }
  #modo-simple .form-group.col-md-4 {
    padding-bottom: 10px;
  }
  .lista-cantidades .col-1 {
    max-width: 100% !important;
    flex: 100% !important;
  }
  .lista-cantidades label.btn {
    padding-left: 10px !important;
  }
  .lista-cantidades .btn-outline-primary.upsellingresaltado .col-1 {
    margin-top: 30px;
  }
  label.btn.btn-outline-primary.btn-block.text-left.rounded.upsellingresaltado:before {
    font-size: 12px !important;
  }
  .lista-cantidades .custom-radio {
    width: 100%;
    display: block;
  }
  #modo-simple .lista-cantidades br {
    display: block !important;
  }
  .lista-cantidades .col {
    text-align: center;
  }
}

/* General */

.lincalportes {
  background-color: #eee;
  margin: 0px !important;
}

.pagina-producto .bannerhome {
  max-width: 1400px;
}

.btn-hint {
  color: var(--grey-color);
  color: #777;
  padding: 3px 8px !important;
  background-color: var(--grey-light-color);
  background-color: #eee;
  font-size: 9px !important;
}

.btn-hint:hover {
  color: var(--grey-light-color);
  color: #eee;
  background-color: var(--grey-color);
  background-color: #777;
}

#metalizado .card, #metalizado .card:hover {
  -webkit-box-shadow: 15px 15px 0px 5px var(--grey-color);
  box-shadow: 15px 15px 0px 5px var(--grey-color);
}

a#no_etiquetas, a#si_etiquetas, a#ahorrar_correos1, a#ahorrar_correos2 {
  background-color: var(--primary-color)70 !important;
  color: var(--dark-color) !important;
  color: #333 !important;
  border: 1px solid var(--primary-color)70 !important;
}

select.form-control:not([size]):not([multiple])#tipo_productos {
  height: 100%;
}

#tipo_productos option{
  color: var(--dark-color);
  text-transform: none;
}

select#tipo_productos {
  background-color: var(--grey-light-color);
  background-color: #eee;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
  font-family: 'big_john_probold', sans-serif;
  max-width: 440px;
  color: var(--dark-color);
  color: #333;
  margin: 0px auto;
  border: 1px solid var(--dark-color);
  border: 1px solid #333;
  padding: 15px;
  max-width: 440px;
}

/* ============================ PRODUCT - PASOS ============================ */

#pasos_compra li:first-of-type hr.horizontal {
  border-color: var(--primary-color);
  border-color: #c6362c;
}

#pasos_compra {
    margin-top: -30px;
    padding: 30px 0px;
  }
  #pasos_compra li:first-of-type h4, #pasos_compra li:first-of-type .atencion {
    color: var(--primary-color);
    color: #c6362c;
  }
  #pasos_compra h4, #pasos_compra .atencion {
    color: #777;
    font-size: 14px;
  }
  #pasos_compra li:first-of-type .num_paso {
    background-color: var(--primary-color);
    background-color: #c6362c;
    color: #fff;
  }
  #pasos_compra .num_paso {
    background-color: var(--grey-light-color);
    background-color: #eee;
    font-size: 14px;
    padding: 4px 10px;
    text-indent: 1px;
    color: var(--grey-color);
    color: #777;
  }
  #pasos_compra .horizontal {
    border-color: var(--grey-light-color);
    border-color: #eee;
  }
  #pasos_compra li {
    height: 100% !important;
  }

  @media screen and (max-width: 1040px) {
    #pasos_compra hr {
      margin-top: -15px !important;
    }
  }
  @media screen and (max-width: 940px) {
    ul#pasos_compra {
      display: flex !important;
    }
    #pasos_compra hr.horizontal {
      display: block !important;
    }
  }
  @media screen and (min-width: 580px) {
    #pasos_compra .atencion.paso_mobile {
      display: none !important;
    }
  }
  @media screen and (max-width: 580px) {
    #pasos_compra .atencion.paso_desktop {
      display: none !important;
    }
    #pasos_compra hr {
      visibility: visible !important;
    }
    #pasos_compra h4, #pasos_compra .atencion {
      font-size: 12px !important;
    } 
    #pasos_compra h4 {
      text-align: center !important;
      margin-top: 15px !important;
      padding-bottom: 15px !important;
    }
  }


/* ============================ PRODUCT - OPINIONES ============================ */

@media screen and (max-width: 990px) {
  .opiniones-desktop {
    display: none !important;
  }
  .opiniones-mobile {
    display: block !important;
  }
}

@media screen and (min-width: 990px) {
  .opiniones-desktop {
    display: block !important;
  }
  .opiniones-mobile {
    display: none !important;
  }
}

.producto-tarjetas-visita-baratas .opinionesdesk,
.producto-tarjetas-visita-profesionales .opinionesdesk,
.producto-tarjetas-plegadas {
  top: 102px !important;
}

.info-archivos {
  font-size: 12px;
  letter-spacing: 0px;
  padding: 10px;
  display: none;
  margin-bottom: 0px;
}

.opcionesdesk {
  top: 90px;
}

/* ============================ PRODUCT PAGE - CARRITO ============================ */

@media screen and (max-width: 991px) {
  #offcanvas .col-md-12.col-lg-8.carrowrap {
    order: 2;
    margin-bottom: 20px !important;
  }
  #offcanvas .col-md-12.col-lg-4.carrowrap {
    order: 1;
  }
  #offcanvas div.row.wrapresumen {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }
}


@media screen and (max-width: 640px) {
  .elegir-subida .btn, .elegir-subida li {
    width: 100% !important;
  }
  section h2 {
    font-size: 26px !important;
}
  .imgprodico {
    display: none !important;
  }
   #modo-simple .form-group.col-md-4 {
    flex: 100% !important;
    max-width: 100% !important;
  }
  .formaenvio {
    margin-bottom: 10px;
  }
  .checkout .col-lg-4.carrowrap {
    padding: 0px 30px !important;
    position: relative !important;
  }
  .clcheck .container.checkout {
    padding-bottom: 0px !important;
    max-width: 100% !important;
    padding-top: 125px !important;
  }
  .clcheck .container.checkout .stepper-container {
    padding: 0px !important;
  }
  .checkout .metodos-pago {
    margin-bottom: 10px !important;
    margin-top: 0px !important;
  }
  .col-lg-12.piecheckout img {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .moal .alert {
    font-size: 12px !important;
  }
  .modal .btn {
    margin-bottom: 15px !important;
    font-size: 12px !important;
  }
  .modal .col-md-6:last-child .btn {
    margin-bottom: 0px !important;
  }
  .checkout .col-lg-4.carrowrap {
    margin-top: 30px !important;
  }
  button#boton_descuento {
    width: 100% !important;
    margin: 0px !important;
    font-size: 12px !important;
  }
  input#cupon {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .pagina-producto .btn-success {
    margin: 0px !important;
  }
  form#modo-simple {
    padding-bottom: 5px !important;
    margin-bottom: 20px !important;
  }
  .row.mobiletitulo .btn-success {
    margin-bottom: 20px !important;
    margin-top: 10px !important;
  }
  .clcheck .col-lg-8.carrowrap {
    padding-top: 10px !important;
  }
}

.contdescuento .col-md-12 {
  padding: 15px 30px; 
  padding-bottom: 0px;
}
.metodos-pago {
  margin-top: 20px;
}

.contdescuento #cupon {
  width: 225px; 
  height: 35px;
}

#boton_descuento {
  font-size:14px; 
  margin-left: 10px;
}

.comprasegura.onlymobile {
  display: none !important;
}

#preciocarrosindtobase {
  display: none;
}

#carrito .alert {
  background-color: var(--grey-light-color);
  background-color: #eee;
  border-color: var(--grey-light-color) !important;
  border-color: #eee !important;
}

#carrito .alert hr {
  border-top-color: var(--grey-color);
  border-color: #777;
}

button#btcen {
  font-size: 10px;
}

#precioporte {
  font-size: 14px;
  text-transform: none;
  font-weight: normal;
  color: var(--grey-dark-color);
  color: #555;
  margin-bottom: 0px;
  text-align: left;
  margin-top: 10px;
}


/* ============================ PRODUCT PAGE - FORMULARIO ============================ */

/* Responsive */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .favanzado .row {
  max-width: 70% !important;
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {  
  @media {
    .gama .bannerhome .row, .favanzado .row {
      display: block !important;
    }
  }
  @media (min-width: 1050px) and (max-width: 1250px) {
    .favanzado .row {
      max-width: 65% !important;
    }
  }
  @media (max-width: 1049px) {

    .desktitulo {
      display: none !important;
    }
    .mobiletitulo {
      display: block !important;
    }
    #carrito .row {
      display: flex !important;
    }
    .favanzado .row {
      max-width: 100% !important;
      margin-left: 0px !important;
    }
  }
}


@media (min-width: 1041px) and (max-width: 1384px) {
  #carrito {
    right: 2% !important;
  }
}

@media (min-width: 1385px) and (max-width: 1580px) {
  #carrito {
    right: 4% !important;
  }
}

@media (max-width: 1040px) {
  #carrito {
      position: fixed;
      bottom: 0;
      margin-top: 0px;
      width: 100% !important;
  }
}

@media screen and (min-width: 1040px) {
  .f_a_carrito{right:10% !important;}
  #pedirahorabt {
      display: block !important;
  }
  header.masthead h1 {
    font-size: 36px !important;
    margin-top: 0px !important;
  }
  #PedirAhora {
      display: block !important;
  }
  .f_a_carrito{
    z-index: 66 !important; background-color: #fff; height: auto;position: sticky; position: -webkit-sticky !important; 
    z-index: 7777; box-shadow: 0 0 10px 0px rgba(109, 109, 109, 0.26); max-width: 350px; margin-bottom: 0px; 
    float: right; top: 160px; right: 100px; margin-top: 0px;margin-right: 10px;}
  .mobiletitulo {
    display: none !important;
  }
}

@media (max-width: 1040px) {
  #carrito {
    z-index: 999 !important;
  }
    .bannerhome {
      max-width: 100% !important;
    }
    .f_a_carrito {
      bottom: 0 !important;
    }
    .linaddcarro {
      padding: 0px !important;
    }
     .preciocarritomv {
        margin-bottom: 20px;
        margin-top: 10px!important;
        }
    .infoenvio {
      padding: 0px;
      width: 100%;
    }
    .lincalportes {
      padding: 0px !important;
    }
    #carrito h4 {
      margin-bottom: 0px !important;
    }
    header.masthead h1 {
      max-width: 100% !important;
      width: 100% !important;
      /*font-size: 50px !important;*/
      font-size: 32px !important;
      line-height: 50px !important;
      padding-top: 0px;
      margin-top: 0px;
    }
    .stikygama {
      width: 100% !important;
      max-width: 100% !important;
      margin-top: 0px !important;
      bottom: 0 !important;
    }
    form#modo-simple {
      width: 100% !important;
      max-width: 100% !important;
    }
    label#precioporte {
      width: 100% !important;
      text-align: center !important;
    }
    #simple-form {
      position: fixed;
      bottom: 0;
      margin-top: 0px;
      width: 100% !important;
    }
    #simple-form h4 { 
      font-size: 20px !important;
      color: #fff !important;
      letter-spacing: 2px;
      padding-bottom: 0px;
      margin-bottom: 0px;
    }
    #simple-form .pedirahora {
      background-color: var(--primary-color) !important;
      background-color: #c6362c !important;
      color: #fff !important;
      margin-bottom: 0px;
      padding-bottom: 10px;
      font-size: 20px !important;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;
      padding: 5px 0px !important;
    }
    #carrito .pedirahora[aria-expanded="true"]:after {
      font-family: "Font Awesome 5 Free";
      font-weight: 600;
      content: "\f107";
      color: #555;
      font-size: 20px;
      display: grid;
      text-align: center;
      width: 100%;
    }

    #carrito .pedirahora[aria-expanded="false"]:after {
      font-family: "Font Awesome 5 Free";
      font-weight: 600;
      content: "\f106";
      color: #555;
      font-size: 20px;
      display: grid;
      text-align: center;
      width: 100%;
    }

    .form-inner {
      max-width: 100% !important;
      margin: 0px !important;
    }
  #simple-form .pedirahora, #carrito .pedirahora {
    color: white !important;
    margin-bottom: 0px;
    padding-bottom: 10px;
    font-size: 24px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 5px 0px !important;
  }

  #simple-form .precio{
    text-align:center;
    font-size: 50px; 
    color:#000;
  }
  .stickfacarrito {
    float: none !important;
    right: 0 !important;
    max-width: 100% !important;
  }
  #cpenvio {
    max-width: 100% !important;
  }
  .linprecio, .linaddcarro {
    width: 100% !important;
  }
   .opinionesdesk {
    display: none !important;
  }
  .info-archivos {
    display: block !important;
    margin-bottom: 30px !important;
  }
  
  #PedirAhora {
    padding: 15px !important;
  } 
  #carrito .desktitulo {
    display: none !important;
  }
  #carrito .mobiletitulo {
    padding: 0px 10px !important;
    margin: 0px auto !important;
  }
  #carrito {
    right: 0 !important;
  }
  .diasenvio {
    padding-right: 5px !important;
  }
  .divcalcular {
    padding-right: 5px !important;
  }
  .f_a_carrito{
    position:relative;
  }
  .fmodosimple{
    padding: 20px !important;
  }
  #formulario.favanzado {max-width: 100%;margin: 0px; padding: 0px !important;}
  .bannerhome{margin-top: 90px;}
  .havanzado{padding-top: 30px; padding-bottom: 30px;padding-left:0;}
  .example-image{width:50%;}
  div#carrito{position:fixed!important;height: auto;margin-right:0!important;max-width:100%;background:#FFF;}
  #simple-form .precio{width:100%!important; margin: 0!important;font-size: 35px;}



  #carrito{width: 255px;}
  #modo-simple > div:nth-child(4) > div:nth-child(1) > p{margin-bottom: -4px;}
  #modo-simple > div:nth-child(7) > div.form-group.col-md-6.diasenvio > label{font-size:8px;}
  .example-image{width:20%;}

  #carrito{right:0; width:100%}
  .ocultartablet{display:none;}
  .linaddcarro{display:block; width:48%; float:left; }
  .linprecio{display:block; width:50%;}
  .linprecio .precio,.linaddcarro .precio{max-width:100%;flex: 0 0 100%;}
  .lincalportes{margin-bottom:0!important; padding: 0px 20px !important;}
  #simple-form .precio{font-size:42px;}
  .lincalportes div {text-align: center !important;}
  .divcalcular{width:100% !important;}
  .diasenvio{width:100% !important;}

  header.masthead h1{
  padding:0
  font-size: 50px !important;
  }
  .pagina-producto .container-fluid.bannerhome {
    margin-top: 20px !important;
  }
  .pagina-producto h2.mb-6 {
    text-align: center;
    margin-bottom: 30px !important;
  }
  h1.mb-2.havanzado.mt-2.pb-0 {
    margin-bottom: 20px !important;
  }
  #carrito{
    right: 0 !important;
  }
  #modo-simple div.form-group.col-md-12 textarea {
    margin-top: 8px;
  }
  #modo-simple div.form-group.col-md-4 select, #modo-simple div.form-group.col-md-4 input {
    margin-top: 8px;}
  #simple-form .precio{
    font-size: 42px;
  }
  .f_a_carrito {
    margin-right: 0px;
    position: fixed;
    max-width: 100%; 
    bottom: 0;
    width: 100%;
    right: 0!important;
    top: auto;
    box-shadow: 0 0 10px 0px rgba(109, 109, 109, 0.75);
  }
  .fmodosimple .btn-comprar {
    margin-bottom: 10 !important;
  }
  .fmodosimple {
    padding: 2px;
  }
  .havanzado {
    padding-left: 10px !important;
  }
  .linaddcarro {
    display:block; 
    width: 20%; 
    float: left;
  }
  .lincalportes{
    margin-top: 0!important;margin-bottom:0!important;}
  .linprecio .precio,.linaddcarro .precio{max-width:100%;flex: 0 0 100%;}
  .linprecio{margin-top: 30px !important; float:left;}
  .ocultartablet{display:none;}
  .offset-md-9{margin-left:67% !important;}
}

@media screen and (max-width: 991px)  {
  header.masthead.gama .bannercat h2 {
    text-align: center;
    /*margin-bottom: 20px !important;*/
    margin-bottom: 40px !important;
  }
  header.masthead h1 {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  }
  #galeria a.example-image-link:last-child {
   /* display: none; */
}
#galeria div a span {
  display: none;
}
#testimonios .col-md-4 {
  max-width: 100%;
  flex: 100%;
}
#servicios .col-md-6 {
    flex: 100% !important;
    max-width: 100% !important;
    text-align: center;
}
.circular-menu-container {
  display: none;
}
}

@media (min-width: 768px){
.offset-md-9 {margin-left: 67%;}
}


@media (max-width: 768px){
.detalles_pedido {
  display: none !important;
  }
}

@media screen and (max-width: 648px) {
  ul#pasos_compra {
    padding-bottom: 0px !important;
  }
  /* .lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded:nth-child(2) {
    padding-top: 30px;
  } */
  .lista-cantidades .recom-cantidades {
    border-radius: 0px !important;
    width: 100%;
    text-align: center;
  }
  .pagina-producto h2.mb-6 {
    padding-bottom: 0px !important;
  }
  .pagina-producto header.masthead.gama {
    padding-bottom: 40px !important;
  }
}

@media (min-width: 576px) {
  #formulario .modal-dialog {
      margin: 180px auto;
  }
}

@media screen and (max-width: 480px) {
  #modal_carrito .btn-success {
    width: 100%;
    margin-top: 10px;
  }
  .row.linea_carrito {
    padding: 0px 10px !important;
  }
  #full-products {
    padding-top: 200px !important;
  }
  header.masthead.gama {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
  #galeria {
    display: none !important;
  }
  .favanzado .form-row {
    width: 100% !important;
  }
  #modo-simple br {
    display: none !important;
  }
  #modo-simple label br {
    display: block !important;
  }
  .container-fluid .form-group {
    padding-right: 0px !important;
  }
  .favanzado .col-lg-12 {
    padding: 0px !important;
  }
  .linkdesign {
    float: none !important;
  }
  .linkdesign a {
    margin-top: 10px !important;
    padding: 5px !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    width: 100%;
  }
  .opinionesdesk {
    display: none !important;
  }
  #PedirAhora .linea_carrito .col-md-12 {
    padding: 0px !important;
  }
  #PedirAhora {
    padding: 15px 20px !important;
  }
  #PedirAhora .btn-comprar {
    padding: 12px !important;
    font-size: 18px !important;
  }
  #carrito .pedirahora {
    font-size: 20px !important;
    padding: 0px !important;
    margin-top: 10px !important;
  }
  .linaddcarro {
    margin-top: -20px !important;
  }
  .preciocarritomv {
    margin-bottom: 25px;
    margin-top: -10px!important;
  }
  .example-image {
    width: 50% !important;
  }
  #galeria > div > a:nth-child(1) > img {
    display: none !important;
  }
  #preciocarrobase {
    color: var(--dark-color) !important;
    color: #333 !important;
  }

  .linprecio {
    margin-top: 0px !important;
  }
  header.masthead h1 {
    font-size: 30px !important;
    line-height: 30px !important;
    margin-bottom: 50px !important;
  }
  .diasenvio, .divcalcular {
    padding: 10px 30px !important;
  }
  #carrito {
    background-color: #fff !important;
  }
  .offset-md-9 {
    margin-left: 0px !important;
  }
  .infoenvio, .lincalportes {
      display: none !important;
  }
  #formulario {
    margin-top: 0px !important;
  }
  .detalles_pedido {
    display: none !important;
  }
}

/* General */

div#quad {  
  font-size: 0; width: 100%; 
  margin: 0 auto;
  background:#000;
}

div#quad figure { 
  margin: 0; width: 25%; 
  height: auto; transition: 1s; 
  display: inline-table; 
  position: relative; overflow: hidden; 
}

div#quad figure:hover { 
  cursor: pointer; 
  z-index: 4; 
}

div#quad figure img { 
  width: 100%; 
  height: auto; 
}

div#quad figure:nth-child(1) { 
  transform-origin: top left; 
}

div#quad figure:nth-child(2) { 
  transform-origin: top right; 
}

div#quad figure:nth-child(3) { 
  transform-origin: bottom left; 
}

div#quad figure:nth-child(4) { 
  transform-origin: bottom right; 
}

div#quad figure figcaption { 
  margin: 0; opacity: 0; 
  background: rgba(0,0,0,0.3); 
  color: #fff; padding: .3rem; 
  font-size: 1.2rem; 
  position: absolute; 
  bottom: 0; width: 100%;
  transition: 1s 1s opacity; 
}

.expanded { 
  transform: scale(2); 
  z-index: 5;  
}

div#quad figure.expanded figcaption { 
  opacity: 1; 
}

div.full figure:not(.expanded) { 
  pointer-events: none; 
}

.jquery-guide,.jquery-guide-bg {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.jquery-guide-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-color: rgba(0, 0, 0, 0.75);
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  z-index: 999;
}

.jquery-guide-bg.active {
  border-color: rgba(0, 0, 0, 0.5);
}

.jquery-guide-content {
  position: absolute;
  cursor: default;
  color: #FFF;
  font-family: 'Loved by the King', Helvetica, sans-serif;
  font-size: 26px;
  z-index: 99999;
}

.havanzado{font-size: 50px; margin-bottom: 0px !important; padding-top: 40px; padding-bottom:130px;line-height: 50px;}
.favanzado{padding: 50px 0px; padding-top: 0px;}
.fmodoavanzado{background-color: #fff; padding: 30px; box-shadow: 0 0 10px 0px rgba(109, 109, 109, 0.26); margin-top: -100px;}
.stickfacarrito{background-color: #fff; position: sticky; z-index: 9999999; max-width: 350px; margin-bottom: 0px; float: right; top: 120px; right: 100px; margin-top: 0px;}
.diasenvio{margin: 0px auto; width: 100%;}
.btfav{text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0px; font-size: 12px; cursor:pointer;}
.btfav:hover{color:var(--primary-color)!important; color: #c6362c !important;}
#favname{padding:40px 20px 20px 20px}

#carrito .lincalportes {
  padding: 0px !important;
  background-color: transparent;
}

#carrito .mobiltitulo .btn-comprar {
  padding: 15px !important; 
  letter-spacing: 1px;
  margin: 0 auto 0px auto;
  border-radius: 0px !important;
  font-size: 16px !important;
}

#carrito .mobiletitulo .titulo_resumen, #carrito .mobiletitulo .detalle_resumen {
  font-size: 16px;
  text-transform: none;
  color: var(--success-color);
  color: #1dab28;
  font-weight: bold;
}

#PedirAhora {
  padding: 0px 20px 20px;
}

.diasenvio {
  padding: 0px !important;
}

.infoenvio {
  background-color: #eee;
  margin: 0px !important;
}

#carrito .pedirahora:hover {
  cursor: default !important;
}

.stickfacarrito {
  margin-right: 0px !important;
  padding-right: 0px !important;
}

.stikygama {
    background-color: #fff;
    height: auto;
    position: sticky;
    position: -webkit-sticky;
    z-index: 7777;
    box-shadow: 0 0 10px 0px rgba(109, 109, 109, 0.26);
    max-width: 350px;
    margin-bottom: 0px;
    float: right;
    top: 120px;
    right: 100px;
    margin-top: -410px;
    margin-right: 10px;
}


#modo-simple .precio {
    text-align: center;
    font-size: 60px;
    color: #000;
    margin-top: -15px !important;
}

.modelos {
  margin-bottom: 30px;
}

.modelos.modelo1 {
  margin-bottom: 0px;
}

/* ============================ PRODUCT PAGE - FORMULARIO - UPSELLING ============================ */

@media screen and (max-width: 480px) {
  .lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded:nth-child(2):before, .lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded.active:nth-child(2):before {
    width: 100%;
    text-align: center;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }
}

label.btn.active {
    background-color: var(--primary-light-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.lista-cantidades .btn-outline-primary.upsellingresaltado {
    border: 1px solid var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.lista-cantidades .upsellingresaltado span, .lista-cantidades .upsellingresaltado small {
    color: var(--primary-color) !important;
}

label.btn.active small, label.btn.active span {
  color: var(--primary-color);
}

.lista-cantidades label.upsellingresaltado.active {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: var(--primary-light-color) !important;
}

.lista-cantidades .upsellingresaltado:before {
    background-color: var(--primary-color) !important;
    color: #fff;
    font-weight: bold !important;
    font-size: 8px !important;
}

/*.lista-cantidades label.btn:nth-child(2), .lista-cantidades label.btn:nth-child(2) small {
  color: #c6362c !important;
}

.lista-cantidades label.btn:nth-child(2) {
  border-color: #c6362c !important;
}*/

.lista-cantidades label.btn:nth-child(2):hover {
  background-color: #ffecea !important;
}

.lista-cantidades label.btn {
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 20px;
  text-align: center !important;
}

.lista-cantidades label.btn:last-child {
  margin-bottom: 0px;
}

.lista-cantidades .btn-outline-primary  {
  color: #777;
  border: 1px solid #ccc !important;
  border: 1px solid #ccc;
}

.lista-cantidades .btn-outline-primary:hover {
  background-color: #eee !important;
  color: #777 !important;
  border-color: #eee !important;
}

.lista-cantidades .btn-outline-primary:not([disabled]):not(.disabled).active, .lista-cantidades .btn-outline-primary:not([disabled]):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
  color: #777 !important;
  background-color: transparent;
  box-shadow: none;
}

.lista-cantidades small {
  font-size: 10px;
  color: var(--grey-color);
  color: #777;
}

.lista-cantidades input[type="radio"] {
  position: relative !important;
  opacity: 1;
  z-index: 1;
}

.lista-cantidades .custom-radio {
  min-height: auto;
}

.lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded:nth-child(2):before,
.lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded.active:nth-child(2):before {
  position: absolute;
  top: 0;
  font-weight: bold;
  font-size: 10px;
  right: 0;
  padding: 5px;
  border-bottom-left-radius: 5px;
  font-weight: normal;
}

.lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded.active:nth-child(2):before {
  background-color: var(--primary-color);
  color: #c6362c;
  background-color: #c6362c;
  color: white;
}

.lista-cantidades label.btn.btn-outline-primary.btn-block.text-left.rounded:nth-child(2):befores {
  background-color: var(--grey-light-color);
  background-color: #eee;
  color: var(--grey-color);
  color: #777;
}

/* ============================ AREA CLIENTE ============================ */

/* Responsive */

@media screen and (min-width: 991px) {
  

  button#enviaq {
    margin-right: 10px !important;
  }
  #stats .col-md-4 {
    padding: 0px 10px;
  }
}

@media screen and (max-width: 640px) {
  .pagina-producto {
    margin-bottom: 0px !important;
  }
  .comercialmodal img {
    width: 108px !important;
  }
  #menu-cuenta .card.card-body.pb-3 {
    padding-bottom: 0px !important;
  }
  .comercialmodal .imgcomercial span {
    height: 108px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
  }
  .seltipopago .formapago {
    margin: 0px !important;
    margin-bottom: 10px !important;
  }
  div#tiotpago, div#subtctpago {
    font-size: 20px !important;
    min-height: auto !important;
  }
  .col-lg-12.fp1 > span {
    margin: 0px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }
  .col-lg-12.listaenvio.mb-3 {
    margin-top: 20px !important;
  }
  .clcheck div#main_content {
    padding: 20px 0px !important;
  }
  .cabeceras {
    padding-right: 0px !important
  }
  .checkout .welcome {
    order: 1 !important;
    margin-left: 20px;
    margin-right: 20px;
  }
  .checkout .col-lg-8.carrowrap {
    order: 2 !important;
  }
  #pagina-presupuestos .checkout .col-lg-8.carrowrap {
    order: 1 !important;
  }
  #pagina-presupuestos .col-sm-12 {
    order: 2 !important;
}
#pagina-presupuestos div#header {
    order: 2 !important;
}
  a#btayuda {
    margin-top: 2px;
  }
  .carrowrap.areacliente .btn {
    font-size: 12px !important;
  }
  .col-lg-5.carrowrap.areacliente {
    margin-top: 15px;
  }
  .col-lg-5.carrowrap.areacliente:first-child {
    margin-top: 0px;
  }
  .checkout .areacliente input {
    margin-bottom: 15px;
  }
  .col-lg-5.carrowrap.areacliente h4 {
    font-size: 20px !important;
    line-height: 30px;
  }
  .container.checkout {
    padding-bottom: 20px !important;
  }
}

#menu-cuenta .card.card-body {
  display: flex;
}

.imgcomercial img {
  height: 108px;
  width: 108px;
}

/* ============================ AREA CLIENTE - PEDIDOS ============================ */

/* Responsive */

@media screen and (max-width: 480px) {
  #menu-cuenta .cabeceras {
    padding-left: 0px;
  }
  .welcome .cliente {
    text-align: center;
  }
  .card-body.pedido a.btn {
    width: 100%;
    margin-bottom: 10px;
  }
  .solicitarfecha {
    width: 100%;
    margin-top: 10px;
  }
  #txtfechareq1 {
    margin-right: 20px !important;
  }
  .stepwizard.pb-4 {
    padding-bottom: 0px !important;
  }
  #listado .titulos p:last-child {
    text-align: right;
  }
  #listado .pedido, #listado .estado {
    float: right;
  }
  #listado .estado {
    font-size: 12px !important;
  }
  #listado .pedido .col-lg-12.text-left, #listado .pedido .nomref .col-lg-12 {
    padding: 0px;
  }
  .titdetalleped {
    margin-top: 0px;
    font-size: 20px !important;
  }
  .pedido .nomref {
    padding-top: 0px !important;
  }
}

/* General */

#pagina-direfac #accordion .card-header {
  border: 0px;
}

.page-link {
  background-color: transparent;
}

input#queped {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-right: 0px !important;
}

button#enviaq {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

#titulos .card-header p {
  font-weight: bold;
  margin-bottom: 0px;
  color: white;
  font-size: 14px;
}

#listado nav {
  margin-top: 20px;
}

#listadoarchivados .page-link, #titulos .card-header {
  background-color: var(--dark-color);
  background-color: #333;
}

/* ============================ AREA CLIENTE - DIRECCIONES ============================ */

@media screen and (max-width: 480px) {
  #pagina-direnvio div#listado, #pagina-direfac div#listado {
    display: none;
  }
  #pagina-direnvio button.btn, #pagina-direfac button.btn {
    width: 100%;
    margin-top: 10px;
  }
  #pagina-direnvio .card-header, #pagina-direfac .card-header {
    padding: 15px 0px !important;
    border: 0px;
  }
  #pagina-direnvio div#accordion, #pagina-direfac div#accordion {
    margin: 20px 0px;
    border-radius: 5px;
  }
  #pagina-direnvio input#continuar, #pagina-direfac input#continuar {
    width: 100%;
  }
  #pagina-direnvio, #pagina-direfac {
    display: flex;
    flex-direction: column;
  }
  #pagina-direnvio .row, #pagina-direfac .row {
    order: 2;
  }
  #pagina-direfac .col-lg-1 {
    width: 50%;
  }
}

/* ============================ AREA CLIENTE - PRESUPUESTOS ============================ */

/* Responsive */

@media screen and (min-width: 480px) {
    #menu-facturas {
    display: block !important;
  }
}

@media screen and (max-width: 480px) {
  #pagina-presupuestos #titulos {
    display: none;
  }
  #pagina-presupuestos li.nav-item, #pagina-presupuestos li.nav-item a {
    width: 100%;
    margin-bottom: 5px;
  }
  #pagina-presupuestos h4 {
    font-size: 20px !important;
    text-align: center;
    margin-bottom: 20px;
  }
}

/* General */

#lista_presupuestos .headerpresprod {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#lista_presupuestos .caractprod {
  font-size: 14px;
}

#lista_presupuestos .card-body.pedido {
  background-color: var(--grey-light-color);
  background-color: #eee;
}

#lista_presupuestos .card-header {
  background-color: #fff;
  padding: 15px 0px;
}

#lista_presupuestos .card-body {
  background-color: var(--grey-light-color) !important;
  background-color: #eee;
}

#lista_presupuestos h3 {
    font-size: 24px !important;
}

#lista_presupuestos p.car_producto {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

#lista_presupuestos .card-body.pedido p {
    font-size: 14px;
}

#lista_presupuestos .btn-link.pedido {
  padding: 0px !important;
  text-transform: none;
  letter-spacing: 0px;
}

#lista_presupuestos .row.titulos p {
  margin-bottom: 0px;
  font-size: 14px;
}

/* LINKS */

a {
  color: var(--primary-color);
  color: #c6362c;
}
a:focus {
  outline: 0;
}
a:hover {
  color: var(--primary-color);
  color: #c6362c;
  text-decoration: none;
  transition: ease-in-out .15s,box-shadow ease-in-out .15s;
}
a:hover p {
  border-bottom: 1px solid;
}
.has-danger {
  color: #d9534f;
}
.has-warning {
  color: #f0ad4e;
}

/* SECTIONS */
section.light {
  padding: 100px 0px;
  background-color: var(--light-color);
  background-color: #ccc;
}
section.dark {
  padding: 100px 0px;
  background-color: var(--dark-color);
  background-color: #eee;
}

@media (max-width: 480px) {
  h2.titulosseccion {
    font-size: 20px !important;
    line-height: 30px !important;
  }
}
#borrarcarroask,#borrarpendienteask,#mensajelimitehint{display:none;}

/* ----------------------

GALERIA

-----------------------*/

#galeria{padding:0;}


/*body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}*/

body.lb-disable-scrolling {
  overflow: hidden;
}

.example-image{width:20%;}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  /*display: none !important;*/
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: transparent; /* inicialment era white*/
  /*display:none;*/
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: var(--light-color);
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  /*background: url(../images/close.png) top right no-repeat;*/
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* ============================ AREA CLIENTE - FAVORITOS ============================ */

@media screen and (max-width: 480px) {
  #listado.favoritos .btn {
    width: 46%;
    margin: 0px 5px;
    float: left;
  }
}



/* iconos + - en modalcarrito */


.btn-link.pedido {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 0px;
}

.pedido[aria-expanded="true"]:after {
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
   content: "\f106";
   color: #bbb;
   font-size: 15px;
   margin-left: 5px;
}

.pedido[aria-expanded="false"]:after {
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
   content: "\f107";
   color: #333;
   font-size: 15px;
   margin-left: 5px;
}

/* OFERTAS */

h2.catoffername {
  font-size: 30px !important;
  color: white;
  position: absolute;
  bottom: 10px;
  margin-bottom: 0px;
  left: 30px;
}

a#topweb {
  position: fixed;
  bottom: 20px;
  right: 100px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--primary-color);
  background-color: #c6362c;
  color: #fff;
  cursor: pointer;
  padding: 15px;
  border-radius: 15px;
  font-size: 16px;
  text-transform: capitalize;
}

.verofertas:hover {
  color: #fff !important;
  opacity: 0.8;
}

#productos hr:first-child {
  display: none;
}

.weboffers h1 {
  font-size: 60px !important;
}

.lang_imprimerie .weboffers h1 {
    font-size: 50px !important;
}

/* Responsive */

@media screen and (min-width: 1025px) {
    #menu-cuenta {
    display: block;
  }
  }

@media screen and (min-width: 1024px) {
  .lang_impressio .weboffers .textoahorro {
    max-width: 355px !important;
  }
  .lang_imprimerie .weboffers .textoahorro {
    max-width: 405px !important;
  }
}

@media screen and (width: 1024px) {
  section#catofertas {
    padding-top: 20px !important;
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 768px) {
  .mobileoffers .descuento {
    margin-left: 10px;
  }
  .mobileoffers {
    display: block !important;
  }
  .mobileoffers h1 {
    font-size: 46px !important;
    line-height: 46px !important;
    margin: 0px auto !important;
  }
  .weboffers {
    display: none !important;
  }
  h2.ahorrocant {
    max-width: 100% !important;
    margin-top: 20px !important;
  }
  .mobileoffers .mainoffer {
    margin-top: 30px !important;
  }
  .ofertacat {
    margin-bottom: 30px !important;
  }
  #verofertas {
    margin-top: 0px !important;
    padding-top: 20px !important;
  }
  #catofertas {
    margin-top: 0px !important;
  }
}

@media screen and (max-width: 480px) {
  .lang_imprimerie .mobileoffers h1 {
    font-size: 25px !important;
    line-height: 30px !important;
  }
  .example-image{width:100%;}
  
  #catofertas {
    margin-top: -20px !important;
    padding: 0px 5px !important;
  }
  .catofertas {
    padding: 0px 5px !important;
  }
  h2.catoffername {
    font-size: 18px !important;
    left: 10px !important;
    text-align: left !important;
  }
  #catofertas {
    padding-top: 0px !important;
  }
  .ofertacat {
    flex: 50%;
    padding: 10px !important;
    margin-bottom: 0px !important;
  }

  .mobileoffers {
    margin-top: 65px !important;
  }
  .mobileoffers h1, .mobileoffers h2 {
    text-align: left !important;
    margin: 0 !important;
  }
  .mobileoffers h1 {
    font-size: 21px !important;
    line-height: 25px !important;
    margin-top: 0px !important;
  }
  .mobileoffers h2:first-child {
    font-size: 18px !important;
  }
  .mobileoffers h2 {
    font-size: 30px !important;
  }
}

@media screen and (min-width: 1140px) {
  .weboffers .containertext {
    max-width: 1140px !important;
    margin: 0px auto !important;
  }
}


.object-fit-cover {
  object-fit: cover !important;
}


/* ============================ FOOTER ============================ */

.checkout .col-lg-12.metodos-pago {
    display: none;
}

@media screen and (max-width: 480px) {
  .table .thead-dark th {
    font-size: 10px !important;
  }
  #servicios .lista img {
    width: 50px !important;
}
#servicios .lista h4 {
    font-size: 16px !important;
    margin-bottom: 0px !important;
}
  #descarga img, #descarga2 img, #descarga3 img,
  #descarga .btn-primary, #descarga2 .btn-primary, #descarga3 .btn-primary {
    margin-bottom: 10px;
    }
  #servicios h2 {
    margin-top: 0px !important;
  }
  #testimonios h2, #servicios h2, #testimonios h2, #plantilla h2, #descarga h2,
   #descarga2 h2, #descarga3 h2, #diseno h2, #modelos h2, #revision h2,
   #blog h2, #maquetacion h2, #papeles h2, #metalizado h2, #ventajas h2 {
    font-size: 20px !important;
}
  .imgprodico {
    padding: 0px 20px;
}
  .metodos-pago img {
    width: 40px !important;
  }
  body.concms.clcheck.mac.openmobile.nav-open div#full-products.fixed-top.main-menu {
    padding-top: 230px !important;
  }

  section#seo {
    padding: 50px 10px !important;
  }
  .col-md-3:last-child hr.horizontal {
    display: none !important;
  }
  footer .container-fluid > hr {
    display: none !important;
  }
  .col-lg-12.piecheckout {
    font-size: 12px !important;
  }
}

/* General */

footer hr.horizontal {
  display: block !important;
}

/* Checkout */

.col-lg-12.piecheckout {
  padding: 0px;
  padding-bottom: 20px !important;
}

@media screen (min-width: 480px) and (max-width: 991px) {
  .openmobile.nav-open .topnav .badge1[data-badge]:after {
    right: 85px;
    top: 220px;
}
}

@media screen and (max-width: 480px) {
  .pagina-producto {
    overflow-x: hidden !important;
  }
}


button.btn.btn-block.btn-success.m-2.mb-0 {
  margin: -5px !important;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .f_a_carrito {
    max-height: 540px !important;
  }
}

section#caracteristicas .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
}





/* ARREGLAR ENCABEZADOS */

h3.h3tit {

margin-top:20px !important;
font-size:20px !important;
text-align:center !important;
color:#333 !important;

}


div.cardproducto{
  font-size: 20px;
  font-weight: 900;
  text-align: center;
    font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
  margin-top: 20px;
  margin-bottom: .75rem;
  letter-spacing: 0px;
}


div.ventajas{

  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0px;
  text-transform: uppercase;
  margin-top: 100px;
  line-height:1.2;
  font-family: 'big_john_probold', sans-serif;
}

div.comofunciona{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0px;
  text-transform: uppercase;
  line-height:1.2;
  font-family: 'big_john_probold', sans-serif;
}


div.ventajas2{
  font-size: 14px;
  margin-bottom:.75rem;
  color:#333;
  text-transform: uppercase;
  font-family: 'big_john_probold', sans-serif;
}


#diseno a[aria-expanded="true"] .card .ventajas2,
#diseno a[aria-expanded="true"] .card p {
color: #c6362c !important;
}

div.ventajas3{
  font-size: 16px;
  margin-bottom:.75rem;
  color:#333;
  text-transform: uppercase;
  line-height:1.2;
  font-family: 'big_john_probold', sans-serif;
}


div.encabezado{
  font-size: 28px;
  margin-bottom:.75rem;
  color:#333;
  text-transform: uppercase;
  line-height:1.2;
  font-family: 'big_john_probold', sans-serif;
}


div.queaporta{
  font-size: 20px;
  font-weight: 900;
  color:#c6362c;
  letter-spacing: 0px;
  text-transform: uppercase;
  margin-top:0;  
  line-height:1.2;
  font-family: 'big_john_probold', sans-serif;
}

@media screen and (max-width: 480px) {
  div.comofunciona {
    font-size: 22px !important;
  }
}

.btn-dropbox {
    background-color: #0061fe;
    color: #fff;
    border: 1px solid;
}

.btn-dropbox:hover {
    background-color: transparent;
    color: #0061fe;
}


  #customBtn {
      /*display: inline-block;
      background: white;
       color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap; */
    }

    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: serif;
      font-weight: normal;
    }
    span.icon {
      background: url('./img/googlelogin.jpg') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 220px;
      height: 42px;
    }

        span.icon2 {
    }

    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 0px;
      padding-right: 0px;
      font-size: 14px;
      font-weight: normal;
      color: white;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Arial', sans-serif;
    }
    
    @media screen and (max-width: 480px) {
              .topnav .badge1[data-badge]:after {
                  right: 35px !important;
              }
             }
             
      .menu-abierto .modal-backdrop.show {
    display: none !important;
}


    #productos .card img {
      padding: 10px 0px;
    }

    #productos .onlytablet {
      margin-top: -20px;
    }

    @media (min-width: 991px) and (max-width: 1200px) {
      #productos .onlymobile {
        display: block !important;
      }
      #productos .onlytablet {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      #productos .onlymobile {
        display: block !important;
      }
      #productos .onlytablet {
        display: none !important;
      }
    }

    @media (max-width: 780px) {
      #productos .col-md-4, #productos .col-lg-4 {
          width: 50% !important;
          padding-left: 5px !important;
          padding-right: 3px !important;
      }
      #productos p.desdeprods {
        display: block !important;
      }
    }

    .barraNormal .fa-bars {
      color: #fff;
    }

    @media (min-width: 991px) {
      #menuuser .onlytablet {
        display: none !important;
      }
    }

    @media (max-width: 1040px) and (min-width: 481px) {
      .navbar-brand {
        width: auto !important;
      }
    }

  @media screen and (max-width: 990px) {
    #menuuser .onlydesktop {
      display: none !important;
    }
    #menuuser .onlytablet {
      display: block !important;
    }

    .navbar-brand { 
      width: auto !important;
      left: 10px !important;
      margin-left: 0px !important;
    text-align: left;
      }

    }

@media (max-width: 991px) {
      #menuuser .navbar-nav {
        margin-left: 0px !important;
    text-align: left;
      }

    }

  .barraFlotante a {
    color: #333 !important;
}

  .navbar-brand {
    height: auto !important;
    width: auto !important;
    margin: auto !important;
    position: relative !important;
  }

  .verproductocta {
    padding: 10px 10px;
    background-color: #28a745;
    position: absolute;
    bottom: 10px;
    color: white;
    right: 10px;
    z-index: 99;
    border: 1px solid #28a745;
    line-height: 20px;
    cursor: pointer;
  }

  .verproductocta:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }

  div#productos .card {
    box-shadow: none !important;
    height: auto !important;
  }

  div#productos .card:hover {
    box-shadow: none !important;
    cursor: pointer !important;
  }


  @media screen and (max-width: 1300px) {
    .buscadornav input#que {
      width: auto !important;
      margin-left: 24px !important;
    }
  }

  @media screen and (max-width: 1200px) {
    .grid figure {
      width: 21% !important;
    }

  }

  figure .badge-light {
        font-size: 12px !important;
    border-radius: 0 !important;
    color: white !important;
    font-family: 'Istok Web';
    position: absolute;
    top: 0 !important;
    padding: 10px;
    left: 0 !important;
    text-transform: uppercase;
    background-color: var(--danger) !important;
    z-index: 999;
  }

  figure.effect-sadie figcaption::before {
    height: 0 !important;
  }


    .grid figure {
      min-width: 21%;
      max-width: 21%;
    }

    #productos h3 {
    text-align: left !important;
    width: 100%;
    left: 15px !important;
    }



    .titulosseccion {
      font-size: 40px !important;
    }

.grid figure img {
    margin: 0px auto 50px auto !important;
    margin-top: 20px !important;
    margin-bottom: 65px !important;
}

#menu ul:first-child > li:nth-child(11) {
  background-color: #007309 !important;
  padding: 5px 0px;
  margin-top: 15px;
  margin-bottom: -20px;
}

#menu ul:first-child > li:nth-child(11) a {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#menu ul:first-child > li:nth-child(11) a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f005";
  margin-right: 5px;
}
  </style>
  
<style>
    #menu {
      padding: 0;
    margin: 0;
    border: 0; 
    font-family:var(--heading-font);
    position:absolute;
    Bottom:0;
    top:0;
    left:0;
}


#menu ul, li {
      list-style: none;
     margin: 0;
      padding: 0; 
}

#menu ul {
      position: relative;
      z-index: 597;
      float: left; 
      top: 0px;
      width:16.2%!important;
      position:absolute;
      background:#FFF;
      bottom:0;
      height:100%;
}

.titprod{   
    padding: 25px 0px 25px 30px;
    border-bottom: 1px solid #CCC;
    font-weight: 900;
    font-size: 21px;}
#menu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle; 
}

#menu ul li.hover,
#menu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; 
}

#menu ul li:hover a{color:#FFF;}
#menu ul li:hover ul a{color:#666666;}

#menu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%; 
}

#menu ul ul li {
  float: none; 
}

#menu ul li:hover > ul {
  visibility: visible; 
}

#menu ul ul {
  top: 72px;
  bottom:0;
  width:24%!important;
  left: 16.2%;
  position:fixed;
  background:#f6f6f6;
  padding-top:22px;
}

#menu ul ul ul{
  top: 70px;
  bottom:0;
  width:20%;
  left: 32%;
  position:fixed;
  background:#f6f6f6;
}

#menu ul li {
  float: none; 
}

#menu {
  width: 100%; 
}

#menu span, #menu a {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none; 
    font-family:var(--heading-font);
}

#menu:after, #menu ul:after {
    content: '';
    display: block;
    clear: both; 
}

#menu ul, #menu li {
    width: 100%!important; 
}
#menu li {
  background:#FFF; 
}

#menu li:before {
content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  opacity: 1;
  transform: scale3d(0,1,1);
  transform-origin: 0% 50%;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  background: var(--white-color);
}
#menu li:hover:before {
    /*background: var(--primary-color);*/ 
    transform: scale3d(1,1,1);
    background: var(--primary-color);
    transition: all 0.3s linear;
}

.titprod:hover {
    background: var(--white-color)!important; 
}

#menu a {
    color: #666666;
    line-height: 160%;
    padding: 2px 28px;
    font-family:var(--heading-font);
   /* text-transform:uppercase;*/
    font-weight: normal;
    border:0 !important;
}
#menu ul ul li {
    background: #f6f6f6; 
}

#menu ul ul li:hover:before{
transform: scale3d(0,1,1);
}


#menu ul ul li:hover {
    background: #dddddd; 
}
#menu ul ul li:hover a {
    color: #666666; 
}
#menu ul ul li ul li {
    background: #dddddd; 
}
#menu ul ul li ul li:hover {
    background: #b7b7b7; 
}
#menu .has-sub {
    position: relative; 
}

#menu .has-sub:after, #menu .has-sub > ul > .has-sub:hover:after {
    content: '';
    display: block;
    width: 10px;
    height: 9px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px;
    background-image: url(right.png);
}
#menu .has-sub > ul > .has-sub:after, #menu .has-sub:hover:after {
    background-image: url(right.png); 
}
.flechaprod{float:right; margin:5px 25px 0 0;}


.read-more { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 30px 0; 
 z-index:99998; 
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to bottom, transparent, white);
}


@media (max-width: 480px){
#menu ul {width:100%!important;}
#menu ul li:hover > ul {
  visibility: hidden; 
}
.titprod{padding:25px 0px 25px 30px !important;}



}

nav.menu .fa {
    color: inherit !important;
}




#productos .card img {
      padding: 10px 0px;
    }

    #productos .onlytablet {
      margin-top: -20px;
    }

    @media (min-width: 991px) and (max-width: 1200px) {
      #productos .onlymobile {
        display: block !important;
      }
      #productos .onlytablet {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      #productos .onlymobile {
        display: block !important;
      }
      #productos .onlytablet {
        display: none !important;
      }
    }

    @media (max-width: 780px) {
      #productos .col-md-4, #productos .col-lg-4 {
          width: 50% !important;
          padding-left: 5px !important;
          padding-right: 3px !important;
          margin-bottom: 10px !important;
      }
      #productos p.desdeprods {
        display: block !important;
      }
    }

    .barraNormal .fa-bars {
      color: #fff;
    }

   


  .verproductocta {
    padding: 10px 10px;
    background-color: #28a745;
    position: absolute;
    bottom: 10px;
    color: white;
    right: 10px;
    z-index: 99;
    border: 1px solid #28a745;
    line-height: 20px;
    cursor: pointer;
  }
  
  @media (max-width: 480px) {
  .verproductocta { display:none;}
  #productos .card-body {
   max-width: 100% !important;
}

  }

  .verproductocta:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }

  div#productos .card {
    box-shadow: none !important;
    height: auto !important;
  }

  div#productos .card:hover {
    box-shadow: none !important;
    cursor: pointer !important;
  }


  

  @media screen and (max-width: 1200px) {
    .grid figure {
      width: 21% !important;
    }

  }

  figure .badge-light {
    font-size: 12px !important;
    border-radius: 0 !important;
    color: white !important;
    font-family: 'Istok Web';
    position: absolute;
    top: 0 !important;
    padding: 10px;
    left: 0 !important;
    text-transform: uppercase;
    background-color: var(--danger) !important;
    z-index: 999;
  }

  figure.effect-sadie figcaption::before {
    height: 0 !important;
  }


    .grid figure {
      min-width: 21%;
      max-width: 21%;
    }

    #productos h3 {
    font-size: 22px;
    text-align: left !important;
    width: 100%;
    left: 15px !important;
    line-height: 22px}



    .titulosseccion {
      font-size: 46px !important;
    }

.grid figure img {
    margin: 0px auto 50px auto !important;
    margin-top: 20px !important;
    margin-bottom: 65px !important;
}

.container-fluid.productos {
  margin-top: 30px !important;
}

@media screen and (max-width: 480px) {
  .container-fluid.productos {
    margin-top: 0px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .consultarprodscta {
    flex: 100% !important;
    max-width: 100% !important;
  }
  .consultarprodscta .card-body {
    padding: 30px !important;
  }
  .consultarprodscta h3 {
    text-align: center !important;
  }
}