@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/quentin');
:root {

  /* Colors: */
  ---primextate-color-0000ff-0000ff: #0000FF;
  ---primextate-color-f5f5f5-f5f5f5: #F5F5F5;
  ---primextate-color-898989-898989: #898989;
  ---primextate-color-ffffff-ffffff: #FFFFFF;
  ---primextate-color-121212-121212: #121212;
  ---primextate-color-000000: #000000;
  
  /* Font/text values */
 --primextate-font-family-montserrat: Montserrat;
 --primextate-font-family-quentin: Quentin;
 --primextate-font-style-normal: normal;
 --primextate-font-weight-600: 600px;
 --primextate-font-weight-bold: bold;
 --primextate-font-weight-normal: normal;
 --primextate-font-weight-medium: medium;
 --primextate-font-size-12: 12px;
 --primextate-font-size-14: 14px;
 --primextate-font-size-22: 22px;
 --primextate-font-size-24: 24px;
 --primextate-font-size-35: 35px;
 --primextate-font-size-48: 48px;
 --primextate-font-size-55: 55px;
 --primextate-font-size-75: 75px;
 --primextate-font-size-84: 84px;
 --primextate-character-spacing-0: 0px;
 --primextate-line-spacing-18: 18px;
 --primextate-line-spacing-20: 20px;
 --primextate-line-spacing-30: 30px;
 --primextate-line-spacing-31: 31px;
 --primextate-line-spacing-38: 38px;
 --primextate-line-spacing-70: 70px;
 --primextate-line-spacing-84: 84px;
 --primextate-text-transform-lowercase: lowercase;
 --primextate-text-transform-titlecase: titlecase;
  }

  body {
      font-family: var(--primextate-font-family-montserrat);
      font-style: var(--primextate-font-style-normal);
      font-weight: var(--primextate-font-weight-normal);
      font-size: var(--primextate-font-size-14);
      letter-spacing: var(--primextate-character-spacing-0);
      }

      .flash-messages {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1050; /* Asegúrate de que esté sobre otros elementos */
        text-align: center;
      }
      .flash-messages .alert {
        display: inline-block;
        width: auto;
        margin: 0.5rem auto;
      }
    
  /* Character Styles */

  .h1-montserrat-—-48pt {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-normal);
    font-size: var(--primextate-font-size-48);
    color: var(--primextate-color-000000);
    text-transform: var(--primextate-text-transform-uppercase);
  }

  .h1-montserrat-—-75pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-75);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h1b-montserrat-—-55pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-55);
  line-height: var(--primextate-line-spacing-70);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h2-quentin-—-84pt-gray {
  font-family: var(--primextate-font-family-quentin);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-84);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-898989-898989);
  }
  .h3-montserrat-—-35pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-35);
  line-height: var(--primextate-line-spacing-20);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h3b-montserrat-—-22pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-22);
  line-height: var(--primextate-line-spacing-31);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }
  .h4-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-14);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }
  .h4b-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-14);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h5-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-lowercase);
  }
  .h5b-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  text-transform: var(--primextate-text-transform-titlecase);
  }
  .h6-montserrat-—-12pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-12);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-000000);
  }

  .h6-montserrat-—-12pt-black {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-600);
    font-size: var(--primextate-font-size-12);
    line-height: var(--primextate-line-spacing-30);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(--primextate-color-000000);
    }
  .h1-montserrat-—-75pt-black {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-75);
  line-height: var(--primextate-line-spacing-84);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-121212-121212);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h2-quentin-—-84pt {
  font-family: var(--primextate-font-family-quentin);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-84);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }


  .h4-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-normal);
  font-size: var(--primextate-font-size-14);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }
  .h4b-montserrat-—-14pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-bold);
  font-size: var(--primextate-font-size-14);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-uppercase);
  }
  .h5-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-lowercase);
  }
  .h5b-montserrat-—-24pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-medium);
  font-size: var(--primextate-font-size-24);
  line-height: var(--primextate-line-spacing-38);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-transform: var(--primextate-text-transform-titlecase);
  }
  .h6-montserrat-—-12pt {
  font-family: var(--primextate-font-family-montserrat);
  font-style: var(--primextate-font-style-normal);
  font-weight: var(--primextate-font-weight-600);
  font-size: var(--primextate-font-size-12);
  line-height: var(--primextate-line-spacing-30);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  }
  
  .h1-montserrat-—-66pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 66px/99px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-align: left;
  }

  .h1-montserrat-—-92pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 92px/99px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-align: left;
  }

  .h3-montserrat-—-35pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 35px/40px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-121212-121212);
    text-transform: uppercase;
  }

  .h3-montserrat-—-35pt-white{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 35px/40px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-ffffff-ffffff);
    text-transform: uppercase;
  }

  .h3-montserrat-—-25pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 600 25px/45px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-121212-121212);
    text-transform: uppercase;
  }

  .h3-montserrat-—-24pt{
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 24px/38px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-898989-898989);  
  }

  .material-symbols-outlined{
    pointer-events: none; 
  }
  
  .material-symbols-outlined.clickable-icon {
    pointer-events: auto; /* o initial, según prefieras */
  }
