html {
    -webkit-text-size-adjust: 100%; /* Previene zoom inesperado en iOS */
  }
  
  html, body {
    background-color: #dbdbdb !important;
    height: 100%;
    margin: 0;
  }
  
  body {
    margin: 0;
    font-family: 'Muli', sans-serif !important;
    position: relative; 
    min-width: 380px;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
  }
  
  #titlenav {
    display: none;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    font-family: 'Muli', sans-serif !important;
  }
  
  svg {
    max-width: none;
  }
  
  a {
    color: #0057b8;
    text-decoration: none !important;
    transition: .3s;
  }
  
  a:hover, a:focus {
    color: #4ba7ff;
  }
  
  ::-webkit-scrollbar {
    -webkit-box-shadow: inset 0 0 0 transparent;
    width: 7px;
    height: 7px;
    background-color: white;
    border-radius: 0;
    transition: .3s;
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: white;
    border-radius: 0;
    border-right: 1px solid gray;
    transition: .3s;
  }
  
  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: #9e9e9e;
    border-radius: 0;
    transition: .3s;
  }
  
  img {
    pointer-events: none;
  }
  
  /* Padding */
  
  .p-0 {
    padding: 0px !important;
  }
  
  .p-5s {
    padding: 5px !important;
  }
  
  .plr-5s {
    padding: 0 5px !important;
  }
  
  .p-10 {
    padding: 10px !important;
  }
  
  .pb-10 {
    padding-bottom: 10px !important;
  }
  
  .p-15 {
    padding: 15px !important;
  }
  
  .p-20 {
    padding: 20px !important;
  }
  
  .p-25 {
    padding: 25px !important;
  }
  
  .pl-0 {
    padding-left: 0px !important;
  }
  
  .pr-0 {
    padding-right: 0px !important;
  }
  
  .pl-10 {
    padding-left: 10px !important;
  }
  
  .pr-10 {
    padding-right: 10px !important;
  }
  
  .pl-15 {
    padding-left: 15px !important;
  }
  
  .pl-50 {
    padding-left: 50px !important;
  }
  
  .pr-15 {
    padding-right: 15px !important;
  }
  
  .pl-30 {
    padding-left: 30px !important;
  }
  
  .pr-30 {
    padding-right: 30px !important;
  }
  
  .pt-10 {
    padding-top: 10px !important;
  }
  
  .pt-20 {
    padding-top: 20px !important;
  }
  
  .pt-30 {
    padding-top: 30px !important;
  }
  
  .pt-40 {
    padding-top: 40px !important;
  }
  
  .pt-50 {
    padding-top: 50px !important;
  }
  
  .pt-60 {
    padding-top: 60px !important;
  }
  
  .pt-70 {
    padding-top: 70px !important;
  }
  
  .pt-80 {
    padding-top: 80px !important;
  }
  
  .pt-90 {
    padding-top: 90px !important;
  }
  
  .pt-100 {
    padding-top: 100px !important;
  }
  
  .pt-110 {
    padding-top: 110px !important;
  }
  
  .pt-120 {
    padding-top: 120px !important;
  }
  
  .pt-130 {
    padding-top: 130px !important;
  }
  
  .pt-140 {
    padding-top: 140px !important;
  }
  
  .pt-150 {
    padding-top: 150px !important;
  }
  
  .pb-10 {
    padding-bottom: 10px !important;
  }
  
  .pb-20 {
    padding-bottom: 20px !important;
  }
  
  .pb-30 {
    padding-bottom: 30px !important;
  }
  
  .pb-40 {
    padding-bottom: 40px !important;
  }
  
  .pb-50 {
    padding-bottom: 50px !important;
  }
  
  .pb-60 {
    padding-bottom: 60px !important;
  }
  
  .pb-70 {
    padding-bottom: 70px !important;
  }
  
  .pb-80 {
    padding-bottom: 80px !important;
  }
  
  .pb-90 {
    padding-bottom: 90px !important;
  }
  
  .pb-100 {
    padding-bottom: 100px !important;
  }
  
  .pb-110 {
    padding-bottom: 110px !important;
  }
  
  .pb-120 {
    padding-bottom: 120px !important;
  }
  
  .pb-130 {
    padding-bottom: 130px !important;
  }
  
  .pb-140 {
    padding-bottom: 140px !important;
  }
  
  .pb-150 {
    padding-bottom: 150px !important;
  }
  
  .row {
      display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  @media (min-width: 992px) {
  .col-lg-w-5 {
    width: 20% !important;
  }
  }
  
  .tab-content>.active {
    display: block !important;
  }
  
  .show {
    display: inline-block;
  }
  
  .hide {
    display: none;
  }
  
  .stickygrid, .stickygrid2 {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
  }
  
  .wrapper {
    min-height: 100%;
    margin: 0 auto -342px;
  }
  
  .pushfooter {
    height: 342px;
  }
  @media (max-width: 767px) {
  .pushfooter {
    display: none;
  }
  }
  
  .tab-content>.active {
    display: block !important;
  }
  
  /* Pantalla de Loading */
  
  .loadscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.8);
    visibility: hidden; 
    opacity: 0;  
    transition: opacity 0.5s ease, visibility 0s 0.5s; 
  }
  
  .loadscreen.main {
    visibility: visible; 
    opacity: 1;
    z-index: 100;
  }
  
  .loadscreen img {
    width: 150px;
    height: 150px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 75px;
  }
  
  .loadscreen .hibtn,
  .loadscreen .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s;
    animation-delay: .1s;
  }
  .loadscreen .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .loadscreen .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  /* Header */
  
  .header-main {
      background-color: #0057b8;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      transition: top 0.3s;
      z-index: 999;
  }
  
  .header-main table {
      width: 100%;
      max-width: 1202px;
      height: 100%;
      margin: 0 auto;
      z-index: 1;
  }
  
  .header-main table td {
      transition: .3s;
  }
  
  .header-main .brand {
      width: 137px;
      transition: .3s;
  }
  
  @media (max-width: 992px) {
  .header-main .brand {
      width: 51px;
  }
  }
  
  .header-main .brand .logo {
      width: 100%;
      height: 100%;
      background-image: url(../images/ag-logo.svg);
      background-size: 133px auto;
      background-position: center left;
      background-repeat: no-repeat;
  }
  
  .header-main .search {
      width: 100%;
      padding: 0 20px;
      display: inline-flex;
  }
  @media (max-width: 1200px) {
  .header-main .search {
      padding: 0 10px;
  }
  }
  @media (max-width: 992px) {
  .header-main .search {
      padding: 0 0 0 10px;
  }
  }
  
  .header-main .search form {
      display: flex;
      width: 100%;
    border-radius: 15px 0 0 15px;
  }
  
  .header-main .search .sbtn, .header-main .search .sbtn:focus {
      color: #0057b8;
      background-color: #e1e1e1;
      width: 35px;
      height: 30px;
      border: none;
    border-radius: 15px 0 0 15px;
      outline: none;
      position: relative;
      flex: 0 0 auto;
      transition: .3s;
  }
  
  .header-main .search .sbtn:hover {
      color: white;
      background-color: #4ba7ff;
  }
  
  .header-main .search .sbtn i, .header-main .search .sbtn svg {
      font-size: 13px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
  
  .header-main .search .sinput {
      width: 100%;
      position: relative;
  }
  
  @media (max-width: 850px) {
    .header-main .search .sinput {
      position: static;
    }
  }
  
  .header-main .search .sinput input {
      font-size: 14px;
      width: 100%;
      height: 30px;
      border: none;
      border-radius: 0 0 0 0;
      outline: none;
      padding: 5px 25px 5px 10px;
  }
  
  @media (max-width: 495px) {
  .header-main .search .sinput input::placeholder {
      color: white;
  }
  }
  
  .header-main .search .sinput .sdel {
      color: #0057b8;
      font-size: 15px;
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
    cursor: pointer;
  }
  
  .header-main .search .parambtn, .header-main .search .parambtn:focus {
      color: black;
      font-size: 14px;
      text-align: left;
      padding: 0 10px 0 33px;
      background-color: #e1e1e1;
      height: 30px;
      border: none;
      border-radius: 0 15px 15px 0;
      outline: none;
      position: relative;
      flex: 0 0 auto;
      transition: .3s;
  }
  
  .header-main .search .parambtn:disabled {
      opacity: .5;
    pointer-events: none;
  }
  
  .header-main .search .parambtn:hover {
      color: white;
      background-color: #4ba7ff;
  }
  
  .header-main .search .parambtn i, .header-main .search .parambtn svg {
      color: #0057b8;
      font-size: 22px;
      position: absolute;
      top: 50%;
      left: 7px;
      transform: translateY(-50%);
      transition: .3s;
  }
  
  .header-main .search .parambtn:hover i, .header-main .search .parambtn:hover svg {
      color: white;
  }
  
  @media (max-width: 992px) {
  .header-main .search .parambtn, .header-main .search .parambtn:focus {
      padding: 0 10px 0 27px;
  }
  .header-main .search .parambtn span {
      display: none;
  }
  }
  
  
  /* Menu superior */
  
  .m1 {
      background-color: #0057b8;
      padding: 8px 10px;
  }
  
  .m1 .topmenu {
      width: 225px;
  }
  
  @media (max-width: 992px) {
  .m1 .topmenu {
      /*width: 145px;*/
  }
  }
  @media (max-width: 767px) {
  .m1 .topmenu {
      display: none;
  }
  }
  
  .m1 td.backbtn {
    width: 38px;
    display: none;
  }
  
  @media (max-width: 767px) {
  .m1 td.backbtn {
    display: inline-block;
  }
  }
  
  .m1 td.backbtn a, .m1 td.backbtn a:focus {
      color: white;
      font-size: 16px;
    width: 28px;
    height: 28px;
      background-color: #4ba7ff;
      border: none;
      border-radius: 20px;
      outline: none;
      display: block;
      position: relative;
  }
  
  .m1 td.backbtn svg, .m1 td.backbtn i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
  
  .m1 .nav-link, .m1 .nav-link:focus {
      color: white;
      font-size: 14px;
      font-weight: 500;
      padding: 3px 8px;
      border-radius: 5px;
      margin: 0 0 0 3px;
      transition: .3s;
  }
  
  .m1 .nav-item:first-child .nav-link {
      margin: 0;
  }
  
  
  .m1 .nav-link i, .m1 .nav-link svg {
      color: white;
      font-size: 22px;
      vertical-align: -3px;
      transition: .3s;
  }
  
  .m1 .nav-link:hover, .m1 .nav-item.open:hover .nav-link {
      color: black;
      background-color: white;
  }
  
  .m1 .nav-link:hover i, .m1 .nav-item.open:hover .nav-link i,
  .m1 .nav-link:hover svg, .m1 .nav-item.open:hover .nav-link svg {
      color: #0057b8;
  }
  
  
  
  .m1 .cartq {
      color: white;
      font-size: 12px;
      background-color: #4ba7ff;
      padding: 3px 5px;
      margin: 0 0 0 3px;
      border-radius: 5px;
  }
  
  
  .m1 .nav-item {
      position: relative;
  }
  
  .m1 .nav-item.open > .menu {
    padding: 8px 0 0 0;
    position: absolute;
    top: 18px;
    right: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 999999;
    transition: .2s;
  }
  
  .m1 .nav-item.open:hover > .menu {
      top: 24px;
    pointer-events: auto;
    opacity: 1;
  }
  
  .m1 .nav-item.open .menu .container {
    background-color: white;
    padding: 10px 0;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
    width: 140px;
    border-radius: 5px;
  }
  
  
  
  
  .m1 .nav-item.open .menu ul {
      padding: 0;
  }
  
  .m1 .menu-item {
      list-style: none;
  }
  
  .m1 .menu-item > a {
      color: black;
      background-color: transparent;
      list-style: none;
      font-size: 13px;
      line-height: 1.2;
      padding: 7px 8px;
      position: relative;
      width: 100%;
      display: inline-block;
      transition: .3s;
  }
  
  .m1 .menu-item:hover > a {
      color: white;
      background-color: #4ba7ff;
  }
  
  /* Notificaciones Swal */
  
   {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    border: 10px solid #0057b8 !important;
    border-radius: 50% !important;
  }
  
  /* Etiqueta nuevo */
  
  .newlabel {
    padding: 15px 10px;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(.9);
    transform-origin: top left;
    pointer-events: none;
    z-index: 10;
  }
  
  .newlabel::before {
    content:'';
    width: 150px;
    height: 150px;
    background-color: #0057b8;
    position: absolute;
    top: -84px;
    left: -84px;
    transform: rotate(45deg);
    z-index: -1;
  }
  
  .newlabel p {
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: -3px 0 0;
  }
  
  @media (max-width: 767px) {
    .newlabel {
      transform: scale(.7);
    }
  }
  
  /* Inputs de compra */
  
  .inputnumber {
      display: flex;
    position: relative;
  }
  
  .inputnumber .inputnumb {
    font-size: 13px;
    text-align: center;
    border: none;
    padding: 7px 13px;
    outline: none;
    margin-bottom: 0;
    appearance: none;
    transition: .3s;
  }
  
  @media (max-width: 767px) {
  .inputnumber .inputnumb {
    font-size: 11px;
    padding: 7px 13px;
  }
  }
  
  .inputnumber .inputnumb::-webkit-inner-spin-button,
  .inputnumber .inputnumb::-webkit-outer-spin-button {
      -webkit-appearance: none; /* Safari */
      appearance: none; /* Otros navegadores */
  }
  
  .inputnumber .inputdec,
  .inputnumber .inputinc {
    font-size: 16px;
    font-weight: 800;
    padding: 7px;
    outline: none;
    transition: .3s;
  }
  
  @media (max-width: 767px) {
  .inputnumber .inputdec,
  .inputnumber .inputinc {
    padding: 7px 9px;
  }
  }
  
  .inputnumber .inputdec {
    border-radius: 5px 0 0 5px;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-right: 2px solid #cdcdcd;
  }
  .inputnumber .inputinc {
    border-radius: 0 5px 5px 0;
    border-top: 0;
    border-left: 2px solid #cdcdcd;
    border-bottom: 0;
    border-right: 0;
  }
  
  .inputnumber .inputnumb,
  .inputnumber .inputdec,
  .inputnumber .inputinc {
    background-color: #dddddd;
  }
  
  .inputnumber .inputnumb:hover,
  .inputnumber .inputdec:hover,
  .inputnumber .inputinc:hover {
    background-color: #e7e7e7;
  }
  
  /* Contenedor de inputs resultados */
  
  .resultdesc .searchfil {
    width: 100%;
    height: 34px;
    position: relative;
    margin: 20px 0 0;
    transition: .2s;
  }
  
  /*@media (max-width: 680px) {
  .resultdesc .searchfil {
    height: 80px;
  }
  }*/
  
  @media (max-width: 932px) {
    .resultdesc .searchfil {
      height: 80px;
    }
  }
  
  @media (max-width: 476px) {
    .resultdesc .searchfil {
      height: 105px;
    }
  }
  
  /* Switches */
  
  .resultdesc .imdeliv {
    height: 34px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-0%,-0%);
    transition: .3s;
  }
  
  .resultdesc .imdeliv .form-switch {
    margin: 0 0 0 10px;
  }
  .resultdesc .imdeliv .form-switch:first-child {
    margin: 0;
  }
  @media (max-width: 476px) {
    .resultdesc .imdeliv .form-switch {
      margin: 5px 0 0 0;
    }
  }
  
  .resultdesc .imdeliv .form-switch .form-check-input {
    width: 42px;
    height: 22px;
    border: none;
    margin-top: 2px;
  }
  
  .resultdesc .imdeliv .form-check-input:focus {
    outline: none;
    box-shadow: none;
  }
  
  .resultdesc .imdeliv .form-check-input:checked {
    background-color: #0057b8;
    border-color: #0057b8;
  }
  
  .resultdesc .imdeliv label {
    font-size: 13px;
    vertical-align: middle;
    margin-left: 7px;
    pointer-events: none;
  }
  
  @media (max-width: 932px) {
    .resultdesc .imdeliv {
      
    }
  }
  @media (max-width: 767px) {
    .resultdesc .imdeliv label {
      font-size: 11px;
    }
  }
  @media (max-width: 476px) {
    .resultdesc .imdeliv {
      display: block;
    }
  }
  
  /* Input de cambio de pagina resultados */
  
  .pagnumber {
      display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    overflow: hidden;
    margin: 0 -1px;
    transition: .2s;
  }
  
  @media (max-width: 680px) {
  .pagnumber {
  }
  }
  
  .pagnumber .pagnumbsel,
  .pagnumber .pagnumbsel:focus {
    font-size: 13px;
    text-align: center;
    border: none;
    padding: 7px 13px;
    outline: none;
    margin: 0 2px;
    appearance: none;
    background-color: white;
    transition: .3s;
  }
  
  .pagnumber .pagnumbsel::-webkit-inner-spin-button,
  .pagnumber .pagnumbselb::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Safari */
    appearance: none; /* Otros navegadores */
  }
  
  .pagnumber .pagnumb,
  .pagnumber .pagnumb:focus {
    min-width: 26px;
    font-size: 13px;
    border: none;
    padding: 7px;
    outline: none;
    margin: 0 2px;
    position: relative;
    background-color: #ededed;
    transition: .3s;
  }
  
  .pagnumber .pagnumb svg {
    font-size: 13px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  .pagnumber .pagnumb:first-child {
    margin-left: 0;
  }
  
  .pagnumber .pagnumb:last-child {
    margin-right: 0;
  }
  
  .pagnumber .pagnumb:disabled {
    pointer-events: none;
    color: #dbdbdb;
  }
  
  .pagnumber .pagnumbsel:hover,
  .pagnumber .pagnumb:hover {
    background-color: white;
  }
  
  @media (max-width: 767px) {
  .pagnumber .pagnumbsel,
  .pagnumber .pagnumbsel:focus {
    font-size: 11px;
    padding: 7px 16px;
  }  
  .pagnumber .pagnumb,
  .pagnumber .pagnumb:focus {
    font-size: 11px;
    padding: 7px 10px;
  }
  }
  
  /* Input ordenar resultados */
  
  .resultdesc .searchsor {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0%,-0);
  }
  @media (max-width: 476px) {
    .resultdesc .searchsor {
      margin: 0 0 0 0;
    }
  }
  
  .searchsor .formselect {
    font-size: 13px;
    color: #181818;
    font-weight: 500;
    background-color: #ededed;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    border: none;
    outline: none;
   
    transition: .3s;
  }
  
  
  
  .searchsor .formselect:hover,
  .searchsor .formselect:focus {
    background-color: white;
  }
  
  @media (max-width: 767px) {
  .searchsor .formselect {
    font-size: 11px;
    padding: 8px 7px;
  }
  }
  
  /* Modal de Login */
  
  .loginmodal .modal-dialog {
    max-width: 600px;
  }
  .loginmodal .modal-body {
    background-color: #dbdbdb;
    padding: 40px 80px;
  }
  @media (max-width: 576px) {
  .loginmodal .modal-body {
    padding: 40px 30px;
  }
  }    
  .loginmodal h3 {
    font-size: 19px;
  }
  .loginmodal p {
    font-size: 12px;
  }
  .loginmodal .checkbox label {
    font-size: 12px;
  }
  .loginmodal .socialbtn,
  .loginmodal .socialbtn:focus {
    font-size: 12px;
    padding: 7px 15px;
  } 
  .loginmodal .loginmsg {
    animation-delay: .1s;
  }
  
  .loginmodal .loginicon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto 20px auto;
    display: block;
    pointer-events: none;
  }
  .loginmodal h3 {
    font-size: 25px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .loginmodal p {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .loginmodal a {
    color: #0057b8;
    transition: .3s;
  }
  .loginmodal a:hover {
    color: #4ba7ff;
  }
  .loginmodal .checkbox label {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
  }
  .loginmodal .genbtn, .loginmodal .formbtn {
    margin: 30px 0 0 0;
  }
  .loginmodal .socialbtn,
  .loginmodal .socialbtn:focus {
    color: #181818;
    background-color: #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: .3s;
    margin: 0 2px 20px 2px;
    animation-delay: .1s;
  }
  .loginmodal .socialbtn:hover {
    background-color: white;
  }
  .loginmodal .socialbtn svg {
    color: #0057b8;
    margin-right: 5px;
  }
  @media (max-width: 767px) {
  .loginmodal .loginicon {
    max-width: 80px;
  }     
  .loginmodal h3 {
    font-size: 19px;
  }
  .loginmodal p {
    font-size: 12px;
  }
  .loginmodal .checkbox label {
    font-size: 12px;
  }
  .loginmodal .socialbtn,
  .loginmodal .socialbtn:focus {
    font-size: 12px;
    padding: 7px 15px;
  } 
  }
  
  
  
  .loginmodal .lognotif {
    background-color: #ededed;
    padding: 20px 80px;
    display: block;
  }
  .loginmodal .lognotif p {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    margin: 0;
  }
  .loginmodal .lognotif p i {
    font-size: 24px;
    color: #0057b8;
    vertical-align: middle;
  }
  @media (max-width: 767px) {
  .loginmodal .lognotif p {
    font-size: 12px;
  }
  .loginmodal .lognotif p i {
    font-size: 20px;
  }
  } 
  @media (max-width: 576px) {
  .loginmodal .lognotif {
    padding: 20px 80px;
  } 
  }
  .loginmodal .show {
    display: block;
  }
  
  /* Página de Login */
  
  .logincover {
    background-color: gray;
    width: 100%;
    height: 525px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .logincover .photo {
    width: 120%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(8px);
    pointer-events: none;
    opacity: .4;
  }
  @media (max-width: 767px) {
    .logincover {
      height: 500px;
    }
    .logincover .photo {
      width: auto;
      height: 120%;
    }
  }
  
  .loginsec {
      max-width: 625px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .loginsec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  .loginsec .grid {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px 75px;
    overflow: hidden;
  }
  .loginsec .logcont {
    width: 100%;
  }
  .loginsec .comment {
    width: 120px;
    position: absolute;
    top: 200px;
    left: -117px;
  }
  .loginsec .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .loginsec .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .loginsec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 20px 0;
  }
  .loginsec a {
    color: #0057b8;
  }
  .loginsec a:hover, .loginsec a:focus {
    color: #4ba7ff;
  }
  .loginsec .desc2 {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .loginsec .checkbox {
    text-align: center;
  }
  .loginsec .checkbox label {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
  }
  .loginsec .lognotif {
    background-color: #f1f1f1;
    padding: 15px 80px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .loginsec .lognotif p {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 0;
  }
  .loginsec .lognotif p i {
    font-size: 24px;
    color: #0057b8;
    vertical-align: middle;
  }
  
  @media (max-width: 996px) {
    .loginsec .grid {
      padding: 60px 60px 75px;
    }
  }
  @media (max-width: 767px) {
    .loginsec .grid {
      padding: 60px 60px 65px;
    }
    .loginsec .tittle {
      font-size: 20px;
    }
    .loginsec .desc {
      font-size: 12px;
    }
    .loginsec .desc2 {
      font-size: 10px;
    }
    .loginsec .checkbox label {
      font-size: 12px;
    }
    .loginsec .lognotif p {
      font-size: 12px;
    }
    .loginsec .lognotif p i {
      font-size: 20px;
    }
  }
  @media (max-width: 576px) {
    .loginsec .grid {
      padding: 40px 20px 65px;
    }
    .loginsec .lognotif {
      padding: 15px 20px;
    }
  }
  
  .loginsec .socialbtn,
  .loginsec .socialbtn:focus {
    color: #181818;
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: .3s;
    margin: 0 3px 0 3px;
    animation-delay: .1s;
  }
  .loginsec .socialbtn:hover {
    background-color: #e7e7e7;
  }
  .loginsec .socialbtn svg {
    color: #0057b8;
    margin-right: 5px;
  }
  @media (max-width: 767px) {
  .loginsec .loginicon {
    max-width: 80px;
  }     
  .loginsec h3 {
    font-size: 19px;
  }
  .loginsec p {
    font-size: 12px;
  }
  .loginsec .checkbox label {
    font-size: 12px;
  }
  .loginsec .socialbtn,
  .loginsec .socialbtn:focus {
    font-size: 12px;
    padding: 7px 15px;
  } 
  }
  
  .loginsec .notif {
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px 10px 10px 28px;
    margin: 25px 0 0 0;
    position: relative;
  }
  
  .loginsec .notif i {
    color: red;
    font-size: 16px;
    position: absolute;
    top: 9px;
    left: 10px;
  }
  
  .loginsec .notif .desc {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: left;
    margin: 0;
  }
  
  .loginsec .notif .desc span {
    color: #0057b8;
    font-weight: 800;
  }
  
  @media (max-width: 767px) {
    .loginsec .notif .desc {
      font-size: 10px;
    }
  }
  
  /* Busqueda por no de parte o descripcion */
  
  .sinput .sresult {
    width: 100%;
    padding: 5px 0 0 0;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: .2s;
  }
  
  @media (max-width: 850px) {
    .sinput .sresult {
      padding: 13px 10px 0;
    }
  }
  
  .sinput .show {
    top: 30px;
    pointer-events: auto;
    opacity: 1;
  }
  
  .sinput .sresult .container {
    max-width: 100%;
    background-color: white;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    padding: 8px 0;
    border-radius: 5px;
    overflow: hidden;
  }
  
  
  .sinput .sresult .list {
    padding: 0;
  }
  
  @media (max-width: 850px) {
    .sinput .sresult .list {
      max-height: 350px;
      overflow-y: auto;
    }
  }
  
  .sinput .item {
    background-color: #eaeaea;
    margin: 3px 0;
    transition: .3s;
  }
  
  .sinput .item:hover {
    background-color: #f7f7f7;
  }
  
  .sinput .item table {
    width: 100%;
    height: 100%;
  }
  
  .sinput .item .img {
    width: 70px;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  
  .sinput .item .img img {
    width: 50%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    pointer-events: none;
    opacity: .75;
    transition: .3s;
  }
  
  .sinput .item:hover .img img {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  
  .sinput .item .img .back {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .03), rgba(0, 0, 0, .15));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .sinput .item .info {
    vertical-align: middle;
    padding: 10px;
  }
  
  .sinput .item .info:last-child {
    text-align: right;
  }
  
  .sinput .item .text {
    font-size: 13px;
    line-height: 1.2;
    word-wrap: break-word;
    word-break: break-all;
    margin: 0;
  }
  
  .sinput .item .part {
    color: #0057b8;
    font-weight: 700;
  }
  
  .sinput .item .desc {
    color: #181818;
    font-weight: 500;
  }
  
  .sinput .item .price {
    color: #181818;
    font-size: 13px;
    font-weight: 700;
    line-height: .9;
    margin: 0;
  }
  
  .sinput .item .price .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
    margin: 0 0 0 5px
  }
  
  .sinput .searchbtn {
    color: black;
    font-size: 14px;
    text-align: center;
    padding: 5px 15px;
    background-color: #e1e1e1;
    height: 30px;
    border: none;
    outline: none;
    display: block;
    margin: 8px auto 0;
    transition: .3s;
  }
  
  .sinput .searchbtn:hover {
    background-color: #f7f7f7;
  }
  
  .sinput .searchbtn i, .sinput .searchbtn svg {
    color: #0057b8;
    font-size: 15px;
    vertical-align: -2px;
    transition: .3s;
  }
  
  @media (max-width: 850px) {
    .sinput .item .desc {
      font-size: 11px;
    }
    .sinput .item .price {
      font-size: 11px;
    }
    .sinput .item .price .tax {
      font-size: 9px;
      margin: 0 0 0 3px
    }
    .sinput .searchbtn {
      font-size: 12px;
    }
    .sinput .searchbtn i, .sinput .searchbtn svg {
      font-size: 13px;
      vertical-align: -2px;
    }
  }
  
  .sinput .notif {
    width: 100%;
    padding: 10px 15px;
  }
  
  .sinput .notif p {
    color: #181818;
    font-size: 14px;
    text-align: center;
    margin: 0;
    transition: .3s;
  }
  
  @media (max-width: 850px) {
    .sinput .notif p {
      font-size: 12px;
    }
  }
  
  /* Busqueda por parametro */
  
  .busquedaparam .modal-dialog {
    max-width: 800px;
  }
  .busquedaparam .modal-body {
      background-color: #dbdbdb;
    padding: 40px 80px;
  }
  .busquedaparam .modal-body h3 {
    font-size: 25px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 20px 0;
  }
  @media (max-width: 767px) {
  .busquedaparam .modal-body h3 {
    font-size: 19px;
  }
  }
  @media (max-width: 576px) {
  .busquedaparam .modal-body {
    padding: 40px 30px;
  }	
  }
  
  .busquedaparam .grid2 {
    background-color: #f0f0f0;
    padding: 80px 15px 12px 15px;
    border-radius: 15px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  
  .busquedaparam .grid2:hover {
    background-color: white;
  }
  
  .busquedaparam .grid2 img {
    width: 45px;
    height: auto;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    transform-origin: center;
    pointer-events: none;
    transition: .3s;
  }
  
  .busquedaparam .grid2:hover img {
    transform: translateX(-50%) scale(1.2);
  }
  
  .busquedaparam .grid2 .desc {
    color: #181818;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    margin: 0;
  }
  @media (max-width: 767px) {
    .busquedaparam .grid2 {
      padding: 80px 10px 10px 10px;
    }
    .busquedaparam .grid2 .desc {
      font-size: 10px;
    }
  }
  
  .busquedaparam .newlabel {
    transform: scale(.7);
  }
  
  @media (max-width: 767px) {
    .busquedaparam .newlabel {
      transform: scale(.65);
    }
  }
  
  /* Busqueda por parametro */
  
  .stickyparam {
    position: sticky;
    top: 73px;
    z-index: 100;
  }
  
  .paramgrid {
    background-color: white;
    padding: 23px 0;
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(0, 0, 0, .15);
  }
  
  @media (max-width: 767px) {
    .paramgrid {
      padding: 18px 0;
    }
  }
  
  .paramgrid .resdesc {
    color: #181818;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    line-height: 1;
    padding: 0 17px;
    margin: 0 0 5px 0;
  }
  
  .paramgrid .resdesc span {
    color: #0057b8;
  }
  
  @media (max-width: 767px) {
    .paramgrid .resdesc {
      font-size: 13px;
      padding: 0 13px;
    }
  }
  
  .paramgrid .filter {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    margin: 15px 0 0;
    justify-content: flex-start;
  }
  
  .paramgrid .filter::-webkit-scrollbar {
    display: none;
  }
  
  .paramgrid .selects {
    display: flex;
    gap: 5px;
    margin: 0 auto;
  }
  
  .paramgrid .formselect option:first-child {
    display: none;
  }
  
  
  
  .paramgrid .forminput, .paramgrid .formselect {
    position: relative;
    flex-shrink: 0;
    transition: .3s;
  }
  .paramgrid .formselect:first-child {
    margin: 0 0 0 17px;
  }
  .paramgrid .formselect:last-child {
    margin: 0 17px 0 0;
  }
  .paramgrid .disabled {
    pointer-events: none;
    opacity: .3;
  }
  .paramgrid .row {
    padding: 0 9px;
  }
  .paramgrid .forminput label, .paramgrid .formselect label {
      width: 100%;
    font-size: 11px;
    color: #0057b8;
    text-align: left;
    font-weight: 800;
      border-radius: 15px !important;
      overflow: hidden;
      position: absolute;
      top: 8px;
      left: 10px;
      pointer-events: none;
    z-index: 1;
  }
  .paramgrid .formselect select {
      appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 22px 27px 5px 10px;
  }
  .paramgrid .forminput input {
    padding: 22px 10px 5px 10px;
  }
  .paramgrid .forminput input, .paramgrid .formselect select {
      width: 120px;
      font-size: 14px;
    color: #181818;
    font-weight: 500;
    background-color: #dddddd;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .3s;
  }
  @media (max-width: 767px) {
  .paramgrid .forminput label, .paramgrid .formselect label {
    font-size: 10px;
  }  
  .paramgrid .forminput input, .paramgrid .formselect select {
    font-size: 12px;
  }
  }
  .paramgrid .forminput input:hover, .paramgrid .formselect select:hover,
  .paramgrid .forminput input:focus, .paramgrid .formselect select:focus {
    background-color: #e7e7e7;
  }
  .paramgrid .formselect::after {
      font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 10px;
    position: absolute;
    bottom: 8px;
    right: 5px;
    pointer-events: none;
  }
  
  
  
  .paramgrid .formconfirm {
    pointer-events: auto;
    opacity: 1;
  }
  .paramgrid .formconfirm::after {
    content: "";
  }
  .paramgrid .formconfirm button {
    font-size: 14px;
    text-align: left;
    padding: 0 10px 0 30px;
    margin: 0 0.5px;
    height: 100%;
    border: none;
    border-radius: 5px;
    outline: none;
    position: relative;
    transition: .3s;
  }
  .paramgrid .formconfirm .btn-reset, .paramgrid .formconfirm .btn-reset:focus {
    color: black;
    background-color: #dddddd;
  }
  .paramgrid .formconfirm .btn-reset:hover {
    background-color: #e7e7e7;
  }
  .paramgrid .formconfirm .btn-filter, .paramgrid .formconfirm .btn-filter:focus {
    color: white;
    background-color: #0057b8;
  }
  .paramgrid .formconfirm .btn-filter:hover {
    background-color: #4ba7ff;
  }
  .paramgrid .formconfirm button svg {
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: .3s;
  }
  .paramgrid .formconfirm .btn-reset svg {
    color: #0057b8;
  }
  @media (max-width: 767px) {
    .paramgrid .formconfirm button {
      font-size: 12px;
    }
  }
  
  
  /* Confirmacion de carrito y cotizaciones */
  
  .carritoconf .modal-dialog {
    max-width: 900px;
  }
  .carritoconf .modal-body {
    background-color: #dbdbdb;
    padding: 40px 80px;
  }
  
  .carritoconf .confmsg {
    animation-delay: .1s;
  }
  
  .carritoconf .conficon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto 0 auto;
    display: block;
    pointer-events: none;
  }
  .carritoconf .confdesc {
    font-size: 25px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .carritoconf .confreco {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .carritoconf .part{
    color: #0057b8;
    font-weight: 800;
  }
  @media (max-width: 1230px) {
  .carritoconf .modal-body {
    padding: 40px 30px;
  }
  }
  @media (max-width: 1080px) {
  .carritoconf .modal-body {
    padding: 40px 10px;
  }
  }
  @media (max-width: 767px) {
  .carritoconf .conficon {
    max-width: 80px;
  }  
  .carritoconf .confmsg {
    padding: 0 20px;
  }  
  .carritoconf .confdesc {
    font-size: 19px;
  }
  .carritoconf .confreco {
    font-size: 12px;
  }
  }
  @media (max-width: 576px) {
  .carritoconf .modal-body {
  } 
  }
  
  .cartcar {
    margin: 30px 0 0 0;
    animation-delay: .5s;
  }
  
  .carritoconf .grid {
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .carritoconf .grid:hover {
    background-color: white;
  }
  .carritoconf .grid .img {
    height: 140px;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  @media (max-width: 767px) {
  .carritoconf .grid .img {
    height: 120px;
  }
  }
  .carritoconf .grid .img img {
    width: auto;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: center;
    opacity: .75;
    transition: .3s;
  }
  .carritoconf .grid:hover .img img {
    transform: translate(-50%,-50%) scale(1.1);
    pointer-events: none;
    opacity: 1;
  }
  .carritoconf .grid .img .back {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .carritoconf .grid .info {
    position: relative;
    padding: 23px 17px 140px 17px;
  }
  @media (max-width: 767px) {
  .carritoconf .grid .info {
    padding: 20px 13px 130px 13px;
  }
  }
  .carritoconf .grid .implabel {
    width: auto;
    height: 26px;
    position: absolute;
    top: -13px;
    right: 0;
    pointer-events: none;
  }
  .carritoconf .grid .part {
    color: #0057b8;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .carritoconf .grid .manuf {
    color: #181818;
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 10px 0;
  }
  .carritoconf .grid .manuf span {
    font-weight: 800;
  }
  .carritoconf .grid .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .carritoconf .grid .paqarriv {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 20px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .carritoconf .grid .paqarriv::first-child {
    margin: 15px 0 0 0;
  }
  .carritoconf .grid .paqarriv span {
    font-weight: 800;
  }
  .carritoconf .grid .paqarriv svg {
    font-size: 11px;
    vertical-align: middle;
  }
  .carritoconf .grid .cart {
    width: 100%;
    position: absolute;
    padding: 0 17px 23px;
    bottom: 0;
    left: 0;
  }
  .carritoconf .grid .price {
    color: #181818;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px 0;
  }
  .carritoconf .grid .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
  }
  .carritoconf .grid .inputnumber {
    margin: 0 0 3px 0;
  }
  .carritoconf .grid .inputnumb {
    width: 80px;
  }
  .carritoconf .grid .addcart {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .carritoconf .grid .addcart i {
    font-size: 20px;
    vertical-align: middle;
  }
  .carritoconf .grid .addcart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  @media (max-width: 767px) {
  .carritoconf .grid .implabel {
    height: 22px;
    top: -11px;
  } 
  .carritoconf .grid .part {
    font-size: 13px;
  }
  .carritoconf .grid .manuf {
    font-size: 9px;
  }
  .carritoconf .grid .desc {
    font-size: 12px;
  }
  .carritoconf .grid .paqarriv {
    font-size: 10px;
  }
  .carritoconf .grid .cart {
    padding: 0 13px 21px;
  }
  .carritoconf .grid .tax {
    font-size: 9px;
  }
  .carritoconf .grid .inputnumb {
    width: 50px;
  }
  .carritoconf .grid .addcart {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  
  
  .carritoconf .hibtn,
  .carritoconf .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .carritoconf .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .carritoconf .genbtn,
  .carritoconf .genbtn:focus {
    color: #181818;
    background-color: #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    transition: .3s;
    animation-delay: .1s;
  }
  .carritoconf .genbtn:hover {
    background-color: white;
  }
  .carritoconf .hibtn i,
  .carritoconf .genbtn i {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 3px;
  }
  .carritoconf .hibtn:disabled,
  .carritoconf .genbtn:disabled {
    opacity: .5;
  }
  @media (max-width: 767px) {
  .carritoconf .hibtn,
  .carritoconf .hibtn:focus,
  .carritoconf .genbtn,
  .carritoconf .genbtn:focus {
    font-size: 12px;
    padding: 7px 15px;
  }
  }


.carritoconf .grid .nlabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .carritoconf .grid .nlabel::first-child {
    margin: 15px 0 0 0;
  }
  .carritoconf .grid .nlabel span {
    font-weight: 700;
  }
  .carritoconf .grid .hlabel {
    color: #181818;
    background: rgb(241,217,118);
    background: linear-gradient(128deg, rgba(241,217,118,1) 4%, rgba(255,245,203,1) 50%, rgba(241,217,118,1) 58%, rgba(241,188,118,1) 74%, rgba(241,217,118,1) 84%);
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .carritoconf .grid .hlabel::first-child {
    margin: 15px 0 0 0;
  }
  .carritoconf .grid .hlabel span {
    font-weight: 800;
  }
  @media (max-width: 767px) {
  .carritoconf .grid .nlabel, .carritoconf .grid .hlabel {
      font-size: 10px;
    }
  }
  
  /* Vista confirmacion de producto en carrito */
  
  .cartconf {
    background-color: rgba(255, 255, 255, .95);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: .2s;
    animation-delay: 0s;
    z-index: 10;
  }
  .cartalert {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .cartalert .conficon {
    max-width: 50px;
    margin: 0 auto;
    display: block;
  }
  .cartalert .confdesc {
    font-size: 20px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 10px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .cartalert .conficon {
    max-width: 45px;
  }
  .cartalert .confdesc {
    font-size: 16px;
  }
  }
  
  .col2.cartconf {
    background-color: rgba(255, 255, 255, .95);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: .2s;
    animation-delay: 0s;
    z-index: 10;
  }
  .col2.cartalert {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .col2.cartalert .conficon {
    max-width: 50px;
    margin: 0 auto;
    display: block;
  }
  .col2.cartalert .confdesc {
    font-size: 20px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 10px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .col2.cartalert .conficon {
    max-width: 45px;
  }
  .col2.cartalert .confdesc {
    font-size: 16px;
  }
  }
  
  
  .col1 .cartconf {
    background-color: rgba(255, 255, 255, .95);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 1));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: .2s;
    animation-delay: 0s;
    z-index: 10;
  }
  .col1 .cartalert {
    width: 160px;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
  }
  .col1 .cartalert .conficon {
    max-width: 50px;
    margin: 0 auto;
    display: block;
  }
  .col1 .cartalert .confdesc {
    font-size: 20px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 10px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .col1 .cartalert .conficon {
    max-width: 45px;
  }
  .col1 .cartalert .confdesc {
    font-size: 16px;
  }
  }
  
  /* Otras opciones de compra */
  
  .suggprod .modal-dialog {
    max-width: 700px !important;
  }
  .suggprod .modal-body {
    background-color: #dbdbdb !important;
    padding: 40px 80px !important;
  }
  
  .suggprod .confmsg {
    animation-delay: .1s !important;
  }
  
  .suggprod .conficon {
    width: 100% !important;
    max-width: 100px !important;
    margin: 0 auto 0 auto !important;
    display: block !important;
    pointer-events: none !important;
  }
  .suggprod .confdesc {
    font-size: 25px !important;
    color: #181818 !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 0 0 0 0 !important;
  }
  .suggprod .confreco {
    font-size: 14px !important;
    color: #181818 !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 20px 0 0 0 !important;
  }
  .suggprod .suggcar {
    animation-delay: .5s !important;
  }
  .suggprod .part{
    color: #0057b8 !important;
    font-weight: 800 !important;
  }
  @media (max-width: 1230px) {
  .suggprod .modal-body {
    padding: 40px 30px !important;
  }
  }
  @media (max-width: 1080px) {
  .suggprod .modal-body {
    padding: 40px 28px !important;
  }
  }
  @media (max-width: 767px) {
  .suggprod .conficon {
    max-width: 80px !important;
  }  
  .suggprod .confmsg {
    padding: 0 20px !important;
  }  
  .suggprod .confdesc {
    font-size: 19px !important;
  }
  .suggprod .confreco {
    font-size: 12px !important;
  }
  }
  @media (max-width: 576px) {
  .suggprod .modal-body {
  } 
  }
  
  
  .suggcar .grid {
    width: 100% !important !important;
    height: 100% !important !important;
    background-color: #f0f0f0 !important !important;
    border-radius: 15px !important !important;
    position: relative !important !important;
    overflow: hidden !important !important;
    display: block !important !important;
    transition: .3s !important !important;
  }
  .suggcar .grid:hover {
    background-color: white !important;
  }
  .suggcar .grid .img {
    width: 100% !important;
    height: 140px !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: white !important;
  }
  @media (max-width: 767px) {
  .suggcar .grid .img {
    height: 120px !important;
  }
  }
  .suggcar .grid .img img {
    width: auto !important;
    height: 90% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) scale(1) !important;
    transform-origin: center !important;
    opacity: .75 !important;
    transition: .3s !important;
  }
  .suggcar .grid:hover .img img {
    transform: translate(-50%,-50%) scale(1.1) !important;
    pointer-events: none !important;
    opacity: 1 !important;
  }
  .suggcar .grid .img .back {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12)) !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  .suggcar .grid .info {
    position: relative !important;
    padding: 23px 17px 140px 17px !important;
  }
  @media (max-width: 767px) {
  .suggcar .grid .info {
    padding: 20px 13px 130px 13px !important;
  }
  }
  .suggcar .grid .implabel {
    width: auto !important;
    height: 26px !important;
    position: absolute !important;
    top: -13px !important;
    top: -13px !important;
    left: auto !important;
    right: 0 !important;
    pointer-events: none !important;
  }
  .suggcar .grid .part {
    color: #0057b8 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    word-wrap: break-word !important;
    margin: 0 0 0 0 !important;
  }
  .suggcar .grid .manuf {
    color: #181818 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
  }
  .suggcar .grid .manuf span {
    font-weight: 800 !important;
  }
  .suggcar .grid .desc {
    color: #181818 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    margin: 0 0 5px 0 !important;
  }
  .suggcar .grid .paqarriv {
    color: #181818 !important;
    background-color: #dddddd !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 5px 7px !important;
    border-radius: 20px !important;
    margin: 5px 0 0 0 !important;
    display: inline-block !important;
  }
  .suggcar .grid .paqarriv::first-child {
    margin: 15px 0 0 0 !important;
  }
  .suggcar .grid .paqarriv span {
    font-weight: 800 !important;
  }
  .suggcar .grid .paqarriv svg {
    font-size: 11px !important;
    vertical-align: middle !important;
  }
  .suggcar .grid .cart {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    padding: 0 17px 23px !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .suggcar .grid .price {
    color: #181818 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 3px 0 !important;
  }
  .suggcar .grid .tax {
    color: #0057b8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .suggcar .grid .inputnumber {
    margin: 0 0 3px 0 !important;
  }
  .suggcar .grid .inputnumb {
    width: 80px !important;
  }
  .suggcar .grid .addcart {
    color: white !important;
    background-color: #0057b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 15px !important;
    border: 0 !important;
    border-radius: 5px !important;
    margin: 5px 0 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: .3s !important;
  }
  .suggcar .grid .addcart i {
    font-size: 20px !important;
    vertical-align: middle !important;
  }
  .suggcar .grid .addcart:hover {
    color: white !important;
    background-color: #4ba7ff !important;
  }
  
  @media (max-width: 767px) {
  .suggcar .grid .implabel {
    height: 22px !important;
    top: -11px !important;
  } 
  .suggcar .grid .part {
    font-size: 13px !important;
  }
  .suggcar .grid .manuf {
    font-size: 9px !important;
  }
  .suggcar .grid .desc {
    font-size: 12px !important;
  }
  .suggcar .grid .paqarriv {
    font-size: 10px !important;
  }
  .suggcar .grid .cart {
    padding: 0 13px 21px !important;
  }
  .suggcar .grid .tax {
    font-size: 9px !important;
  }
  .suggcar .grid .inputnumb {
    width: 50px !important;
  }
  .suggcar .grid .addcart {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  }
  
  .suggprod .cartconf {
    background-color: rgba(240, 240, 240, .95) !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    animation-duration: .2s !important;
    animation-delay: 0s !important;
  }
  .suggprod .cartalert {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
  }
  .suggprod .cartalert .conficon {
    max-width: 70px !important;
  }
  .suggprod .cartalert .confdesc {
    font-size: 20px !important;
    color: #181818 !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 15px 0 0 0 !important;
  }
  
  @media (max-width: 767px) {
  .suggprod .cartalert .conficon {
    max-width: 55px !important;
  }
  .suggprod .cartalert .confdesc {
    font-size: 16px !important;
  }
  }
  
  
  
  .suggprod .hibtn,
  .suggprod .hibtn:focus {
    color: white !important;
    background-color: #0057b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 40px !important;
    border: none !important;
    border-radius: 5px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    transition: .3s !important;
    animation-delay: .1s !important;
  }
  .suggprod .hibtn:hover {
    color: white !important;
    background-color: #4ba7ff !important;
  }
  .suggprod .genbtn,
  .suggprod .genbtn:focus {
    color: #181818 !important;
    background-color: #f1f1f1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 40px !important;
    border: none !important;
    border-radius: 5px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    transition: .3s !important;
    animation-delay: .1s !important;
  }
  .suggprod .genbtn:hover {
    background-color: white !important;
  }
  .suggprod .hibtn i,
  .suggprod .genbtn i {
    font-size: 20px !important;
    vertical-align: middle !important;
    margin-right: 3px !important;
  }
  .suggprod .hibtn:disabled,
  .suggprod .genbtn:disabled {
    opacity: .5 !important;
  }
  @media (max-width: 767px) {
  .suggprod .hibtn,
  .suggprod .hibtn:focus,
  .suggprod .genbtn,
  .suggprod .genbtn:focus {
    font-size: 12px !important;
    padding: 7px 30px !important;
  }
  }
  
  /* Notificación de carrito */
  
  .carritonotif .modal-dialog {
    max-width: 900px;
  }
  .carritonotif .modal-body {
    background-color: #dbdbdb;
    padding: 40px 80px;
  }
  
  .carritonotif .confmsg {
    animation-delay: .1s;
  }
  
  .carritonotif .conficon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto 0 auto;
    display: block;
    pointer-events: none;
  }
  .carritonotif .confdesc {
    font-size: 20px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 20px 0 0 0;
  }
  @media (max-width: 1230px) {
  .carritonotif .modal-body {
    padding: 40px 30px;
  }
  }
  @media (max-width: 1080px) {
  .carritonotif .modal-body {
    padding: 40px 10px;
  }
  }
  @media (max-width: 767px) {
  .carritonotif .conficon {
    max-width: 80px;
  }  
  .carritonotif .confdesc {
    font-size: 16px;
  }
  }
  
  /* Modals */
  
  .modal-dialog {
      margin-top: 45px !important;
  }
  
  .modal-content {
      border-radius: 15px !important;
      overflow: hidden;
  }
  .modal-content .modalclose {
    color: #0057b8;
    background-color: white;
    font-size: 15px;
    padding: 3px 20px;
    border: none;
    border-radius: 0 0 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    transition: .3s;
  }
  .modal-content .modalclose:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  /* Formularios generales */
  
  .formgen .forminput, .formgen .formselect, .formgen .formcolor {
    position: relative;
    margin-top: 10px;
    animation-delay: .1s;
  }
  .formgen .disabled {
    pointer-events: none;
    opacity: .5;
  }
  .formgen .row {
    padding: 0 9px;
  }
  .formgen .forminput label, .formgen .formselect label, 
  .formgen .formtext label, .formgen .formcolor label {
      width: 100%;
    font-size: 11px;
    color: #0057b8;
    text-align: left;
    font-weight: 800;
    line-height: 1.3;
      border-radius: 15px !important;
      overflow: hidden;
      position: absolute;
      top: 8px;
      left: 10px;
      pointer-events: none;
  }
  .formgen .formselect select {
      appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 22px 27px 5px 10px;
  }
  .formgen .forminput input {
    padding: 22px 10px 5px 10px;
  }
  .formgen .formcolor {
    padding: 26px 8px 8px 8px;
  }
  .formgen .forminput input, .formgen .formselect select, .formgen .formcolor {
      width: 100%;
      font-size: 14px;
    color: #181818;
    font-weight: 500;
    background-color: #dddddd;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .3s;
  }
  .formgen .formtext {
    width: 100%;
    min-height: 32px;
    background-color: #dddddd;
    display: flex;
    position: relative;
      border-radius: 5px;
      transition: .3s;
  }
  .formgen .formtext textarea {
    width: 100%;
    min-height: 32px;
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    line-height: 1.3;
    background-color: transparent;
      border: none;
      outline: none;
    padding: 0 8px 8px 8px;
    margin: 25px 0 0;
      transition: .3s;
  }
  .formgen .formcolor {
      width: 100%;
    background-color: #dddddd;
    display: flex;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .3s;
  }
  .formgen .formcolor input {
      appearance: none;
    width: 100%;
    height: 10px;
    background-color: gray;
    border-radius: 5px;
    margin: 2px;
    cursor: pointer;
    opacity: .5;
    transition: .3s;
  }
  .formgen .formselect option:first-child {
    display: block !important;
  }
  .formgen .formcolor input:hover {
    opacity: 1;
  }
  .formgen .formcolor input:checked {
    opacity: 1;
  }
  @media (max-width: 767px) {
    .formgen .forminput label, .formgen .formselect label {
      font-size: 10px;
    }  
    .formgen .forminput input, .formgen .formselect select  {
      font-size: 12px;
    }
    .formgen .formcolor input {
      height: 20px;
    }
  }
  .formgen .forminput input:hover, 
  .formgen .formselect select:hover, 
  .formgen .formtext:hover,
  .formgen .formcolor:hover, 
  .formgen .forminput input:focus, 
  .formgen .formselect select:focus,
  .formgen .formtext:focus,
  .formgen .formcolor:focus {
    background-color: #e7e7e7;
  }
  .formgen .formselect::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f078";
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    right: 10px;
    pointer-events: none;
  }
  
  
  .formgen .formquotesub {
    width: 100%;
    height: 67px;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
  }
  .formgen .formquotesub .btn,
  .formgen .formquotesub .btn:focus {
    color: white;
    background-color: #0057b8;
    width: 120px;
    font-size: 14px;
    font-weight: 600;
    padding: 5px;
    border-radius: 0;
    border: none;
    position: relative;
    transition: .3s;
  }
  .formgen .formquotesub .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .formgen .formquotesub .cont {
    width: 100%;
    background-color: #dddddd;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
  }
  .formgen .formquotesub .price {
    color: #181818;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0;
  }
  .formgen .formquotesub .tax {
    color: #0057b8;
    font-size: 14px;
    font-weight: 700;
  }
  .formgen .formquotesub .loading {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    margin: 0;
  }
  @media (max-width: 767px) {
    .formgen .formquotesub .btn,
    .formgen .formquotesub .btn:focus {
      font-size: 12px;
    }
    .formgen .formquotesub .price {
      font-size: 20px;
    }
    .formgen .formquotesub .tax {
      font-size: 12px;
    }
  }
  
  
  .formgen .formbtn,
  .formgen .formbtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .formgen .formbtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .formgen .genbtn,
  .formgen .genbtn:focus {
    color: #181818;
    background-color: #d3d3d3;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    transition: .3s;
    animation-delay: .1s;
  }
  .formgen .genbtn:hover {
    background-color: #e7e7e7;
  }
  .formgen .formbtn svg,
  .formgen .genbtn svg {
    margin-right: 3px;
  }
  .formgen .formbtn i,
  .formgen .genbtn i {
    margin-right: 3px;
  }
  .formgen .formbtn:disabled,
  .formgen .genbtn:disabled {
    opacity: .5;
  }
  @media (max-width: 767px) {
  .formgen .formbtn,
  .formgen .formbtn:focus,
  .formgen .genbtn,
  .formgen .genbtn:focus {
    font-size: 12px;
    padding: 7px 30px;
  }
  }
  
  /* Formularios de Bitrix */
  
  .b24form .b24-form-control,
  .b24form .b24-form-control-label,
  .b24form .b24-form-field-agreement-link,
  .b24form .b24-form .b24-form-sign-abuse-link,
  .b24form .b24-form-btn {
    font-family: 'Muli' !important;
  }
  
  .b24form .b24-form-padding-side {
    padding-left: 0;
    padding-right: 0;
  }
  
  .b24form .b24-form-wrapper {
    margin: 0;
    max-width: 100%;
  }
  
  .b24form .b24-form-control {
    color: #181818 !important;
    background-color: #dddddd !important;
      border-radius: 5px !important;
      border: none !important;
      outline: none;
      transition: .3s;
  }
  
  .b24form .b24-form-control:hover,
  .b24form .b24-form-control:focus {
    background-color: #e7e7e7 !important;
  }
  
  .b24form .b24-form-control-label {
    color: #0057b8 !important;
    font-size: 13px;
    font-weight: 800;
    opacity: 1;
  }
  
  .b24form .b24-form-btn, .b24form .b24-form-btn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: .3s;
    animation-delay: .1s;
  }
  
  .b24form .b24-form-btn:hover {
    color: white;
    background-color: #4ba7ff;
  }





.b24-form a, .b24-form a:not([href]), .b24-form a:not([href]):not([tabindex]) {
    font-family: 'Muli';
}
.b24-form-control-add-btn:after, .b24-form-control-add-btn:before {
    height: 2px !important;
    background-color: #0057b8 !important;
}
  
  
  
  .formgen .forminput input {
    padding: 22px 10px 5px 10px;
  }
  .formgen .forminput input, .formgen .formselect select {
      width: 100%;
      font-size: 14px;
    color: #181818;
    font-weight: 500;
    background-color: #dddddd;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .3s;
  }
  @media (max-width: 767px) {
  .formgen .forminput label, .formgen .formselect label {
    font-size: 10px;
  }  
  .formgen .forminput input, .formgen .formselect select {
    font-size: 12px;
  }
  }
  .formgen .forminput input:hover, .formgen .formselect select:hover,
  .formgen .forminput input:focus, .formgen .formselect select:focus {
    background-color: #e7e7e7;
  }
  .formgen .formselect::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f078";
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    right: 10px;
    pointer-events: none;
  }
  
  /* Modals formulario */
  
  .modal-content .forminput, .modal-content .formselect {
    position: relative;
    margin-top: 10px;
    animation-delay: .1s;
  }
  .modal-content .formselect:first-child {
    margin-top: 0;
  }
  .modal-content .forminput label, .modal-content .formselect label {
      width: 100%;
    font-size: 11px;
    color: #0057b8;
    text-align: left;
    font-weight: 800;
      border-radius: 15px !important;
      overflow: hidden;
      position: absolute;
      top: 8px;
      left: 10px;
      pointer-events: none;
  }
  .modal-content .formselect select {
      appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 22px 27px 5px 10px;
  }
  .modal-content .forminput input {
    padding: 22px 10px 5px 10px;
  }
  .modal-content .forminput input, .modal-content .formselect select {
      width: 100%;
      font-size: 14px;
    color: #181818;
    font-weight: 500;
    background-color: #ededed;
      border-radius: 5px;
      border: none;
      outline: none;
      transition: .3s;
  }
  @media (max-width: 767px) {
  .modal-content .forminput label, .modal-content .formselect label {
    font-size: 10px;
  }  
  .modal-content .forminput input, .modal-content .formselect select {
    font-size: 12px;
  }
  }
  .modal-content .forminput input:hover, .modal-content .formselect select:hover,
  .modal-content .forminput input:focus, .modal-content .formselect select:focus {
    background-color: white;
  }
  .modal-content .formselect::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f078";
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    right: 10px;
    pointer-events: none;
  }
  .modal-content form {
    text-align: center;
  }
  .modal-content .formbtn,
  .modal-content .formbtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .modal-content .formbtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .modal-content .genbtn,
  .modal-content .genbtn:focus {
    color: #181818;
    background-color: #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    transition: .3s;
    animation-delay: .1s;
  }
  .modal-content .genbtn:hover {
    background-color: white;
  }
  .modal-content .formbtn svg,
  .modal-content .genbtn svg {
    margin-right: 3px;
  }
  .modal-content .formbtn:disabled,
  .modal-content .genbtn:disabled {
    opacity: .5;
  }
  @media (max-width: 767px) {
  .modal-content .formbtn,
  .modal-content .formbtn:focus,
  .modal-content .genbtn,
  .modal-content .genbtn:focus {
    font-size: 12px;
    padding: 7px 15px;
  }
  }
  .modal-.footer-main button {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border: none;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .modal-.footer-main button:hover {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .modal-.footer-main button {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  /* Acordeon */
  
  .accord {
    width: 100%;
  }
  .accord-collapse {
    display: none;
    overflow: hidden;
  }
  
  /* Megamenu */
  
  .m2 {
      /*background-color: #004591;*/
      background-color: #0057b8;
      padding: 0px 10px 4px 10px;
  }
  
  @media (max-width: 767px) {
  .m2 {
      display: none;
  }
  }
  
  
  .m2 .nav-item{
      position: relative;
  }
  .m2 .menu ul, .navbar-nav .submenu ul {
      padding-left: 0;
  }
  
  
  
  .m2 .nav-item:first-child .nav-link {
      margin: 0;
  }
  
  .m2 .nav-link, .m2 .nav-link:focus {
      color: white;
      font-size: 14px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 5px;
      margin: 0 0 0 3px;
      transition: .3s;
  }
  
  .m2 .nav-link:hover, .m2 .nav-item.open:hover .nav-link {
      color: white;
      background-color: #4ba7ff !important;
  }
  
  .m2 .highl .nav-link {
      background-color: #157cde;
  }
  
  
  
  
  .m2 .nav-item.catbtn > a > svg {
      margin-right: 3px;
  }
  .m2 .nav-item.open > a {
      padding-right: 24px;
  }
  .m2 .nav-item.open > a::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f078";
    font-size: 12px;
    position: absolute;
    top: 60%;
    right: 7px;
    transform: translateY(-60%);
  }
  
  
  
  
  .m2 .menu-item {
      list-style: none;
  }
  .m2 .menu-item > a {
      color: black;
      background-color: transparent;
      list-style: none;
      font-size: 13px;
      line-height: 1.1;
      padding: 7px 8px;
      position: relative;
      width: 100%;
      display: inline-block;
      transition: .3s;
  }
  .m2 .menu-item:hover > a {
      color: white;
      background-color: #4ba7ff;
  }
  .m2 .menu-item .activelink1 {
      color: white;
      background-color: #4ba7ff;
  }
  
  .m2 .menu-item .activelink2 {
      color: #181818 !important;
      background-color: #e1e1e1 !important;
  }
  
  .m2 .menu-item .activelink2 > a::after {
    color: white;
  }
  
  
  
  
  .megmenu .navbar {
      padding: 0;
  }
  
  
  
  
  .m2 .nav-item.open > .menu {
    padding: 7.5px 0 0 0;
    position: absolute;
    top: 18px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 999999;
  }
  .m2 .menu-item.open > .submenu {
    padding: 7.5px 0 0 0;
    position: absolute;
    top: 0px;
    left: 80%;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: -1;
  }
  .m2 .nav-item.open:hover > .menu {
      top: 24px;
    pointer-events: auto;
    opacity: 1;
  }
  .m2 .menu-item.open:hover > .submenu {
      left: 100%;
    pointer-events: auto;
    opacity: 1;
  }
  .m2 .nav-item.open .menu .menu-item.open:hover > .submenu {
  }
  .m2 .nav-item.open .menu .container,
  .m2 .menu-item.open .submenu .container {
    background-color: white;
    padding: 10px 0;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
    width: 140px;
  }
  
  
  
  
  
  .m2 .nav-item.open .menu ul,
  .m2 .nav-item.open .submenu ul {
    height: 250px;
    overflow-y: auto;
  }
  .m2 .nav-item.open .menu ul::-webkit-scrollbar,
  .m2 .nav-item.open .submenu ul::-webkit-scrollbar {
      width: 0px;
    background-color: white;
  }
  .m2 .nav-item.open .menu ul::-webkit-scrollbar-thumb,
  .m2 .nav-item.open .submenu ul::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
  }
  
  
  
  
  .m2 .scrollbar {
      display: block;
      background-color: #0057b8;
      border-radius: 6px;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 3px;
      height: 100px;
      margin-top: 14px;
      pointer-events: none;
  }
  
  
  
  
  .m2 .menu-item.open > a {
      padding: 7px 24px 7px 8px;
  }
  .m2 .menu-item.open > a::after {
    font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f054";
    font-size: 13px;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
  }
  
  /* Menu movil */
  
  .m3 {
      background-color: white;
      box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      display: none;
      padding: 0px 35px;
      z-index: 999;
  }
  @media (max-width: 767px) {
  .m3 {
      display: block;
  }
  }
  .m3 table {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .m3 .movbtn {
      width: 25%;
      padding: 0;
  }
  
  .m3 .movbtn button, .m3 .movbtn button:focus {
      width: 100%;
      background-color: white;
      border: none;
      padding: 10px 10px;
      outline: none;
      transition: .3s;
  }
  
  .m3 .movbtn button i, .m3 .movbtn button svg {
      color: #181818;
      font-size: 28px;
  }
  
  .m3 .movbtn.active button {
      background-color: #ededed;
  }
  
  .m3 .movbtn.active button i, .m3 .movbtn.active button svg {
      color: #0057b8;
  }
  
  .m3 .cartq {
      color: white;
      font-size: 12px;
      background-color: #4ba7ff;
      padding: 3px 5px;
      margin: 0 0 0 3px;
      border-radius: 5px;
      vertical-align: 5px;
  }
  
  .offcanvas-backdrop {
      width: 100% !important;
      height: 100% !important;
  }
  
  .menumov.offcanvas {
      width: 70% !important;
      max-width: 330px;
      z-index: 9999999;
  }
  
  .menumov .offcanvas-header {
      background-color: #0057b8;
      padding: 10px 20px;
  }
  
  .menumov .offcanvas-title {
      color: white;
      font-size: 19px;
      font-weight: 600;
  }
  
  .menumov .offcanvas-header button {
      background-color: transparent;
      border: none;
      outline: none;
      width: 17px;
      height: 27px;
      position: relative;
  }
  
  .menumov .offcanvas-header button i {
      color: white;
      font-size: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateZ(0);
  }
  
  .menumov .offcanvas-body {
      padding: 20px 10px;
  }
  
  
  .offcanvas-body {
    overflow-y: auto !important; /* ✅ Usa 'auto' en lugar de 'scroll' */
    -webkit-overflow-scrolling: touch; /* Permite scroll suave en iOS */
  }
  
  
  .menumov .menu-item {
      list-style: none;
  }
  .menumov .menu-item a {
      color: #181818;
      background-color: transparent;
      list-style: none;
      font-size: 13px;
      line-height: 1.1;
      padding: 7px 12px;
      border-radius: 20px;
      position: relative;
      width: 100%;
      display: inline-block;
      transition: .3s;
  }
  .menumov .menu-item a:hover {
      background-color: #f0f0f0;
  }
  .menumov .menu-item .activelink {
      color: white;
      background-color: #4ba7ff;
  }
  .menumov .menu-item .activelink:hover {
      background-color: #4ba7ff;
  }
  .menumov .menu-item .activelink2 {
      color: #181818;
      background-color: #d1d1d1;
  }
  .menumov .menu-item .activelink2:hover {
    background-color: #d1d1d1;
  }
  
  
  
  
  .menumov .submenu {
      max-height: 0;
      overflow: hidden;
      /*transition: max-height .5s cubic-bezier(0, 0, 0.2, 1);*/
  }
  
  .menumov .submenu.open {
    max-height: 20000px; /* Altura máxima realista */
  }
  
  
  .menumov .menu .container {
      padding: 0;
  }
  .menumov .submenu .container {
      padding: 10px 0 10px 15px;
    border-left: 4px solid #f5f5f5;
  }
  .menumov .menu ul,
  .menumov .submenu ul {
      padding: 0;
    overflow-y: visible;
  }
  
  
  
  
  .menumov .menu-item.open > a {
    padding: 7px 32px 7px 12px;
    position: relative;
  }
  .menumov .menu-item.open > a::after {
    font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f078";
    font-size: 13px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }
  
  /* Menu secundario (Catalogos) */
  
  .menumov .offcanvas-newcont {
    width: 100%;
    background-color: #d7d7d7;
    padding: 20px 10px;
  }
  .menumov .offcanvas-newcont .btn, .menumov .offcanvas-newcont .btn:focus {
    color: white;
    background-color: #252525;
    list-style: none;
    font-size: 13px;
    text-align: left;
    line-height: 1.1;
    padding: 7px 12px;
    margin: 0 0 5px;
    border-radius: 20px;
    position: relative;
    width: 100%;
    display: inline-block;
    transition: .3s;
  }
  .menumov .offcanvas-newcont .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .menumov .offcanvas-newcont .btn:last-child {
    margin: 0 0 0;
  }
  
  /* Menu bootstrap */
  
  /* 1. Fuerza aceleración GPU para animaciones (crucial para iOS) */
  .menu .accordion-item {
    width: 100%;
    border: none;
    border-radius: 0;
    transform: translateZ(0); /* Nueva línea */
  }
  
  /* 2. Mejora para botones del acordeón */
  .menu .accordion-button {
    color: #181818;
    background-color: transparent;
    list-style: none;
    font-size: 13px;
    line-height: 1.1;
    padding: 7px 12px;
    border-radius: 20px !important;
    outline: none;
    position: relative;
    width: 100%;
    display: inline-block;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent; 
  }
  
  .menu .accordion-button.open {
    padding: 7px 32px 7px 12px;
    position: relative;
  }
  
  .menu .accordion-button:focus {
    box-shadow: none;
  }
  .menu .accordion-button:hover {
    color: #181818;
    background-color: #f0f0f0
  }
  
  .menu .accordion-button::after {
    content: none;
    width: auto;
    height: auto;
    background-image: none;
  }
  
  .menu .accordion-button.open::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 13px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(0deg); 
    transition: transform 0.3s ease; /* Animación suave */
    backface-visibility: hidden; /* Mejora renderizado en iOS */
  }
  
  .menu .accordion-button:not(.open)::after {
    transform: translateY(-50%) rotate(180deg); 
  }
  
  .menu .activelink {
    color: white;
    background-color: #4ba7ff;
  }
  .menu .activelink:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .menu .activelink2 {
    color: #181818;
    background-color: #d1d1d1;
  }
  
  .menu .accordion-collapse {
    width: 100%;
    overflow: hidden;
    transition: height 0.3s ease; /* Transición alternativa */
  }
  
  .menu .accordion-body {
    padding: 10px 0 10px 15px;
    border-left: 4px solid #f5f5f5;
    will-change: height; /* Optimización para animaciones */
  }
  
  /* Slider */
  
  .carouselback {
      background-color: #0057b8;
      background: linear-gradient(180deg, #0057b8 70%, #004491 100%);
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
      transition: .3s;
  }
  
  .bannercarousel {
      padding: 80px 10px 0 10px;
      transition: .3s;
  }
  
  @media (max-width: 767px) {
  .carouselback {
      height: 150px;
  }	
  .bannercarousel {
      padding: 48px 10px 0 10px;
  }
  }
  
  
  
  .carousel-fade .carousel-inner .carousel-item {
    opacity: 0;
    transition: opacity .5s ease-in-out;
  }
  
  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }
  
  
  
  .bannercarousel .carousel {
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
  }
  @media (max-width: 767px) {
  .bannercarousel .carousel {
      border-radius: 20px;
  }
  }
  @media (max-width: 576px) {
  .bannercarousel .carousel {
      border-radius: 15px;
  }
  }
  
  .bannercarousel .carousel-control-next,
  .bannercarousel .carousel-control-prev {
      width: 45px;
      transition: .3s;
  }
  
  .bannercarousel .carousel-control-next svg,
  .bannercarousel .carousel-control-prev svg {
      font-size: 30px;
  }
  
  .bannercarousel .carousel-control-prev-icon,
  .bannercarousel .carousel-control-next-icon {
      /*filter: sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%);*/
  }
  @media (max-width: 767px) {
  .bannercarousel .carousel-control-next svg,
  .bannercarousel .carousel-control-prev svg {
      display: none;
  }
  .bannercarousel .carousel-control-prev-icon,
  .bannercarousel .carousel-control-next-icon {
      display: none;
  }
  }
  
  .bannercarousel .carousel-indicators {
      margin: 0 0 5px 0;
      left: 70px;
      right: auto;
  }
  
  @media (max-width: 1200px) {
  .bannercarousel .carousel-indicators {
      left: 50px;
  }
  }
  @media (max-width: 767px) {
  .bannercarousel .carousel-indicators {
      left: 30px;
  }
  }
  @media (max-width: 576px) {
  .bannercarousel .carousel-indicators {
      left: 20px;
  }
  }
  
  .bannercarousel .carousel-indicators [data-bs-target] {
      /*background-color: #b7b7b7;*/
      height: 5px;
      border-radius: 5px;
      transition: .3s;
  }
  @media (max-width: 767px) {
  .bannercarousel .carousel-indicators [data-bs-target] {
      width: 20px;
  }
  }
  
  .bannercarousel .carousel-item {
      overflow: hidden;
      background-color: #f5f5f5;
      height: 370px;
  }
  @media (max-width: 767px) {
  .bannercarousel .carousel-item {
      height: 290px;
  }
  }
  @media (max-width: 576px) {
  .bannercarousel .carousel-item {
      height: 225px;
  }
  }
  
  .bannercarousel .caption {
      width: 40%;
      position: absolute;
      left: 70px;
      top: 50%;
      transform: translateY(-50%) scale(1);
      transform-origin: center left;
      transition: .3s;
  }
  
  @media (max-width: 1200px) {
  .bannercarousel .caption {
      width: 55%;
      left: 50px;
      transform: translateY(-50%) scale(.7);
  }
  }
  @media (max-width: 767px) {
  .bannercarousel .caption {
      width: 65%;
      left: 30px;
      transform: translateY(-50%) scale(.6);
  }
  }
  @media (max-width: 576px) {
  .bannercarousel .caption {
      width: 75%;
      left: 20px;
      transform: translateY(-50%) scale(.5);
  }
  }
  
  /* Banner */
  
  
  /*
  @media (max-width: 767px) {
  .animated, .fadeIn, .fadeInUp {
      animation-duration: 0s !important;
      animation-delay: 0s !important;
      transition: 0 !important;
  }
  }
  */
  
  .bannercarousel .back {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    background-size: 320px auto;
    transform-origin: 80% center;
    animation: backzoom 15s infinite;
  }
  @keyframes backzoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.25) }
    100% { transform: scale(1) }
  }
  
  
  .bannercarousel .back3 {
      width: 1400px;
      position: absolute;
      top: 50%;
      left: 47%;
      transform: translate(-50%,-50%);
      transition: .3s;
  }
  .bannercarousel .back3 .cls-1 {
      fill: white;
  }
  @media (max-width: 992px) {
  .bannercarousel .back3 {
      left: 50%;
  }
  }
  @media (max-width: 767px) {
  .bannercarousel .back3 {
      width: 1000px;
      left: 50%;
  }
  }
  @media (max-width: 576px) {
  .bannercarousel .back3 {
      width: 800px;
      left: 50%;
  }
  }
  
  
  .bannercarousel .text {
      width: 100%;
      animation-duration: 1s;
      animation-delay: .5s;
      display: block;
      transition: .3s;
  }
  
  .bannercarousel .tittle {
      color: #434343;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
      margin: 0;
  }
  
  .bannercarousel .buttons {
      width: 110%;
      display: block;
      margin: 25px 0 0 0;
      animation-duration: 1s;
      animation-delay: 1.2s;
      transform: scale(1);
      transform-origin: center left;
  }
  
  @media (max-width: 1200px) {
  .bannercarousel .buttons {
      transform: scale(1.1);
  }
  }
  
  .bannercarousel .btn1, .bannercarousel .btn1:focus {
      color: white;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      background-color: #0057b8;
      border: none;
      outline: none;
      text-decoration: none;
      padding: 8px 13px;
      border-radius: 5px;
      margin: 4px 2px;
      transition: .3s;
  }
  
  .bannercarousel .btn1:hover {
      background-color: #4ba7ff;
  }
  
  /* Banner AG plus */
  
  .plussec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .plussec {
    padding: 20px 0 0 0;
  }
  }
  
  .p-banner {
      padding: 0 !important;
  }
  
  @media (max-width: 1200px) {
  .p-banner {
      padding: 0 10px !important;
  }
  }
  
  .plussec .grid {
      height: 100%;
      background-color: #363636;
      border-radius: 15px;
      overflow: hidden;
      padding: 0 0 0 50%;
      position: relative;
  }
  .plussec .grid:hover {
  }
  @media (max-width: 767px) {
  .plussec .grid {
  }
  }
  @media (max-width: 576px) {
  .plussec .grid {
  }
  }
  .plussec .grid .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .plussec .grid .img img {
      width: 110%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 27%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .8;
      transition: .3s;
  }
  .plussec .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      opacity: 1;
  }
  .plussec .grid .img video {
      width: 60%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 25%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: 1;
      transition: .3s;
  }
  .plussec .grid .info {
      background: #242424;
      /*backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);*/
      position: relative;
      padding: 45px 60px 90px 60px;
      height: 100%;
      transition: .3s;
  }
  .plussec .grid:hover .info {
      background: #353535;
  }
  @media (max-width: 767px) {
  .plussec .grid .info {
      padding: 20px 30px 57px 30px;
  }
  .plussec .grid .img video {
      width: 55%;
  }
  }
  @media (max-width: 576px) {
  .plussec .grid .info {
      padding: 20px 13px 57px 13px;
  }	
  .plussec .grid .img img {
  }
  .plussec .grid .img video {
      width: 75%;
  }
  }
  .plussec .grid .desc {
      color: white;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .plussec .grid .desc img {
      width: 130px;
      vertical-align: -5px;
      margin: 0 2px;
  }
  .plussec .grid .buttons {
      width: 100%;
      padding: 0px 60px 45px 60px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .plussec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .plussec .grid:hover .btn {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .plussec .grid .desc {
      color: #dddddd;
      font-size: 13px;
      line-height: 1.2;
  }
  .plussec .grid .desc img {
      width: 73px;
      vertical-align: -2px;
      margin: 0;
  }
  .plussec .grid .buttons {
      padding: 0px 30px 20px 30px;
  }
  .plussec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  @media (max-width: 576px) {
  .plussec .grid .buttons {
      padding: 0px 13px 20px 13px;
  }
  }
  
  /* Banners informativos */
  
  .mbanner {
      max-width: 1222px !important;
    display: block;
    margin: 35px auto -3px;
    padding: 0 10px;
  }
  
  .mbanner .img {
    overflow: hidden;
      border-radius: 15px;
  }
  
  .mbanner .mdesktop {
      width: 100%;
    height: auto;
  }
  
  .mbanner .mmobile {
      width: 100%;
    height: auto;
    display: none;
  }
  
  @media (max-width: 576px) {
    .mbanner .mdesktop {
      display: none;
    }
    .mbanner .mmobile {
      display: block;
    }
  }
  
  /* Seccion recomendados */
  
  .recosec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .recosec {
    padding: 20px 0 0 0;
  }
  }
  
  .recosec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .recosec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .recosec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .recosec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .recosec .grid {
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
      overflow: hidden;
    position: relative;
      transition: .3s;
  }
  .recosec .grid:hover {
      background-color: white;
  }
  .recosec .grid .img {
      height: 140px;
      position: relative;
      overflow: hidden;
      background-color: white;
  }
  @media (max-width: 767px) {
  .recosec .grid .img {
      height: 120px;
  }
  }
  .recosec .grid .img img {
      width: auto;
      height: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .75;
      transition: .3s;
  }
  .recosec .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      pointer-events: none;
      opacity: 1;
  }
  .recosec .grid .img .back {
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .recosec .grid .info {
      position: relative;
      /*padding: 23px 17px 50px 17px;*/
    padding: 23px 17px 23px 17px;
  }
  @media (max-width: 767px) {
  .recosec .grid .info {
      padding: 20px 13px 42px 13px;
  }
  }
  .recosec .grid .part {
      color: #0057b8;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.1;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .recosec .grid .manuf {
      color: #181818;
      font-size: 10px;
      font-weight: 600;
      margin: 0 0 10px 0;
  }
  .recosec .grid .manuf span {
      font-weight: 800;
  }
  .recosec .grid .desc {
      color: #181818;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .recosec .grid .price {
      color: #181818;
      font-size: 17px;
      font-weight: 700;
      margin: 0 0 0 0;
      position: absolute;
      bottom: 18px;
      left: 17px;
  }
  .recosec .grid .tax {
      color: #0057b8;
      font-size: 10px;
      font-weight: 700;
  }
  @media (max-width: 767px) {
  .recosec .grid .part {
      font-size: 13px;
  }
  .recosec .grid .manuf {
      font-size: 9px;
  }
  .recosec .grid .desc {
      font-size: 12px;
  }
  .recosec .grid .price {
      font-size: 15px;
      bottom: 13px;
      left: 13px;
  }
  .recosec .grid .tax {
      font-size: 9px;
  }
  }
  
  /* Seccion recomendados 2 */
  
  .recosec2 {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .recosec2 {
    padding: 20px 0 0 0;
  }
  }
  
  
  .recosec2 .headtittle {
      padding: 0px 18px 20px 18px;
  }
  .recosec2 .headtittle h2 {
      color: #181818;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      margin: 0;
  }
  .recosec2 .headtittle svg {
      width: 100%;
      max-width: 70px !important;
  }
  .recosec2 .tittle {
      padding: 0px 18px 20px 18px;
  }
  .recosec2 .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .recosec2 .headtittle h2 {
      font-size: 20px;
  }
  .recosec2 .headtittle svg {
      max-width: 55px ;
  }	
  .recosec2 .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .recosec2 .tittle h3 {
      font-size: 16px;
  }
  }
  @media (max-width: 576px) {
  .recosec2 .headtittle h2 {
      text-align: center;
  }
  }
  
  
  
  .recosec2 .grid {
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      transition: .3s ease;
  }
  .recosec2 .grid:hover {
      background-color: white;
  }
  .recosec2 .grid .img {
      height: 140px;
      position: relative;
      overflow: hidden;
      background-color: white;
  }
  @media (max-width: 767px) {
  .recosec2 .grid .img {
      height: 120px;
  }
  }
  @media (max-width: 576px) {
    .recosec2 .owl-item .slide .item {
      margin-bottom: 0px;
    }
  }
  .recosec2 .grid .img img {
      width: auto;
      height: 150%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .75;
      transition: .3s;
  }
  .recosec2 .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      pointer-events: none;
      opacity: 1;
  }
  .recosec2 .grid .img .back {
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .recosec2 .grid .info {
      position: relative;
      padding: 23px 17px 70px 17px;
    transition: .3s;
  }
  @media (max-width: 767px) {
  .recosec2 .grid .info {
      padding: 20px 13px 58px 13px;
  }
  }
  .recosec2 .grid .tittle {
      color: #181818;
      font-size: 18px;
      letter-spacing: -1%;
      font-weight: 700;
      line-height: 1.1;
      padding: 0;
      word-wrap: break-word;
      margin: 0 0 10px 0;
  }
  .recosec2 .grid .desc {
      color: #181818;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .recosec2 .grid .buttons {
      width: 100%;
      padding: 0px 17px 26px 17px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .recosec2 .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 5px 0 0 0;
    transition: .3s;
  }
  .recosec2 .grid:hover .btn {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .recosec2 .grid .tittle {
      font-size: 15px;
  }	
  .recosec2 .grid .desc {
      font-size: 12px;
  }
  .recosec2 .grid .buttons {
      padding: 0px 13px 20px 13px;
  }
  .recosec2 .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  
  
  
  #catecomp .recosec2 .tittle {
    color: #1173e7;
  }
  #catecomp .recosec2 .headtittle svg .cls-border {
    fill: #1173e7;
  }
  #catecomp .recosec2 .grid .btn {
    background-color: #1173e7;
  }
  #catecomp .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #catetarj .recosec2 .tittle {
    color: #f12a65;
  }
  #catetarj .recosec2 .headtittle svg .cls-border {
    fill: #f12a65;
  }
  #catetarj .recosec2 .grid .btn {
    background-color: #f12a65;
  }
  #catetarj .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #cateener .recosec2 .tittle {
    color: #da291c;
  }
  #cateener .recosec2 .headtittle svg .cls-border {
    fill: #da291c;
  }
  #cateener .recosec2 .grid .btn {
    background-color: #da291c;
  }
  #cateener .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #cateilum .recosec2 .tittle {
    color: #ae46c9;
  }
  #cateilum .recosec2 .headtittle svg .cls-border {
    fill: #ae46c9;
  }
  #cateilum .recosec2 .grid .btn {
    background-color: #ae46c9;
  }
  #cateilum .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #cate3d .recosec2 .tittle {
    color: #00979d;
  }
  #cate3d .recosec2 .headtittle svg .cls-border {
    fill: #00979d;
  }
  #cate3d .recosec2 .grid .btn {
    background-color: #00979d;
  }
  #cate3d .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #cateinst .recosec2 .tittle {
    color: #d69d00;
  }
  #cateinst .recosec2 .headtittle svg .cls-border {
    fill: #d69d00;
  }
  #cateinst .recosec2 .grid .btn {
    background-color: #d69d00;
  }
  #cateinst .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  #catevant .recosec2 .tittle {
    color: #74af63;
  }
  #catevant .recosec2 .headtittle svg .cls-border {
      fill: #74af63;
  }
  #catevant .recosec2 .grid .btn {
    background-color: #74af63;
  }
  #catevant .recosec2 .grid .btn:hover {
    background-color: #4ba7ff;
  }
  
  
  
  
  
  
  /* Seccion categorias */
  
  .catesec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .catesec {
    padding: 20px 0 0 0;
  }
  }
  
  
  .catesec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .catesec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .catesec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .catesec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .catesec .grid {
      background-color: #f0f0f0;
      padding: 80px 15px 12px 15px;
      border-radius: 15px;
      height: 100%;
      transition: .3s;
  }
  .catesec .grid:hover {
      background-color: white;
  }
  @media (max-width: 767px) {
  .catesec .grid {
      padding: 80px 10px 10px 10px;
  }
  }
  
  .catesec .grid svg {
      width: 55px;
      height: auto;
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%) scale(1);
      transform-origin: center;
      pointer-events: none;
      transition: .3s;
  }
  .catesec .grid:hover svg {
      transform: translateX(-50%) scale(1.1);
  }
  .catesec .grid .cls-border {
      transition: .5s;
  }
  .catesec .catecomp:hover .cls-border {
      fill: #4ba7ff;
  }
  .catesec .catetarj:hover .cls-border {
      fill: #f12a65;
  }
  .catesec .cateener:hover .cls-border {
      fill: #da291c;
  }
  .catesec .cateilum:hover .cls-border {
      fill: #ae46c9;
  }
  .catesec .cate3d:hover .cls-border {
      fill: #00979d;
  }
  .catesec .cateinst:hover .cls-border {
      fill: #f7b706;
  }
  .catesec .catevant:hover .cls-border {
      fill: #74af63;
  }
  @media (max-width: 767px) {
  .catesec .grid .icon {
  }
  }
  
  .catesec .grid .desc {
      color: #181818;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      /*hyphens: auto;*/
    word-wrap: break-word;
      margin: 0;
  }
  @media (max-width: 767px) {
  .catesec .grid .desc {
      font-size: 10px;
  }
  }
  
  /* Seccion shorts */
  
  .shortsec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .shortsec {
    padding: 20px 0 0 0;
  }
  }
  
  
  .shortsec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .shortsec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .shortsec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .shortsec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .shortsec .grid {
      background-color: #f0f0f0;
      border-radius: 15px;
      position: relative;
    padding-bottom: 177.77%;
    height: 0;
    overflow: hidden;
    transition: .3s;
  }
  .shortsec .grid:hover {
      background-color: white;
  }
  .shortsec .grid video {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
      opacity: .7;
      transition: .3s;
  }
  .shortsec .grid:hover video {
    opacity: 1;
  }
  @media (max-width: 767px) {
  .shortsec .grid {
  }
  }
  
  /* Seccion servicios */
  
  .servsec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .servsec {
    padding: 20px 0 0 0;
    display: none;
  }
  }
  
  
  .servsec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .servsec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .servsec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .servsec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .servsec .grid {
      height: 100%;
      background-color: #363636;
      border-radius: 15px;
      overflow: hidden;
      padding: 0 0 0 50%;
      position: relative;
  }
  .servsec .grid:hover {
  }
  @media (max-width: 767px) {
  .servsec .grid {
      padding: 0 0 0 45%;
  }
  }
  @media (max-width: 576px) {
  .servsec .grid {
      padding: 120px 0 0 0;
  }
  }
  .servsec .grid .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .servsec .grid .img img {
      width: 110%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 27%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .8;
      transition: .3s;
  }
  .servsec .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      opacity: 1;
  }
  .servsec .grid .info {
      background: linear-gradient(90deg, rgba(37,37,37,.7) 0%, rgba(37,37,37,1) 50%);
      /*backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);*/
      position: relative;
      padding: 35px 20px 77px 20px;
      height: 100%;
  }
  @media (max-width: 767px) {
  .servsec .grid .info {
      padding: 20px 13px 57px 13px;
  }
  }
  @media (max-width: 576px) {
  .servsec .grid .img img {
      width: 130%;
      top: 20%;
      left: 50%;
  }
  .servsec .grid .info {
      background: linear-gradient(-180deg, rgba(37,37,37,.8) 0%, rgba(37,37,37,1) 50%);
      /*backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
  }
  }
  .servsec .grid .tittle {
      color: white;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      padding: 0;
      word-wrap: break-word;
      margin: 0 0 10px 0;
  }
  .servsec .grid .desc {
      color: #dddddd;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.2;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .servsec .grid .buttons {
      width: 100%;
      padding: 0px 20px 35px 20px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .servsec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 5px 0 0 0;
    transition: .3s;
  }
  .servsec .grid:hover .btn {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .servsec .grid .tittle {
      font-size: 15px;
  }
  .servsec .grid .desc {
      font-size: 11px;
  }
  .servsec .grid .buttons {
      padding: 0px 13px 20px 13px;
  }
  .servsec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  /* Seccion blog */
  
  .blogsec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .blogsec {
    padding: 20px 0 0 0;
    display: none;
  }
  }
  
  
  .blogsec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .blogsec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .blogsec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .blogsec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .blogsec .grid {
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
      overflow: hidden;
      transition: .3s;
  }
  .blogsec .grid:hover {
      background-color: white;
  }
  .blogsec .grid .img {
      height: 140px;
      position: relative;
      overflow: hidden;
      background-color: white;
  }
  @media (max-width: 767px) {
  .blogsec .grid .img {
      height: 120px;
  }
  }
  .blogsec .grid .img img {
      width: 150%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .75;
      transition: .3s;
  }
  .blogsec .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      pointer-events: none;
      opacity: 1;
  }
  .blogsec .grid .img .back {
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .blogsec .grid .info {
      padding: 23px 17px 67px 17px;
  }
  @media (max-width: 767px) {
  .blogsec .grid .info {
      padding: 20px 13px 55px 13px;
  }
  }
  .blogsec .grid .tittle {
      color: #181818;
      font-size: 18px;
      letter-spacing: -1%;
      font-weight: 700;
      line-height: 1.1;
      padding: 0;
      word-wrap: break-word;
      margin: 0 0 10px 0;
  }
  .blogsec .grid .date {
      color: #181818;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.1;
      word-wrap: break-word;
      margin: 0 0 10px 0;
  }
  .blogsec .grid .date span {
      color: #0057b8;
      font-weight: 700;
  }
  .blogsec .grid .desc {
      color: #181818;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.1;
      word-wrap: break-word;
      margin: 0 0 0 0;
      max-height: 62px;
  }
  .blogsec .grid .descback1 {
      background: linear-gradient(0deg, #f0f0f0 52%, transparent 100%);
      width: 100%;
      height: 115px;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0 0 15px 15px;
      transition: .3s;
  }
  .blogsec .grid .descback2 {
      background: linear-gradient(0deg, white 40%, transparent 100%);
      width: 100%;
      height: 115px;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0 0 15px 15px;
      opacity: 0;
      transition: .3s;
  }
  .blogsec .grid:hover .descback2 {
      opacity: 1;
  }
  .blogsec .grid .buttons {
      width: 100%;
      padding: 0px 17px 26px 17px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .blogsec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 5px 0 0 0;
    transition: .3s;
  }
  .blogsec .grid:hover .btn {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .blogsec .grid .tittle {
      font-size: 15px;
  }
  .blogsec .grid .date {
      font-size: 9px;
  }
  .blogsec .grid .desc {
      font-size: 11px;
      max-height: 52px;
  }
  .blogsec .grid .descback1 {
      height: 95px;
  }
  .blogsec .grid .descback2 {
      height: 95px;
  }
  .blogsec .grid .buttons {
      padding: 0px 13px 20px 13px;
  }
  .blogsec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  /* Seccion filiales */
  
  .filisec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .filisec {
    padding: 20px 0 0 0;
    display: none;
  }
  }
  
  
  .filisec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .filisec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .filisec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .filisec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .filisec .grid {
      height: 100%;
      background-color: #363636;
      border-radius: 15px;
      overflow: hidden;
      padding: 0 0 0 45%;
      position: relative;
  }
  .filisec .grid:hover {
  }
  @media (max-width: 767px) {
  .filisec .grid {
      padding: 0 0 0 45%;
  }
  }
  @media (max-width: 576px) {
  .filisec .grid {
      padding: 120px 0 0 0;
  }
  }
  .filisec .grid .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .filisec .grid .img img {
      width: 110%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 27%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .8;
      transition: .3s;
  }
  .filisec .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      opacity: 1;
  }
  .filisec .grid .info {
      background: linear-gradient(90deg, rgba(37,37,37,.7) 0%, rgba(37,37,37,1) 50%);
      /*backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);*/
      position: relative;
      padding: 35px 20px 77px 20px;
      height: 100%;
  }
  .filisec .grid .info .cont {
      height: 100%;
      display: flex;
    justify-content: center;
    align-items: center;
  }
  @media (max-width: 767px) {
  .filisec .grid .info {
      padding: 20px 13px 57px 13px;
  }
  }
  @media (max-width: 576px) {
  .filisec .grid .img img {
      width: 130%;
      top: 20%;
      left: 50%;
  }
  .filisec .grid .info {
      background: linear-gradient(-180deg, rgba(37,37,37,.8) 0%, rgba(37,37,37,1) 50%);
      /*backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
  }
  }
  .filisec .grid .tittle {
      color: white;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      padding: 0;
      word-wrap: break-word;
      margin: 0 0 10px 0;
  }
  .filisec .grid .logo {
      width: 100%;
      max-width: 120px;
      height: auto;
      margin: 0 0 15px 0;
  }
  .filisec .grid .desc {
      color: #dddddd;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.1;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .filisec .grid .buttons {
      width: 100%;
      padding: 0px 20px 35px 20px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .filisec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 5px 0 0 0;
    transition: .3s;
  }
  .filisec .grid:hover .btn {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .filisec .grid .tittle {
      font-size: 15px;
  }
  .filisec .grid .logo {
      max-width: 100px;
      margin: 0 0 15px 0;
  }
  .filisec .grid .desc {
      font-size: 11px;
  }
  .filisec .grid .buttons {
      padding: 0px 13px 20px 13px;
  }
  .filisec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  /* Seccion marcas */
  
  .brandsec {
      max-width: 1200px !important;
      padding: 30px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .brandsec {
    padding: 20px 0 0 0;
  }
  }
  
  .brandsec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .brandsec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .brandsec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .brandsec .tittle h3 {
      font-size: 16px;
  }
  }
  
  .brandsec .grid {
      background-color: #252525;
      border-radius: 15px;
    overflow: hidden;
    z-index: 2;
      transition: .3s;
  }
  .brandsec .grid:hover {
      background-color: white;
  }
  .brandsec .grid .brandc {
      /*max-width: 250px;*/
      display: block;
      margin: 0 auto;
      opacity: 0;
      pointer-events: none;
      transition: .3s;
  }
  .brandsec .grid .brandm {
    /*max-width: 250px;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    transition: .3s;
  }
  .brandsec .grid:hover .brandm {
      opacity: 0;
  }
  .brandsec .grid:hover .brandc {
      opacity: 1;
  }
  @media (max-width: 767px) {
  .brandsec .grid {
  }
  }
  
  /* Seccion cuenta */
  
  .accountcover {
      background: #9e9e9e;
      width: 100%;
      height: 400px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
  }
  @media (max-width: 767px) {
  .accountcover {
      height: 550px;
  }
  }
  
  
  .accountsec {
      max-width: 1222px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .accountsec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  
  .accountsec .grid1 {
    background-color: white;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
  }
  
  
  
  .accountsec .infocont {
    padding: 40px 100px;
  }
  .accountsec .infocont .name {
    color: #181818;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: center;
    margin: 0;
  }
  .accountsec .infocont .mail {
    color: #181818;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: center;
    margin: 5px 0 0 0;
  }
  .accountsec .infocont .desc {
    color: #181818;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .accountsec .infocont .desc strong {
    font-weight: 800;
  }
  @media (max-width: 1070px) {
    .accountsec .infocont {
      padding: 30px 30px;
    }
  }
  @media (max-width: 767px) {
    .accountsec .infocont {
      padding: 30px 20px;
    }
    .accountsec .infocont .name {
      font-size: 25px;
    }
    .accountsec .infocont .mail {
      font-size: 13px;
    }
    .accountsec .infocont .desc {
      font-size: 20px;
    }
  }
  
  
  
  .accountsec .agpluscont {
    background: rgb(73,148,195);
    background: radial-gradient(circle, rgba(73,148,195,1) 0%, rgba(27,80,124,1) 100%);
    padding: 30px 100px;
  }
  .accountsec .agpluscont .desc {
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 0 0;
  }
  .accountsec .agpluscont .desc strong {
    font-weight: 800;
  }
  .accountsec .agpluscont .btn, .accountsec .agpluscont .btn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 5px 10px;
    transition: .3s;
  }
  .accountsec .agpluscont .btn:hover {
    background: #4ba7ff;
  }
  @media (max-width: 1070px) {
    .accountsec .agpluscont {
      padding: 20px 30px;
    }
  }
  @media (max-width: 767px) {
    .accountsec .agpluscont {
      padding: 20px 20px;
    }
    .accountsec .agpluscont .desc {
      font-size: 13px;
    }
    .accountsec .agpluscont .btn, .accountsec .agpluscont .btn:focus {
      font-size: 13px;
      padding: 7px 10px;
    }
  }
  @media (max-width: 485px) {
    .accountsec .agpluscont .btn, .accountsec .agpluscont .btn:focus {
      margin: 10px 0 0 0;
    }
  }
  
  
  
  .accountsec .borderbt {
    background: #0057b8;
    height: 22px;
  }
  
  
  
  .accountsec .grid2 {
    background-color: #f0f0f0;
    padding: 15px 30px 30px;
    border-radius: 15px;
    height: 100%;
    position: relative;
    transition: .3s;
  }
  
  .accountsec .grid2:hover {
    background-color: white;
  }
  
  .accountsec .grid2 .icon {
    width: 100%;
    height: 150px;
    position: relative;
  }
  
  .accountsec .grid2 img {
    width: 100%;
    max-width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: .3s;
  }
  
  .accountsec .grid2:hover img {
    transform: translate(-50%, -50%) scale(1.1);
  }
  
  
  .accountsec .grid2 .desc {
    color: #181818;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 0 0;
  }
  
  @media (max-width: 767px) {
    .accountsec .grid2 {
      padding: 10px 17px 20px;
    }
    .accountsec .grid2 .icon {
      width: 100%;
      height: 125px;
      position: relative;
    }
    .accountsec .grid2 img {
      max-width: 80px;
    }
    .accountsec .grid2 .desc {
      font-size: 18px;
    }
  }
  
  .accountsec .exitbtn, .accountsec .exitbtn:focus {
    max-width: 300px;
    color: #181818;
    background-color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    padding: 25px 35px;
    border: 0;
    border-radius: 10px;
    margin: 20px auto 0;
    position: relative;
    display: block;
    overflow: hidden;
    transition: .3s;
  }
  
  .accountsec .exitbtn:hover {
    color: #b54242;
    background-color: #ffd4d4;
  }
  
  /* Seccion resultados descripcion */
  
  .result {
      max-width: 1220px !important;
      padding: 110px 0 0 !important;
  }
  
  @media (max-width: 767px) {
  .result {
    padding: 70px 0 0 !important;
  }
  }
  
  .resultdesc {
    max-width: 1190px !important;
    padding: 0 23px 0 !important;
    margin: 0 auto;
  }
  
  @media (max-width: 767px) {
  .resultdesc {
    padding: 0 23px 0 !important;
  }
  }
  
  .resultdesc .resdesc {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
    word-wrap: break-word;
    line-height: 1;
      margin: 0 0 5px 0;
  }
  .resultdesc .resdesc span {
      color: #0057b8;
  }
  .resultdesc .respagdis {
      color: #181818;
      font-size: 13px;
      font-weight: 500;
      margin: 0;
  }
  .resultdesc .respdetail {
    color: #181818;
    font-size: 12px;
    font-weight: 500;
    text-align: right;
    line-height: 1.1;
    margin: 0;
  }
  .resultdesc .respdetail strong {
    color: #0057b8;
    font-weight: 700;
  }
  
  .resultdesc .respdetail .implabel {
    height: 26px;
  }
  
  @media (max-width: 767px) {
  .resultdesc .resdesc {
    font-size: 20px;
  }
  .resultdesc .respagdis {
    font-size: 11px;
  }
  .resultdesc .respdetail {
    font-size: 10px;
  }
  }
  
  @media (max-width: 576px) {
  .resultdesc .resdesc {
    text-align: center;
  }
  .resultdesc .respagdis {
    text-align: center;
  }
  .resultdesc .respdetail {
    text-align: center;
    margin: 15px 0 0;
    display: none;
  }
  }
  
  /* Seccion resultados pie */
  
  .resultsearch {
    width: 100%;
    max-width: 1200px !important;
    padding: 0 23px 60px !important;
    display: none;
  }
  
  .resultsearch .searchfil {
    width: 100%;
    height: 34px;
    position: relative;
    margin: 10px 0 0;
    transition: .2s;
  }
  
  .resultsearch .pagnumber {
    top: 0px;
  }
  
  @media (max-width: 767px) {
  .resultsearch {
    display: inline-block;
    padding: 0 23px 80px !important;
  }
  }
  @media (max-width: 680px) {
  .resultsearch .searchfil {
    height: 30px;
  }
  }
  @media (max-width: 576px) {
  .resultsearch {
    padding: 0 23px 80px !important;
  }
  }
  
  
  /* Seccion resultados mosaico */
  
  .resultsec {
      max-width: 1222px !important;
      padding: 10px 18px 60px !important;
    margin: 0 auto;
  }
  
  @media (max-width: 767px) {
  .resultsec {
    padding: 10px 18px !important;
  }
  }
  
  
  .resultsec .tittle {
      padding: 0px 18px 20px 18px;
  }
  .resultsec .tittle h3 {
      color: #181818;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
  }
  @media (max-width: 767px) {
  .resultsec .tittle {
      padding: 0px 17px 15px 17px;
  }	
  .resultsec .tittle h3 {
      font-size: 16px;
  }
  }
  
  
  
  
  .resultsec .rescol {
    padding: 5px;
    flex: 0 0 auto;
  }
  .resultsec .rescol .grid {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .resultsec .rescol .grid:hover {
    background-color: white;
  }
  
  
  
  
  
  .resultsec .rescol .higrid {
    box-shadow: 0 0 40px rgba(148, 199, 255, .7);
    background-color: #dcf2ff;
    outline: 3px solid #94c7ff;
  }
  .resultsec .rescol .higrid:hover {
    background-color: #e5f6ff;
    outline: 3px solid #abd2ff;
  }
  
  
  
  
  .resultsec .col1 {
    width: 50%;
  }
  .resultsec .col1 .grid {
    display: flex;
  }
  .resultsec .col1 .grid .img {
    width: 150px;
    height: 100%;
    background-color: white;
    position: relative;
    overflow: hidden;
  }
  .resultsec .col1 .grid .img img {
    width: 80%;
    height: auto;
  }
  .resultsec .col1 .grid .img .back {
    background: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,.12) 100%);
  }
  .resultsec .col1 .grid .tlabels {
    width: 100px;
    position: absolute;
    bottom: 4px;
    left: -100px;
    pointer-events: none;
    z-index: 10;
  }
  .resultsec .col1 .grid .implabel {
    width: 100%;
    margin: 1px 0;
  }
  .resultsec .col1 .grid .info {
    height: 100%;
    flex-grow: 1;
    padding: 23px 10px 23px 17px;
    position: relative;
  }
  .resultsec .col1 .grid .cart {
    width: 155px;
    height: 100%;
    padding: 19px 17px 23px 10px;
  }
  .resultsec .col1 .grid .detlink {
    flex-grow: 1;
  }
  @media (max-width: 767px) {
  .resultsec .col1 .grid .info {
    padding: 20px 10px 20px 13px;
  }
  .resultsec .col1 .grid .cart {
    padding: 15px 13px 20px 10px;
  }
  .resultsec .col1 .grid .implabel {
    height: 22px;
    top: 10px;
    left: -96px;
  }
  }
  
  
  
  
  
  .resultsec .col2 {
    width: 20%;
  }
  .resultsec .col2 .grid .img {
    width: 100%;
    height: 180px;
    background-color: white;
    position: relative;
    overflow: hidden;
    display: block;
  }
  .resultsec .col2 .grid .img img {
    width: auto;
    height: 90%;
  }
  .resultsec .col2 .grid .img .back {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
  }
  .resultsec .col2 .grid .tlabels {
    width: 100px;
    position: absolute;
    top: -3%;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }
  .resultsec .col2 .grid .implabel {
    width: 100%;
    margin: 1px 0;
  }
  .resultsec .col2 .grid .info {
    width: 100%;
    height: auto;
    flex-grow: 0;
    padding: 23px 17px 170px 17px;
    position: relative;
    display: block;
  }
  .resultsec .col2 .grid .cart {
    width: 100%;
    position: absolute;
    padding: 0 17px 23px;
    bottom: 0;
    left: 0;
  }
  .resultsec .col2 .grid .detlink {
    flex-grow: 0;
  }
  @media (max-width: 767px) {
  .resultsec .col2 .grid .img {
    height: 150px;
  }
  .resultsec .col2 .grid .info {
    padding: 20px 13px 162px 13px;
  }
  .resultsec .col2 .grid .cart {
    padding: 0 13px 21px;
  }
  .resultsec .col2 .grid .implabel {
    height: 22px;
    top: -11px;
  } 
  }
  
  
  
  
  
  
  .resultsec .rescol .grid .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: center;
    opacity: .75;
    transition: .3s;
  }
  .resultsec .rescol .grid:hover .img img {
    transform: translate(-50%,-50%) scale(1.1);
    pointer-events: none;
    opacity: 1;
  }
  .resultsec .rescol .grid .img .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .resultsec .rescol .part {
    color: #0057b8;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .resultsec .rescol .manuf {
    color: #181818;
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 10px 0;
  }
  .resultsec .rescol .manuf span {
    font-weight: 800;
  }
  .resultsec .rescol .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .resultsec .rescol .nlabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .resultsec .rescol .nlabel::first-child {
    margin: 15px 0 0 0;
  }
  .resultsec .rescol .nlabel span {
    font-weight: 700;
  }
  .resultsec .rescol .hlabel {
    color: #181818;
    background: rgb(241,217,118);
    background: linear-gradient(128deg, rgba(241,217,118,1) 4%, rgba(255,245,203,1) 50%, rgba(241,217,118,1) 58%, rgba(241,188,118,1) 74%, rgba(241,217,118,1) 84%);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .resultsec .rescol .hlabel::first-child {
    margin: 15px 0 0 0;
  }
  .resultsec .rescol .hlabel span {
    font-weight: 800;
  }
  
  .resultsec .rescol .price {
    color: #181818;
    font-size: 17px;
    font-weight: 700;
    line-height: .8;
    margin: 0 0 8px 0;
  }
  .resultsec .rescol .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
  }
  .resultsec .rescol .taxdesc {
    color: #181818;
    font-size: 9px;
    font-weight: 600;
  }
  .resultsec .rescol .otherop {
    color: #181818;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 12px 0;
  }
  .resultsec .rescol .otherop a,
  .resultsec .rescol .otherop a:focus {
    color: #0057b8;
    transition: .3s;
  }
  .resultsec .rescol .otherop a:hover {
    color: #4ba7ff;
  }
  .resultsec .rescol .inputnumber {
    margin: 0 0 3px 0;
  }
  .resultsec .rescol .inputnumb {
    width: 80px;
  }
  .resultsec .rescol .addcart {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .resultsec .rescol .addcart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .resultsec .rescol .addcart i {
    font-size: 20px;
    vertical-align: middle;
  }
  @media (max-width: 767px) {
  .resultsec .rescol .implabel {
    height: 22px;
    top: -11px;
  } 
  .resultsec .rescol .part {
    font-size: 13px;
  }
  .resultsec .rescol .manuf {
    font-size: 9px;
  }
  .resultsec .rescol .desc {
    font-size: 12px;
  }
  .resultsec .rescol .nlabel, .resultsec .rescol .hlabel {
    font-size: 10px;
  }
  .resultsec .rescol .cart {
    padding: 0 13px 21px;
  }
  .resultsec .rescol .tax {
    font-size: 9px;
  }
  .resultsec .rescol .otherop {
    font-size: 10px;
  }
  .resultsec .rescol .inputnumb {
    width: 50px;
  }
  .resultsec .rescol .addcart {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  
  
  
  
  
  /*
  .resultsec .col3 .grid {
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      transition: .3s;
  }
  .resultsec .col3 .grid:hover {
      background-color: white;
  }
  .resultsec .col3 .grid .img img {
      width: auto;
      height: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(1);
      transform-origin: center;
      opacity: .75;
      transition: .3s;
  }
  .resultsec .col3 .grid:hover .img img {
      transform: translate(-50%,-50%) scale(1.1);
      pointer-events: none;
      opacity: 1;
  }
  .resultsec .col3 .grid .img .back {
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12));
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .resultsec .col3 .grid .info {
      position: relative;
      padding: 23px 17px 140px 17px;
  }
  @media (max-width: 767px) {
  .resultsec .col3 .grid .info {
      padding: 20px 13px 130px 13px;
  }
  }
  .resultsec .col3 .grid .implabel {
    width: auto;
      height: 26px;
      position: absolute;
      top: -13px;
      right: 0;
      pointer-events: none;
  }
  .resultsec .col3 .grid .part {
      color: #0057b8;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.1;
      word-wrap: break-word;
      margin: 0 0 0 0;
  }
  .resultsec .col3 .grid .manuf {
      color: #181818;
      font-size: 10px;
      font-weight: 600;
      margin: 0 0 10px 0;
  }
  .resultsec .col3 .grid .manuf span {
      font-weight: 800;
  }
  .resultsec .col3 .grid .desc {
      color: #181818;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      word-wrap: break-word;
      margin: 0 0 5px 0;
  }
  .resultsec .col3 .grid .paqarriv {
      color: #181818;
      background-color: #dddddd;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.2;
      padding: 5px 7px;
      border-radius: 20px;
      margin: 5px 0 0 0;
      display: inline-block;
  }
  .resultsec .col3 .grid .paqarriv::first-child {
      margin: 15px 0 0 0;
  }
  .resultsec .col3 .grid .paqarriv span {
      font-weight: 800;
  }
  .resultsec .col3 .grid .paqarriv svg {
      font-size: 11px;
      vertical-align: middle;
  }
  .resultsec .col3 .grid .cart {
      width: 100%;
    position: absolute;
    padding: 0 17px 23px;
    bottom: 0;
    left: 0;
  }
  .resultsec .col3 .grid .price {
      color: #181818;
      font-size: 17px;
      font-weight: 700;
      margin: 0 0 3px 0;
  }
  .resultsec .col3 .grid .tax {
      color: #0057b8;
      font-size: 10px;
      font-weight: 700;
  }
  .resultsec .col3 .grid .inputnumber {
      margin: 0 0 3px 0;
  }
  .resultsec .col3 .grid .inputnumb {
      width: 80px;
  }
  .resultsec .col3 .grid .addcart {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .resultsec .col3 .grid .addcart i {
    font-size: 20px;
    vertical-align: middle;
  }
  .resultsec .col3 .grid .addcart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  @media (max-width: 767px) {
  .resultsec .col3 .grid .implabel {
      height: 22px;
      top: -11px;
  }	
  .resultsec .col3 .grid .part {
      font-size: 13px;
  }
  .resultsec .col3 .grid .manuf {
      font-size: 9px;
  }
  .resultsec .col3 .grid .desc {
      font-size: 12px;
  }
  .resultsec .col3 .grid .paqarriv {
      font-size: 10px;
  }
  .resultsec .col3 .grid .cart {
    padding: 0 13px 21px;
  }
  .resultsec .col3 .grid .tax {
      font-size: 9px;
  }
  .resultsec .col3 .grid .inputnumb {
      width: 50px;
  }
  .resultsec .col3 .grid .addcart {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  */
  
  
  .resultempty {
    max-width: 1222px !important;
    /*padding: 110px 18px 60px !important;*/
  }
  
  @media (max-width: 767px) {
  .resultempty {
    /*padding: 90px 18px !important;*/
  }
  }
  
  .resultempty .emptygrid {
    background-color: white;
    height: 500px;
    border-radius: 15px;
    position: relative;
  }
  .resultempty .emptygrid .info {
    width: 100%;
    max-width: 600px;
    padding: 15px 13px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .resultempty .emptygrid .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .resultempty .emptygrid .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 20px 0 0 0;
    padding: 0;
  }
  .resultempty .emptygrid .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  @media (max-width: 767px) {
  .resultempty .emptygrid {
    height: 450px;
  }  
  .resultempty .emptygrid .info {
    padding: 15px 20px;
  }  
  .resultempty .emptygrid .tittle {
    font-size: 20px;
  }
  .resultempty .emptygrid .desc {
    font-size: 12px;
  }
  }
  .resultempty .emptygrid .hibtn,
  .resultempty .emptygrid .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .resultempty .emptygrid .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .resultempty .emptygrid .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) { 
  .resultempty .emptygrid .hibtn,
  .resultempty .emptygrid .hibtn:focus {
    font-size: 13px;
    padding: 10px 30px;
  }
  .resultempty .emptygrid .hibtn i {
    font-size: 21px;
  }
  }
  
  
  
  /* Seccion detalle de producto */
  
  .detailcover {
    background-color: gray;
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  @media (max-width: 767px) {
  .detailcover {
    height: 300px;
  }
  }
  .detailcover .prodphoto {
    width: 200%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(15px);
    pointer-events: none;
    opacity: .4;
  }
  
  .detailsec {
      max-width: 1222px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .detailsec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  .detailsec .grid {
      background-color: white;
      height: 100%;
      border-radius: 15px;
      position: relative;
  }
  .detailsec .partinfo {
    padding: 40px 40px;
    position: relative;
  }
  .detailsec .partinfo .part {
    color: #0057b8;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .detailsec .partinfo .manuf {
    color: #181818;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px 0;
  }
  .detailsec .partinfo .manuf span {
    font-weight: 800;
  }
  .detailsec .partinfo .desc {
    color: #181818;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .detailsec .partinfo .tlabels {
    width: auto;
    height: 37px;
    position: absolute;
    top: -18px;
    right: 0;
    pointer-events: none;
    transition: .3s;
  }
  .detailsec .partinfo .implabel {
    height: 100%;
    display: inline-block;
    border-radius: 0 20px 0 0;
  }
  @media (max-width: 996px) {
  .detailsec .partinfo {
    padding: 30px 20px;
  }
  }
  @media (max-width: 767px) {
  .detailsec .partinfo .part {
    font-size: 20px;
  }
  .detailsec .partinfo .manuf {
    font-size: 13px;
  }
  .detailsec .partinfo .desc {
    font-size: 14px;
  }
  .detailsec .partinfo .tlabels {
    height: 30px;
    top: -18px;
  }
  .detailsec .partinfo .implabel {
    border-radius: 0 15px 0 0;
  }
  }
  
  
  
  .detailsec .grid .nlabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .detailsec .grid .nlabel::first-child {
    margin: 15px 0 0 0;
  }
  .detailsec .grid .nlabel span {
    font-weight: 700;
  }
  .detailsec .grid .hlabel {
    color: #181818;
    background: rgb(241,217,118);
    background: linear-gradient(128deg, rgba(241,217,118,1) 4%, rgba(255,245,203,1) 50%, rgba(241,217,118,1) 58%, rgba(241,188,118,1) 74%, rgba(241,217,118,1) 84%);
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .detailsec .grid .hlabel::first-child {
    margin: 15px 0 0 0;
  }
  .detailsec .grid .hlabel span {
    font-weight: 800;
  }
  @media (max-width: 767px) {
    .detailsec .grid .nlabel, .detailsec .grid .hlabel {
      font-size: 10px;
    }
  }
  
  
  
  
  
  .detailsec .gridtab .tabs {
    padding: 0 28px;
    margin-bottom: -2px;
  }
  .detailsec .gridtab .content {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 40px;
  }
  .detailsec .gridtab .tabs .nav-link {
    color: #181818;
    background-color: #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    margin: 0 2px;
    border: 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .detailsec .gridtab .tabs .nav-link.active {
    background-color: white;
  }
  @media (max-width: 992px) {
    .detailsec .gridtab .tabs {
      padding: 0 10px;
    }
    .detailsec .gridtab .content {
      padding: 30px 20px;
    }
  }
  @media (max-width: 767px) {
    .detailsec .gridtab .tabs {
      padding: 0 12px;
    }
    .detailsec .gridtab .tabs .nav-link {
      font-size: 11px;
      padding: 10px 7px;
    }
  }
  
  
  .detailsec .gridtab .content .tittle {
    color: #181818;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 15px 0 0 0;
  }
  .detailsec .gridtab .content .tittle:first-child {
    margin: 0 0 0 0;
  }
  .detailsec .gridtab .content .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 15px 0 0 0;
  }
  .detailsec .gridtab .content .desc strong {
    font-weight: 800;
  }
  
  .detailsec .gridtab .content ul {
    margin-left: -16px !important;
  }
  .detailsec .gridtab .content li {
    margin-top: 5px;
  }
  .detailsec .gridtab .content a,
  .detailsec .gridtab .content a:focus {
    color: #0057b8;
    transition: .3s;
  }
  .detailsec .gridtab .content a:hover {
    color: #157cde;
  }
  .detailsec .gridtab .content svg {
    font-size: 18px;
    vertical-align: -4px;
  }
  @media (max-width: 767px) {
  .detailsec .gridtab .content .tittle {
    font-size: 16px;
  }
  .detailsec .gridtab .content .desc {
    font-size: 12px;
  }
  .detailsec .gridtab .content svg {
    font-size: 16px;
    vertical-align: -3px;
  }
  }

.detailsec .gridtab .content .btn, .detailsec .gridtab .content .btn:focus {
  color: white;
  background-color: #0057b8;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 15px;
  border: 0;
  border-radius: 5px;
  margin: 5px 0;
  position: relative;
  overflow: hidden;
  transition: .3s;
}

.detailsec .gridtab .content .btn:hover {
    color: white;
    background-color: #4ba7ff;
}

.detailsec .gridtab .content .btn i {
    font-size: 20px;
    vertical-align: middle;
}

@media (max-width: 767px) {
.detailsec .gridtab .content .btn {
    font-size: 10px;
    padding: 3px 8px;
}
.detailsec .gridtab .content .btn i {
    font-size: 20px;
    vertical-align: middle;
}
}
  
  
  
  
  
  .detailsec .gridtab .spectable {
    overflow-x: auto;
    margin: 15px 0 0 0;
  }
  .detailsec .gridtab .spectable::-webkit-scrollbar {
    -webkit-box-shadow: inset 0 0 0 transparent;
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 0;
    transition: .3s;
  }
  .detailsec .gridtab .spectable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: white;
    border-radius: 5px;
    border-right: 1px solid gray;
    transition: .3s;
  }
  .detailsec .gridtab .spectable::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: #9e9e9e;
    border-radius: 5px;
    transition: .3s;
  }
  
  
  .detailsec .gridtab .spectable table {
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
    margin: 0 0 10px;
  }
  .detailsec .gridtab .spectable th,
  .detailsec .gridtab .spectable td {
    min-width: 120px;
  }
  .detailsec .gridtab .spectable tr:first-child {
    border-bottom: 3px solid #0057b8;
  }
  .detailsec .gridtab .spectable tr:last-child {
    border-bottom: none;
  }
  .detailsec .gridtab .spectable th:last-child,
  .detailsec .gridtab .spectable td:last-child  {
    border-right: none;
  }
  .detailsec .gridtab .spectable tr {
    border-bottom: 2px solid #cdcdcd;
  }
  .detailsec .gridtab .spectable th {
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    padding: 5px 10px;
    border-right: 2px solid #cdcdcd;
  }
  .detailsec .gridtab .spectable td {
    background-color: #f3f3f3;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    padding: 5px 10px;
    border-right: 2px solid #cdcdcd;
  }
  @media (max-width: 767px) {
    .detailsec .gridtab .spectable th,
    .detailsec .gridtab .spectable td  {
      font-size: 12px;
      min-width: 100px;
    }
  }
  
  
  
  
  .detailsec .gridtab .content .hibtn,
  .detailsec .gridtab .content .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .detailsec .gridtab .content .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .detailsec .gridtab .content .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .detailsec .gridtab .content .genbtn,
  .detailsec .gridtab .content .genbtn:focus {
    color: #181818;
    background-color: #d3d3d3;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .detailsec .gridtab .content .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .detailsec .gridtab .content .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) { 
  .detailsec .gridtab .content .hibtn,
  .detailsec .gridtab .content .hibtn:focus,
  .detailsec .gridtab .content .genbtn,
  .detailsec .gridtab .content .genbtn:focus {
    font-size: 13px;
    padding: 10px 17px;
  }
  .detailsec .gridtab .content .hibtn i,
  .detailsec .gridtab .content .genbtn i {
    font-size: 21px;
  }
  }
  
  
  
  .detailsec .photo table {
    width: 100%;
  }
  .detailsec .photothumb {
    vertical-align: top;
    padding: 0 0 30px 40px;
  }
  .detailsec .photothumb .nav-tabs {
    display: block;
    border: none;
  }
  .detailsec .photothumb .nav-link {
    width: 50px;
    padding: 0;
    background-color: gray;
    border: 3px solid #d9d9d9;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: .3s;
  }
  .detailsec .photothumb .nav-link:hover {
    border: 3px solid #d9d9d9;
  }
  .detailsec .photothumb .nav-link.active {
    background-color: gray;
    border: 3px solid #0057b8;
  }
  .detailsec .photothumb .prodphoto {
    width: 100%;
    height: auto;
    opacity: .7;
    transition: .3s;
  }
  .detailsec .photothumb .nav-link.active .prodphoto {
    opacity: 1;
    transform: scale(1.2);
  }
  .detailsec .photoimg {
    vertical-align: middle;
    padding: 0 60px 30px 40px;
  }
  
  .detailsec .photoimg .prodphoto {
    width: 100%;
    max-width: 450px;
    height: auto;
    pointer-events: all;
  }
  @media (max-width: 996px) {
  .detailsec .photothumb {
    padding: 0 0 20px 20px;
  }
  .detailsec .photothumb .nav-link {
    width: 40px;
    border: 2px solid #d9d9d9;
  }
  .detailsec .photothumb .nav-link.active {
    background-color: gray;
    border: 2px solid #0057b8;
  }
  .detailsec .photoimg {
    vertical-align: top;
    padding: 0 20px 20px 20px;
  }
  }
  
  
  
  .detailsec .grid .prodinfo {
    padding: 0px 60px 40px 150px;
    position: relative;
  }
  .detailsec .grid .prodinfo .hidesc {
    color: #181818;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .detailsec .grid .prodinfo .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .detailsec .grid .prodinfo ul {
    margin-left: -16px !important;
  }
  .detailsec .grid .prodinfo li {
    margin-top: 5px;
  }
  .detailsec .grid .prodinfo a,
  .detailsec .grid .prodinfo a:focus {
    color: #0057b8;
    transition: .3s;
  }
  .detailsec .grid .prodinfo a:hover {
    color: #157cde;
  }
  .detailsec .grid .prodinfo .desc svg {
    font-size: 18px;
    vertical-align: -4px;
  }
  @media (max-width: 996px) {
  .detailsec .grid .prodinfo {
    padding: 30px 20px;
  }
  }
  @media (max-width: 767px) {
  .detailsec .grid .prodinfo .hidesc {
    font-size: 12px;
  }
  .detailsec .grid .prodinfo .desc {
    font-size: 12px;
  }
  .detailsec .grid .prodinfo .desc svg {
    font-size: 16px;
    vertical-align: -3px;
  }
  }
  
  
  
  .detailsec .descconf {
    padding: 40px 40px;
  }
  @media (max-width: 996px) {
  .detailsec .descconf {
    padding: 30px 20px;
  }
  }
  .detailsec .fablogo {
    max-height: 130px;
    max-width: 100%;
    pointer-events: none;
    transform: scale(.7);
    transform-origin: top left;
    margin: 0 0 -20px 0;
  }
  .detailsec .fabdesc {
    min-height: 55px;
  }
  .detailsec .fabdesc p {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .detailsec .stockava {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    word-wrap: break-word;
    margin: 30px 0 0 0;
  }
  .detailsec .stockava dd {
    margin: 0 0 6px 0;
  }
  .detailsec .stockava dd:last-child {
    margin: 0 0 0 0;
  }
  .detailsec .stockava strong {
    font-size: 15px;
    font-weight: 800;
  }
  .detailsec .stockdesc {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
  }
  .detailsec .stockdesc strong {
    font-size: 11px;
    font-weight: 800;
  }
  .detailsec .stockdesc a {
    color: #0057b8;
    font-weight: 700;
  }
  .detailsec .stockdesc a:hover {
    color: #4ba7ff;
  }
  .detailsec .delivdesc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 30px 0 -5px;
  }
  .detailsec .delivdesc strong {
    font-weight: 800;
  }
  .detailsec .delivdesc a {
    color: #0057b8;
    font-weight: 700;
  }
  .detailsec .delivdesc a:hover {
    color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .detailsec .fablogo {
    transform: scale(.6);
    margin: 0 0 -25px 0;
  }  
  .detailsec .fabdesc p {
    font-size: 12px;
  }
  .detailsec .stockava {
    font-size: 12px;
  }
  .detailsec .stockava strong {
    font-size: 13px;
  }
  .detalisec .stockdesc {
    font-size: 10px;
  }
  .detalisec .delivdesc {
    font-size: 12px;
  }
  }
  @media (max-width: 576px) { 
  .detailsec .fablogo {
    margin: 0 0 -35px 0;
  } 
  }
  
  
  .detailsec .prodlabels {
    /*margin: 30px 0 0 0;*/
    margin: 10px 0 0 0;
  }
  .detailsec .prodlabels span {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 15px !important;
    margin: 5px 0 0 0;
    display: inline-block;
    position: relative;
  }
  .detailsec .prodlabels span span {
    font-weight: bolder;
    padding: 0;
    margin: 0;
  }
  .detailsec .prodlabels .nlabel {
    background-color: #dddddd;
  }
  .detailsec .prodlabels .mlabel {
    background-color: #c4e1f0;
  }
  .detailsec .prodlabels .hlabel {
    background: rgb(241,217,118);
    background: linear-gradient(128deg, rgba(241,217,118,1) 4%, rgba(255,245,203,1) 50%, rgba(241,217,118,1) 58%, rgba(241,188,118,1) 74%, rgba(241,217,118,1) 84%);
  }
  .detailsec .prodlabels span i {
    color: #0057b8;
    font-size: 20px;
    vertical-align: middle;
  }
  .detailsec .prodlabels .tooltip {
    width: 300px;
    visibility: hidden;
    background-color: #252525;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
  }
  .detailsec .prodlabels .tooltip ul {
    margin: 0 0 0 -15px;
  }
  .detailsec .prodlabels .tooltip ul li {
    color: #dddddd;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
  }
  .detailsec .prodlabels span:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
  @media (max-width: 1120px) { 
  .detailsec .prodlabels .tooltip {
    width: 28vw;
  } 
  }
  @media (max-width: 576px) { 
  .detailsec .prodlabels .tooltip {
    width: 40vw;
    min-width: 150px;
  } 
  }
  
  
  .detailsec .prodprice {
    margin: 30px 0 0 0;
  }
  .detailsec .price {
    color: #181818;
    font-size: 24px;
    font-weight: 700;
    line-height: .8;
  }
  .detailsec .taxdesc {
    color: #181818;
    font-size: 12px;
    font-weight: 600;
  }
  .detailsec .otherop {
    color: #181818;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    margin: -15px 0 23px 0;
  }
  .detailsec .otherop a,
  .detailsec .otherop a:focus {
    color: #0057b8;
    transition: .3s;
  }
  .detailsec .otherop a:hover {
    color: #4ba7ff;
  }
  .detailsec .tax {
    color: #0057b8;
    font-size: 14px;
    font-weight: 700;
  }
  .detailsec .pricedesc {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    margin: -10px 0 16px 0;
  }
  @media (max-width: 767px) {
  .detailsec .price {
    font-size: 20px;
  }
  .detailsec .otherop {
    font-size: 12px;
  }
  .detailsec .tax {
    font-size: 12px;
  }
  .detailsec .pricedesc {
    font-size: 10px;
  }
  }
  
  
  .detailsec .prodselect {
    display: flex;
    margin: 10px 0 0 0;
  }
  .detailsec .prodselect .inputnumber {
    width: 100%;
    margin-right: 5px;
  }
  .detailsec .prodselect .inputnumb {
    width: 100%;
  }
  .detailsec .prodselect .formselect {
    width: 100%;
    font-size: 13px;
    color: #181818;
    font-weight: 500;
    background-color: #dddddd;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    border: none;
    outline: none;
    display: flex;
    transition: .3s;
  }
  .detailsec .prodselect .formselect:hover,
  .detailsec .prodselect .formselect:focus {
    background-color: #e7e7e7;
  }
  @media (max-width: 576px) { 
  .detailsec .prodselect .inputnumb {
    font-size: 12px;
  }
  .detailsec .prodselect .formselect {
    font-size: 12px;
  }
  }
  
  
  .detailsec .prodbtn {
    margin: 30px 0 0 0;
  }
  .detailsec .prodbtn .addcart,
  .detailsec .prodbtn .addcart:focus {
    width: 100%;
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .detailsec .prodbtn .addcart i {
    font-size: 22px;
    vertical-align: middle;
  }
  .detailsec .prodbtn .addcart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .detailsec .prodbtn .genbtn,
  .detailsec .prodbtn .genbtn:focus {
    width: 100%;
    color: #181818;
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .detailsec .prodbtn .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .detailsec .prodbtn .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) {
  .detailsec .prodbtn .addcart,
  .detailsec .prodbtn .addcart:focus,
  .detailsec .prodbtn .genbtn,
  .detailsec .prodbtn .genbtn:focus {
    font-size: 13px;
  }
  .detailsec .prodbtn .addcart i,
  .detailsec .prodbtn .genbtn i {
    font-size: 21px;
  }
  }
  
  
  .detailsec .socialbtn {
    margin: 30px 0 0 0;
    color: #181818;
    font-size: 14px;
    font-weight: 600;
  }
  .detailsec .socialbtn a,
  .detailsec .socialbtn a:focus {
    color: #0057b8;
    font-size: 30px;
    vertical-align: middle;
    margin: 0 0 0 5px;
    transition: .3s;
  }
  .detailsec .socialbtn a:hover {
    color: #4ba7ff;
  }
  .detailsec .socialbtn a:first-child {
    margin: 0 0 0 6px;
  }
  @media (max-width: 767px) {
  .detailsec .socialbtn {
    font-size: 12px;
  }
  .detailsec .socialbtn a,
  .detailsec .socialbtn a:focus {
    font-size: 28px;
  }
  }
  
  /* Recomendados detalle de producto */
  
  .detailprod {
    padding: 40px 100px;
  }
  .detailprod .detailreco {
    color: #181818;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .detailprod .detailreco .part {
    color: #0057b8;
    font-weight: 800;
  }
  .detailprod .grid {
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .detailprod .grid:hover {
    background-color: #f7f7f7;
  }
  .detailprod .grid .img {
    height: 140px;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  @media (max-width: 1230px) {
  .detailprod {
    padding: 40px 20px;
  }
  }
  @media (max-width: 1070px) {
  .detailprod {
    padding: 30px 0px;
  }
  .detailprod .detailreco {
    padding: 0 20px;
  }
  }
  @media (max-width: 767px) {
  .detailprod .detailreco {
    font-size: 14px;
  }
  .detailprod .grid .img {
    height: 120px;
  }
  }
  .detailprod .grid .img img {
    width: auto;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: center;
    opacity: .75;
    transition: .3s;
  }
  .detailprod .grid:hover .img img {
    transform: translate(-50%,-50%) scale(1.1);
    pointer-events: none;
    opacity: 1;
  }
  .detailprod .grid .img .back {
    background: linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.15));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .detailprod .grid .info {
    position: relative;
    padding: 23px 17px 140px 17px;
  }
  @media (max-width: 767px) {
  .detailprod .grid .info {
    padding: 20px 13px 130px 13px;
  }
  }
  .detailprod .grid .implabel {
    width: auto;
    height: 26px;
    position: absolute;
    top: -13px;
    right: 0;
    pointer-events: none;
  }
  .detailprod .grid .part {
    color: #0057b8;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .detailprod .grid .manuf {
    color: #181818;
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 10px 0;
  }
  .detailprod .grid .manuf span {
    font-weight: 800;
  }
  .detailprod .grid .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .detailprod .grid .paqarriv {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 20px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .detailprod .grid .paqarriv::first-child {
    margin: 15px 0 0 0;
  }
  .detailprod .grid .paqarriv span {
    font-weight: 800;
  }
  .detailprod .grid .paqarriv svg {
    font-size: 11px;
    vertical-align: middle;
  }
  
  
  .detailprod .grid .nlabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .detailprod .grid .nlabel::first-child {
    margin: 15px 0 0 0;
  }
  .detailprod .grid .nlabel span {
    font-weight: 700;
  }
  .detailprod .grid .hlabel {
    color: #181818;
    background: rgb(241,217,118);
    background: linear-gradient(128deg, rgba(241,217,118,1) 4%, rgba(255,245,203,1) 50%, rgba(241,217,118,1) 58%, rgba(241,188,118,1) 74%, rgba(241,217,118,1) 84%);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 12px;
    margin: 5px 0 0 0;
    display: inline-block;
  }
  .detailprod .grid .hlabel::first-child {
    margin: 15px 0 0 0;
  }
  .detailprod .grid .hlabel span {
    font-weight: 800;
  }
  @media (max-width: 767px) {
    .detailprod .grid .nlabel, .detailprod .grid .hlabel {
      font-size: 10px;
    }
  }
  
  
  .detailprod .grid .cart {
    width: 100%;
    position: absolute;
    padding: 0 17px 23px;
    bottom: 0;
    left: 0;
  }
  .detailprod .grid .price {
    color: #181818;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px 0;
  }
  .detailprod .grid .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
  }
  .detailprod .grid .inputnumber {
    margin: 0 0 3px 0;
  }
  .detailprod .grid .inputnumb {
    width: 80px;
  }
  .detailprod .grid .addcart {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    margin: 5px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .detailprod .grid .addcart i {
    font-size: 20px;
    vertical-align: middle;
  }
  .detailprod .grid .addcart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  @media (max-width: 767px) {
  .detailprod .grid .implabel {
    height: 22px;
    top: -11px;
  } 
  .detailprod .grid .part {
    font-size: 13px;
  }
  .detailprod .grid .manuf {
    font-size: 9px;
  }
  .detailprod .grid .desc {
    font-size: 12px;
  }
  .detailprod .grid .paqarriv {
    font-size: 10px;
  }
  .detailprod .grid .cart {
    padding: 0 13px 21px;
  }
  .detailprod .grid .tax {
    font-size: 9px;
  }
  .detailprod .grid .inputnumb {
    width: 50px;
  }
  .detailprod .grid .addcart {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  /* Caja de seleccion */
  
  .ctrl {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
  }
  .ctrl input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .ctrlindicator {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border: 1px solid #ededed;
    background: #ededed;
  }
  .ctrlradio .ctrlindicator {
    border-radius: 5px;
    transition: 0.3s;
  }
  .ctrl:hover input ~ .ctrlindicator {
    border: 1px solid #4ba7ff;
    background: #4ba7ff;
  }
  .ctrl input:checked ~ .ctrlindicator {
    border: 1px solid #0057b8;
    background: #0057b8;
  }
  .ctrl:hover input:not([disabled]):checked ~ .ctrlindicator {
    border: 1px solid #4ba7ff;
    background: #4ba7ff;
  }
  .ctrl input:checked:focus ~ .ctrlindicator {
    border: 1px solid #0057b8;
    background: #0057b8;
  }
  .ctrlindicator:after {
    content: '';
    position: absolute;
    display: none;
  }
  .ctrl input:checked ~ .ctrlindicator:after {
    display: block;
  }
  .ctrlcheckbox .ctrlindicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: 0.3s;
  }
  .ctrlradio .ctrlindicator:after {
    left: 6px;
    top: 6px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    transition: 0.3s;
    background: #fff;
  }
  
  /* Barra Proceso de Compra */
  
  .orderproc {
    margin: 0 auto 30px;
    border-collapse: collapse;
    border: none;
  }
  .orderproc td:nth-child(1) {
    padding: 0 30px 0 0;
  }
  .orderproc td:nth-child(2) {
    width: 30px;
  }
  .orderproc td {
    width: 60px;
    position: relative;
    border: none;
  }
  .orderproc h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .orderproc .stat {
    color: #dbdbdb;
    text-align: center;
    width: 30px;
    height: 30px;
    position: relative;
    background-color: #dbdbdb;
    border-radius: 15px;
    border: 3px solid #afafaf;
    display: block;
    margin: 0 -1px 0 auto;
    transition: .3s;
    animation-fill-mode: forwards;
  }
  .orderproc .stat svg {
    color: #dbdbdb;
    font-size: 16px;
    transition: .3s;
  }
  .orderproc .stat p {
    color: #181818;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    animation-fill-mode: forwards;
  }
  @media (max-width: 767px) {
  .orderproc {
    margin: 0 auto 15px;
  }  
  .orderproc td:nth-child(1) {
    padding: 0 20px 0 0;
  }
  .orderproc td:nth-child(2) {
    width: 25px;
  }
  .orderproc h2 {
    font-size: 20px;
  }  
  .orderproc .stat {
    width: 25px;
    height: 25px;
  }
  .orderproc .stat svg {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .orderproc .stat p {
    font-size: 11px;
    top: 30px;
  }
  }
  
  
  .orderproc .bar1 {
    background-color: #afafaf;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .orderproc .bar2 {
    background-color: #0057b8;
    width: 0%;
    height: 5px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: .3s;
    animation-fill-mode: forwards;
  }
  
  
  
  @keyframes cprogressbar {
    from {width: 0%;}
    to {width: 90%;}
  }
  @keyframes cprogressstat {
    from {background-color: #dbdbdb; border: 3px solid #afafaf;}
    to {background-color: #0057b8; border: 3px solid #0057b8;}
  }
  @keyframes cprogresstext {
    from {color: #181818;}
    to {color: #0057b8;}
  }
  
  
  
  .orderproc.active1 td:nth-child(2) .stat {
    animation-name: cprogressstat;
    animation-duration: 1s;
  }
  .orderproc.active1 td:nth-child(2) .stat p {
    animation-name: cprogresstext;
    animation-duration: 1s;
  }
  
  
  
  .orderproc.active2 td:nth-child(2) .stat {
    background-color: #0057b8;
    border: 3px solid #0057b8;
  }
  .orderproc.active2 td:nth-child(2) .stat p {
    color: #0057b8;
  }
  .orderproc.active2 td:nth-child(3) .bar2 {
    animation-name: cprogressbar;
    animation-duration: 1s;
  }
  .orderproc.active2 td:nth-child(3) .stat {
    animation-name: cprogressstat;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  .orderproc.active2 td:nth-child(3) .stat p {
    animation-name: cprogresstext;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  
  
  
  
  .orderproc.active3 td:nth-child(2) .stat,
  .orderproc.active3 td:nth-child(3) .stat {
    background-color: #0057b8;
    border: 3px solid #0057b8;
  }
  .orderproc.active3 td:nth-child(2) .stat p,
  .orderproc.active3 td:nth-child(3) .stat p {
    color: #0057b8;
  }
  .orderproc.active3 td:nth-child(3) .bar2 {
    width: 100%;
  }
  .orderproc.active3 td:nth-child(4) .bar2 {
    animation-name: cprogressbar;
    animation-duration: 1s;
  }
  .orderproc.active3 td:nth-child(4) .stat {
    animation-name: cprogressstat;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  .orderproc.active3 td:nth-child(4) .stat p {
    animation-name: cprogresstext;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  
  
  
  
  
  .orderproc.active4 td:nth-child(2) .stat,
  .orderproc.active4 td:nth-child(3) .stat,
  .orderproc.active4 td:nth-child(4) .stat {
    background-color: #0057b8;
    border: 3px solid #0057b8;
  }
  .orderproc.active4 td:nth-child(2) .stat p,
  .orderproc.active4 td:nth-child(3) .stat p,
  .orderproc.active4 td:nth-child(4) .stat p {
    color: #0057b8;
  }
  .orderproc.active4 td:nth-child(3) .bar2,
  .orderproc.active4 td:nth-child(4) .bar2 {
    width: 100%;
  }
  .orderproc.active4 td:nth-child(5) .bar2 {
    animation-name: cprogressbar;
    animation-duration: 1s;
  }
  .orderproc.active4 td:nth-child(5) .stat {
    animation-name: cprogressstat;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  .orderproc.active4 td:nth-child(5) .stat p {
    animation-name: cprogresstext;
    animation-duration: 1s;
    animation-delay: .5s;
  }
  
  
  
  /* Carrito */
  
  .ordersec {
    max-width: 1222px !important;
    padding: 120px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .ordersec {
    padding: 70px 18px 70px !important;
  }
  }
  
  
  
  
  .orderspace {
    display: none;
    transition: .3s;
  
  }
  @media (max-width: 767px) {
  .orderspace {
    display: block;
  }
  }
  
  
  
  
  .ordersec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .ordersec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .ordersec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  @media (max-width: 767px) {
  .ordersec .headtittle {
    padding: 0px 18px 10px 18px;
  }  
  .ordersec .headtittle h2 {
    font-size: 20px;
  }
  .ordersec .headtittle img {
    max-width: 55px;
  } 
  }
  
  .ordersec .confgrid {
    height: 100%;
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 40px 40px 30px;
  }
  .ordersec .confgrid2 {
    height: 100%;
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 25px 40px 20px;
  }
  .ordersec .confgrid3 {
    height: 100%;
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 40px;
  }
  .ordersec .confgrid4 {
    height: 100%;
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 40px 200px;
    transition: .3s;
  }
  @media (max-width: 1200px) {
  .ordersec .confgrid4 {
    padding: 30px 17vw;
  }
  }
  
  
  
  .ordersec .carttittle {
    color: #181818;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .ordersec .carttittle strong {
    font-weight: 700;
  }
  .ordersec .carttittle i {
    font-size: 23px;
    color: #0057b8;
    vertical-align: middle;
  }
  .ordersec .cartnotif {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 23px 0 0 0;
  }
  .ordersec .cartnotif i {
    color: red;
    font-size: 18px;
    vertical-align: -2px;
  }
  .ordersec .conficon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .ordersec .conftittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .ordersec .confdesc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .ordersec .confdet {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .ordersec .confdet strong {
    font-weight: 700;
  }
  .ordersec .labels {
    margin: 0 0 0 0;
  }
  .ordersec .alabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 7px;
    border-radius: 20px;
    margin: 5px 0 0 0;
    display: inline-block;
    position: relative;
  }
  .ordersec .elogo {
    max-width: 90px;
    margin: 0 0 0 5px;
  }
  .ordersec .alabel:nth-child(1) {
    margin: 0 0 0 0;
  }
  .ordersec .alabel i {
    color: #0057b8;
    font-size: 20px;
    vertical-align: middle;
  }
  @media (max-width: 992px) {
  .ordersec .confgrid {
    padding: 30px 20px 10px;
  }
  .ordersec .confgrid2 {
    padding: 20px 20px 20px;
  }
  }
  @media (max-width: 992px) {
    .ordersec .cartnotif {
      margin: 23px 0 13px 0;
    }
  }
  @media (max-width: 767px) {
  .ordersec .conficon {
    max-width: 80px;
  }  
  .ordersec .carttittle {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
  .ordersec .conftittle {
    font-size: 20px;
  }
  .ordersec .cartnotif {
    font-size: 10px;
    margin: 13px 0 13px 0;
  }
  .ordersec .confdesc {
    font-size: 12px;
  }
  .ordersec .confdet {
    font-size: 12px;
  }
  .ordersec .carttittle i {
    font-size: 22px;
  }
  .ordersec .labels {
    margin: .3px 0 0 0;
  }
  }
  @media (max-width: 576px) { 
  .ordersec .confgrid3 {
    padding: 40px 20px;
  }
  }
  
  
  
  .ordersec .row {
    justify-content: left;
  }
  
  
  
  
  .ordersec .confgrid3 center {
    margin: 40px 0 0;
  }
  
  .ordersec .confgrid3 .hibtn,
  .ordersec .confgrid3 .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .ordersec .confgrid3 .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .confgrid3 .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .ordersec .confgrid3 .genbtn,
  .ordersec .confgrid3 .genbtn:focus {
    color: #181818;
    background-color: #d3d3d3;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    transition: .3s;
    animation-delay: .1s;
  }
  .ordersec .confgrid3 .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .confgrid3 .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) { 
  .ordersec .confgrid3 .hibtn,
  .ordersec .confgrid3 .hibtn:focus,
  .ordersec .confgrid3 .genbtn,
  .ordersec .confgrid3 .genbtn:focus {
    font-size: 13px;
    padding: 10px 17px;
  }
  .ordersec .confgrid3 .hibtn i,
  .ordersec .confgrid3 .genbtn i {
    font-size: 21px;
  }
  }
  
  
  
  
  
  
  .ordersec .confinfo {
    margin: 0 0 0 0;
  }
  .ordersec .confinfo ol, .ordersec .confinfo ul {
    margin: 0 0 15px -20px;
  }
  .ordersec .confinfo dl {
    margin: 0 0 15px 0;
  }
  .ordersec .confinfo a {
    font-weight: 700;
  }
  .ordersec .confinfo p, .ordersec .confinfo li, .ordersec .confinfo dd {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
  }
  .ordersec .confinfo p {
    margin-bottom: 15px;
  }
  .ordersec .confinfo li, .ordersec .confinfo dd {
    margin-bottom: 5px;
  }
  .ordersec .confinfo p strong, .ordersec .confinfo li strong, .ordersec .confinfo dd strong {
    font-weight: 700;
  }
  .ordersec .confinfo li:last-child, .ordersec .confinfo dd:last-child {
    margin-bottom: 0;
  }
  .ordersec .confinfo ol:last-child, .ordersec .confinfo ul:last-child {
    margin: 0 0 5px -20px;
  }
  .ordersec .confinfo dl:last-child {
    margin: 0 0 5px 0;
  }
  .ordersec .confinfo p:last-child {
    margin-bottom: 5px;
  }
  .ordersec .confinfo h5 {
    color: #181818;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 15px 0 15px;
  }
  .ordersec .confref {
    color: #0057b8 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    margin: 13px 0 !important;
  }
  .ordersec .confpay {
    display: flex;
    align-items: center;
    margin: 0 0 15px;
  }
  .ordersec .confpay p {
    margin: 0;
  }
  .ordersec .clogo {
    max-width: 60px;
    margin: 0 10px 0 0;
  }
  @media (max-width: 767px) {
  .ordersec .confinfo p, .ordersec .confinfo li {
    font-size: 10px;
  }
  .ordersec .confref {
    font-size: 14px !important;
  }
  }
  
  
  
  
  
  .ordersec .sumgrid {
      background-color: #f0f0f0;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      margin: 0 0 5px 0;
      transition: .3s;
  }
  .ordersec .sumgrid table {
    width: 100%;
  }
  .ordersec .sumgrid .csumimg {
    width: 70px;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  .ordersec .sumgrid .csumimg img {
    width: auto;
    height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    pointer-events: none;
    opacity: .75;
    transition: .3s;
  }
  .ordersec .sumgrid .csumimg .back {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .03), rgba(0, 0, 0, .15));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ordersec .sumgrid .csumdet {
    padding: 10px 7px;
    vertical-align: middle;
  }
  .ordersec .sumgrid .csumdet:has(button) {
    text-align: right;
  }
  .ordersec .sumgrid span {
    display: inline-block;
    margin: 0 10px 0 0;
  }
  .ordersec .sumgrid .part {
    color: #181818;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
  }
  .ordersec .sumgrid .desc {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0;
  }
  .ordersec .sumgrid .price {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: right;
    margin: 0;
  }
  
  
  
  
  .ordersec .gridbtn,
  .ordersec .gridbtn:focus {
    color: #181818;
    background-color: #dddddd;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 600;
    border: 0;
    border-radius: 5px;
    padding: 5px 10px;
    position: relative;
    transition: .3s;
  }
  .ordersec .gridbtn:hover {
    background-color: #e7e7e7;
  }
  .ordersec .sumgrid .gridbtn,
  .ordersec .sumgrid .gridbtn:focus {
    font-size: 11px;
  }
  @media (max-width: 767px) {
  .ordersec .gridbtn,
  .ordersec .gridbtn:focus {
    font-size: 12px;
  }
  }
  
  
  .ordersec .gridbtnr button {
    display: block;
    margin: 15px 0 0 auto;
  }
  
  
  
  
  
  .ordersec .dcode {
    padding: 15px 20px;
  }
  .ordersec .formcode {
    display: flex;
  }
  .ordersec .formcode input {
    width: 100%;
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    background-color: white;
    padding: 6px 10px;
    border-radius: 5px 0 0 5px;
    border: none;
    outline: none;
    transition: .3s;
  }
  .ordersec .formcode input:hover {
    background-color: white;
  }
  .ordersec .formcode .genbtn {
    color: #181818;
    background-color: #dddddd;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    border-radius: 0 5px 5px 0;
    padding: 7px 10px;
    position: relative;
    transition: .3s
  }
  .ordersec .formcode .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) {
  .ordersec .dcode {
    padding: 15px 13px;
  }
  .ordersec .formcode input {
    font-size: 12px;
  }
  .ordersec .formcode .genbtn {
    font-size: 12px;
  }
  }
  
  
  
  
  
  
  .ordersec .remlistbtn, .ordersec .remlistbtn:focus {
    color: #181818;
    background-color: #f0f0f0;
    font-size: 18px;
    padding: 3px 20px;
    border: none;
    border-radius: 0 15px 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    transition: .3s;
  }
  .ordersec .remlistbtn:hover {
    color: #b54242;
    background-color: #ffd4d4;
  }
  
  
  .ordersec .infogrid {
    background-color: #f0f0f0;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    margin: 0 0 10px 0;
    transition: .3s;
  }
  .ordersec .infogrid:last-child {
    margin: 0 !important;
  }
  .ordersec .infogrid:hover {
    background-color: #f7f7f7;
  }
  .ordersec .infogrid table {
    width: 100%;
    height: 100%;
  }
  .ordersec .infogrid .img {
    width: 100px;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  @media (max-width: 992px) {
  .ordersec .infogrid .img {
    border-radius: 0 0 15px 0;
  }
  }
  .ordersec .infogrid .img img {
    width: 50%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    pointer-events: none;
    opacity: .75;
    transition: .3s;
  }
  .ordersec .infogrid:hover .img img {
    transform: translate(-50%,-50%) scale(1.1);
    opacity: 1;
  }
  .ordersec .infogrid .img .back {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .03), rgba(0, 0, 0, .15));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .ordersec .infogrid .info {
    line-height: 1.2;
    padding: 15px 7px 15px 20px;
    vertical-align: middle;
  }
  
  .ordersec .infogrid .part {
    color: #0057b8;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0 0 7px 0;
  }
  .ordersec .infogrid .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .ordersec .infogrid .prodnotif {
    color: #181818;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 5px 0 0 0;
  }
  .ordersec .infogrid .prodnotif i {
    color: red;
    font-size: 18px;
    vertical-align: -2px;
  }
  .ordersec .infogrid .sel {
    padding: 15px 7px;
    vertical-align: middle;
    text-align: right;
  }
  .ordersec .infogrid .sel:first-child {
    width: 130px;
    min-width: 130px;
  }
  .ordersec .infogrid .sel:last-child {
    width: 60px;
    padding: 15px 20px 15px 7px;
    text-align: right;
  }
  .ordersec .infogrid .inputnumber {
    justify-content: flex-end;
  }
  .ordersec .infogrid .inputnumb {
    width: 100%;
    max-width: 70px;
    min-width: 50px;
  }
  .ordersec .infogrid .price {
    color: #181818;
    font-size: 15px;
    font-weight: 700;
    line-height: .9;
    margin: 0;
  }
  .ordersec .infogrid .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
  }
  .ordersec .infogrid .rembtn,
  .ordersec .infogrid .rembtn:focus {
    width: 30px;
    height: 38px;
    color: #181818;
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 5px 0 0 0;
    transition: .3s;
  }
  .ordersec .infogrid .rembtn i {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .ordersec .infogrid .rembtn:hover {
    color: #b54242;
    background-color: #ffd4d4;
  }
  @media (max-width: 767px) {
  .ordersec .infogrid .info {
    padding: 15px 13px;
  }  
  .ordersec .infogrid .sel:nth-child(1) {
    padding: 7px 7px 15px 13px;
  }
  .ordersec .infogrid .sel:nth-child(2) {
    padding: 7px 7px 15px;
  }
  .ordersec .infogrid .sel:nth-child(3) {
    width: 53px;
    padding: 7px 13px 15px 7px;
  }
  .ordersec .infogrid .part {
    font-size: 13px;
  }
  .ordersec .infogrid .desc {
    font-size: 12px;
  }
  .ordersec .infogrid .prodnotif {
    font-size: 11px;
  }
  .ordersec .infogrid .prodnotif i {
    font-size: 17px;
  }
  .ordersec .infogrid .price {
    font-size: 14px;
  }
  .ordersec .infogrid .tax {
    font-size: 9px;
  } 
  }
  @media (max-width: 500px) {
  .ordersec .infogrid .sel:nth-child(2) {
    width: auto;
  }
  .ordersec .infogrid .inputnumber {
    justify-content: flex-start;
  }
  }
  
  
  
  
  .ordersec .infogrid .delinfo1 {
    width: 150px;
    padding: 15px 10px 15px 20px;
    vertical-align: top;
  }
  .ordersec .infogrid .delinfo1 img {
    max-width: 150px;
    height: auto;
    max-height: 45px;
    object-fit: contain;
    pointer-events: none;
    transition: .3s;
  }
  .ordersec .infogrid .delinfo2 {
    line-height: 1.2;
    padding: 15px 5px 15px 10px;
    vertical-align: middle;
  }
  .ordersec .infogrid .det {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 10px 0 0;
    display: inline-block;
  }
  .ordersec .infogrid .det2 {
    color: #181818;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0;
  }
  .ordersec .infogrid .alabel {
    margin: 15px 0 0 0;
  }
  .ordersec .infogrid .ibtn {
    width: 100px;
    padding: 15px 20px 15px 5px;
    vertical-align: bottom;
    text-align: right;
  }
  .ordersec .infogrid .ibtnc {
    width: 100px;
    padding: 15px 20px 15px 5px;
    vertical-align: center;
    text-align: right;
  }
  .ordersec .infogrid .modbtn,
  .ordersec .infogrid .modbtn:focus {
    color: #181818;
    background-color: #dddddd;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    border-radius: 5px;
    padding: 5px 10px;
    position: relative;
    transition: .3s;
  }
  .ordersec .infogrid .modbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) {
  .ordersec .infogrid .delinfo1 img {
    max-width: 100px;
    max-height: 30px;
  }
  .ordersec .infogrid .det {
    font-size: 12px;
  }
  .ordersec .infogrid .det2 {
    font-size: 14px;
  }
  .ordersec .infogrid .delinfo2 {
    padding: 15px 5px 15px 20px;
  }
  .ordersec .infogrid .ibtn {
    width: 90px;
  }
  .ordersec .infogrid .ibtnc {
    width: 90px;
  }
  .ordersec .infogrid .modbtn,
  .ordersec .infogrid .modbtn:focus {
    font-size: 12px;
  }
  }
  @media (max-width: 576px) { 
  .ordersec .infogrid .delinfo1 {
    padding: 15px 5px 15px 13px;
  }
  .ordersec .infogrid .delinfo2 {
    padding: 0px 5px 15px 13px;
  }
  .ordersec .infogrid .ibtn {
    padding: 0px 13px 15px 5px;
  }
  .ordersec .infogrid .ibtnc {
    padding: 0px 13px 15px 5px;
  }
  }
  
  
  
  
  
  .ordersec .csum {
    margin: 5px 0 0 0;
    background-color: #dddddd;
    border-radius: 5px;
  }
  .ordersec .csumcol {
    padding: 7px;
  }
  .ordersec .csum .part {
    color: #181818;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0;
  }
  .ordersec .csum .desc {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    margin: 0;
  }
  .ordersec .csum .desc span {
    display: inline-block;
    margin: 0 10px 0 0;
  }
  .ordersec .csum .price {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    word-wrap: break-word;
    text-align: right;
    margin: 0;
  }
  @media (max-width: 576px) { 
  .ordersec .csumcol:first-child {
    padding: 7px 7px 0;
  }
  }
  
  
  
  
  
  .ordersec .infogrid .checksel {
    width: auto;
  }
  .ordersec .infogrid .invsel:nth-child(1) {
    padding: 15px 13px 15px 20px;
    vertical-align: top;
  }
  .ordersec .infogrid .invsel:nth-child(2) {
    padding: 15px 10px 15px 0px;
    vertical-align: top;
  }
  .ordersec .infogrid .ctrl {
    font-size: 16px;
  }
  .ordersec .infogrid .ctrlindicator {
    border: 1px solid #dddddd;
    background: #dddddd;
  }
  .ordersec .infogrid .invinfo {
    line-height: 1.2;
    padding: 15px 5px 15px 10px;
    vertical-align: top;
  }
  @media (max-width: 767px) {
  .ordersec .infogrid .invsel:nth-child(1) {
    padding: 15px 13px 15px 13px;
  }
  .ordersec .infogrid .invsel:nth-child(2) {
    padding: 15px 13px 15px 0px;
  }  
  .ordersec .infogrid .ctrl {
    font-size: 14px;
  }
  .ordersec .infogrid .invinfo {
    padding: 0px 5px 15px 13px;
  }
  }
  #invdet {
    display: none;
  }
  
  
  
  
  
  .ordersec .stickygrid {
    top: 90px;
  }
  .ordersec .stickygrid .ordergrid1 {
    background-color: white;
    border-radius: 15px 15px 0 0;
    position: relative;
    padding: 25px 40px 20px;
  }
  .ordersec .stickygrid .ordergrid2 {
    background-color: #f0f0f0;
    border-radius: 0 0 15px 15px;
    position: relative;
    padding: 20px 40px 25px;
  }
  @media (max-width: 992px) {
  .ordersec .stickygrid .ordergrid1 {
    padding: 30px 20px 20px;
  }
  .ordersec .stickygrid .ordergrid2 {
    padding: 20px 20px 30px;
  }
  }
  @media (max-width: 767px) {
  .ordersec .stickygrid {
    width: 100%;
    top: auto;
    left: 0;
    bottom: 50px;
    position: fixed !important;
    z-index: 10;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);
  }
  .ordersec .stickygrid .ordergrid1 {
    padding: 20px 30px 15px;
    border-radius: 0;
  }
  .ordersec .stickygrid .ordergrid2 {
    padding: 15px 30px 20px;
    border-radius: 0;
  }
  }
  
  
  
  
  .ordersec .stickygrid2 {
    top: 90px;
  }
  .ordersec .stickygrid2 .ordergrid1 {
    background-color: white;
    border-radius: 15px 15px 0 0;
    position: relative;
    padding: 25px 40px 20px;
  }
  .ordersec .stickygrid2 .ordergrid2 {
    background-color: #f0f0f0;
    border-radius: 0 0 15px 15px;
    position: relative;
    padding: 20px 40px 25px;
  }
  @media (max-width: 992px) {
  .ordersec .stickygrid2 .ordergrid1 {
    padding: 30px 20px 20px;
  }
  .ordersec .stickygrid2 .ordergrid2 {
    padding: 20px 20px 30px;
  }
  }
  @media (max-width: 767px) {
  .ordersec .stickygrid2 .ordergrid1 {
    padding: 20px 20px 15px;
  }
  .ordersec .stickygrid2 .ordergrid2 {
    padding: 15px 20px 20px;
  }
  }
  
  
  
  
  
  .ordersec .stickygrid hr, .ordersec .stickygrid2 hr {
    border-top: 2px solid black;
    margin: 7px 0;
    opacity: .1;
  }
  
  
  
  
  
  .ordersec .ordergrid1 table,
  .ordersec .ordergrid2 table {
    width: 100%;
  }
  .ordersec .ordergrid1 td:last-child,
  .ordersec .ordergrid2 td:last-child {
    text-align: right;
  }
  .ordersec .ordergrid1 td {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .ordersec .ordergrid2 td {
    color: #181818;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .ordersec .ordergrid1 td svg,
  .ordersec .ordergrid2 td svg {
    font-size: 13px;
  }
  .ordersec .ordergrid1 .open td,
  .ordersec .ordergrid2 .open td {
    color: #0057b8;
    font-weight: 600;
    cursor: pointer;
  }
  .ordersec .ordergrid2 .obtn {
    display: block;
  }
  .ordersec .ordergrid2 .concart,
  .ordersec .ordergrid2 .concart:focus {
    width: 100%;
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    margin: 10px 0 0 0;
    position: relative;
    display: block;
    overflow: hidden;
    transition: .3s;
  }
  .ordersec .ordergrid2 .concart i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .ordergrid2 .concart svg {
    vertical-align: middle;
    margin: 0 0 0 5px;
  }
  .ordersec .ordergrid2 .concart:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .ordersec .ordergrid2 .genbtn,
  .ordersec .ordergrid2 .genbtn:focus {
    width: 100%;
    color: #181818;
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    margin: 10px 0 0 0;
    position: relative;
    display: block;
    overflow: hidden;
    transition: .3s;
  }
  .ordersec .ordergrid2 .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .ordergrid2 .genbtn:hover {
    background-color: white;
  }
  .ordersec .ordergrid2 .rembtn,
  .ordersec .ordergrid2 .rembtn:focus {
    width: 100%;
    color: #181818;
    background-color: #dddddd;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    margin: 10px 0 0 0;
    position: relative;
    display: block;
    overflow: hidden;
    transition: .3s;
  }
  .ordersec .ordergrid2 .rembtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .ordergrid2 .rembtn:hover {
    color: #b54242;
    background-color: #ffd4d4;
  }
  @media (max-width: 767px) {
  .ordersec .ordergrid1 td {
    font-size: 13px;
  }
  .ordersec .ordergrid2 .obtn {
    display: flex;
  }
  .ordersec .ordergrid2 .concart,
  .ordersec .ordergrid2 .concart:focus,
  .ordersec .ordergrid2 .genbtn,
  .ordersec .ordergrid2 .genbtn:focus,
  .ordersec .ordergrid2 .rembtn,
  .ordersec .ordergrid2 .rembtn:focus {
    font-size: 13px;
  }
  .ordersec .ordergrid2 .rembtn,
  .ordersec .ordergrid2 .rembtn:focus {
    margin: 10px 10px 0 0;
  }
  .ordersec .ordergrid2 .genbtn,
  .ordersec .ordergrid2 .genbtn:focus {
    margin: 10px 10px 0 0;
  }
  .ordersec .ordergrid2 .addcart i,
  .ordersec .ordergrid2 .rembtn i,
  .ordersec .ordergrid2 .genbtn i {
    font-size: 21px;
  }
  }
  @media (max-width: 576px) {
  .ordersec .ordergrid2 .concart,
  .ordersec .ordergrid2 .concart:focus,
  .ordersec .ordergrid2 .genbtn,
  .ordersec .ordergrid2 .genbtn:focus,
  .ordersec .ordergrid2 .rembtn,
  .ordersec .ordergrid2 .rembtn:focus {
    padding: 10px 7px;
  }
  }
  
  
  
  
  
  
  .ordersec .orderdet {
    width: 100%;
  }
  .ordersec .orderdet .card {
    background-color: #f0f0f0;
    border-radius: 5px;
    border: none;
    padding: 10px;
    margin: 5px 0;
    width: 100%;
  }
  .ordersec .orderdet td {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  
  
  
  
  
  
  .ordersec .recogrid {
    background-color: white;
    border-radius: 15px;
    position: relative;
  }
  .ordersec .detailreco {
    font-weight: 700;
  }  
  .p-5sm {
    padding: 5px !important;
  }
  @media (max-width: 767px) {
  .ordersec .detailreco {
    text-align: left;
  }  
  .p-5sm {
    padding: 0 !important;
  }
  }
  
  
  
  
  .ordersec .emptygrid {
    background-color: white;
    height: 500px;
    border-radius: 15px;
    position: relative;
  }
  .ordersec .emptygrid .info {
    width: 100%;
    max-width: 400px;
    padding: 15px 13px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .ordersec .emptygrid .desc {
    color: #181818;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 30px 0;
  }
  @media (max-width: 767px) {
  .ordersec .emptygrid {
    height: 300px;
  }  
  .ordersec .emptygrid .info {
    padding: 15px 13px;
  }  
  .ordersec .emptygrid .desc {
    font-size: 16px;
  }
  }
  .ordersec .emptygrid .hibtn,
  .ordersec .emptygrid .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .ordersec .emptygrid .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .emptygrid .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .ordersec .emptygrid .genbtn,
  .ordersec .emptygrid .genbtn:focus {
    color: #181818;
    background-color: #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    transition: .3s;
    animation-delay: .1s;
  }
  .ordersec .emptygrid .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordersec .emptygrid .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) { 
  .ordersec .emptygrid .hibtn,
  .ordersec .emptygrid .hibtn:focus,
  .ordersec .emptygrid .genbtn,
  .ordersec .emptygrid .genbtn:focus {
    font-size: 13px;
    padding: 10px 30px;
  }
  .ordersec .emptygrid .hibtn i,
  .ordersec .emptygrid .genbtn i {
    font-size: 21px;
  }
  }
  
  
  
  
  .cammodal1 .modal-dialog {
      max-width: 500px;
  }
  .cammodal2 .modal-dialog {
      max-width: 750px;
  }
  .cammodal3 .modal-dialog {
      max-width: 750px;
  }
  .cammodal4 .modal-dialog {
      max-width: 600px;
  }
  
  
  
  .camdatos .modal-body {
      background-color: #dbdbdb;
      padding: 40px 80px;
  }
  .camdatos .modal-body h3 {
    font-size: 25px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .camdatos .modal-body p {
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    margin: -5px 0 10px 0;
  }
  .camdatos .modal-body .formselect:first-child {
    margin-top: 10px;
  }
  @media (max-width: 767px) {
  .camdatos .modal-body h3 {
    font-size: 19px;
  }
  .camdatos .modal-body p {
    font-size: 12px;
  }
  }
  @media (max-width: 576px) {
  .camdatos .modal-body {
    padding: 40px 30px;
  } 
  }
  .camdatos .tab-content {
    margin: 10px 0 0 0;
  }
  .camdatos .nav {
    margin: 0 -12px;
  }
  .camdatos .camnav1 .nav-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: #181818;
    padding: 15px;
    background-color: #ededed;
    margin: 0 5px;
  }
  .camdatos .camnav2 .nav-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: #181818;
    background-color: #ededed;
    border-radius: 5px;
    margin: 0 5px;
  }
  .camdatos .camnav1 .nav-link:hover,
  .camdatos .camnav2 .nav-link:hover {
    background-color: #ededed;
  
  }
  .camdatos .camnav1 .nav-link i,
  .camdatos .camnav2 .nav-link i {
    font-size: 23px;
    color: #0057b8;
    margin: 0 0 3px 0;
    display: block;
  }
  @media (max-width: 767px) {
  .camdatos .camnav1 .nav-link,
  .camdatos .camnav2 .nav-link {
    font-size: 12px;
  }
  .camdatos .camnav1 .nav-link i,
  .camdatos .camnav2 .nav-link i {
    font-size: 19px;
  }
  }
  .camdatos .camnav2 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #181818 !important;
    background-color: white !important;
  }
  
  
  
  
  
  
  .camdatos .formcheck {
    width: 100%;
    font-size: 14px;
    color: #181818;
    font-weight: 500;
    text-align: left;
    background-color: #ededed;
    border-radius: 5px;
    border: none;
    outline: none;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 0;
    transition: .3s;
  }
  .camdatos .formcheck:hover, .camdatos .formcheck:focus {
    background-color: white;
  }
  .camdatos .ctrlindicator {
    top: 26px;
    left: 16px;
    border: 1px solid #dddddd;
    background: #dddddd;
  }
  .camdatos .formcheck table {
    width: 100%;
  }
  .camdatos .formcheck td {
    
  }
  .camdatos .formcheck .logo {
    width: 100%;
    max-width: 80px;
  }
  .camdatos .formcheck .cold:nth-child(1) {
    padding: 15px 10px;
    vertical-align: top;
  }
  .camdatos .formcheck .cold:nth-child(2) {
    padding: 15px 10px;
    vertical-align: top;
  }
  .camdatos .formcheck .cold:nth-child(3) {
    padding: 15px 10px;
    vertical-align: top;
  }
  
  
  
  .camdatos .formcheck .rowo {
    padding: 0px 10px 0px 50px;
  }
  .camdatos .formcheck .colo:nth-child(1) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colo:nth-child(2) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colo:nth-child(3) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colo:nth-child(4) {
    padding: 15px 10px;
  }
  @media (max-width: 767px) {
  .camdatos .formcheck .colo:nth-child(1) {
    padding: 15px 15px 5px;
  }
  .camdatos .formcheck .colo:nth-child(2) {
    padding: 5px 15px 15px;
  }
  .camdatos .formcheck .colo:nth-child(3) {
    padding: 15px 15px 5px;
  }
  .camdatos .formcheck .colo:nth-child(4) {
    padding: 15px 15px 5px;
  }
  }
  @media (max-width: 576px) {
  .camdatos .formcheck .colo:nth-child(1) {
    padding: 15px 15px 5px;
  }
  .camdatos .formcheck .colo:nth-child(2) {
    padding: 5px 15px 10px;
  }
  .camdatos .formcheck .colo:nth-child(3) {
    padding: 5px 15px 5px;
  }
  .camdatos .formcheck .colo:nth-child(4) {
    padding: 5px 15px 5px;
  }
  }
  
  
  
  .camdatos .formcheck .rowc {
    padding: 0px 10px 0px 50px;
    display: flex;
    flex-wrap: wrap;
  }
  .camdatos .formcheck .colc:nth-child(1) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colc:nth-child(2) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colc:nth-child(3) {
    padding: 15px 10px;
  }
  @media (max-width: 767px) {
  .camdatos .formcheck .colc:nth-child(1) {
    padding: 15px 15px 0px;
  }
  .camdatos .formcheck .colc:nth-child(2) {
    padding: 0px 15px 10px;
  }
  .camdatos .formcheck .colc:nth-child(3) {
    padding: 15px 15px 0px;
  }
  }
  
  
  
  
  .camdatos .formcheck .rowc {
    padding: 0px 10px 0px 50px;
  }
  .camdatos .formcheck .colc:nth-child(1) {
    padding: 15px 10px;
  }
  .camdatos .formcheck .colc:nth-child(2) {
    padding: 15px 10px;
  }
  @media (max-width: 767px) {
  .camdatos .formcheck .colc:nth-child(1) {
    padding: 15px 15px 0px;
  }
  .camdatos .formcheck .colc:nth-child(2) {
    padding: 0px 15px 10px;
  }
  }
  
  
  
  
  .camdatos .formcheck .rowe {
    padding: 0px 10px 0px 50px;
  }
  .camdatos .formcheck .cole {
    padding: 15px 10px;
  }
  
  
  
  .camdatos .formcheck .label {
    font-size: 11px;
    color: #0057b8;
    font-weight: 800;
    text-align: left;
    margin: 0 0 3px 0;
  }
  .camdatos .formcheck .desc {
    font-size: 14px;
    color: #181818;
    line-height: 1.1;
    font-weight: 500;
    text-align: left;
    margin: 0;
  }
  .camdatos .formcheck .desc2 {
    font-size: 13px;
    color: #181818;
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
  }
  .camdatos .formcheck .desc .tax {
    font-size: 10px;
    font-weight: 800;
  }
  .camdatos .formcheck .genbtn, .camdatos .formcheck .genbtn:focus {
    color: #181818;
    background-color: #d9d9d9;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    border-radius: 5px;
    padding: 5px 10px;
    position: relative;
    margin: 10px 0 0 0;
    display: inline-block;
    transition: .3s;
  }
  .camdatos .formcheck .genbtn:hover {
    background-color: #dbdbdb;
  }
  @media (max-width: 767px) {
  .camdatos .formcheck .label {
    font-size: 10px;
  }
  .camdatos .formcheck .desc {
    font-size: 12px;
  }
  .camdatos .formcheck .genbtn, .camdatos .formcheck .genbtn:focus {
    font-size: 11px;
  }
  }
  @media (max-width: 580px) {
  .camdatos .formcheck .cold:nth-child(2) {
    width: 40%;
  }
  }
  
  
  
  
  
  .camdatos .modal-body .cond {
    font-size: 13px;
    color: #181818;
    line-height: 1.1;
    font-weight: 500;
    margin: 10px 0 0 0;
  }
  @media (max-width: 767px) {
  .camdatos .modal-body .cond {
    font-size: 11px;
  }
  }
  
  
  
  
  
  .camdatos .formcheck .descp {
    font-size: 16px;
    color: #181818;
    line-height: 1.1;
    font-weight: 700;
    margin: 0;
  }
  .camdatos .ctrlindc {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
  }
  .camdatos .formcheck .rowp {
    padding: 0px 10px 0px 50px;
  }
  .camdatos .formcheck .colp:nth-child(1) {
    padding: 15px 15px;
    display: grid;
    place-items: center left;
  }
  .camdatos .formcheck .colp:nth-child(2) {
    padding: 15px 15px;
    display: grid;
    place-items: center right;
  }
  .camdatos .formcheck .colp:nth-child(2) .logo {
    height: 100%;
    max-height: 25px;
    width: auto;
    max-width: none;
    text-align: right;
  }
  @media (max-width: 767px) {
  .camdatos .formcheck .descp {
    font-size: 14px;
  }
  .camdatos .formcheck .colp:nth-child(1) {
    padding: 15px 15px;
  }
  .camdatos .formcheck .colp:nth-child(2) {
    padding: 15px 15px;
  }
  .camdatos .formcheck .colp:nth-child(2) .logo {
    max-height: 15px;
  }
  }
  
  
  .camdatos .formchecksel .morebtn, .camdatos .formchecksel .morebtn:focus {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #181818;
    margin: 15px 0 5px;
    width: 100%;
    display: block;
    transition:  .3s;
  }
  
  .camdatos .formchecksel .morebtn:hover {
    color: #0057b8;
  }
  
  @media (max-width: 767px) {
  .camdatos .formchecksel .morebtn {
    font-size: 14px;
  }
  }
  
  
  
  /* Seccion pedidos */
  
  .orderlist {
    max-width: 1220px !important;
    padding: 125px 0 0 !important;
  }
  
  @media (max-width: 767px) {
  .orderlist {
    padding: 70px 0 0 !important;
  }
  }
  
  .ordlistdesc {
    max-width: 1190px !important;
    padding: 0 23px 0 !important;
    margin: 0 auto;
  }
  @media (max-width: 767px) {
  .ordlistdesc {
    padding: 0 23px 0 !important;
  }
  }
  
  
  .ordlistdesc .searchfil {
    width: 100%;
    height: 45px;
    position: relative;
    transition: .3s;
  }
  .ordlistdesc .tittle {
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s;
  }
  .ordlistdesc .searchdat {
    display: flex;
    position: absolute;
    top: 0;
    right: 330px;
    transition: .3s;
  }
  .ordlistdesc .daterange {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    transition: .3s;
  }
  @media (max-width: 767px) {  
  .ordlistdesc .tittle {
    width: 100%;
    top: 5px;
    left: 0;
  }
  .ordlistdesc .searchdat {
    right: 335px;
  }
  .ordlistdesc .daterange {
  }
  }
  @media (max-width: 680px) {
  .ordlistdesc .searchfil {
    height: 72px;
  } 
  .ordlistdesc .tittle {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .ordlistdesc .searchdat {
    top: 40px;
    left: 0;
    right: auto;
  }
  .ordlistdesc .daterange {
    top: 40px;
  }
  }
  @media (max-width: 490px) {
  .ordlistdesc .searchfil {
    height: 110px;
  }   
  .ordlistdesc .tittle {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .ordlistdesc .searchdat {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ordlistdesc .daterange {
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  }
  
  
  
  
  .ordlistdesc .tittle p {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
  }
  @media (max-width: 767px) {
  .ordlistdesc .tittle p {
    font-size: 20px;
  }
  }
  @media (max-width: 680px) {
  .ordlistdesc .tittle p {
    text-align: center;
  }
  }
  @media (max-width: 490px) {
  .ordlistdesc .tittle p {
    
  }
  }
  
  
  .ordlistdesc .searchdat .formselect2 {
    font-size: 13px;
    color: #181818;
    font-weight: 500;
    background-color: #ededed;
    border-radius: 5px;
    padding: 8px 10px 8px 10px;
    border: none;
    outline: none;
    transition: .3s;
  }
  .ordlistdesc .searchdat .formselect2:hover,
  .ordlistdesc .searchdat .formselect2:focus {
    background-color: white;
  }
  @media (max-width: 767px) {
  .ordlistdesc .searchdat .formselect2 {
    font-size: 11px;
    padding: 8px 7px;
  }
  }
  @media (max-width: 490px) {
  .ordlistdesc .searchdat .formselect2 {
    width: 156px;
  }
  }
  .ordlistdesc .daterangeinput {
    position: relative;
    margin: 0 0 0 5px;
  }
  .ordlistdesc .daterangeinput label {
    width: 100%;
    font-size: 13px;
    color: #181818;
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .ordlistdesc .daterangeinput input {
    width: 152px;
    font-size: 13px;
    color: #181818;
    font-weight: 500;
    background-color: #ededed;
    border: none;
    border-radius: 5px !important;
    padding: 7px 10px 7px 60px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    transition: .3s;
  }
  .ordlistdesc .daterangeinput input::-webkit-calendar-picker-indicator {
    display: none;
  }
  .ordlistdesc .daterangeinput input:hover,
  .ordlistdesc .daterangeinput input:focus {
    background-color: white;
  }
  @media (max-width: 767px) {
  .ordlistdesc .daterangeinput label  {
    font-size: 11px;
  }  
  .ordlistdesc .daterangeinput input {
    width: 156px;
    font-size: 11px;
    padding: 7px 10px 7px 54px;
  }
  }
  
  /* Seccion pedidos mosaico */
  
  .ordlistsec{
    max-width: 1222px !important;
    padding: 10px 18px 60px !important;
  }
  
  @media (max-width: 767px) {
  .ordlistsec {
    padding: 10px 18px !important;
  }
  }
  
  .ordlistsec .grid {
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .ordlistsec .grid:hover {
    background-color: white;
  }
  
  .ordlistsec .grid table {
    width: 100%;
  }
  .ordlistsec .grid .ordcol {
    display: flex;
    align-items: center;
  }
  .ordlistsec .grid .ordcol:nth-child(1) {
    padding: 23px 10px 23px 30px;
  }
  .ordlistsec .grid .ordcol:nth-child(2) {
    justify-content: right;
    padding: 23px 30px 23px 10px;
  }
  .ordlistsec .grid .cont {
    width: 100%;
  }
  .ordlistsec .grid .ordcol:nth-child(2) .cont {
    width: auto;
  }
  .ordlistsec .grid .order {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 50px 5px 0;
    transition: .3s;
  }
  .ordlistsec .grid .order strong {
    color: #0057b8;
    font-weight: 700;
  }
  .ordlistsec .grid .stat {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px 5px 0;
    transition: .3s;
  }
  .ordlistsec .grid .stat strong {
    font-weight: 700;
  }
  
  
  
  .ordlistsec .grid .stat1 strong {
    color: red;
  }
  .ordlistsec .grid .stat2 strong {
    color: #0057b8;
  }
  .ordlistsec .grid .stat3 strong {
    color: #00c500;
  }
  
  
  
  .ordlistsec .grid .alabel {
    color: #181818;
    background-color: #dddddd;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 5px 7px;
    border-radius: 20px;
    margin: 5px 5px 5px 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: .3s;
  }
  .ordlistsec .grid br {
    display: none;
  }
  .ordlistsec .grid .alabel i {
    color: #0057b8;
    font-size: 20px;
    vertical-align: middle;
  }
  .ordlistsec .grid .price {
    color: #181818;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    word-wrap: break-word;
    vertical-align: middle;
    margin: 5px 15px 5px 0;
    transition: .3s;
  }
  .ordlistsec .grid .btn, .ordlistsec .grid .btn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 0 5px 0;
    overflow: hidden;
    vertical-align: middle;
    transition: .3s;
  }
  .ordlistsec .grid .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .ordlistsec .grid .genbtn, .ordlistsec .grid .genbtn:focus {
    color: #181818;
    background-color: #dddddd;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    padding: 10px 15px;
    border: 0;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 0 5px 0;
    overflow: hidden;
    vertical-align: middle;
    transition: .3s;
  }
  .ordlistsec .grid .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 993px) {
  .ordlistsec .grid .order {
    margin: 5px 15px 5px 0;
  } 
  }
  @media (max-width: 767px) {
  .ordlistsec .grid .ordcol:nth-child(1) {
    padding: 7px 25px 0 25px;
  }
  .ordlistsec .grid .ordcol:nth-child(2) {
    padding: 0 25px 12px 25px;
  }  
  .ordlistsec .grid .order {
    font-size: 12px;
  }  
  .ordlistsec .grid .stat {
    font-size: 12px;
  }  
  .ordlistsec .grid .price {
    font-size: 12px;
  }  
  .ordlistsec .grid .btn, .ordlistsec .grid .btn:focus,
  .ordlistsec .grid .genbtn, .ordlistsec .grid .genbtn:focus {
    font-size: 10px;
    padding: 8px 10px;
  }
  }
  @media (max-width: 635px) { 
  .ordlistsec .grid br {
    display: inline-block;
  }
  }
  
  
  
  .ordlistsec .emptygrid {
    background-color: white;
    height: 500px;
    border-radius: 15px;
    position: relative;
  }
  .ordlistsec .emptygrid .info {
    width: 100%;
    max-width: 400px;
    padding: 15px 13px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .ordlistsec .emptygrid .desc {
    color: #181818;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 30px 0;
  }
  @media (max-width: 767px) {
  .ordlistsec .emptygrid {
    height: 400px;
  }  
  .ordlistsec .emptygrid .info {
    padding: 15px 13px;
  }  
  .ordlistsec .emptygrid .desc {
    font-size: 16px;
  }
  }
  .ordlistsec .emptygrid .hibtn,
  .ordlistsec .emptygrid .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    transition: .3s;
    animation-delay: .1s;
  }
  .ordlistsec .emptygrid .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .ordlistsec .emptygrid .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) { 
  .ordlistsec .emptygrid .hibtn,
  .ordlistsec .emptygrid .hibtn:focus {
    font-size: 13px;
    padding: 10px 30px;
  }
  .ordlistsec .emptygrid .hibtn i {
    font-size: 21px;
  }
  }
  
  
  
  .orderproc2 .lvl {
    min-height: 80px;
    position: relative;
    padding: 4px 0 20px 40px;
  }
  .orderproc2 .lvl:last-child {
    min-height: 0;
    padding: 4px 0 0 40px;
  }
  .orderproc2 .bar {
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .orderproc2 .lvl:last-child .bar {
    height: 30px;
  }
  .orderproc2 .bar1 {
    background-color: #afafaf;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .orderproc2 .bar2 {
    background-color: #0057b8;
    width: 5px;
    height: 0%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s;
    animation-fill-mode: forwards;
  }
  .orderproc2 .stat {
    color: white;
    text-align: center;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 15px;
    border: 3px solid #afafaf;
    display: block;
    margin: 0 -1px 0 auto;
    transition: .3s;
    animation-fill-mode: forwards;
    position: absolute;
    top: 0;
    left: 0;
  }
  .orderproc2 .desc1 {
    color: #bdbdbd;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 0 0;
    transition: .3s;
    animation-fill-mode: forwards;
  }
  .orderproc2 .desc2 {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 10px 0;
  }
  .orderproc2 .desc2:last-child {
    margin: 0 0 0 0;
  }
  @media (max-width: 767px) { 
  .orderproc2 .desc1 {
    font-size: 14px;
  }
  .orderproc2 .desc2 {
    font-size: 12px;
  }
  }
  
  
  
  @keyframes cprogressbar2 {
    from {height: 0%;}
    to {height: 100%;}
  }
  @keyframes cprogressstat2 {
    from {background-color: #dbdbdb; border: 3px solid #afafaf;}
    to {background-color: #0057b8; border: 3px solid #0057b8;}
  }
  @keyframes cprogresstext2 {
    from {color: #bdbdbd;}
    to {color: #0057b8;}
  }
  
  
  .orderproc2 .lvl .stat {
    animation-duration: 1s;
  }
  .orderproc2 .lvl .desc1 {
    animation-duration: 1s;
  }
  .orderproc2 .lvl .bar2 {
    animation-duration: 1s;
  }
  
  
  /* Animaciones estatus */
  
  .orderproc2.active1 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active1 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  
  
  
  
  .orderproc2.active2 .lvl:nth-child(2) .stat {
    animation-name: cprogressstat2;
    animation-delay: .5s;
  }
  .orderproc2.active2 .lvl:nth-child(2) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: .5s;
  }
  .orderproc2.active2 .lvl:nth-child(1) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 0s;
  }
  
  
  .orderproc2.active2 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active2 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  
  
  
  
  .orderproc2.active3 .lvl:nth-child(3) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1s;
  }
  .orderproc2.active3 .lvl:nth-child(3) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1s;
  }
  .orderproc2.active3 .lvl:nth-child(2) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: .5s;
  }
  
  
  .orderproc2.active3 .lvl:nth-child(2) .stat {
    animation-name: cprogressstat2;
    animation-delay: .5s;
  }
  .orderproc2.active3 .lvl:nth-child(2) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: .5s;
  }
  .orderproc2.active3 .lvl:nth-child(1) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 0s;
  }
  
  
  .orderproc2.active3 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active3 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  
  
  
  
  .orderproc2.active4 .lvl:nth-child(4) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1.5s;
  }
  .orderproc2.active4 .lvl:nth-child(4) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1.5s;
  }
  .orderproc2.active4 .lvl:nth-child(3) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 1s;
  }
  
  
  .orderproc2.active4 .lvl:nth-child(3) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1s;
  }
  .orderproc2.active4 .lvl:nth-child(3) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1s;
  }
  .orderproc2.active4 .lvl:nth-child(2) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: .5s;
  }
  
  
  .orderproc2.active4 .lvl:nth-child(2) .stat {
    animation-name: cprogressstat2;
    animation-delay: .5s;
  }
  .orderproc2.active4 .lvl:nth-child(2) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: .5s;
  }
  .orderproc2.active4 .lvl:nth-child(1) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 0s;
  }
  
  
  .orderproc2.active4 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active4 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  
  
  
  
  .orderproc2.active5 .lvl:nth-child(5) .stat {
    animation-name: cprogressstat2;
    animation-delay: 2s;
  }
  .orderproc2.active5 .lvl:nth-child(5) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 2s;
  }
  .orderproc2.active5 .lvl:nth-child(4) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 1.5s;
  }
  
  
  .orderproc2.active5 .lvl:nth-child(4) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1.5s;
  }
  .orderproc2.active5 .lvl:nth-child(4) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1.5s;
  }
  .orderproc2.active5 .lvl:nth-child(3) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 1s;
  }
  
  
  .orderproc2.active5 .lvl:nth-child(3) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1s;
  }
  .orderproc2.active5 .lvl:nth-child(3) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1s;
  }
  .orderproc2.active5 .lvl:nth-child(2) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: .5s;
  }
  
  
  .orderproc2.active5 .lvl:nth-child(2) .stat {
    animation-name: cprogressstat2;
    animation-delay: .5s;
  }
  .orderproc2.active5 .lvl:nth-child(2) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: .5s;
  }
  .orderproc2.active5 .lvl:nth-child(1) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 0s;
  }
  
  
  .orderproc2.active5 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active5 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  
  
  
  
  .orderproc2.active6 .lvl:nth-child(6) .stat {
    animation-name: cprogressstat2;
    animation-delay: 2.5s;
  }
  .orderproc2.active6 .lvl:nth-child(6) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 2.5s;
  }
  .orderproc2.active6 .lvl:nth-child(5) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 2s;
  }
  
  
  .orderproc2.active6 .lvl:nth-child(5) .stat {
    animation-name: cprogressstat2;
    animation-delay: 2s;
  }
  .orderproc2.active6 .lvl:nth-child(5) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 2s;
  }
  .orderproc2.active6 .lvl:nth-child(4) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 1.5s;
  }
  
  
  .orderproc2.active6 .lvl:nth-child(4) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1.5s;
  }
  .orderproc2.active6 .lvl:nth-child(4) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1.5s;
  }
  .orderproc2.active6 .lvl:nth-child(3) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 1s;
  }
  
  
  .orderproc2.active6 .lvl:nth-child(3) .stat {
    animation-name: cprogressstat2;
    animation-delay: 1s;
  }
  .orderproc2.active6 .lvl:nth-child(3) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 1s;
  }
  .orderproc2.active6 .lvl:nth-child(2) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: .5s;
  }
  
  
  .orderproc2.active6 .lvl:nth-child(2) .stat {
    animation-name: cprogressstat2;
    animation-delay: .5s;
  }
  .orderproc2.active6 .lvl:nth-child(2) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: .5s;
  }
  .orderproc2.active6 .lvl:nth-child(1) .bar2 {
    animation-name: cprogressbar2;
    animation-delay: 0s;
  }
  
  
  .orderproc2.active6 .lvl:nth-child(1) .stat {
    animation-name: cprogressstat2;
    animation-delay: 0s;
  }
  .orderproc2.active6 .lvl:nth-child(1) .desc1 {
    animation-name: cprogresstext2;
    animation-delay: 0s;
  }
  
  /* Seccion cuenta */
  
  /*.accountsec {
    max-width: 1200px !important;
    padding: 110px 18px 60px !important;
  }
  
  @media (max-width: 767px) {
  .accountsec {
    padding: 20px 0 0 0;
  }
  }
  
  .accountsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .accountsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .accountsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  
  .accountsec .grid {
    height: 100%;
    background-color: #f0f0f0;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .accountsec .grid:hover {
    background-color: white;
  }*/
  
  /* Informacion de credito */
  
  .creditsec {
    max-width: 1220px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .creditsec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .creditsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .creditsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .creditsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  .creditsec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .creditsec .desc a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .creditsec .desc a:hover {
    color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .creditsec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .creditsec .headtittle h2 {
    font-size: 20px;
  }
  .creditsec .headtittle img {
    max-width: 55px;
  }
  .creditsec .desc {
    font-size: 11px;
  }
  }
  
  .creditsec .row {
    justify-content: left;
  }
  
  .creditsec .grid {
    height: 100%;
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .creditsec .grid .desc1 {
    color: #181818;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    word-wrap: break-word;
    margin: 0 0 0 0;
  }
  .creditsec .grid .desc2 {
    color: #181818;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  
  @media (max-width: 767px) {
  .creditsec .grid {
    padding: 20px 13px;
  }  
  .creditsec .grid .desc1 {
    font-size: 20px;
  }
  .creditsec .grid .desc2 {
    font-size: 25px;
  }
  }
  
  /* Preguntas Frecuentes FAQs */
  
  .faqssec {
    max-width: 900px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .faqssec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .faqssec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .faqssec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .faqssec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  .faqssec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .faqssec .desc a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .faqssec .desc a:hover {
    color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .faqssec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .faqssec .headtittle h2 {
    font-size: 20px;
  }
  .faqssec .headtittle img {
    max-width: 55px;
  }
  .faqssec .desc {
    font-size: 11px;
  }
  }
  
  
  
  .faqssec .accord-main .accord-item {
    margin: 10px 0 0 0;
    border-radius: 15px;
    overflow: hidden;
  }
  .faqssec .accord-main .accord-item:first-child {
    margin: 0 0 0 0;
  }
  .faqssec .accord-main > .accord-item > .accord-btn, .faqssec .accord-main > .accord-item > .accord-btn:focus {
    width: 100%;
    color: #181818;
    background-color: #eeeeee;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.3;
    word-wrap: break-word;
    text-align: left;
    padding: 20px 120px 20px 80px;
    border: none;
    outline: none;
    position: relative;
    transition: .3s;
  }
  .faqssec .accord-main > .accord-item > .accord-btn:hover {
    background-color: #f7f7f7;
  }
  .faqssec .accord-main > .accord-item.open > .accord-btn {
    background-color: #f7f7f7;
  }
  .faqssec .accord-main > .accord-item > .accord-btn::after {
    color: #0057b8;
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 25px;
    position: absolute;
    top: 50%;
    right: 80px;
    transform: rotate(0deg) translateY(-50%);
    transform-origin: center;
    transition: transform 0.3s ease;
    background: none !important;
    box-shadow: none !important;
  }
  .faqssec .accord-main > .accord-item.open > .accord-btn::after {
    transform: rotate(180deg) translateY(50%);
  }
  .faqssec .accord-main .accord-body {
    background-color: white;
    padding: 20px 68px 40px;
  }
  @media (max-width: 767px) {
    .faqssec .accord-main > .accord-item > .accord-btn, .faqssec .accord-main > .accord-item > .accord-btn:focus {
      font-size: 18px;
      padding: 20px 55px 20px 36px;
    }
    .faqssec .accord-main > .accord-item > .accord-btn::after {
      right: 33px;
    }
    .faqssec .accord-main .accord-body {
      padding: 20px 20px 20px;
    }
  }
  
  
  
  .faqssec .accord-inner .accord-item {
    margin: 10px 0 0 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .faqssec .accord-inner .accord-item:first-child {
    margin: 0 0 0 0;
  }
  .faqssec .accord-inner > .accord-item > .accord-btn, .faqssec .accord-inner > .accord-item > .accord-btn:focus {
    width: 100%;
    color: #181818;
    background-color: #f0f0f0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: left;
    padding: 10px 50px 10px 15px;
    border: none;
    outline: none;
    position: relative;
    transition: .3s;
  }
  .faqssec .accord-inner > .accord-item > .accord-btn:hover {
    background-color: #f7f7f7;
  }
  .faqssec .accord-inner > .accord-item.open > .accord-btn {
    background-color: #f7f7f7;
  }
  .faqssec .accord-inner > .accord-item > .accord-btn::after {
    color: #0057b8;
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: rotate(0deg) translateY(-50%);
    transform-origin: center;
    transition: transform 0.3s ease;
    background: none !important;
    box-shadow: none !important;
  }
  .faqssec .accord-inner > .accord-item.open > .accord-btn::after {
    transform: rotate(180deg) translateY(50%);
  }
  .faqssec .accord-inner .accord-body {
    background-color: #ebebeb;
    padding: 15px;
  }
  @media (max-width: 767px) {
    .faqssec .accord-inner > .accord-item > .accord-btn, .faqssec .accord-inner > .accord-item > .accord-btn:focus {
      font-size: 14px;
    }
  }
  
  
  
  
  .faqssec .accord .desc {
    color: #181818;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    word-wrap: break-word;
    margin: 15px 0 0 0;
  }
  .faqssec .accord .desc:first-child {
    margin: 0;
  }
  
  
  @media (max-width: 767px) {
    .faqssec .accord .desc {
      font-size: 12px;
    }
  }
  
  /* Aviso de privacidad */
  
  .termsec {
    max-width: 1220px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .termsec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .termsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .termsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .termsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  @media (max-width: 767px) {
  .termsec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .termsec .headtittle h2 {
    font-size: 20px;
  }
  .termsec .headtittle img {
    max-width: 55px;
  }
  }
  
  .termsec .row {
    justify-content: left;
  }
  
  .termsec .grid {
    height: 100%;
    background-color: #f0f0f0;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .termsec .grid h3 {
    color: #0057b8;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .termsec .grid h4 {
    color: #181818;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .termsec .grid p {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .termsec .grid p:last-child {
    margin: 0 0 0 0;
  }
  .termsec .grid ul {
    margin: 0 0 20px 0;
  }
  .termsec .grid ol {
    margin: 0 0 20px -17px;
  }
  .termsec .grid ol ul,
  .termsec .grid ul ul {
    margin: 10px 0 10px -17px;
  }
  .termsec .grid dl {
    margin: 0 0 20px 0;
  }
  .termsec .grid ul:last-child,
  .termsec .grid ol:last-child,
  .termsec .grid dl:last-child {
    margin: 0 0 0 0;
  }
  .termsec .grid ul:last-child li:last-child,
  .termsec .grid ol:last-child li:last-child,
  .termsec .grid dl:last-child dd:last-child {
    margin: 0 0 0 0;
  }
  .termsec .grid li, .termsec .grid dd {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .termsec .grid li:last-child, .termsec .grid dd:last-child {
    margin: 0 0 0 0;
  }
  .termsec .grid a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .termsec .grid .linkb {
    color: #181818;
  }
  .termsec .grid a:hover {
    color: #4ba7ff;
  }
  .termsec .grid i {
    color: #0057b8;
    font-size: 20px;
    vertical-align: middle;
  }
  .termsec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 0 0 20px 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .termsec .grid .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .termsec .grid .map {
    background-color: #dbdbdb;
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 10px 0 0 0;
  }
  .termsec .grid iframe {
    width: 200%;
    height: 200%;
    border: 0;
    filter: grayscale(0%) invert(12%);
    -webkit-filter: grayscale(0%) invert(12%);
    -moz-filter: grayscale(0%) invert(12%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .85;
  }
  
  @media (max-width: 767px) {
  .termsec .grid {
    padding: 20px 13px;
  }  
  .termsec .grid h3 {
    font-size: 17px;
  }
  .termsec .grid h4 {
    font-size: 13px;
  }
  .termsec .grid p {
    font-size: 11px;
  }
  .termsec .grid li, .termsec .grid dd {
    font-size: 11px;
  }
  .termsec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  .termsec .grid .map {
    height: 300px;
  }
  }
  
  
  
  
  .termsec .grid .contact1 {
    width: 100%;
    max-width: 450px;
    margin: 0 0 20px 0;
  }
  .termsec .grid .contact1 td:nth-child(1) {
    width: 40%;
  }
  .termsec .grid .contact1 td:nth-child(2) {
    width: 20%;
    padding: 0 10px;
  }
  .termsec .grid .contact1 td:nth-child(3) {
    width: 40%;
  }
  
  
  
  
  .termsec .grid .contact2 {
    width: 100%;
    max-width: 400px;
    margin: 0 0 20px 0;
  }
  .termsec .grid .contact2 td:nth-child(1) {
    width: 40%;
  }
  .termsec .grid .contact2 td:nth-child(2) {
    width: 60%;
  }
  
  
  
  
  .termsec .grid .contact3 {
    width: 100%;
    max-width: 550px;
    margin: 0 0 10px 0;
  }
  .termsec .grid .contact3 td:nth-child(1) {
    width: 40%;
  }
  .termsec .grid .contact3 td:nth-child(2) {
    width: 20%;
    padding: 0 10px;
  }
  .termsec .grid .contact3 td:nth-child(3) {
    width: 40%;
  }
  .termsec .grid .contact3 td {
    padding: 0 0 15px 0;
  }
  .termsec .grid .contact3 tr:last-child td {
    margin: 0;
  }
  .termsec .grid .contact3 p {
    margin: 0;
  }
  .termsec .grid .contact3 h6 {
    color: #181818;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0;
  }
  
  
  
  
  
  .termsec .grid th:first-child, .termsec .grid td:first-child {
    text-align: left;
  }
  .termsec .grid th {
    color: #181818;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    word-wrap: break-word;
    padding: 0 0 5px 0;
    vertical-align: top;
  }
  .termsec .grid td {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    vertical-align: top;
  }
  
  
  @media (max-width: 767px) {
  .termsec .grid td {
    font-size: 11px;
  }
  }
  
  @media (max-width: 490px) {
  .termsec .grid .contact1 td {
    width: 100%;
    display: block;
    text-align: left;
  }
  .termsec .grid .contact1 td:nth-child(1) {
    width: 100%;
  }
  .termsec .grid .contact1 td:nth-child(2) {
    width: 100%;
    padding: 0;
  }
  .termsec .grid .contact1 td:nth-child(3) {
    width: 100%;
    padding: 0 0 10px 0;
  }
  
  
  .termsec .grid .contact3 td {
    width: 100%;
    display: block;
    text-align: left;
  }
  .termsec .grid .contact3 td:nth-child(1) {
    width: 100%;
    padding: 0;
  }
  .termsec .grid .contact3 td:nth-child(2) {
    width: 100%;
    padding: 0;
  }
  .termsec .grid .contact3 td:nth-child(3) {
    width: 100%;
    padding: 0 0 15px 0;
  }
  .termsec .grid .contact3 tr:last-child td:nth-child(3) {
    width: 100%;
    padding: 0;
  }
  }
  
  /* Formas de pago y envío */
  
  .paydelsec {
    max-width: 1220px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .paydelsec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .paydelsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .paydelsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .paydelsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  .paydelsec .bottomdesc {
    padding: 30px 20px 0px 20px;
  }
  .paydelsec .bottomdesc p {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  @media (max-width: 767px) {
  .paydelsec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .paydelsec .headtittle h2 {
    font-size: 20px;
  }
  .paydelsec .headtittle img {
    max-width: 55px;
  }
  .paydelsec .bottomdesc p {
    font-size: 10px;
  }
  }
  
  .paydelsec .row {
    justify-content: center;
  }
  
  .paydelsec .grid {
    height: 100%;
    background-color: #f0f0f0;
    padding: 0 40px 75px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .paydelsec .grid:hover {
    background-color: white;
  }
  .paydelsec .grid .bottommar {
    margin-bottom: -50px;
  }
  .paydelsec .grid .term {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 40px 40px;
  }
  .paydelsec .grid .term p {
    color: #181818;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
  }
  .paydelsec .grid h3 {
    color: #0057b8;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelsec .grid h4 {
    color: #181818;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelsec .grid p {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelsec .grid p:last-child {
    margin: 0 0 0 0;
  }
  .paydelsec .grid ul {
    margin: 0 0 20px -17px;
  }
  .paydelsec .grid ol {
    margin: 0 0 20px -17px;
  }
  .paydelsec .grid ol ul,
  .paydelsec .grid ul ul {
    margin: 10px 0 10px -17px !important;
  }
  .paydelsec .grid dl {
    margin: 0 0 20px 0;
  }
  .paydelsec .grid ul:last-child,
  .paydelsec .grid ol:last-child,
  .paydelsec .grid dl:last-child {
    margin: 0 0 0 -17px;
  }
  .paydelsec .grid ul:last-child li:last-child,
  .paydelsec .grid ol:last-child li:last-child,
  .paydelsec .grid dl:last-child dd:last-child {
    margin: 0 0 0 0;
  }
  .paydelsec .grid li, .paydelsec .grid dd {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .paydelsec .grid li:last-child, .paydelsec .grid dd:last-child {
    margin: 0 0 0 0;
  }
  
  
  .paydelsec .grid a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .paydelsec .grid a:hover {
    color: #4ba7ff;
  }
  .paydelsec .grid i {
    color: #0057b8;
    font-size: 20px;
    vertical-align: middle;
  }
  
  
  .paydelsec .grid .logo {
    width: 100%;
    height: 200px;
    position: relative;
  }
  .paydelsec .grid .logo img {
    width: 100%;
    max-width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .3s;
  }
  .paydelsec .grid:hover .logo img {
    max-width: 320px;
  }
  
  
  .paydelsec .grid .logo2 {
    width: 100%;
    height: 150px;
    position: relative;
  }
  .paydelsec .grid .logo2 img {
    width: 100%;
    max-width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .3s;
  }
  .paydelsec .grid:hover .logo2 img {
    max-width: 220px;
  }
  
  
  .paydelsec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 0 0 20px 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .paydelsec .grid .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  @media (max-width: 767px) {
  .paydelsec .grid {
    padding: 0 13px 50px;
  }  
  .paydelsec .grid .term {
    padding: 0 13px 20px;
  }
  .paydelsec .grid .term p {
    font-size: 10px;
  }
  .paydelsec .grid h3 {
    font-size: 17px;
  }
  .paydelsec .grid h4 {
    font-size: 13px;
  }
  .paydelsec .grid p {
    font-size: 11px;
  }
  .paydelsec .grid li, .paydelsec .grid dd {
    font-size: 11px;
  }
  .paydelsec .grid .logo {
    height: 125px;
  }
  .paydelsec .grid .logo img {
    max-width: 225px;
  }
  .paydelsec .grid:hover .logo img {
    max-width: 245px;
  }
  .paydelsec .grid .logo2 {
    height: 125px;
  }
  .paydelsec .grid .logo2 img {
    max-width: 225px;
  }
  .paydelsec .grid:hover .logo2 img {
    max-width: 245px;
  }
  .paydelsec .grid .btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  }
  
  
  
  .paydelsec .grid .cpform {
    width: 100%;
    display: flex;
    margin: 0 0 20px 0;
  }
  .paydelsec .grid .cpform input {
    font-size: 13px;
    background-color: #dddddd;
    width: 100%;
    padding: 7px 13px;
    outline: none;
    margin-bottom: 0;
    appearance: none;
    border: none;
    border-radius: 5px 0 0 5px;
    transition: .3s;
  }
  .paydelsec .grid .cpform input:hover {
    background-color: #e7e7e7;
  }
  .paydelsec .grid .cpform button {
    color: white;
    background-color: #0057b8;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;
    border: 0;
    border-radius: 0 5px 5px 0;
    transition: .3s;
  }
  .paydelsec .grid .cpform button:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .paydelsec .grid .cpselect {
    font-size: 13px;
    background-color: #dddddd;
    width: 100%;
    padding: 7px 13px;
    outline: none;
    margin-bottom: 0;
    appearance: none;
    border: none;
    border-radius: 5px 0 0 5px;
    transition: .3s;
  }
  .paydelsec .grid .cpselect {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) {
  .paydelsec .grid .cpform input {
    font-size: 11px;
    padding: 7px 13px;
  }
  .paydelsec .grid .cpform button {
    font-size: 10px;
    padding: 3px 8px;
  }
  .paydelsec .grid .cpselect {
    font-size: 11px;
    padding: 7px 13px;
  }
  }
  
  
  
  .paydelsec .grid .price1 {
    color: #181818;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0 !important;
  }
  .paydelsec .grid .price2 {
    margin: 0 0 0 0 !important;
  }
  .paydelsec .grid .price2 dd {
    color: #181818;
    font-size: 11px;
    font-weight: 400;
    margin: 0 0 0 0;
  }
  .paydelsec .grid .price2 dd strong {
    font-size: 14px;
    font-weight: 700;
  }
  .paydelsec .grid .tax {
    color: #0057b8;
    font-size: 10px;
    font-weight: 700;
  }
  .paydelsec .grid .desc {
    font-size: 10px;
    font-weight: 400;
  }
  @media (max-width: 767px) {
  .paydelsec .grid .price1 {
    font-size: 18px;
  }
  .paydelsec .grid .price2 dd {
    font-size: 10px;
  }
  .paydelsec .grid .price2 dd strong {
    font-size: 13px;
  }
  .paydelsec .grid .tax {
    font-size: 9px;
  }
  .paydelsec .grid .desc {
    font-size: 9px;
  }
  }
  
  /* Modals de envío y pago */
  
  .paydelmodal .modal-dialog {
  }
  .paydelmodal .modal-body {
    background-color: #dbdbdb;
    padding: 40px 80px;
  }
  .paydelmodal .modal-body h3 {
    font-size: 25px;
    color: #181818;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .paydelmodal .modal-body h4 {
    font-size: 16px;
    color: #181818;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelmodal .modal-body p {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelmodal .modal-body .term {
    color: #181818;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 20px 0;
  }
  .paydelmodal .modal-body p:last-child {
    margin: 0 0 0 0;
  }
  .paydelmodal .modal-body ul {
    margin: 0 0 20px -17px;
  }
  .paydelmodal .modal-body ol {
    margin: 0 0 20px -17px;
  }
  .paydelmodal .modal-body ol ul,
  .paydelmodal .modal-body ul ul {
    margin: 10px 0 10px -17px !important;
  }
  .paydelmodal .modal-body dl {
    margin: 0 0 20px 0;
  }
  .paydelmodal .modal-body ul:last-child,
  .paydelmodal .modal-body ol:last-child,
  .paydelmodal .modal-body dl:last-child {
    margin: 0 0 0 0;
  }
  .paydelmodal .modal-body ul:last-child li:last-child,
  .paydelmodal .modal-body ol:last-child li:last-child,
  .paydelmodal .modal-body dl:last-child dd:last-child {
    margin: 0 0 0 0;
  }
  .paydelmodal .modal-body li, .paydelmodal .modal-body dd {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .paydelmodal .modal-body li:last-child, .paydelmodal .modal-body dd:last-child {
    margin: 0 0 0 0;
  }
  .paydelmodal .modal-body a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .paydelmodal .modal-body a:hover {
    color: #4ba7ff;
  }
  .paydelmodal .modal-body .modalbtn,
  .paydelmodal .modal-body .modalbtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 30px auto 0;
    display: block;
    transition: .3s;
    animation-delay: .1s;
  }
  .paydelmodal .modal-body .modalbtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  @media (max-width: 767px) {
  .paydelmodal .modal-body h3 {
    font-size: 17px;
  }
  .paydelmodal .modal-body h4 {
    font-size: 13px;
  }
  .paydelmodal .modal-body p {
    font-size: 11px;
  }
  .paydelmodal .modal-body li, .paydelmodal .modal-body dd {
    font-size: 11px;
  }
  .paydelmodal .modal-body .modalbtn,
  .paydelmodal .modal-body .modalbtn:focus {
    font-size: 12px;
    padding: 7px 30px;
  }
  }
  @media (max-width: 576px) {
  .paydelmodal .modal-body {
    padding: 40px 30px;
  } 
  }
  
  /* Seccion facturacion */
  
  .invoicecover {
    background-color: gray;
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  @media (max-width: 767px) {
  .invoicecover {
    height: 300px;
  }
  }
  .invoicecover .photo {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(8px);
    pointer-events: none;
    opacity: .4;
  }
  
  .invoicesec {
      max-width: 1222px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .invoicesec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  .invoicesec .grid1 {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 40px;
  }
  .invoicesec .grid2 {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px;
  }
  .invoicesec .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .invoicesec .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .invoicesec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  
  .invoicesec .desc2 {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  
  @media (max-width: 996px) {
    .invoicesec .grid1 {
      padding: 60px 20px;
    }
    .invoicesec .grid2 {
      padding: 60px 30px;
    }
  }
  @media (max-width: 767px) {
    .invoicesec .grid1 {
      padding: 60px 60px;
    }
    .invoicesec .grid2 {
      padding: 60px 80px;
    }
    .invoicesec .tittle {
      font-size: 20px;
    }
    .invoicesec .desc {
      font-size: 12px;
    }
    .invoicesec .desc2 {
      font-size: 10px;
    }
  }
  @media (max-width: 576px) {
    .invoicesec .grid1 {
      padding: 30px 20px;
    }
    .invoicesec .grid2 {
      padding: 40px 20px;
    }
  }
  
  
  
  
  
  @media (max-width: 767px) {
    .resultempty .emptygrid {
      height: 450px;
    }  
    .resultempty .emptygrid .info {
      padding: 15px 20px;
    }  
    .resultempty .emptygrid .tittle {
      font-size: 20px;
    }
    .resultempty .emptygrid .desc {
      font-size: 12px;
    }
    }
  
  
  
  
  .invoicesec .grid2 center {
    margin: 30px 0 0;
  }
  .invoicesec .grid2 .hibtn,
  .invoicesec .grid2 .hibtn:focus {
    color: white;
    background-color: #0057b8;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 4px 4px;
    transition: .3s;
    animation-delay: .1s;
  }
  .invoicesec .grid2 .hibtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .invoicesec .grid2 .hibtn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  .invoicesec .grid2 .genbtn,
  .invoicesec .grid2 .genbtn:focus {
    color: #181818;
    background-color: #d3d3d3;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 4px 4px;
    transition: .3s;
    animation-delay: .1s;
  }
  .invoicesec .grid2 .genbtn i {
    font-size: 22px;
    vertical-align: middle;
  }
  .invoicesec .grid2 .genbtn:hover {
    background-color: #e7e7e7;
  }
  @media (max-width: 767px) { 
  .invoicesec .grid2 .hibtn,
  .invoicesec .grid2 .hibtn:focus,
  .invoicesec .grid2 .genbtn,
  .invoicesec .grid2 .genbtn:focus {
    font-size: 13px;
    padding: 10px 17px;
  }
  .invoicesec .grid2 .hibtn i,
  .invoicesec .grid2 .genbtn i {
    font-size: 21px;
  }
  }
  
  /* Seccion quejas y sugerencias */
  
  .complacover {
    background-color: #d9d9d9;
    width: 100%;
    height: 525px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .complacover .photo {
    width: 120%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(8px);
    pointer-events: none;
    opacity: .4;
  }
  .complacover .photo2 {
    width: 120%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(8px);
    pointer-events: none;
    opacity: .35;
  }
  @media (max-width: 767px) {
    .complacover {
      height: 550px;
    }
    .complacover .photo {
      width: auto;
      height: 120%;
    }
    .complacover .photo {
      width: auto;
      height: 120%;
    }
  }
  
  
  .complasec {
      max-width: 800px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .complasec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  
  
  
  .complasec .gridtab .tabs {
    padding: 0 28px;
    margin-bottom: -2px;
  }
  .complasec .gridtab .content {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px;
  }
  .complasec .gridtab .tabs .nav-link {
    color: #181818;
    background-color: #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    margin: 0 2px;
    border: 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .complasec .gridtab .tabs .nav-link.active {
    background-color: white;
  }
  @media (max-width: 992px) {
    .complasec .gridtab .tabs {
      padding: 0 10px;
    }
    .complasec .gridtab .content {
      padding: 60px 60px;
    }
  }
  @media (max-width: 767px) {
    .complasec .gridtab .tabs {
      padding: 0 12px;
    }
    .complasec .gridtab .tabs .nav-link {
      font-size: 11px;
      padding: 10px 7px;
    }
    .complasec .gridtab .content {
      padding: 60px 60px;
    }
  }
  @media (max-width: 576px) {
    .complasec .gridtab .content {
      padding: 40px 20px;
    }
  }
  
  
  
  
  
  .complasec .grid {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px;
  }
  .complasec .grid2 {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 280px 80px 60px;
    overflow: hidden;
  }
  .complasec .comment {
    width: 120px;
    position: absolute;
    top: 200px;
    left: -117px;
  }
  .complasec .gridcover {
    width: 100%;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .complasec .gridcover .photo {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .complasec .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .complasec .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 10px 0;
  }
  .complasec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .complasec .desc2 {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  .complasec .features {
    margin: 0 0 30px;
  }
  .complasec .features .icon {
    background-color: #dddddd;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    margin: 20px auto 0;
  }
  .complasec .features .icon img {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .complasec .features .desc {
    color: #181818;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 10px 0 0 0;
  }
  
  @media (max-width: 996px) {
    .complasec .grid {
      padding: 60px 60px;
    }
    .complasec .grid2 {
      padding: 280px 60px 60px;
    }
  }
  @media (max-width: 767px) {
    .complasec .grid {
      padding: 60px 60px;
    }
    .complasec .grid2 {
      padding: 230px 60px 60px;
    }
    .complasec .gridcover {
      height: 200px;
    }
    .complasec .tittle {
      font-size: 20px;
    }
    .complasec .desc {
      font-size: 12px;
    }
    .complasec .desc2 {
      font-size: 10px;
    }
  }
  @media (max-width: 576px) {
    .complasec .grid {
      padding: 40px 20px;
    }
    .complasec .grid2 {
      padding: 230px 20px 20px;
    }
  }
  
  /* Seccion confirmacion de pagos */
  
  .payconfcover {
    background-color: gray;
    width: 100%;
    height: 525px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .payconfcover .photo {
    width: 120%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(8px);
    pointer-events: none;
    opacity: .4;
  }
  @media (max-width: 767px) {
    .payconfcover {
      height: 550px;
    }
    .payconfcover .photo {
      width: auto;
      height: 120%;
    }
  }
  
  
  .payconfsec {
      max-width: 1000px !important;
      padding: 150px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .payconfsec {
      padding: 115px 18px 60px !important;
  }
  }
  
  
  
  
  
  .payconfsec .gridtab .tabs {
    padding: 0 28px;
    margin-bottom: -2px;
  }
  .payconfsec .gridtab .content {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px;
  }
  .payconfsec .gridtab .tabs .nav-link {
    color: #181818;
    background-color: #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    margin: 0 2px;
    border: 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  .payconfsec .gridtab .tabs .nav-link.active {
    background-color: white;
  }
  @media (max-width: 992px) {
    .payconfsec .gridtab .tabs {
      padding: 0 10px;
    }
    .payconfsec .gridtab .content {
      padding: 60px 60px;
    }
  }
  @media (max-width: 767px) {
    .payconfsec .gridtab .tabs {
      padding: 0 12px;
    }
    .payconfsec .gridtab .tabs .nav-link {
      font-size: 11px;
      padding: 10px 7px;
    }
    .payconfsec .gridtab .content {
      padding: 60px 60px;
    }
  }
  @media (max-width: 576px) {
    .payconfsec .gridtab .content {
      padding: 40px 20px;
    }
  }
  
  
  
  
  
  .payconfsec .grid {
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding: 60px 80px;
  }
  .payconfsec .comment {
    width: 120px;
    position: absolute;
    top: 200px;
    left: -117px;
  }
  .payconfsec .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .payconfsec .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 10px 0;
  }
  .payconfsec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  
  .payconfsec .desc2 {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  
  @media (max-width: 996px) {
    .payconfsec .grid {
      padding: 60px 60px;
    }
  }
  @media (max-width: 767px) {
    .payconfsec .grid {
      padding: 60px 60px;
    }
    .payconfsec .tittle {
      font-size: 20px;
    }
    .payconfsec .desc {
      font-size: 12px;
    }
    .payconfsec .desc2 {
      font-size: 10px;
    }
  }
  @media (max-width: 576px) {
    .payconfsec .grid {
      padding: 40px 20px;
    }
  }
  
  
  
  .payconfsec .gridtab .conftable {
    overflow-x: auto;
    margin: 20px 0 0 0;
  }
  .payconfsec .gridtab .conftable::-webkit-scrollbar {
    -webkit-box-shadow: inset 0 0 0 transparent;
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 0;
    transition: .3s;
  }
  .payconfsec .gridtab .conftable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: white;
    border-radius: 5px;
    border-right: 1px solid gray;
    transition: .3s;
  }
  .payconfsec .gridtab .conftable::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 transparent;
    background-color: #9e9e9e;
    border-radius: 5px;
    transition: .3s;
  }
  
  
  .payconfsec .gridtab .conftable table {
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
    margin: 0 0 10px;
  }
  .payconfsec .gridtab .conftable th,
  .payconfsec .gridtab .conftable td {
    min-width: 100px;
  }
  .payconfsec .gridtab .conftable tr:first-child {
    border-bottom: 3px solid #0057b8;
  }
  .payconfsec .gridtab .conftable tr:last-child {
    border-bottom: none;
  }
  .payconfsec .gridtab .conftable th:last-child,
  .payconfsec .gridtab .conftable td:last-child  {
    border-right: none;
  }
  .payconfsec .gridtab .conftable tr {
    border-bottom: 2px solid #cdcdcd;
  }
  .payconfsec .gridtab .conftable th {
    background-color: #dddddd;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    padding: 5px 10px;
    border-right: 2px solid #cdcdcd;
  }
  .payconfsec .gridtab .conftable td {
    background-color: #f3f3f3;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    padding: 5px 10px;
    border-right: 2px solid #cdcdcd;
  }
  .payconfsec .gridtab .conftable .stat1 {
    color: red;
    font-weight: 700;
  }
  .payconfsec .gridtab .conftable .stat2 {
    color: #0057b8;
    font-weight: 700;
  }
  .payconfsec .gridtab .conftable .stat3 {
    color: #00c500;
    font-weight: 700;
  }
  @media (max-width: 767px) {
    .payconfsec .gridtab .conftable th,
    .payconfsec .gridtab .conftable td  {
      font-size: 11px;
      min-width: 100px;
    }
  }
  
  /* Cotizador de PCBs Principal */
  
  .pcbmainsec {
    max-width: 1220px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .pcbmainsec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .pcbmainsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .pcbmainsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .pcbmainsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  .pcbmainsec .bottomdesc {
    padding: 30px 20px 0px 20px;
  }
  .pcbmainsec .bottomdesc p {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  @media (max-width: 767px) {
  .pcbmainsec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .pcbmainsec .headtittle h2 {
    font-size: 20px;
  }
  .pcbmainsec .headtittle img {
    max-width: 55px;
  }
  .pcbmainsec .bottomdesc p {
    font-size: 10px;
  }
  }
  
  
  .pcbmainsec .row {
    justify-content: center;
  }
  
  
  .pcbmainsec .row-option {
    display: flex;
  }
  .pcbmainsec .col-option {
    transition: flex 0.3s ease-in-out;
    width: 50%;
    transition: .3s;
  }
  
  .pcbmainsec .col-option:hover {
    width: 50%;
  }
  
  
  .pcbmainsec .grid {
    height: 100%;
    background-color: #f0f0f0;
    padding: 250px 40px 95px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: .3s;
  }
  .pcbmainsec .grid:hover {
    background-color: white;
  }
  
  
  .pcbmainsec .grid .back {
      background: url(https://www.agelectronica.com/vistas/images/landing/ag-back-gray-1-full.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom;
    width: 100%;
    height: 150px;
      position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    z-index: -1;
    transition: .3s;
  }
  .pcbmainsec .grid:hover .back {
    height: 160px;
    opacity: .6;
  }
  .pcbmainsec .grid .img {
      width: auto;
    height: 150px;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.4));
    transition: .3s;
  }
  .pcbmainsec .grid:hover .img {
    height: 160px;
    top: 50px;
  }
  
  
  .pcbmainsec .grid h3 {
    color: #0057b8;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .pcbmainsec .grid p {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .pcbmainsec .grid p:last-child {
    margin: 0 0 0 0;
  }
  .pcbmainsec .grid ul {
    margin: 0 0 0 -17px;
  }
  .pcbmainsec .grid ol {
    margin: 0 0 0 -17px;
  }
  .pcbmainsec .grid dl {
    margin: 0 0 20px 0;
  }
  .pcbmainsec .grid ul:last-child,
  .pcbmainsec .grid ol:last-child,
  .pcbmainsec .grid dl:last-child {
    margin: 0 0 0 -17px;
  }
  .pcbmainsec .grid li, .pcbmainsec .grid dd {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .pcbmainsec .grid li:last-child, .pcbmainsec .grid dd:last-child {
    margin: 0 0 0 0;
  }
  .pcbmainsec .grid li, .pcbmainsec .grid dd span {
    color: #0057b8;
  }
  
  
  .pcbmainsec .grid .btn {
    color: white;
    background-color: #0057b8;
    font-size: 13px;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 5px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s;
  }
  .pcbmainsec .grid .btn:hover {
    color: white;
    background-color: #4ba7ff;
  }
  
  @media (max-width: 767px) {
  .pcbmainsec .grid {
    padding: 180px 40px 75px;
  }
  .pcbmainsec .grid .back {
    height: 130px;
  }
  .pcbmainsec .grid:hover .back {
    height: 130px;
  }
  .pcbmainsec .grid .img {
    height: 120px;
    top: 35px;
  }
  .pcbmainsec .grid:hover .img {
    height: 120px;
  }
  .pcbmainsec .grid h3 {
    font-size: 17px;
  }
  .pcbmainsec .grid p {
    font-size: 11px;
  }
  .pcbmainsec .grid li, .pcbmainsec .grid dd {
    font-size: 11px;
  }
  .pcbmainsec .grid .btn {
    font-size: 11px;
    padding: 10px 20px;
    bottom: 33px;
  }
  }
  
  /* Cotizador de PCBs Head */
  
  .pcbheadsec {
    background-color: #eaeaea;
      background-image: url(https://www.agelectronica.com/vistas/images/landing/ag-back-gray-2-bottom.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom;
      margin-bottom: -1px;
  }
  .pcbheadsec .container {
    max-width: 800px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .pcbheadsec .container {
    padding: 68px 18px 40px !important;
  }
  }
  @media (max-width: 522px) {
    .pcbheadsec .container {
      padding: 68px 18px 35px !important;
    }
    }
  
  .pcbheadsec .headtittle {
    padding: 0px 18px 20px 18px;
  }
  .pcbheadsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .pcbheadsec .headtittle img {
    width: 100%;
    max-width: 70px;
  }
  .pcbheadsec .bottomdesc {
    padding: 30px 20px 0px 20px;
  }
  .pcbmainsec .bottomdesc p {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  @media (max-width: 767px) {
  .pcbheadsec .headtittle {
    padding: 0px 18px 15px 18px;
  }  
  .pcbheadsec .headtittle h2 {
    font-size: 20px;
  }
  .pcbheadsec .headtittle img {
    max-width: 55px;
  }
  .pcbheadsec .bottomdesc p {
    font-size: 10px;
  }
  }
  
  
  .pcbheadsec .desc {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
  
  .pcbheadsec .img {
    width: 302px;
    height: 200px;
    display: block;
    margin: 0 50px 0 0;
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
  }
  .pcbheadsec .img img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .pcbheadsec .img2 {
    width: fit-content;
    height: 200px;
    display: block;
    margin: 0 50px 0 0;
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
  }
  .pcbheadsec .img2 img {
    width: auto;
    height: 100%;
  }
  @media (max-width: 767px) {
    .pcbheadsec .img {
      width: 257px;
      height: 170px;
    }
    .pcbheadsec .img2 {
      height: 170px;
    }
  }
  @media (max-width: 522px) {
    .pcbheadsec .desc {
      display: inline-block;
      padding: 0;
    }
    .pcbheadsec .img {
      width: 227px;
      height: 150px;
      margin: 0 auto 25px;
    }
    .pcbheadsec .img2 {
      height: 150px;
      margin: 0 auto 25px;
    }
  }
  
  
  .pcbheadsec h3 {
    color: #0057b8;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .pcbheadsec ul {
    margin: 0 0 0 -17px;
  }
  .pcbheadsec ol {
    margin: 0 0 0 -17px;
  }
  .pcbheadsec dl {
    margin: 0;
  }
  .pcbheadsec li, .pcbheadsec dd {
    color: #181818;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 5px 0;
  }
  .pcbheadsec li:last-child, .pcbheadsec dd:last-child {
    margin: 0 0 0 0;
  }
  .pcbheadsec li, .pcbheadsec dd span {
    color: #0057b8;
  }
  
  
  @media (max-width: 767px) {
    .pcbheadsec h3 {
      font-size: 17px;
    }
    .pcbheadsec li, .pcbheadsec dd {
      font-size: 12px;
    }
  }
  
  
  @media (max-width: 522px) {
    .pcbheadsec li, .pcbheadsec dd {
      text-align: center;
    }
  }
  
  /* Cotizador de PCBs Formulario */
  
  .pcbformsec {
    max-width: 1200px !important;
    padding: 10px 10px 60px !important;
  }
  @media (max-width: 767px) {
  .pcbformsec {
    padding: 10px 10px 60px !important;
  }
  }
  
  .pcbformsec .grid {
    height: 100%;
    background-color: white;
    padding: 40px 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: .3s;
  }
  @media (max-width: 992px) {
    .pcbformsec .grid {
      padding: 30px 20px;
    }
  }
  @media (max-width: 767px) {
    .pcbformsec .grid {
      padding: 20px 13px;
    }
  }
  
  .pcbformsec .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    margin: 0 0 10px 0;
  }
  .pcbformsec .term {
    color: #181818;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .pcbformsec .term a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .pcbformsec .term a:hover {
    color: #4ba7ff;
  }
  @media (max-width: 767px) {
    .pcbformsec .desc {
      font-size: 11px;
    }
    .pcbformsec .term {
      font-size: 10px;
    }
  }
  
  .pcbformsec .forminput, .pcbformsec .formselect, .pcbformsec .formcolor {
    margin: 0;
  }
  
  .pcbformsec .forminput input[type="number"]::-webkit-inner-spin-button,
  .pcbformsec .forminput input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  
  .pcbformsec .checkbox {
    color: #181818;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  @media (max-width: 767px) {
    .pcbformsec .checkbox {
      font-size: 12px;
    }
  }
  .pcbformsec .checkbox span {
    vertical-align: middle;
  }
  .pcbformsec .checkbox a {
    color: #0057b8;
    font-weight: 600;
    transition: .3s;
  }
  .pcbformsec .checkbox a:hover {
    color: #4ba7ff;
  }
  .pcbformsec .formgen .formbtn, .pcbformsec .formgen .formbtn:focus {
    width: 100%;
    padding: 13px;
    margin: 20px 0 0 0;
  }
  
  /* Mapa de evento */
  
  .evmapsec {
    max-width: 1220px !important;
    padding: 110px 18px 60px !important;
  }
  @media (max-width: 767px) {
  .evmapsec {
    padding: 68px 18px 60px !important;
  }
  }
  
  .evmapsec .headtittle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 18px 20px 18px;
  }
  .evmapsec .headtittle h2 {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .evmapsec .headtittle img {
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 0 0 10px;
    transform: scale(1);
  }
  .evmapsec .bottomdesc {
    padding: 30px 20px 0px 20px;
  }
  .evmapsec .bottomdesc p {
    color: #181818;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  @media (max-width: 767px) {
  .evmapsec .headtittle {
    display: inline-block;
    padding: 0px 18px 15px;
  }  
  .evmapsec .headtittle h2 {
    font-size: 20px;
  }
  .evmapsec .headtittle img {
    transform: scale(.8);
    margin: 0px auto -5px;
  }
  .evmapsec .bottomdesc p {
    font-size: 10px;
  }
  }
  
  .evmapsec .row {
    justify-content: center;
  }
  
  .evmapsec .grid {
    height: 100%;
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: .3s;
  }
  @media (max-width: 767px) {
    .evmapsec .grid {
      padding: 20px;
    }
  }
  
  .evmapsec .map {
    overflow-Y: hidden;
    overflow-X: auto;
    position: relative;
    display: block;
    margin: 0 auto;
  }
  
  .evmapsec .map img:first-child {
    width: 100%;
    min-width: 700px;
    height: auto;
    position: static;
  }
  .evmapsec .map img {
    width: auto;
    min-width: 700px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* Página vacía */
  
  .pageerror {
    max-width: 1222px !important;
    padding: 110px 18px 60px !important;
  }
  
  @media (max-width: 767px) {
  .pageerror {
    padding: 90px 18px !important;
  }
  }
  
  .pageerror .emptygrid {
    background-color: white;
    height: 500px;
    border-radius: 15px;
    position: relative;
  }
  .pageerror .emptygrid .info {
    width: 100%;
    max-width: 600px;
    padding: 15px 13px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .pageerror .emptygrid .icon {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
  }
  .pageerror .emptygrid .tittle {
    color: #181818;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 20px 0 0 0;
    padding: 0;
  }
  .pageerror .emptygrid .desc {
    color: #181818;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center;
    margin: 20px 0 0 0;
  }
  @media (max-width: 767px) {
  .pageerror .emptygrid {
    height: 450px;
  }  
  .pageerror .emptygrid .info {
    padding: 15px 20px;
  }  
  .pageerror .emptygrid .tittle {
    font-size: 20px;
  }
  .pageerror .emptygrid .desc {
    font-size: 12px;
  }
  }
  
  /* Chat */
  
  .chatsec {
    width: 100%;
    height: 900px;
  }
  
  @media (max-width: 767px) {
    .chatsec {
      padding: 70px 0 70px;
    }
  }
  
  .chatsec iframe {
    width: 100%;
    height: 100%;
  }
  
  .main-title {
    display: none !important;
  }
  
  /* Widget de Bitrix */
  
  .bx-livechat-title {
    font-family: 'Muli' !important;
  }
  
  .bx-livechat-help-title-lg {
    font-family: 'Muli' !important;
  }
  
  .bx-livechat-help-subtitle {
    font-family: 'Muli' !important;
  }
  
  .bx-im-textarea-input {
    font-family: 'Muli' !important;
  }
  
  .bx-livechat-help-user .bx-livechat-user-name {
    font-family: 'Muli' !important;
  }
  
  .b24-form-header-title {
    font-family: 'Muli' !important;
  }
  
  .b24-form-header-description {
    font-family: 'Muli' !important;
  }
  
  .b24-form-control-label {
    font-family: 'Muli' !important;
    padding-right: 35px;
  }
  
  .b24-form-btn {
    font-family: 'Muli' !important;
  }
  
  .b24-widget-button-position-top-right .b24-widget-button-social-item:hover .b24-widget-button-social-tooltip, .b24-widget-button-position-bottom-right .b24-widget-button-social-item:hover .b24-widget-button-social-tooltip {
    font-family: 'Muli' !important;
  }
  
  .b24-form-control-string .b24-form-control, .b24-form-control-list .b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item {
    border: none !important;
  }
  
  .b24-form-control-alert.b24-form-control-checkbox, .b24-form-control-alert.b24-form-control-radiobox, .b24-form-control-alert.b24-form-control-file, .b24-form-control-alert.b24-form-control-list .b24-form-control, .b24-form-control-alert.b24-form-control-string .b24-form-control, .b24-form-control-alert.b24-form-control-text .b24-form-control {
    font-family: 'Muli' !important;
  }
  
  .b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), .b24-form-control-text .b24-form-control:focus:not([readonly]), .b24-form-control-select .field-item:focus:not([readonly]) {
    font-family: 'Muli' !important;
  }
  
  .b24-form .b24-form-sign-abuse-link {
    font-family: 'Muli' !important;
  }
  
  .b24-form-control-alert .b24-form-control-alert-message {
    font-family: 'Muli' !important;
  }
  
  .b24-form-field-layout-section {
    font-family: 'Muli' !important;
  }
  
  .b24-form-control-comment
  
  /* Owl Carousel */
  
  .owl-2 {
      padding: 0;
  }
  @media (max-width: 1230px) {
  .owl-2 {
      padding: 0 20px;
  }
  }
  @media (max-width: 1070px) {
  .owl-2 {
      padding: 0;
  }
  }
  
  .owl-stage {
    display: flex;
    position: absolute;
    max-width: 200px;
  }
  .owl-carousel {
  }
  .owl-item {
      display: flex;
    flex: 1 0 auto;
  }
  .owl-item .slide {
  }
  @media (max-width: 576px) {
  .owl-item .slide {
      display: flex;
  }
  }
  
  
  .owl-item .item {
      width: 100%;
  }
  
  .owl-item .slide .item {
      margin-bottom: 10px;
  }
  
  .owl-item .slide .item:last-child {
      margin-bottom: 0px;
  }
  
  @media (max-width: 576px) {
  .owl-item .slide .item {
      margin-right: 10px;
  }
  
  .owl-item .slide .item:last-child {
      margin-right: 0px;
  }
  }
  
  
  .owl-nav {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
  }
  
  .owl-prev, .owl-next {
      position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: .6;
    transition: .3s;
  }
  .owl-prev.animated, .owl-next.animated {
    animation-duration: .3s !important;
  }
  .owl-prev {
    left: -12px;
  }
  .owl-next {
    right: -12px;
  }
  .owl-prev:hover, .owl-next:hover {
    opacity: 1;
  }
  @media (max-width: 1230px) {
  .owl-prev {
    left: 5px;
  }
  .owl-next {
    right: 5px;
  }
  }
  
  .owl-prev svg, .owl-next svg {
      color: #181818;
      font-size: 25px;
  }
  
  /* Switch tipo de entrega */
  
  .imdeliv {
    height: 34px;
    display: flex;
    align-items: center;
  }
  
  .imdeliv .form-switch .form-check-input {
    width: 42px;
    height: 22px;
    border: none;
    margin-top: 2px;
  }
  
  .imdeliv .form-check-input:focus {
    outline: none;
    box-shadow: none;
  }
  
  .imdeliv .form-check-input:checked {
    background-color: #0057b8;
    border-color: #0057b8;
  }
  
  .imdeliv label {
    font-size: 13px;
    vertical-align: middle;
    margin-left: 7px;
  }
  
  @media (max-width: 767px) {
  .imdeliv {
    height: 32px;
  }
  .imdeliv label {
    font-size: 11px;
  }
  }
  
  /* Etiquetas para mosaico */
  
  .reclabel {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px 30px 30px 15px;
    overflow: hidden;
    transform-origin: 0 0;
    z-index: 1;
  }
  
  .reclabel::after {
    width: 220px;
    height: 220px;
    content: '';
    position: absolute;
    top: -110px;
    left: -110px;
    background-color: #0057b8;
    transform: rotate(-45deg);
    z-index: -1;
  }
  
  .reclabel p {
    color: white !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    margin: 0 0 15px 0 !important;
  }
  
  .reclabel i {
    color: white !important;
    font-size: 27px !important;
    transform: rotate(-45deg) scale(1) !important;
    transition: .3s !important;
  }
  
  .grid:hover .reclabel i {
    transform: rotate(0deg) scale(1.3) !important;
    transform-origin: 0 0 !important;
  }
  
  @media (max-width: 767px) {
  .reclabel {
    transform: scale(.7);
  }
  }

.imglabel {
  width: 155px;
  height: auto;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

@media (max-width: 767px) {
.imglabel {
  width: 109px;
}
}
  
  /* Boton de posicionamiento lateral */
  
  .toposbtn, .toposbtn:focus {
    width: 60px;
    height: 60px;
    background-color: #0150a9;
    border-radius: 50%;
    z-index: 1000;
    transition: .3s;
  }
  
  .toposbtn:hover {
    background-color: #2894fb;
  }
  
  .toposbtn svg {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  .toposmid {
    position: fixed;
    top: 50%;
    right: 10px;
  }
  
  @media (max-width: 767px) {
    .toposbtn, .toposbtn:focus {
      width: 45px;
      height: 45px;
    }
    .toposbtn svg {
      font-size: 25px;
    }
  }
  
  /* Footer */
  
  .bottommargin {
      height: 60px;
  }
  
  .footer-main {
      background-color: #252525;
      padding: 50px 15px;
    position: relative;
  }
  
  @media (max-width: 767px) {
  .bottommargin {
      height: 80px;
  }	
  .footer-main {
      display: none;
  }
  }
  
  .footer-main .container {
      max-width: 1200px;
      padding: 0;
  }
  
  .footer-main table {
      width: 100%;
  }
  
  .footer-main table td {
      vertical-align: top;
  }
  
  .footer-main .brand {
      width: 45%;
      padding: 0 50px 0 0;
  }
  
  .footer-main .logo {
      width: 100%;
      max-width: 300px;
    pointer-events: none;
  }
  
  .footer-main .desc {
      color: #dddddd;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 300;
      margin: 30px 0 0 0;
  }
  
  .footer-main .social {
      color: #dddddd;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 300;
      margin: 30px 0 0 0;
  }
  
  .footer-main .social a {
      color: white;
      font-size: 18px;
      vertical-align: middle;
      margin: 0 0 0 10px;
      transition: .3s;
  }
  
  .footer-main .social a:hover {
      color: #4ba7ff;
  }
  
  .footer-main .sitelist {
    padding: 0 15px;
  }
  
  .footer-main .sitelist:last-child {
    padding: 0 0 0 15px;
  }
  
  .footer-main .sitelist h5 {
    color: white;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 20px 0;
  }
  
  .footer-main .sitelist ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
  }
  
  .footer-main .sitelist li {
      margin: 0;
  }
  
  .footer-main .sitelist a {
    color: #dddddd;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 300;
      transition: .3s;
  }
  
  .footer-main .sitelist a:hover {
      color: #4ba7ff;
  }
  
  .footer-main .footn .desc {
      color: #dddddd;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 300;
      margin: 30px 0 0 0;
  }
  
  .footer-main .footn a {
      color: #4ba7ff;
      margin: 0 0 0 0;
      transition: .3s;
  }
  
  .footer-main .footn a:hover {
      color: #8dc7ff;
  }