*{
  margin:0;
  padding:0;
}
:root{
  --line-border-fill:#7752FE;
  --line-border-empty:#C2D9FF;
}
@font-face {
 
  font-family: 'Helvetica';
  src: url(../fonts/Helvetica-Light-Condensed.ttf);
}
@font-face {
 
  font-family: OpenSans-Regular;
  src: url(../fonts/fonts/OpenSans/OpenSans-Regular.ttf);
}
html{
  overflow-x:hidden;
}
body {
  background: #ffffff26;
  font-family: OpenSans-Regular;
  padding-top: 0;
  margin-top: 0;
} 
.img-banner-login{
  position: absolute;
  width: 80%;
  bottom: 50%;
  left: 10%;
}
.hide-form{
  display:none;

}
.active-form{
  display:block;
  animation: fadeInRight 1s ease-in-out;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}
.container{
  background: white;
  max-width: 1366px;
  padding: 0;
}
.container2{
  /* background:no-repeat center / contain url("/fondo-login2.png"); */
  background-image:  url("/fondo-login2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  /* max-width: 1366px; */
  width:100%;
  padding-top: 9rem;
  padding-bottom: 3rem;
}

.container-login{
  background: #E6E7E7;
  opacity: 0.9;
  padding: 1rem 2rem;
  /* margin-top: 10px; */
  
}
.container-fluid{

  padding: 0;
}
.row{
  margin-right: 0!important;
  margin-left: 0!important;
  padding-right: 0!important;
  padding-left: 0!important;
}
.bg-grey{
background: #E6E7E7;
/* z-index: 9999999999999; */
position: relative;
}

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
header{
  font-family: OpenSans-Regular;
}
.nav{
  background: white;
  /* border-bottom:1px solid red; */
  color: black;
  margin-top:1rem;
  max-height: 150px;
  font-family: OpenSans-Regular;
  display: flex;
  flex-wrap:wrap;
  align-items: center;
}

.nav-title{
  width: 30%;
  /* background: red; */
  padding: 16px 40px;
  text-align: left;
}
.nav-title img{
  max-width:180px;
}
.nav-menu{
  width: 70%;
}

.nav-menu ul{
  display: flex;
  justify-content: flex-end;
}
.nav-menu ul a{
 display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-menu ul li{
  padding: 10px 20px;
  color: #000;
  font-size: 17px;
  list-style-type: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-menu ul li:hover{
  color: #d22827;
  /* font-weight: bold; */
}
.btn-head{
  background: #d22827;
  color:white!important;
  padding: 0.25rem 0.75rem; /*11px 13px; */
  font-size: 1rem; /* 0.95rem;*/
  /* font-weight: bold; */
  font-family: OpenSans-Regular;
  border-radius: 50px;

}
.btn-head:hover{
  background: grey !important;;

}

@media screen and (min-width : 1500px){
  .container {
max-width: 95%;}

.header-sup .head-redes ul li a img {
  max-width: 100%;
  width: 55px;
}

.header-sup .img-logo a img {
  max-width: 300px;
  margin-left: 15px;
  padding: 10px;
}

.header-sup .title-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
}
.header-sup .title-header2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}

.header-sup .title-header a .back-title {
  background: #D02927;
  border-radius: 50px;
  /* padding: 17px 15px; */
  margin-right: 0;
  color: white;
  padding: 0.60rem 0.75rem;
    font-size: 1.5rem;
}
.header-sup .title-header2 a .back-title {
  background: #D02927;
  border-radius: 50px;
  /* padding: 17px 15px; */
  margin-right: 0;
  color: white;
  padding: 0.60rem 0.75rem;
    font-size: 1.5rem;
}

.header-sup .title-header a .back-title h2 {margin: 0;padding: 0;padding-bottom: 0;font-weight: 400;font-size: 20px;display: flex;justify-content: center;align-items: center;margin-bottom: 0!important;}

.header-sup .title-header2 a .back-title h2 {margin: 0;padding: 0;padding-bottom: 0;font-weight: 400;font-size: 20px;display: flex;justify-content: center;align-items: center;margin-bottom: 0!important;}

}


/*style for responsive menu*/
.login-section {

padding-top: 5rem;

padding-bottom: 5rem;
}
.login-section2 {

  padding-top: 2rem;
  
  padding-bottom: 2rem;
  }
h1{padding-top: 2em;font-weight: bold;font-size: 1.5rem;}
h2{padding-top: 1em;font-weight: bold;font-size: 1.15rem;}
.text-red{
  color:#d22827!important;
}
.login-section .login-main { 

}

.login-section .login-main .theme-form { 

}

.login-section .login-main .theme-form .form-group {position: relative;}

.login-section .login-main .theme-form .form-group .col-form-label {

font-weight: bold;
}

.login-section2 .login-main .theme-form .form-group .col-form-label {

  font-weight: bold;
  }

.login-section .login-main .theme-form .form-group .form-control { 

}
.login-section .login-main .theme-form .form-group .btn-primary{

margin-top: 1.5rem;
}
.login-section2 .login-main .theme-form .form-group .btn-primary{

  margin-top: 1.5rem;
  }
.member-benefit-section {position: relative;margin-left: 2%;margin-bottom: 7rem;}

.member-benefit-section h2 {

margin-top: 1rem;

font-weight: bold;

font-size: 1.5rem;
}

.member-benefit-section p {

width: 70%;

font-size: 0.75rem;

font-weight: 700;
}

.member-benefit-section .btn-membership { 

}

.member-benefit-section .btn-membership a { 

}

.member-benefit-section .btn-membership a div {

border-radius: 0;

position: absolute;

right: 5%;

top: 0;
}

.progress-container{display:flex;justify-content: space-between;position: relative;margin-bottom: 2em;max-width: 100%;width: 100%;}

.progress-container::before {content:'';background-color: #2b2b2b6b;height: 4px;width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);/*Positioning bar exactly in the middle of the number*/z-index: 2;}

.progress-bar{background-color: #d22827;height: 4px;width: 0%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);z-index: -1;transition: .4s ease;z-index: 99;}

.circle{height: 40px;width: 40px;border-radius: 50%;background-color:#fff;color: #1b1b1b;font-size: 20px;font-weight:bold;display:flex;align-items:center;justify-content:center;border: 3px solid #d2282759;transition: .4s ease;z-index: 99;}

.circle.active{
border: 3px solid #d22827;
background-color: #d22827;
color: #fff;
}

/* .btn{
background-color:var(--line-border-fill);
color: #fff;
border: none;
font-family: "Open Sans", sans-serif;
font-weight: bold;
padding: 0.6em 2em;
border-radius: 5px;
cursor: pointer;
margin: .5em;
}
.btn:hover{
background-color:#5f42cb;
} */

.btn {
  background: #d22827;
  color:white!important;
  padding: 0.25rem 0.75rem; /*11px 13px; */
  font-size: 1rem; /* 0.95rem;*/
  /* font-weight: bold; */
  font-family: OpenSans-Regular;
  border-radius: 50px;

}
.btn:hover{
  background: grey !important;;

}

.btn:active{
transform: scale(.97)
}
.btn:disabled{
background-color: var(--line-border-empty);
cursor: not-allowed;
}



  @media screen and (max-width:500px){
  .container2{
    margin-top: 2rem;
    background-image:  url("/imagen movil.png");
    background-repeat: no-repeat;
    background-size: 100%;
    /* max-width: 1366px; */
    /* width:auto;*/
    padding-top: 4rem;
    height: 100vh;
  
  }

  .container-login{
    margin-top:0.8rem;
    background: #E6E7E7;
    opacity: 0.9;
    padding: 0;

    /* margin-top: 10px; */
    
  }

  .login-section2 {width:90%;margin:0 auto;padding-top: 0rem;position: relative;}

 
  }

@media screen and (min-width:1600px) and (max-width:2000px){
.container2{
  background-image:  url("/fondo-login2.png");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 1366px; */
  width:auto;
  padding-top: 12rem;
  padding-bottom: 6rem;

}
}

@media screen and (min-width:2000px) and (max-width:3000px){
  .container2{
    background-image:  url("/fondo-login2.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* max-width: 1366px; */
    width:auto;
    padding-top: 20rem;
    padding-bottom: 25rem;
  
  }
  }
@media screen and (max-width:1000px){
 .img-banner-login{
  position: relative;
  width: 100%;
  /* bottom: 50%; */
  left: unset;
}
.member-benefit-section h2 {
  margin-top: -2rem;
  font-weight: bold;
  font-size: 1.52rem;
}
.member-benefit-section p {width: 90%;text-align:justify;font-size: 1rem;font-weight: 100;}
.member-benefit-section {margin-left: 10%;margin-bottom: 4rem;}
.member-benefit-section .btn-membership a div {border-radius: 0;position: relative;right: 5%;top: 0;left: 0;}
h1{
padding-top: 3rem;

  text-align:center;
font-size: 1.5rem;
}
.login-section {width:80%;margin:0 auto;padding-top: 1rem;position: relative;}
.login-section2 {width:80%;margin:0 auto;padding-top: 1rem;position: relative;}

 .nav{
     height: auto;
 }
 .nav .nav-title{
     text-align: left;
     width: 100%;
 }

 .nav .nav-menu{
     width: 100%;
 }
 .nav .nav-menu ul{
     justify-content: space-around;
 }

 .nav .nav-menu ul li{
     /* width: 20%; */
     padding: 10px 0px;
     text-align: center;
     font-size: 16px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
}