.thumb_up .material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

  /* trix customized */
.trix-button--icon-attach, .trix-button--icon-link, .trix-button--icon-code{
  display: none;
}

  /* bootstrao overwrite */

  .btn {
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    border: 0;
  }
  
  .btn-primary {
    background-color: #1b1b1b;
  }
  
  .btn-primary:hover {
    background-color: #383838;
  }
  
  .btn-primary:focus {
    background-color: #2d2d2d;
    color: white;
  }
  
  .btn-primary:active {
    background-color: #1b1b1b !important;
  }

  .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    background-color: var(---primextate-color-898989-898989);
    color: var(---primextate-color-f5f5f5-f5f5f5);
    margin-right: 2px;
  }

  
  /* custom classes */

  h1 {
    font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 600 25px/45px var(--primextate-font-family-montserrat);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(---primextate-color-121212-121212);
    text-transform: uppercase;
  }

  
  .countdown {
    color: #F5F4F3;
  }
  .line-hr-h1 {
    border-top: 1px solid #000000;
    margin: 20px 0;
}
.line-hr-h2 {
  border-top: 5px solid #000000;
  margin: 20px 0;
}

  .header_image {
    border-radius: 0.75rem;
  }

  .results {
    font-weight: bold;
  }

  .search_border {
    border: 1px solid var(--primextate-color-000000);
    border-radius: 10px; /* Adjust the radius as needed */
  }
 
  .submit_symbol_buttom {
    background-color: #000000;
    color:#F5F4F3;
    padding: 5px;
    border-radius: 0.25rem;
  }
  
  a.no-underline {
    text-decoration: none;
  }

  .no-underline {
    text-decoration: none;
  }

  .sidebar-backgroud {
    color: white; background-color: #121212;
  }
  

  .sidebar-link:hover {
    background-color: #262626; /* Replace #yourColor with the desired background color */
    border-radius: 10px; /* Adjust the radius as needed */
    color: var(---primextate-color-f5f5f5-f5f5f5);
  }
  
  .sidebar-link_text:hover {
    color: #ffffff;
    cursor: pointer;
  }

  .sidebar-card {
    background-color: #292A2E;
    border-radius: 0.75rem;
  }
  .sign_in_out_form:hover {
    background-color: rgb(94, 94, 94) ; /* Replace #yourColor with the desired background color */
    border-radius: 10px; /* Adjust the radius as needed */
  }
  
  .sign_in_out_form_text:hover {
    color: var(---primextate-color-ffffff-ffffff);
    cursor: pointer;
  }

  a {
    color: var(---primextate-color-898989-898989);
  }

  a:hover {
    color: var(---primextate-color-121212-121212);
  }

  .text-justify {
    text-align: justify;
  }
.margin-page-content {
    margin-top: 144px;
}

.member_form {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-style-normal) 12px/30px var(--primextate-font-family-montserrat);
  color: var(---primextate-color-121212-121212);
  opacity: 0.5;
  line-height: var(--primextate-line-spacing-20);
}

.bg-img {
  height: 100vh;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(0.6);
}

#bg-responsive-dark {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #000000;
  display: none;
}

#bg-responsive-light {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  display: none;
}

.div_home_section_bg_1 {
  /* content: ""; Removed this line */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 1; /* Set a higher z-index value */
}

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.custom-link {
  /* Removed duplicate 'font' property */
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(--primextate-color-ffffff);
  text-align: left;
  font: normal 14px/30px Montserrat; /* Combined font properties */
  opacity: 1;
}

.custom-link.sign-in {
  border: 1px solid var(--primextate-color-ffffff);
  border-radius: 19px;
  opacity: 1;
  width: 93px;
  text-align: center;
}

.content-home-header-text-area {
  position: absolute;
  top: 197px;
  left: 60px;
  height: 521px;
  /* UI Properties */
  z-index: 3; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.content-home-header-text-area .text {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 53px/80px var(--primextate-font-family-montserrat);
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff);
  text-align: left;
}

.content-home-header-numbers-area {
  position: absolute;
  top: 500px;
  left: 60px;
  height: 521px;
  z-index: 3; /* Set a higher z-index value than .div_home_section_bg_1 */
}

.menu_bg {
  height: 100vh;
  width: 100vw;
}

