/* Personalización de estilos */

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

a {
  color: #343a40;
}

a:hover,
a:focus {
  color: #343a40;
}
.text-primary {
    color: #343a40 !important;
}

/* Logo */
.logo {
    max-height: 25px;
    transition: all 200ms ease-in-out;
}
.navbar-transparent .logo {
    max-height: 55px;
}

.section-title {
    font-size: 1.8rem;
}

/* Botón Whatsapp (ver parte responsive al final de este archivo) */
.btn-whatsapp {
    display: block;
    width: 50px;
    height: 50px;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
    z-index: 9999
}

.btn-whatsapp img {
    width: 50px;
    height: 50px
}
/* Fin Botón Whatsapp */

/* Necesario para poner elipsis en textos cortados por overflow */
.card-text {
    position: relative;
}

.card-text.fade-text::after {
    content: '';
    position: absolute;
    bottom: 0.2em;
    right: 0;
    width: 20%;
    height: 1em;
    margin-bottom: 0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(80%, #ffffff), color-stop(100%, #ffffff));
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 80%, #ffffff 100%);
}
/* FIN Necesario para... */

.card-text {
    overflow: hidden;
}

.card-text.description {
    height: 3.5em;
    overflow: hidden;
    color: var(--gray-dark);
}

/* Fondo primario, aplica a la barra de navegación */
.bg-primary {
    background-color: #2b2e83 !important;
}

/* Botón primario */
.btn-primary {
    background-color: #2b2e83;
}

/* Botón primario hover, activo, en foco, etc. */
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .show>.btn-primary.dropdown-toggle, .show>.btn-primary.dropdown-toggle:focus, .show>.btn-primary.dropdown-toggle:hover {
    background-color: #848484;
}

/* Selección de texto, color y color de fondo */
::-moz-selection {
    background: #848484; color:#fff;
}
::selection {
    background: #848484; color:#fff;
}

/* Título en modales */
.modal-content .modal-header {
    padding: 16px;
}
.modal-content .modal-header .title {
    margin-top: 0;
    padding-top: 0;
}
.modal-content .modal-header button {
    top: 20px;
}


/* Botón close en modales */
.modal .modal-header .close {
    color: #fff;
}

/* Sidebar mobile menu bg-color*/
.sidebar-collapse .navbar-collapse:before {
    background: #656363;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#656363 0%, #000 80%);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#656363 0%, #000 80%);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#656363 0%, #000 80%);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#656363 0%, #000 80%);
}

/* Borde de controles de formularios en foco */
.form-control:focus {
    border: 1px solid #989492;
}

/* Color de fondo y texto en dropdowns */
/* Necesario para los controles typeahead ya que el plugin no es compatible 100%
   con la versión de bootstrap que se está usando en el proyecto */
.dropdown-menu>.active {
    background-color: #656363;
    cursor: pointer;
}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover {
    color: #fff;
    text-decoration: none;
    outline: 0
}

/* Responsive customs */
@media (min-width: 576px) {
    /* .section-title {
        font-size: 4vw;
    } */
    .btn-whatsapp {
        width:60px;
        height: 60px
    }

    .btn-whatsapp img {
        width: 60px;
        height: 60px
    }
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
    /* .section-title {
        font-size: 3vw;
    } */
    .btn-whatsapp {
        width:70px;
        height: 70px
    }

    .btn-whatsapp img {
        width: 70px;
        height: 70px
    }
}

@media (min-width: 1200px) {
    main {
        min-height: 500px;
    }
    h1 {
        font-size: 2.4rem;
    }
    /* .section-title {
        font-size: 2.5vw;
    } */
}

@media (max-width: 575.98px) {
    .navbar-transparent .logo {
        max-height: 25px;
    }
}
@media (max-width: 767.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 1199.98px) {}

/* End Responsive customs */