@charset "UTF-8";
@import "../css/telcelFont.css";

/*
  Aqui se definen estilos modulares para los textos del sitio.
*/

/* --- Encabezados estilo completo, por accesibilidad no se pueden usar los elementos de encabezado
para dar estilo al texto, por lo cual se crearon nuevos class que contengan los estilos actuales para usuarlos
con elementos de parrafo ---*/
.h1-style, .h2-style, .h3-style, .h4-style, .h5-style, .h6-style {
  color: #000;
}
.h1-style, .h2-style, .h3-style {
  margin-top: 21px;
  margin-bottom: 10.5px;
}
.h1-style, .h2-style, .h3-style, .h4-style, .h5-style, .h6-style {
  font-family: inherit;
  font-weight: 200;
  line-height: 1.4;
}
.h1-style.underlined,
.h2-style.underlined,
.h3-style.underlined,
.h4-style.underlined,
.h5-style.underlined,
.h6-style.underlined {
  border-bottom: 1px solid #ecedee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.h1-style small,
.h2-style small,
.h3-style small,
.h1-style .small,
.h2-style .small,
.h3-style .small {
  display: block;
  font-weight: 100;
  font-size: 60%;
}
.h1-style {
  font-size: 40px;
}
.h2-style {
  font-size: 30px;
}
.h3-style {
  font-size: 24px;
}
.h4-style {
  font-size: 20px;
}
.h5-style {
  font-size: 15px;
}
.h6-style {
  font-size: 13px;
}
@media (max-width: 991px) {
  .h1-style {
    font-size: 30px;
  }
  .h2-style {
    font-size: 30px;
  }
  .h3-style {
    font-size: 20px;
  }
  .h4-style {
    font-size: 18px;
  }
  .h5-style {
    font-size: 15px;
  }
  .h6-style {
    font-size: 13px;
  }
}


/* --- Tamaños --- */
.font-14px {
  font-size: 14px !important;
}
.font-18px {
  font-size: 18px !important;
}
.font-20px {
  font-size: 20px !important;
}
.font-22px {
  font-size: 22px !important;
}
.font-25px {
  font-size: 25px !important;
}
.font-30px {
  font-size: 30px !important;
}
.font-40px {
  font-size: 40px !important;
}
.font-50px {
  font-size: 50px !important;
}


/*--- Pesos de la fuente ---*/
.font-lightest {
  font-weight: 100 !important;
}
.font-light {
  font-weight: 200 !important;
}
.font-strong {
  font-weight: 400 !important;
}
.font-bold {
  font-weight: 600 !important;
}


/* --- Colores --- */
.clr-black {
  color: #000 !important;
}
.clr-navy {
  color: #39545d !important;
}
.clr-lighterGray {
  color: #C7CCCD !important;
}
.clr-lightGray {
  color: #A8B0B3 !important;
}
.clr-darkGray {
  color: #656565 !important;
}
.clr-magenta {
  color: #e41785 !important;
}


/* --- Alineaciones --- */
.justified {
  text-align: justify;
}