/* ------------------ Responsive Topnav with Dropdown ------------------ */
/*
Barra superior que se convierte en menú desplegable. Extraida de W3 School.
https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
 */

/* Add a black background color to the top navigation */
.topnav  {
  /*display: flex!important;*/
  flex-direction: row!important;
  /*background-color: #333;*/
  /*overflow: hidden;*/
  flex-wrap: wrap;
}

.navbar-right{justify-content: flex-end;}

/* Style the links inside the navigation bar */
.topnav  a,
.topnav  li,
.topnav  button {
  /*color: #f2f2f2;*/
  /*text-align: center;*/
  /*text-align: left;*/
  padding: 14px 12px;
  text-decoration: none;
  /*font-size: 17px;*/
  list-style: none;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav  .icon {
  display: none;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav  a:hover, .dropdown:hover .dropbtn {
  /*background-color: rgba(33,33,33,0.4);*/
  /*color: white;*/
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  /*background-color: #ddd;*/
  /*color: black;*/
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {
/*@media screen and (max-width: 950px) {*/
  .topnav.dropdown{
    position: absolute;
    right: 0.5rem;
  }
  .topnav.responsive {
    flex-direction: column!important;
    justify-content: start!important;
  }

  .topnav  a:not(:first-child),
  .topnav  li:not(:first-child),
  .dropdown .dropbtn,
  .topnav div.collapse{
    display: none;
  }
  .topnav.responsive  a:not(:first-child),
  .topnav.responsive  li:not(:first-child),
  .dropdown .dropbtn,
  .topnav.responsive div.collapse{
    display: flex!important;
    align-items: center!important;
    /*z-index: 1000;*/
  }

  .topnav a.icon,
  .topnav button.icon { display: flex;
    align-items: center!important;}

  .topnav.navbar-right .icon {
    right: 0;
    top: 0;
    /*margin-left: auto;*/
  }
  .topnav .icon {
    top: 0;
    left: 0;
    /*margin-right: auto;*/
  }


  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: flex;
    width: 100%;
    text-align: left;
    z-index: 1000;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) *
@media screen and (max-width: 600px) {
  .topnav.dropdown{
    position: absolute;
    right: 0.5rem;
  }

  .topnav.responsive {
    flex-direction: column!important;
    justify-content: start!important;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: flex;
    width: 100%;
    text-align: left;
    z-index: 1000;
  }
}
/**/

.required:after {
    content:" *";
    color: red;
  }


/*********************** Textos Grandes Responsive *************************/

/*// Extra small devices (portrait phones, less than 576px)*/
/*// No media query for `xs` since this is the default in Bootstrap*/
  .text_xxxl_responsive h1, .text_xxxl_responsive .h1, h1.text_xxxl_responsive
  {font-size: 3.2rem; line-height: 3.4rem;}
  .text_xxxl_responsive h2, .text_xxxl_responsive .h2, h2.text_xxxl_responsive,
  .text_xxl_responsive h1, .text_xxl_responsive .h1, h1.text_xxl_responsive
  {font-size: 2.9rem; line-height: 3.1rem;}
  .text_xxxl_responsive h3, .text_xxxl_responsive .h3, h3.text_xxxl_responsive,
  .text_xxl_responsive h2, .text_xxl_responsive .h2, h2.text_xxl_responsive
  {font-size: 2.6rem; line-height: 2.8rem;}
  .text_xxxl_responsive h4, .text_xxxl_responsive .h4, h4.text_xxxl_responsive,
  .text_xxl_responsive h3, .text_xxl_responsive .h3, h3.text_xxl_responsive,
  .text_xl_responsive h1, .text_xl_responsive .h1, h1.text_xl_responsive
  {font-size: 2.3rem; line-height: 2.5rem;}
  .text_xxxl_responsive h5, .text_xxxl_responsive .h5, h5.text_xxxl_responsive,
  .text_xxl_responsive h4, .text_xxl_responsive .h4, h4.text_xxl_responsive,
  .text_xl_responsive h2, .text_xl_responsive .h2, h2.text_xl_responsive,
  .text_grande_responsive h1, .text_grande_responsive .h1, h1.text_grande_responsive
  {font-size: 2.1rem; line-height: 2.3rem;}
  .text_xxl_responsive h5, .text_xxl_responsive .h5, h5.text_xxl_responsive,
  .text_xl_responsive h3, .text_xl_responsive .h3, h3.text_xl_responsive,
  .text_grande_responsive h2, .text_grande_responsive .h2, h2.text_grande_responsive,
  .text_md_responsive h1, .text_md_responsive .h1, h1.text_md_responsive
  {font-size: 1.5rem; line-height: 1.7rem;}
  .text_xl_responsive h4, .text_xl_responsive .h4, h4.text_xl_responsive,
  .text_grande_responsive h3, .text_grande_responsive .h3, h3.text_grande_responsive,
  .text_md_responsive h2, .text_md_responsive .h2, h2.text_md_responsive
  {font-size: 1.3rem; line-height: 1.5rem;}
  .text_xxl_responsive p, p.text_xxl_responsive, .text_xxl_responsive .p, .p.text_xxl_responsive,
  .text_xxl_responsive li, li.text_xxl_responsive,
  .text_xl_responsive h5, .text_xl_responsive .h5, h5.text_xl_responsive,
  .text_grande_responsive h4, .text_grande_responsive .h4, h4.text_grande_responsive,
  .text_md_responsive h3, .text_md_responsive .h3, h3.text_md_responsive
  {font-size: 1.2rem; line-height: 1.4rem;}
  .text_xl_responsive p, p.text_xl_responsive, .text_xl_responsive .p, .p.text_xl_responsive, .text_xl_responsive li, li.text_xl_responsive,
  .text_grande_responsive h5, .text_grande_responsive .h5, h5.text_grande_responsive,
  .text_md_responsive h4, .text_md_responsive .h4, h4.text_md_responsive,
  .text_md_responsive h5, .text_md_responsive .h5, h5.text_md_responsive
  {font-size: 1.1rem; line-height: 1.3rem;}
  .text_grande_responsive p, p.text_grande_responsive, .text_grande_responsive .p, .p.text_grande_responsive, .text_grande_responsive li, li.text_grande_responsive,
  .text_md_responsive p, p.text_md_responsive, .text_md_responsive .p, .p.text_md_responsive, .text_md_responsive li, li.text_md_responsive
  {font-size: 1.0rem; line-height: 1.4rem;}

  .text-sm-center-lg-right{text-align: center;}

  .h_logo_md_responsive {height: 1.9rem;}
  .h_logo_lg_responsive, .h_logo_md_responsive_1 {height: 2.1rem;}
  .h_logo_xl_responsive, .h_logo_lg_responsive_1 {height: 2.3rem;}
  .h_logo_xxl_responsive, .h_logo_md_responsive_2, .h_logo_xl_responsive_1 {height: 2.6rem;}
  .h_logo_xxl_responsive_1, .h_logo_lg_responsive_2, .h_logo_xl_responsive_2  {height: 3rem;}
  .h_logo_xxl_responsive_2 {height: 3.5rem;}


/**********************************************************************
                         CLASES RESPONSIVE
**********************************************************************/

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px)
and (min-height: 300px)
/*and (min-height: 576px) */
{
  .text_xxxl_responsive h1, .text_xxxl_responsive .h1, h1.text_xxxl_responsive
  {font-size: 3.4rem; line-height: 3.6rem;}
  .text_xxxl_responsive h2, .text_xxxl_responsive .h2, h2.text_xxxl_responsive,
  .text_xxl_responsive h1, .text_xxl_responsive .h1, h1.text_xxl_responsive
  {font-size: 3.1rem; line-height: 3.3rem;}
  .text_xxxl_responsive h3, .text_xxxl_responsive .h3, h3.text_xxxl_responsive,
  .text_xxl_responsive h2, .text_xxl_responsive .h2, h2.text_xxl_responsive
  {font-size: 2.8rem; line-height: 3.0rem;}
  .text_xl_responsive h1, .text_xl_responsive .h1, h1.text_xl_responsive
  {font-size: 2.5rem; line-height: 2.7rem;}
  .text_xxxl_responsive h4, .text_xxxl_responsive .h4, h4.text_xxxl_responsive,
  .text_xxl_responsive h3, .text_xxl_responsive .h3, h3.text_xxl_responsive,
  .text_xl_responsive h2, .text_xl_responsive .h2, h2.text_xl_responsive,
  .text_grande_responsive h1, .text_grande_responsive .h1, h1.text_grande_responsive
  {font-size: 2.3rem; line-height: 2.5rem;}
  .text_xxxl_responsive h5, .text_xxxl_responsive .h5, h5.text_xxxl_responsive,
  .text_xxl_responsive h4, .text_xxl_responsive .h4, h4.text_xxl_responsive,
  .text_xl_responsive h3, .text_xl_responsive .h3, h3.text_xl_responsive,
  .text_grande_responsive h2, .text_grande_responsive .h2, h2.text_grande_responsive,
  .text_md_responsive h1, .text_md_responsive .h1, h1.text_md_responsive
  {font-size: 1.7rem; line-height: 1.9rem;}
  .text_xxl_responsive h5, .text_xxl_responsive .h5, h5.text_xxl_responsive,
  .text_xl_responsive h4, .text_xl_responsive .h4, h4.text_xl_responsive,
  .text_grande_responsive h3, .text_grande_responsive .h3, h3.text_grande_responsive,
  .text_md_responsive h2, .text_md_responsive .h2, h2.text_md_responsive
  {font-size: 1.5rem; line-height: 1.7rem;}
  .text_xxl_responsive p, p.text_xxl_responsive, .text_xxl_responsive .p, .p.text_xxl_responsive, .text_xxl_responsive li, li.text_xxl_responsive,
  .text_xl_responsive h5, .text_xl_responsive .h5, h5.text_xl_responsive,
  .text_grande_responsive h4, .text_grande_responsive .h4, h4.text_grande_responsive,
  .text_md_responsive h3, .text_md_responsive .h3, h3.text_md_responsive
  {font-size: 1.4rem; line-height: 1.6rem;}
  .text_xl_responsive p, p.text_xl_responsive, .text_xl_responsive .p, .p.text_xl_responsive, .text_xl_responsive li, li.text_xl_responsive,
  .text_grande_responsive h5, .text_grande_responsive .h5, h5.text_grande_responsive,
  .text_md_responsive h4, .text_md_responsive .h4, h4.text_md_responsive,
  .text_md_responsive h5, .text_md_responsive .h5, h5.text_md_responsive
  {font-size: 1.2rem; line-height: 1.4rem;}
  .text_grande_responsive p, p.text_grande_responsive, .text_grande_responsive .p, .p.text_grande_responsive, .text_grande_responsive li, li.text_grande_responsive
  {font-size: 1.1rem; line-height: 1.5rem;}
  .text_md_responsive p, p.text_md_responsive, .text_md_responsive .p, .p.text_md_responsive, .text_md_responsive li, li.text_md_responsive
  {font-size: 1.0rem; line-height: 1.4rem;}

  .h_logo_md_responsive {height: 2.1rem;}
  .h_logo_lg_responsive, .h_logo_md_responsive_1 {height: 2.3rem;}
  .h_logo_xl_responsive, .h_logo_lg_responsive_1 {height: 2.5rem;}
  .h_logo_xxl_responsive, .h_logo_md_responsive_2, .h_logo_xl_responsive_1 {height: 2.8rem;}
  .h_logo_xxl_responsive_1, .h_logo_lg_responsive_2, .h_logo_xl_responsive_2  {height: 3.4rem;}
  .h_logo_xxl_responsive_2 {height: 3.9rem;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px)
and (min-height: 450px)
/*and (min-height: 728px) */
{
  .text_xxxl_responsive h1, .text_xxxl_responsive .h1, h1.text_xxxl_responsive
  {font-size: 3.6rem; line-height: 3.8rem;}
  .text_xxxl_responsive h2, .text_xxxl_responsive .h2, h2.text_xxxl_responsive,
  .text_xxl_responsive h1, .text_xxl_responsive .h1, h1.text_xxl_responsive
  {font-size: 3.3rem; line-height: 3.5rem;}
  .text_xxxl_responsive h3, .text_xxxl_responsive .h3, h3.text_xxxl_responsive,
  .text_xxl_responsive h2, .text_xxl_responsive .h2, h2.text_xxl_responsive
  {font-size: 3.0rem; line-height: 3.2rem;}
  .text_xxxl_responsive h4, .text_xxxl_responsive .h4, h4.text_xxxl_responsive,
  .text_xxl_responsive h3, .text_xxl_responsive .h3, h3.text_xxl_responsive,
  .text_xl_responsive h1, .text_xl_responsive .h1, h1.text_xl_responsive
  {font-size: 2.7rem; line-height: 2.9rem;}
  .text_xxxl_responsive h5, .text_xxxl_responsive .h5, h5.text_xxxl_responsive,
  .text_xxl_responsive h4, .text_xxl_responsive .h4, h4.text_xxl_responsive,
  .text_xl_responsive h2, .text_xl_responsive .h2, h2.text_xl_responsive,
  .text_grande_responsive h1, .text_grande_responsive .h1, h1.text_grande_responsive
  {font-size: 2.5rem; line-height: 2.7rem;}
  .text_xxl_responsive h5, .text_xxl_responsive .h5, h5.text_xxl_responsive,
  .text_xl_responsive h3, .text_xl_responsive .h3, h3.text_xl_responsive,
  .text_grande_responsive h2, .text_grande_responsive .h2, h2.text_grande_responsive,
  .text_md_responsive h1, .text_md_responsive .h1, h1.text_md_responsive
  {font-size: 2.0rem; line-height: 2.2rem;}
  .text_xl_responsive h4, .text_xl_responsive .h4, h4.text_xl_responsive,
  .text_grande_responsive h3, .text_grande_responsive .h3, h3.text_grande_responsive,
  .text_md_responsive h2, .text_md_responsive .h2, h2.text_md_responsive
  {font-size: 1.8rem; line-height: 2.0rem;}
  .text_xxl_responsive p, p.text_xxl_responsive, .text_xxl_responsive .p, .p.text_xxl_responsive, .text_xxl_responsive li, li.text_xxl_responsive,
  .text_xl_responsive h5, .text_xl_responsive .h5, h5.text_xl_responsive,
  .text_grande_responsive h4, .text_grande_responsive .h4, h4.text_grande_responsive,
  .text_md_responsive h3, .text_md_responsive .h3, h3.text_md_responsive
  {font-size: 1.6rem; line-height: 1.8rem;}
  .text_xl_responsive p, p.text_xl_responsive, .text_xl_responsive .p, .p.text_xl_responsive, .text_xl_responsive li, li.text_xl_responsive,
  .text_grande_responsive h5, .text_grande_responsive .h5, h5.text_grande_responsive,
  .text_md_responsive h4, .text_md_responsive .h4, h4.text_md_responsive,
  .text_md_responsive h5, .text_md_responsive .h5, h5.text_md_responsive
  {font-size: 1.4rem; line-height: 1.6rem;}
  .text_grande_responsive p, p.text_grande_responsive, .text_grande_responsive .p, .p.text_grande_responsive, .text_grande_responsive li, li.text_grande_responsive
  {font-size: 1.2rem; line-height: 1.6rem;}
  .text_md_responsive p, p.text_md_responsive, .text_md_responsive .p, .p.text_md_responsive, .text_md_responsive li, li.text_md_responsive
  {font-size: 1.1rem; line-height: 1.5rem;}

  .h_logo_md_responsive {height: 2.3rem;}
  .h_logo_lg_responsive, .h_logo_md_responsive_1 {height: 2.5rem;}
  .h_logo_xl_responsive, .h_logo_lg_responsive_1 {height: 2.7rem;}
  .h_logo_xxl_responsive, .h_logo_md_responsive_2, .h_logo_xl_responsive_1 {height: 3.0rem;}
  .h_logo_xxl_responsive_1, .h_logo_lg_responsive_2, .h_logo_xl_responsive_2  {height: 3.8rem;}
  .h_logo_xxl_responsive_2 {height: 4.3rem;}
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px)
and (min-height: 600px)
/*and (min-height: 992px) */
{
  .text_xxxl_responsive h1, .text_xxxl_responsive .h1, h1.text_xxxl_responsive
  {font-size: 4.3rem; line-height: 4.5rem;}
  .text_xxxl_responsive h2, .text_xxxl_responsive .h2, h2.text_xxxl_responsive,
  .text_xxl_responsive h1, .text_xxl_responsive .h1, h1.text_xxl_responsive
  {font-size: 3.8rem; line-height: 4.0rem;}
  .text_xxxl_responsive h3, .text_xxxl_responsive .h3, h3.text_xxxl_responsive,
  .text_xxl_responsive h2, .text_xxl_responsive .h2, h2.text_xxl_responsive
  {font-size: 3.3rem; line-height: 3.5rem;}
  .text_xxxl_responsive h4, .text_xxxl_responsive .h4, h4.text_xxxl_responsive,
  .text_xxl_responsive h3, .text_xxl_responsive .h3, h3.text_xxl_responsive,
  .text_xl_responsive h1, .text_xl_responsive .h1, h1.text_xl_responsive
  {font-size: 3rem; line-height: 3.2rem;}
  .text_xxxl_responsive h5, .text_xxxl_responsive .h5, h5.text_xxxl_responsive,
  .text_xxl_responsive h4, .text_xxl_responsive .h4, h4.text_xxl_responsive,
  .text_xl_responsive h2, .text_xl_responsive .h2, h2.text_xl_responsive,
  .text_grande_responsive h1, .text_grande_responsive .h1, h1.text_grande_responsive
  {font-size: 2.7rem; line-height: 2.9rem;}
  .text_xxl_responsive h5, .text_xxl_responsive .h5, h5.text_xxl_responsive,
  .text_xl_responsive h3, .text_xl_responsive .h3, h3.text_xl_responsive,
  .text_grande_responsive h2, .text_grande_responsive .h2, h2.text_grande_responsive,
  .text_md_responsive h1, .text_md_responsive .h1, h1.text_md_responsive
  {font-size: 2.2rem; line-height: 2.4rem;}
  .text_xl_responsive h4, .text_xl_responsive .h4, h4.text_xl_responsive,
  .text_grande_responsive h3, .text_grande_responsive .h3, h3.text_grande_responsive,
  .text_md_responsive h2, .text_md_responsive .h2, h2.text_md_responsive
  {font-size: 1.9rem; line-height: 2.1rem;}
  .text_xxl_responsive p, p.text_xxl_responsive, .text_xxl_responsive .p, .p.text_xxl_responsive, .text_xxl_responsive li, li.text_xxl_responsive,
  .text_xl_responsive h5, .text_xl_responsive .h5, h5.text_xl_responsive,
  .text_grande_responsive h4, .text_grande_responsive .h4, h4.text_grande_responsive,
  .text_md_responsive h3, .text_md_responsive .h3, h3.text_md_responsive
  {font-size: 1.7rem; line-height: 1.9rem;}
  .text_xl_responsive p, p.text_xl_responsive, .text_xl_responsive .p, .p.text_xl_responsive, .text_xl_responsive li, li.text_xl_responsive,
  .text_grande_responsive h5, .text_grande_responsive .h5, h5.text_grande_responsive,
  .text_md_responsive h4, .text_md_responsive .h4, h4.text_md_responsive,
  .text_md_responsive h5, .text_md_responsive .h5, h5.text_md_responsive
  {font-size: 1.5rem; line-height: 1.7rem;}
  .text_grande_responsive p, p.text_grande_responsive, .text_grande_responsive .p, .p.text_grande_responsive, .text_grande_responsive li, li.text_grande_responsive
  {font-size: 1.3rem; line-height: 1.7rem;}
  .text_md_responsive p, p.text_md_responsive, .text_md_responsive .p, .p.text_md_responsive, .text_md_responsive li, li.text_md_responsive
  {font-size: 1.1rem; line-height: 1.5rem;}

  .text-sm-center-lg-right{text-align: left;}

  .h_logo_md_responsive {height: 2.5rem;}
  .h_logo_lg_responsive, .h_logo_md_responsive_1 {height: 2.7rem;}
  .h_logo_xl_responsive, .h_logo_lg_responsive_1 {height: 3.0rem;}
  .h_logo_xxl_responsive, .h_logo_md_responsive_2, .h_logo_xl_responsive_1 {height: 3.5rem;}
  .h_logo_xxl_responsive_1, .h_logo_lg_responsive_2, .h_logo_xl_responsive_2  {height: 4.3rem;}
  .h_logo_xxl_responsive_2 {height: 4.8rem;}
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px)
and (min-height: 700px)
/*and (min-height: 1200px) */
{
  .text_xxxl_responsive h1, .text_xxxl_responsive .h1, h1.text_xxxl_responsive
  {font-size: 5.4rem; line-height: 5.6rem;}
  .text_xxxl_responsive h2, .text_xxxl_responsive .h2, h2.text_xxxl_responsive,
  .text_xxl_responsive h1, .text_xxl_responsive .h1, h1.text_xxl_responsive
  {font-size: 4.6rem; line-height: 4.8rem;}
  .text_xxxl_responsive h3, .text_xxxl_responsive .h3, h3.text_xxxl_responsive,
  .text_xxl_responsive h2, .text_xxl_responsive .h2, h2.text_xxl_responsive
  {font-size: 4rem; line-height: 4.2rem;}
  .text_xxxl_responsive h4, .text_xxxl_responsive .h4, h4.text_xxxl_responsive,
  .text_xxl_responsive h3, .text_xxl_responsive .h3, h3.text_xxl_responsive,
  .text_xl_responsive h1, .text_xl_responsive .h1, h1.text_xl_responsive
  {font-size: 3.5rem; line-height: 3.8rem;}
  .text_xxxl_responsive h5, .text_xxxl_responsive .h5, h5.text_xxxl_responsive,
  .text_xxl_responsive h4, .text_xxl_responsive .h4, h4.text_xxl_responsive,
  .text_xl_responsive h2, .text_xl_responsive .h2, h2.text_xl_responsive,
  .text_grande_responsive h1, .text_grande_responsive .h1, h1.text_grande_responsive
  {font-size: 3rem; line-height: 3.2rem;}
  .text_xxl_responsive h5, .text_xxl_responsive .h5, h5.text_xxl_responsive,
  .text_xl_responsive h3, .text_xl_responsive .h3, h3.text_xl_responsive,
  .text_grande_responsive h2, .text_grande_responsive .h2, h2.text_grande_responsive,
  .text_md_responsive h1, .text_md_responsive .h1, h1.text_md_responsive
  {font-size: 2.5rem; line-height: 2.7rem;}
  .text_xl_responsive h4, .text_xl_responsive .h4, h4.text_xl_responsive,
  .text_grande_responsive h3, .text_grande_responsive .h3, h3.text_grande_responsive,
  .text_md_responsive h2, .text_md_responsive .h2, h2.text_md_responsive
  {font-size: 2.0rem; line-height: 2.2rem;}
  .text_xxl_responsive p, p.text_xxl_responsive, .text_xxl_responsive .p, .p.text_xxl_responsive, .text_xxl_responsive li, li.text_xxl_responsive,
  .text_xl_responsive h5, .text_xl_responsive .h5, h5.text_xl_responsive,
  .text_grande_responsive h4, .text_grande_responsive .h4, h4.text_grande_responsive,
  .text_md_responsive h3, .text_md_responsive .h3, h3.text_md_responsive
  {font-size: 1.8rem; line-height: 2.0rem;}
  .text_xl_responsive p, p.text_xl_responsive, .text_xl_responsive .p, .p.text_xl_responsive, .text_xl_responsive li, li.text_xl_responsive,
  .text_grande_responsive h5, .text_grande_responsive .h5, h5.text_grande_responsive,
  .text_md_responsive h4, .text_md_responsive .h4, h4.text_md_responsive,
  .text_md_responsive h5, .text_md_responsive .h5, h5.text_md_responsive
  {font-size: 1.6rem; line-height: 1.8rem;}
  .text_grande_responsive p, p.text_grande_responsive, .text_grande_responsive .p, .p.text_grande_responsive, .text_grande_responsive li, li.text_grande_responsive
  {font-size: 1.4rem; line-height: 1.8rem;}
  .text_md_responsive p, p.text_md_responsive, .text_md_responsive .p, .p.text_md_responsive, .text_md_responsive li, li.text_md_responsive
  {font-size: 1.2rem; line-height: 1.6rem;}

  .text-sm-center-lg-right{text-align: left;}

  .h_logo_md_responsive {height: 2.8rem;}
  .h_logo_lg_responsive, .h_logo_md_responsive_1 {height: 3.1rem;}
  .h_logo_xl_responsive, .h_logo_lg_responsive_1 {height: 3.5rem;}
  .h_logo_xxl_responsive, .h_logo_md_responsive_2, .h_logo_xl_responsive_1 {height: 4rem;}
  .h_logo_xxl_responsive_1, .h_logo_lg_responsive_2, .h_logo_xl_responsive_2  {height: 4.8rem;}
  .h_logo_xxl_responsive_2 {height: 5.5rem;}
}

/*// Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .m-xs-auto-ov{margin: auto}
}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .m-sm-auto-ov{margin: auto}
}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .m-md-auto-ov{margin: auto}
}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .m-lg-auto-ov{margin: auto}
}

.border_on{border: solid;}
.border_left_on{border-left: solid;}
.border_right_on{border-right: solid;}
.border_top_on{border-top: solid;}
.border_bottom_on{border-bottom: solid;}

/*// Extra large devices (large desktops)*/
/*// No media query since the extra-large breakpoint has no upper bound on its width*/


/************ ROTATE ********************/
.rotateimg270 {
  -webkit-transform:rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotateimg90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}


/************ PROGRESS BAR ********************/

.progressbar-items {
    display: flex;
    justify-content: space-around;
    /*margin-bottom: 30px;*/
    overflow: hidden;
}

.progressbar-items .active {
    color: white;
    background-color: var(--logo-color-1);
}

.progressbar-items li {
    list-style-type: none;
    font-size: 15px;
    /*width: 25%;*/
    /*float: left;*/
    /*position: relative;*/
    font-weight: 400;
    z-index: 100;
    color: white;
    background-color: lightgray;
}

.progress.tiny-bar{
  height: 3px;
}

.ajax_wait{display: none!important;}
.ajax_wait.show{display: flex!important;}

/************ CAROUSEL VERTICAL ********************/

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}


/************ Scroll Snap ********************/

@supports(scroll-snap-stop: always) {
  /* Aquí debo colocar las clases css para cuando el navegador no soporta scroll-snap-stop. */

}

.item_scroll_snap {
  scroll-margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.y_snap_mandatory {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.y_snap_normal {
  scroll-snap-type: y;
}

.y_snap_proximity {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}

.snap_stop_always {
  scroll-snap-stop: always;
}

@media only screen and (min-height: 250px){
  .activar_flex_sm_snap{display: flex;}

  .y_sm_snap_mandatory {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  .y_sm_snap_normal {
    scroll-snap-type: y;
  }

  .y_sm_snap_proximity {
    scroll-snap-type: y proximity;
    overflow-y: scroll;
  }
}
@media only screen and (min-height: 400px){
  .activar_flex_m_snap{display: flex;}

  .y_m_snap_mandatory {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  .y_m_snap_normal {
    scroll-snap-type: y;
  }

  .y_m_snap_proximity {
    scroll-snap-type: y proximity;
    overflow-y: scroll;
  }

}
@media only screen and (min-height: 600px){
  .activar_flex_l_snap{display: flex;}
  .y_l_snap_mandatory {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  .y_l_snap_normal {
    scroll-snap-type: y;
  }

  .y_l_snap_proximity {
    scroll-snap-type: y proximity;
    overflow-y: scroll;
  }
}



/*.card-columns {*/
/*  @include media-breakpoint-only(lg) {*/
/*    column-count: 4;*/
/*  }*/
/*  @include media-breakpoint-only(xl) {*/
/*    column-count: 5;*/
/*  }*/
/*}*/


/**
Carrousel de Productos
 */
.carousel-multi-item.v-2.product-carousel .carousel-inner .carousel-item.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-next,
.carousel-multi-item.v-2.product-carousel .carousel-item-prev {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
.carousel-multi-item.v-2.product-carousel .carousel-item-right.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-next {
  -webkit-transform: translateX(20%);
  -ms-transform: translateX(20%);
  transform: translateX(20%); }
.carousel-multi-item.v-2.product-carousel .carousel-item-left.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-prev {
  -webkit-transform: translateX(-20%);
  -ms-transform: translateX(-20%);
  transform: translateX(-20%); }
.carousel-multi-item.v-2.product-carousel .carousel-item-right,
.carousel-multi-item.v-2.product-carousel .carousel-item-left {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }
.carousel-multi-item.v-2.product-carousel *, .carousel-multi-item.v-2.product-carousel ::after, .carousel-multi-item.v-2.product-carousel ::before {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }
.fuchsia-rose-text {
  color: #db0075;
}
.aqua-sky-text {
  color: #5cc6c3;
}
.mimosa-text {
  color: #F0C05A;
}
.list-inline-item .fas, .list-inline-item .far {
  font-size: .8rem;
}
.chili-pepper-text {
  color: #9B1B30;
}
.carousel-multi-item .controls-top .btn-floating {
  background: #F8CDCD;
}
.carousel-multi-item .carousel-indicators li {
  height: .75rem;
  width: .75rem;
  max-width: .75rem;
  background-color: #5cc6c3;
}
.carousel-multi-item .carousel-indicators .active {
  height: 1rem;
  width: 1rem;
  max-width: 1rem;
  background-color: #5cc6c3;
}
.carousel-multi-item .carousel-indicators {
  margin-bottom: -1rem;
}


/************* Estilos Tooltips ***************/

.globo {
  padding: 10px;
  position: absolute;
  width: auto;
  white-space: nowrap;
  word-wrap: no-wrap;
  box-shadow: 1px 1px 20px #aaa;
  border-radius: 5px;
  background-color: #fff;
  color: black!important;
  transform-style: preserve-3d;
  z-index: 200;
  font-size: 0.9em;
  display: none;
}

.globo.show{display: block;}

.globo:before,
.globo:after {
  content: "";
  position: absolute;
  display: block;
  background-color: transparent;
  z-index: 400;
}

.globo,
.globo.gl_bottom{
  /*Tipo gl-bottom por defecto*/
  top: 40px;
  left: 50%;
  transform: translate(-50%);
}

.globo.gl_left{
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
}
.globo.gl_right{
  top: 50%;
  left: 100%;
  right: auto;
  transform: translateY(-50%);
}
.globo.gl_bottom{
  left: 50%;
  top: calc(100% + 20px);
  bottom: auto;
  transform: translateX(-50%);
}
.globo.gl_top{
  left: 50%;
  bottom: calc(100% + 20px);
  top: auto;
  transform: translateX(-50%);
}
.globo.gl_top_left{
  left: 95%;
  bottom: calc(100% + 20px);
  top: auto;
  transform: translateX(-100%);
}
.globo.gl_danger {
  color: #D30423!important;
  box-shadow: 1px 1px 20px rgba(211, 4, 35, 0.3);
}
.globo.gl_azul {
  color: #0641AD!important;
  box-shadow: 1px 1px 20px rgba(6, 65, 173, 0.3);
}
.globo.gl_amarillo
{
  color: black!important;
  background-color: lightgoldenrodyellow;
  box-shadow: 1px 1px 20px rgba(211, 4, 35, 0.3);
}
.globo.gl_amarillo:before,
.globo.gl_amarillo:after{
  border-color: lightgoldenrodyellow;
  border-style: solid;
}
.globo.gl_color_1
{
  color: white!important;
  background-color: var(--web-color-4, #009688) !important;
  box-shadow: 1px 1px 20px #6262624C;
}
.globo.gl_color_1:before,
.globo.gl_color_1:after{
  border-color: var(--web-color-4, #009688);
  border-style: solid;
}
.globo.gl_color_2
{
  color: white!important;
  background-color: var(--web-color-5, #009688) !important;
  box-shadow: 1px 1px 20px #6262624C;
}
.globo.gl_color_2:before,
.globo.gl_color_2:after{
  border-color: var(--web-color-5, #009688);
  border-style: solid;
}
.globo.gl_color_3
{
  color: white!important;
  background-color: var(--web-color-6, #009688) !important;
  box-shadow: 1px 1px 20px #6262624C;
}
.globo.gl_color_3:before,
.globo.gl_color_3:after{
  border-color: var(--web-color-6, #009688);
  border-style: solid;
}


.globo.gl_left:before,
.globo.gl_left:after{
  left: auto;
  right: -20px;
  top: calc(50% - 8px);
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left-width: 25px;
  border-right: 0;
}
.globo.gl_right:before,
.globo.gl_right:after{
  right: auto;
  left: -20px;
  top: calc(50% - 8px);
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right-width: 25px;
  border-left: 0;
}
.globo.gl_bottom:before,
.globo.gl_bottom:after{
  bottom: auto;
  top: -20px;
  left: calc(50% - 8px);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom-width: 25px;
  border-top: 0;
}
.globo.gl_top:before,
.globo.gl_top:after{
  top: auto;
  bottom: -20px;
  left: calc(50% - 8px);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top-width: 25px;
  border-bottom: 0;
}
.globo.gl_top_left:before,
.globo.gl_top_left:after{
  top: auto;
  bottom: -20px;
  left: calc(93% - 8px);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top-width: 25px;
  border-bottom: 0;
}


/*************** Switch ********************/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  float:right;
}
/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch {
  width: 40px;
  height: 16px;
}
.slider:before {
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 16px;
}

.switch.mediano {
  width: 50px;
  height: 24px;
}
.switch.mediano .slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
}

.switch.mediano input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switch.mediano .slider.round {
  border-radius: 34px;
}

.switch.grande {
  width: 60px;
  height: 34px;
}
.switch.grande .slider:before {
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
}

.switch.grande input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switch.grande .slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Colores para slider*/
input.default:checked + .slider,
input.off_gray:not(:checked) + .slider
{
  background-color: #444;
}
input.primary:checked + .slider,
input.off_primary:not(:checked) + .slider
{
  background-color: #2196F3;
}
input.success:checked + .slider,
input.off_success:not(:checked) + .slider
 {
  background-color: #8bc34a;
}
input.info:checked + .slider,
input.off_info:not(:checked) + .slider
 {
  background-color: #3de0f5;
}
input.warning:checked + .slider,
input.off_warning:not(:checked) + .slider
 {
  background-color: #FFC107;
}
input.danger:checked + .slider,
input.off_danger:not(:checked) + .slider
 {
  background-color: #f44336;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.color_whatsapp{
  background-color: #50CD5D!important;
}

.color_facebook{
  background-color: #3b5998!important;
}

.color_instagram{
  width:100px; height:100px;
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}


/* ANIMACIONES */

.zoom {
  transition: transform .4s; /* Animation */
}

.zoom.zoom_in_120:hover {
  transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/** Entrada de Elemento como Zoom In */
@keyframes zoom_in {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
.animation_zoom_in {transform: scale(0);}
.animation_zoom_in.show {
  transform: scale(1);
  animation-name: zoom_in;
  animation-duration: .3s;
}

/** Entrada de Elemento desde abajo **/
@keyframes bottom_2_top_in {
  from {transform: translateY(100vh);}
  to {transform: translateY(0);}
}
.animation_bottom_2_top_in {transform: translateY(100vh);}
.animation_bottom_2_top_in.show {
  transform: translateY(0);
  animation-name: bottom_2_top_in;
  animation-duration: 1s;
}


/* ****************** BARRA DE RANGO ******************** */

[slider] {
  width: 100%;
  position: relative;
  height: 5px;
  margin: 45px 0 10px 0;
}

[slider] > div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 5px;
}
[slider] > div > [inverse-left] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider] > div > [inverse-right] {
  position: absolute;
  right: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}


[slider] > div > [range] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 14px;
  background-color: var(--web-color-4, #d02128) !important;
}

[slider] > div > [thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 20px;
  width: 20px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  opacity: 0;
}

div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider] > input[type=range]:focus {
  outline: none;
}

div[slider] > input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: var(--web-color-4, #d02128) !important;
  -webkit-appearance: none;
}

div[slider] > input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-tooltip {
  display: none;
}

[slider] > div > [sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index:3;
  background-color: var(--web-color-4, #d02128) !important;
  color: var(--web-color-claro-text-default, #fff) !important;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider] > div > [sign].show {opacity: 1;}

[slider] > div > [sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: var(--web-color-4, #d02128) !important;
}

[slider] > div > [sign] > span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover > div > [sign] {
  opacity: 1;
}


/**
  Resaltar Elemento
 */
.resaltar{
  border: 2px solid red!important;
  box-shadow: 0 .5rem 1rem rgba(255,0,0,.40)!important;
}

/*
Remover Estilo al seleccionar un input
 */
.remove_focus_visible:focus {
    outline: none;
    }


/* Mover elemento al frente al Pasar el Mouse */
.send_to_front_hover:hover{z-index: 999999;}
.zoom_hover_110:hover{zoom: 110%;}
.zoom_hover_120:hover{zoom: 120%;}
.zoom_hover_130:hover{zoom: 130%;}
.zoom_hover_140:hover{zoom: 140%;}
.zoom_hover_150:hover{zoom: 150%;}

/**
Sticky bottom para botón flotante de whatsapp

Colocar elemento con clase .sticky_botton_right como último elemento, dentro del contenedor al que se mantendrá pegado.
 */
.sticky_botton_right{
  position: sticky!important;
  bottom: 0;
  right: 0;
  padding: 5px;
  text-align: right;
}

.scrollbar_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
.scrollbar_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
.scrollbar_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
.scrollbar_elegant_compense{padding-left: 7px;}

.scrollbar_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
.scrollbar_elegant::-webkit-scrollbar-thumb{background: var(--web-color-6, rgb(255, 161, 0)); border-radius: 3px;}

.btn_leer_mas{background-image: linear-gradient(#ffffff00, #ffffff);}

/**
  Clases Responsive
 */

/**
  Clases SM
 */
@media only screen and (min-width: 576px){
  .scrollbar_sm_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
  .scrollbar_sm_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
  .scrollbar_sm_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
  .scrollbar_sm_elegant_compense{padding-left: 7px;}
  .scrollbar_sm_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
}

/**
  Clases MD
 */
@media only screen and (min-width: 768px){
  .scrollbar_md_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
  .scrollbar_md_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
  .scrollbar_md_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
  .scrollbar_md_elegant_compense{padding-left: 7px;}
  .scrollbar_md_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
}

/**
  Clases LG
 */
@media only screen and (min-width: 992px){
  .scrollbar_lg_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
  .scrollbar_lg_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
  .scrollbar_lg_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
  .scrollbar_lg_elegant_compense{padding-left: 7px;}
  .scrollbar_lg_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
}

/**
  Clases XL
 */
@media only screen and (min-width: 1200px){
  .scrollbar_xl_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
  .scrollbar_xl_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
  .scrollbar_xl_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
  .scrollbar_xl_elegant_compense{padding-left: 7px;}
  .scrollbar_xl_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
}

/**
  Clases XXL
 */
@media only screen and (min-width: 1400px){
  .scrollbar_xxl_hide_x::-webkit-scrollbar{height: 0; background: #cccccc;}
  .scrollbar_xxl_hide_y::-webkit-scrollbar{width: 0; background: #cccccc;}
  .scrollbar_xxl_elegant::-webkit-scrollbar{width: 7px; background: #cccccc;}
  .scrollbar_xxl_elegant_compense{padding-left: 7px;}
  .scrollbar_xxl_elegant_x::-webkit-scrollbar{height: 7px; background: #cccccc;}
}

.zoom-cursor {
  cursor: zoom-in;
}

.currency-input{position: relative!important;}
.currency-input input{text-align: right;}
.currency-input::before {
  content: "$";
  position: absolute;
  bottom: 1.3rem;
  font-size: 1.2rem;
  left: .3rem;
}