*{
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}
html{
  color: #333;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  color: #333;
}
.font-poppins{
  font-family: 'Poppins', sans-serif;
}
.grales{
  width: 100%;
  float: left;
}
.font-10{
  font-size: 10px;
}
.font-11{
  font-size: 11px;
}
.font-12{
  font-size: 12px;
}
.font-13{
  font-size: 13px;
}
.font-14{
  font-size: 14px;
}
.font-15{
  font-size: 15px;
}
.font-16{
  font-size: 16px;
}
.font-17{
  font-size: 17px;
}
.font-18{
  font-size: 18px;
}
.font-19{
  font-size: 19px;
}
.font-20{
  font-size: 20px !important;
}
.font-21{
  font-size: 21px;
}
.font-22{
  font-size: 22px;
}
.font-23{
  font-size: 23px;
}
.font-24{
  font-size: 24px;
}
.font-25{
  font-size: 25px;
}
.font-30{
  font-size: 30px;
}
.font-35{
  font-size: 35px;
}
.font-40{
  font-size: 40px;
}
.font-45{
  font-size: 45px;
}
.font-50{
  font-size: 50px;
}
.font-55{
  font-size: 55px;
}
.font-60{
  font-size: 60px;
}
.font-65{
  font-size: 65px;
}
.font-70{
  font-size: 70px;
}
.fw-100{
  font-weight: 100;
}
.fw-200{
  font-weight: 200;
}
.fw-300{
  font-weight: 300;
}
.fw-400{
  font-weight: 400;
}
.fw-500{
  font-weight: 500;
}
.fw-600{
  font-weight: 600;
}
.fw-700{
  font-weight: 700;
}
.fw-800{
  font-weight: 800;
}
.fw-900{
  font-weight: 900;
}
.color-blanco{
  color: #fff;
}
.enlace-blanco{
  color: #fff;
  text-decoration: none;
}
.enlace-blanco:hover{
  color: #fff;
  text-decoration: none;
}
.enlace-negro{
  color: #000;
  text-decoration: none;
}
.enlace-negro:hover{
  color: #000;
  text-decoration: none;
}
.color-gris{
  color: #333333;
}
.text-justify{
  text-align: justify;
}
.bg-gris{
  background-color: #6B6F74;
}
.bg-gris-obs{
  background-color: #333;
}
.color-negro{
  color: #000;
}
.bg-negro{
  background-color: #000;
}
.text-end{
    text-align: right !important;
}
.color-rojo{
    color: #E10C18;
}
.color-verde{
    color: green;
}
.bg-rojo{
    background-color: #E10C18;
}
.bg-rojo-obs{
  background-color: #802629;
}
.btn-rojo{
    background-color: #E10C18;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.btn-rojo:hover{
    background-color: #fff;
    color: #E10C18;
    border: 1px solid #E10C18;
    padding: 10px 30px;
    text-decoration: none;
}
.bg-azul{
  background-color: #29AAE1;
}
.bg-naranja{
  background-color: #F6921E;
}
/************* MENU *******************/
#top{
  width: 100%;
  float: left;
  background-color: #E10C18;
  z-index: 2000;
}
.navbar-brand {
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
.nav-item{
  padding: 0 10px;
}
.nav-item a{
  color:#E10C18;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
}
.nav-item a:hover{
  color:#E10C18;
  border-bottom: 1px solid #E10C18;
}
.logo-menu{
  width: 200px;
}
#menu-pie{
  float: right;
}
#menu-pie .nav-item{
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
  float: left;
}
#menu-pie .nav-item .nav-link{
  padding: 10px;
}
.navbar{
  background-color: #fff;
  border-bottom: 1px solid #6B6F74;
}
.navbar-toggler:focus{
  outline: 0;
}
.icos-top{
    width: 20px;
}
.menu-acc ul{
    margin: 0;
    padding: 0;
    float: right;
    margin-right: 15px;
}
.menu-acc ul li{
    list-style: none;
    float: left;
}
.menu-acc{
    margin-bottom: -64px;
    position: relative;
    z-index: 10;
}
#main_nav{
    margin-top: 60px;
}
/************* MENU *******************/
/************* PIE *******************/
#banner-pie{
    background-image: url(../images/bg-pie.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.btn-blanco{
    background-color: transparent;
    border: 2px solid #fff;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.btn-blanco:hover{
    background-color: #E10C18;
    border: 2px solid #fff;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
.logo-pie{
    width: 180px;
}
#datos-pie{
    background-color: #333333;
}
.dis-f{
    display: flex;
}
.vcentro{
    align-items: center;
}
#datos-pie ul li{
    margin-bottom: 10px;
}
/************* PIE *******************/
/************* LOGIN ****************/
.bg-login{
    height: 70vh;
    background-image: url(../images/bg-login.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}
#entrar{
    text-align: center;
    background-image: url(../images/bg-transp-negro.png);
}
/************* LOGIN ****************/
/************* INICIO ****************/
#seccclub-dif{
  background-image: url(../images/bg-club-diferente.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.w-87{
  width: 87px;
}
#carousel .col{
  padding: 0 13px;
}
.navbar-toggler-icon .material-symbols-outlined{
  font-size: 30px !important;
}
.carousel-control-next, .carousel-control-prev {
  width: 3%;
  opacity: 1;
}
.ticker{
  text-align: center;
  position: absolute;
  right: 0px;
  top: 10px;
  padding: 5px 10px;
}
.caption{
  position: absolute;
  z-index: 10;
  padding: 10px 20px;
  font-size: 12px;
  bottom: 0;
  background-image: url(../images/bg-transp-negro.png);
}
.el-evento{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.el-evento img{
  width: 100%;
}
.btn-bn{
  font-weight: bold;
  background-color: #fff;
  border: 2px solid #000;
  padding: 10px 20px;
  text-align: center;
  color: #000;
  font-size: 20px;
  text-decoration: none;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.btn-bn:hover{
  background-color: #E10C18;
  border: 2px solid #fff;
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.body-memb ul li{
  color: #fff;
  font-size: 13px;
}
.lista-contacto li{
  list-style: none;
  margin-bottom: 10px;
}

.table th{
    background-color: transparent;
    border-bottom: solid 2px #E10C18;
}

.borde-rojo{
    border-bottom: solid 2px #E10C18;
}
.table td{
    background-color: transparent;
    border-bottom: 0;
}
/************* INICIO ****************/
/************* INTERIORES LOGIN ****************/
.borde-b-rojo{
    border-bottom: 2px solid #E10C18;
}
.borde-r-rojo{
    border-right: 2px solid #E10C18;
}
.menu-login{
    margin: 0;
    padding: 0;
}
.menu-login li{
    list-style: none;
    border-bottom: 2px solid #E10C18;
    width: 100%;
    float: left;
}
.menu-login li a{
    text-decoration: none;
    font-size: 20px;
    color: #000;
    width: 100%;
    float: left;
    padding: 10px 20px;
}
.menu-login li a:hover{
    background-color: #E10C18;
    color: #fff;
}
.nav-activo{
    background-color: #E10C18;
    color: #fff !important;
}
#interior-login{}
#interior-login .form-control{
    margin-bottom: 10px;
    background-color: #f1f1f1;
}
.pases-int ul{
    margin: 0;
    padding: 0;
}
.pases-int ul li{
    list-style: none;
    font-size: 13px;
}
/** RELOJ **/
#countdown{
    display:flex;
    justify-content:left;
    align-items:left;
    text-align:center;
    color:#fff
}
.countdown-item{
    display:inline-block;
    border-radius:10px;
    padding:9px;
    color:#fff;
}
.countdown-item-label{
    font-size:10px;
    color:#fff
}
.countdown-item-days .countdown-item-label{
    display:block
}
.countdown-number{
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
/** RELOJ **/
.bg-transp{
    background-image: url(../images/bg-transp-negro.png);
}
#membresia1 li{
    color: #fff;
}

.link-terminos{
	text-decoration: none;
    color: #000;
    font-size: 1rem;
    border-bottom: 2px solid;
}

.link-terminos:hover, .link-terminos:focus, .link-terminos:active{
	color: #000;
	font-weight:bold;
}

.card-empresa{}
.card-empresa ul{
    margin: 0;
    padding: 0;
}
.card-empresa ul li{
    list-style: none;
    color: #fff;
}

.error-input{
	color:#E10C18;
}

.loading .content-loading {
    display: block;
}

.logo-resumen{
	width:15rem;
}

.content-loading {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    position: fixed;
    background-color: #000;
    z-index: 10000;
    color: #fff;
    padding-top: 5%;
    background-repeat: no-repeat;
    background-image: url(../images/loader.gif);
    background-position: center;
}

.list-pago{
	border: 2px solid #6B6F74;
    border-radius: 10px;
    min-height: 6rem;
    margin-bottom: 0.5rem;
	cursor:pointer;
}

.list-pago:hover{
	background-color:#dee2e6;
}

.list-pago.active{
	background-color:#dee2e6;
}

.bloqueado .list-pago{
	opacity:0.5;
	cursor:not-allowed;
}

.bloqueado .list-pago.active{
	opacity:1;
}

.logo-modal{
	width: 15rem;
	height:auto;
}

#clubMonterrey .modal-title{
	font-size:1.5rem;
	font-weight:bold;
}

