body {
    font-family: 'Roboto', sans-serif;
    color: #444444;
    background-color: #f2f7ff;
}

.card {
    border: none;
}

.card-body .display-4 {
    font-size: 6rem;
}

h1,
h2 {
    font-family: 'Roboto Slab', serif;
}

h3,
h4,
h5,
h6,
p {
    font-family: 'Roboto', sans-serif;
}

/* Los rem son pixeles/16 es decir que 40 pixeles son 2.5rem */
h1 {
    font-size: 2.5rem;
    /* Este es el valor para el light, buscar en google fonts -> customize */
}

h2 {
    font-size: 2.0rem;
    font-weight: 300;
}

h3 {
    font-size: 1.75rem;
    font-weight: 300;
}

h4 {
    font-size: 1.5rem;
    font-weight: 400;
}

h5 {
    font-size: 1.2rem;
    font-weight: 300;
}

p {
    font-weight: 300;
}

.btn {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Main Image */
.fondo {
    background: url('../../images/bogota.jpg');
    height: 100vh;
    background-position: center;
    background-size: cover;
    position: relative;
}

.small-bar {
    font-size: 0.8rem;
    color: #f2f7ff !important;
    background-color: #072758;
}

.small-bar a {
    color: #f2f7ff !important;
}

/* Colores */
.bg-transparent {
    background: rgba(0, 0, 0, 0.4) !important;
}
.bg-primary {
    background-color: #fdbe34 !important;
}

.btn-primary {
    background-color: #fdbe34 !important;
    border: none;
}

a.bg-primary:focus,
a.bg-primary:hover {
    background-color: #a46e00 !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #a46e00 !important;
}

.darken-background {
    background-color: rgba(0, 0, 0, .5);
    height: 500px;
}

.bg-techno-light {
    background-color: #f2f7ff;
}

.bg-techno-light-blue {
    background-color: #3a72c8;
}

.bg-techno-blue {
    background-color: #0d47a1;
}

.bg-techno-dark-blue {
    background-color: #072758;
}

.bg-techno-dark-yellow {
    background-color: #a46e00;
}

.bg-techno-yellow {
    background-color: #fdbe34;
}

.fade-out {
    padding-top: 4rem;
    background: linear-gradient(0deg, #0d47a1 60%, rgba(255, 204, 0, 0));

}

/* Padding abajo de 1.9 rem */
.pb-16 {
    padding-bottom: 1.6rem;
}


.techno-icons {
    font-size: 2.25rem;
}

.techno-icons-big {
    font-size: 4.5rem;
}

.text-techno-light {
    color: #f2f7ff !important;
}

.text-techno-brown {
    color: #444444;
}

/* Cards */

.card-body .h3,
.h4 {
    font-size: 1.2rem;
}

.section-image {
    max-height: 700px !important;
    min-width: 100%;
    min-height: none;
    overflow: auto;
}


.title-image {
    /* max-height: 50vh; */
    width: 100%;
    /* height: 50%; */
    height: 31.25rem;
    overflow: hidden;
}

.title-image img {
    height: auto;
    min-height: 12.5rem;
}


@media (max-width: 700px) and (min-width: 370px) {
    .section-image {
        min-height: 14.37rem;
    }
}

@media (max-width: 700px) {
    .title-image {
        height: 60%;
    }
}

hr {
    border: 0;
    height: 1px;
    width: 40%;
    border-top: 2.5px solid rgba(6, 79, 173, 0.856);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}


.carousel-caption {
    bottom: 0;
    top: 40%;
}

.nav-link.active {
    color: rgb(145, 41, 41) !important;
}

/*
    WhatsApp Icon
*/

.whatsapp-icon {
    display: inline;     
    position: fixed;
    z-index: 99999999;
    bottom: 20px;
    right: 20px;
    background-color: rgba(73, 72, 72, 0.596);
}

@media (max-width: 700px) {
    .whatsapp-icon {
        bottom: 5px;
        right: 5px;
    }
}

.whatsapp-icon:hover {
    background-color: rgba(39, 39, 39, 0.842);
}

.whatsapp-icon p {
    color: white;
    font-size: 20px;
    margin: auto;
    padding: auto;
}