*{
  font-family: 'Poppins', sans-serif;
  color: #333;
  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;
}
.color-gris{
  color: #333333;
}
.bg-gris{
  background-color: #6B6F74;
}
.color-negro{
  color: #000;
}
.bg-negro{
  background-color: #000;
}
.text-end{
    text-align: right;
}
.color-rojo{
    color: #E10C18;
}
.color-verde{
    color: green;
}
.bg-rojo{
    background-color: #E10C18;
}
.btn-rojo{
    background-color: #E10C18;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    text-decoration: none;
}
.btn-rojo:hover{
    background-color: #fff;
    color: #E10C18;
    border: 1px solid #E10C18;
    padding: 10px 30px;
    text-decoration: none;
}
/************* 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/fondos/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/fondos/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/fondos/bg-transp-negro.png);
}
/************* LOGIN ****************/
/************* 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/fondos/bg-transp-negro.png);
}
#membresia1 li{
    color: #fff;
}
.card-empresa{}
.card-empresa ul{
    margin: 0;
    padding: 0;
}
.card-empresa ul li{
    list-style: none;
    color: #fff;
}

.errors ul li{
	color:#fff;
}

.errors ul {
    list-style: none;
}

.link-dir-red{
	text-decoration:none;
	color:#fff;
}

.link-dir-red:hover, .link-dir-red:focus,.link-dir-red:active{
	text-decoration:none;
	color:#fff;
}

.content-img-dir{
	position: absolute;
    top: -3.5rem;
    left: 0;
}

.img-dir{
	width:5rem;
	height:5rem;
	object-fit: contain;
}

/************* 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;
   }
}