.content-home-header-numbers-area .counter-number {
  /* UI Properties */
  letter-spacing: var(--primextate-character-spacing-0);
  color: var(---primextate-color-ffffff-ffffff);
  text-align: left;
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) 53px/80px var(--primextate-font-family-montserrat);
}

.content-home-header-numbers-area .counter-description {
  letter-spacing: var(--primextate-character-spacing-0);
  text-align: left;
  font: normal normal normal 22px/21px Montserrat;
  color: var(---primextate-color-ffffff-ffffff);
}

.menu-header-container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh; /* Changed from 100vh to 100% */
}

.beige_section {
  background: #F5F4F3 0% 0% no-repeat padding-box;
  opacity: 1;
}

.gray_section {
  background: var(---primextate-color-f5f5f5-f5f5f5) 0% 0% no-repeat padding-box;
  opacity: 1;
}

.black_section {
  background: #000000 0% 0% no-repeat padding-box;
  opacity: 1;
}

.custom-line {
  height: 5px;
  background-color: #121212;
  width: 100%;
}

.custom-line-white {
  height: 3px;
  background-color: #ffffff;
  width: 100%;
}

p {
  /* text-align: justify; */
  font: normal normal normal 14px/18px Montserrat;
  letter-spacing: 0px;
  color: #121212;
  opacity: 1;
}

.pw {
  text-align: justify;
  font: normal normal normal 14px/18px Montserrat;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.button-black {
  width: 226px;
  height: 45px;
  background: #121212 0% 0% no-repeat padding-box;
  border: 1px solid var(---primextate-color-898989-898989);
  border-radius: 32px;
  opacity: 1;
  color: #FFFFFF;
  font: normal normal normal 14px/30px Montserrat;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}

.button-black:hover {
  background-color: #292A2E; /* Replace #yourColor with the desired background color */
  color: white !important;
}

.button-black a:hover {
  color: var(---primextate-color-f5f5f5-f5f5f5);
}

.button-beige {
  width: 226px;
  height: 45px;
  background: #F5F4F3 0% 0% no-repeat padding-box;
  border: 1px solid #272727;
  border-radius: 32px;
  opacity: 1;
  color: #000000;
  font: normal normal normal 14px/30px Montserrat;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}


.counter-number {
  /* UI Properties */
  font: var(--primextate-font-style-normal) normal var(--primextate-font-style-normal) 33px/14px var(--primextate-font-family-montserrat);
}

.counter-description {
  font: var(--primextate-font-style-normal) normal var(--primextate-font-weight-normal) var(--primextate-font-size-14)/13px var(--primextate-font-family-montserrat);
}

.my-video-class {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.start-class{
  color: green;
}

.end-class{
  color: red;
}

/* Media Queries */
@media (max-width: 575.98px) {
  /* Add styles for screens less than 576px wide here */
}

@media (max-width: 767.98px) {

  .h1b-montserrat-—-55pt {
    font-family: var(--primextate-font-family-montserrat);
    font-style: var(--primextate-font-style-normal);
    font-weight: var(--primextate-font-weight-normal);
    font-size: var(--primextate-font-size-22);
    line-height: var(--primextate-line-spacing-30);
    letter-spacing: var(--primextate-character-spacing-0);
    color: var(--primextate-color-000000);
    text-transform: var(--primextate-text-transform-uppercase);
    }
    
  .div_home_section_1 {
    height: 50%;
  }

  .div_home_section_bg_1 {
    height: 50%;
  }

  .h1-montserrat-—-66pt{
    font: normal normal normal 35px/46px Montserrat;
  }

  .h1-montserrat-—-92pt{
    font: normal normal normal 35px/46px Montserrat;
  }

  .h1-montserrat-—-75pt-black{
    font-size: var(--primextate-font-size-35);
  }
  .h2-quentin-—-84pt-gray {
    font-size: var(--primextate-font-size-35);
    line-height: var(--primextate-line-spacing-30);
    }

  .h1-montserrat-—-75pt {
    font-size: var(--primextate-font-size-35);
    }  


  .content-home-header-text-area .text {
    font: normal normal normal 35px/46px Montserrat;
  }

  .content-home-header-numbers-area {
    left: 20px;
    height: 100px;
  }

  .content-home-header-numbers-area .counter-number {
    /* UI Properties */
    font: normal normal normal 35px/21px Montserrat;
  }

  .content-home-header-numbers-area .counter-description {
    font: normal normal normal 14px/17px Montserrat;
  }

  .menu-header-container {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 50vh;
  }

  .reinvents {
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
  }
}

@media (max-width: 1199.98px) {
  .reinvents {
    padding-top: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
  }
}

@media (max-width: 1199.98px) {
  .sidebar-backgroud {
    background-color: #ffffff;
  }
}