#clubMonterrey .titulo-modal{
	font-size:1.25rem;
	font-weight:bold;
}

#clubMonterrey .subtitulo-modal{
	font-size:1.25rem;
	font-weight:bold;
	color:#E10C18;
}

#clubMonterrey .modal-header{
	border-bottom:2px solid #E10C18;
}

#clubMonterrey .btn-close{
	    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E10C18'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.btn-modal-rojo{
	background-color:#E10C18;
	width:100%;
	color:#fff;
	border-radius:0;
	font-size:1rem;
}

.btn-modal-rojo:hover, .btn-modal-rojo:active, .btn-modal-rojo:focus{
	background-color:#E10C18;
	color:#fff;
}

.btn-modal-guinda{
	background-color:#802629;
	width:100%;
	color:#fff;
	border-radius:0;
	font-size:1rem;
}

.btn-modal-guinda:hover, .btn-modal-guinda:active, .btn-modal-guinda:focus{
	background-color:#802629;
	color:#fff;
}
/************* INTERIORES LOGIN ****************/
/************** WHATSAPP ********/
.btn-whatsapp {
    position: fixed;
    z-index: 100;
    right: 40px;
    bottom: 40px;
  }
  
  .btn-whatsapp:before, .btn-whatsapp:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #25D366;
    opacity: 0;
    animation: onda 1.7s infinite;
  }
  
  .btn-whatsapp img {
    width: 60px;
    position: relative;
    z-index: 2;
  }
  
  .btn-whatsapp:before {
    animation-delay: 1s;
  }
  
  .btn-whatsapp:after {
    animation-delay: 1.3s;
  }
  
  @keyframes onda {
    0% {
        transform: scale(1);
    }
  
    15% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
  }
  /************** WHATSApp ****************/
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
  html {
      font-size: 95%;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  html {
    font-size: 80%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  html {
    font-size: 75%;
  }
  .nav-item{
      padding: 0 10px;
      background-color: #fff;
  }
  .al-centro{
      text-align: center !important;
  }
  .navbar-toggler{
      padding: 20px;
  }
    .navbar{
        margin-top: 60px;
    }
    .menu-acc ul{
        margin: 0;
        padding: 0;
        float: right;
        margin-right: 8%;
   }
   .dis-f{
    display: block;
   }
   .logo-pie{
    margin-bottom: 30px;
   }
}