/**** GENERAL STYLES ****/

/** General texts **/
body {
    font-family: 'Mulish', sans-serif;
}

h1 {
    color: white;
    font-size: 2rem;
}

h2 {
    color: #003589;
    font-size: 1.8rem;
    font-weight: bolder;
}

p {
    color: #C1C1C1;
    font-size: 1rem;
}

main section {
    margin: 4rem 0;
}

/** Responsive font sizes**/

@media (max-width: 425px) {
    h1 {
        font-size: 1.7rem;
    }
    h2 {
        font-size: 1.4rem;
    }
    p {
        font-size: 0.9rem;
    }
}

/**** CUSTOM CLASSES: Button, card, titles, overlays ,etc ****/

/** Scrollbar ***/

* {
    scrollbar-width: thin;
    scrollbar-color: rgb(177, 177, 177);
    ;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
    background-color: rgb(177, 177, 177);
    border-radius: 7px;
}

/** Custom container **/

.container-custom {
    padding-left: 9rem;
    padding-right: 9rem;
}

@media (max-width: 1440px) {
    .container-custom {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/** Section titles with underline + Responsive **/

.section-title {
    width: min-content;
    border-bottom: 2px solid #8EA9C4;
    margin-bottom: 2rem;
}
.section-title-place {
    border-bottom: 2px solid #8EA9C4;
    margin-bottom: 2rem;
    width: max-content;
}
@media (max-width: 991px) {
    .section-title-place {
        width: auto;
    }
}
.section-title h1 {
    color: #003589;
    font-size: 1.8rem;
    font-weight: bolder;
    padding-left: 2rem;
}

.section-title h2 {
    padding-left: 9rem;
    padding-right: 1.5rem;
}

@media (max-width: 991px) {
    .section-title h2 {
        padding-left: 2rem;
    }
}

/** Card styles **/

.card {
    box-shadow: 3px 0px 19px -3px rgba(0, 0, 0, 0.24);
    border: 0;
    border-radius: 0.8rem;
}

.card-img, .card-img-top {
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

.card-body {
    padding: 2rem;
}

.card-title {
    color: #003589;
    font-size: 1.5rem;
}

/** Overlay for images **/

.overlay-image {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
}

/** Inputs **/

.form-control, .input-group-text, .custom-select {
    border-radius: 0.6rem;
}

.input-group-append {
    position: relative;
}

.input-group-text {
    position: absolute;
    right: 0;
    top: 0.3rem;
    background-color: transparent;
    border: none;
}

.input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}

/** Button styles **/

.btn {
    border-radius: 0.6rem;
    padding: 0.4rem 1.5rem;
    font-family: 'Mulish', sans-serif;
    font-size: 0.8rem;
    font-weight: bolder;
}

.btn-primary {
    color: #fff;
    background-color: #003589;
    border-color: transparent;
}

.btn-primary:hover {
    background-color: #034bbe;
    border-color: transparent;
}

.btn-outline-primary {
    background-color: transparent;
    border-color: #003589;
    color: #003589;
}

.btn-outline-primary:hover {
    background-color: #034bbe;
    border-color: #034bbe;
    color: #fff;
}

/**** HEADER STYLES + RESPONSIVE ****/

.navbar-toggler:focus {
    outline: none;
}

.navbar-brand {
    margin-right: 2rem;
}

header {
    position: fixed;
    width: 100%;
    z-index: 11;
}

.navbar {
    background-color: transparent;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #fff;
}

/** Mobile Menu and toggler **/

.navbar .navbar-toggler {
    z-index: 12;
    padding: 0.5rem .75rem;
    align-self: baseline;
}

.icon-bar {
    width: 22px;
    height: 2px;
    background-color: #2b2b2b;
    display: block;
    margin-left: 5px;
    transition: all 0.2s;
    margin-top: 4px
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}

/** Toggler icon animation (Bars to close) **/

.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar {
    background-color: #ffffff;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

/** Responsive full screen menu/nav when expanded **/

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        color: #444141;
        padding: 0.8rem;
        font-size: 1.2rem;
    }
    .navbar-light .navbar-nav .nav-link:hover {
        color: #444141;
    }
    .navbar .navbar-collapse {
        background: white;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: all 0.35s ease;
        display: flex;
        flex-direction: column;
        align-content: center;
        text-align: center !important
    }
    .navbar .navbar-collapse.collapse {
        display: flex;
        opacity: 0;
        pointer-events: none
    }
    .navbar .navbar-collapse.collapsing[style*="height"] {
        opacity: 1;
        height: 100vh !important
    }
    .navbar .navbar-collapse.collapsing {
        opacity: 0;
        height: 100vh
    }
    .navbar .navbar-collapse.collapse.show {
        opacity: 1;
        pointer-events: auto
    }
    .navbar .navbar-collapse .navbar-nav {
        margin-right: initial !important;
        margin-top: 40%;
    }
}

@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: initial !important;
    }
}

/** Menu item Hovers **/

.border-hover {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-right: 1rem;
}

.border-hover .hover {
    margin: 0 auto;
    padding: 0;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.border-hover .hover:before, .border-hover .hover:after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 0px;
    height: 3px;
    margin: 3px 0 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    background-color: #FFC640;
}

.border-hover .hover.hover-1:before, .border-hover .hover.hover-1:after {
    left: 0;
}

.border-hover:hover .hover:before, .border-hover:hover .hover:after {
    width: 100%;
    opacity: 1;
}

/**** COVER STYLES ****/

.jumbotron {
    background-image: url(assets/cover.png);
    background-size: auto;
    background-repeat: no-repeat;
    position: relative;
}

.jumbotron .row {
    z-index: 3;
}

.jumbotron h2 {
    color: #444141;
}

.cover .card {
    border-radius: 0.8rem 0rem 0rem 0.8rem;
}

.vertical-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 425px) {
    .cover-title {
        margin: 5rem 0rem 2rem 0rem;
        text-align: center;
        padding-left: 0rem;
        padding-right: 0rem;
    }
}

/**** ECOSISTEMAS STYLES ****/

/** Scrollbar styles and transition **/

.scroll::-webkit-scrollbar {
    width: 14px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background: white
}

.scroll::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border-radius: 7px;
    box-shadow: inset 0 0 0 10px;
}

.scroll::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.scroll::-webkit-scrollbar-corner {
    background-color: transparent;
}

/** Scroll container styles **/

.scroll {
    width: auto;
    padding: 2rem 0rem;
    overflow: auto;
    color: white;
    transition: color 1s;
}

.scroll:hover {
    color: rgb(136, 136, 136);
}

.scroll>div {
    width: max-content;
}

.scroll .card {
    display: inline-flex;
    width: 30rem;
    margin: 0 1rem;
    transition: all .5s ease;
}

.scroll .card:hover {
    transform: translate3D(0, -1px, 0) scale(1.03);
    transition: all .5s ease;
}

.scroll .card p {
    color: #444141;
    font-size: 0.8rem;
    line-height: 1.2em;
}

.scroll .card .card-img-top {
    height: 12rem;
    object-fit: cover;
    object-position: 21% 50%;
}

@media (max-width: 425px) {
    .scroll .card {
        width: 18rem;
    }
}

/**** ARTICULOS STYLES ****/

article p {
    color: #444141;
    font-size: 0.8rem;
    line-height: 1.2em;
}
.summary-post{
    min-height: 75px;
}

.date {
    color: #B9B9B9;
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

/**** DESTACADOS STYLES ****/

.carousel-inner {
    width: 100%;
    max-height: 28rem;
    position: relative;
}

.carousel-item {
    position: initial;
}

.carousel-caption {
    position: absolute;
    right: initial;
    bottom: -15px;
    left: initial;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.233);
    text-align: left;
}

.carousel-inner p {
    color: white;
    font-family: 'Mulish', sans-serif;
}

/**** RECOMENDADOS STYLES ****/

.recommendations-div {
    background-color: #E3ECEE;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.recommendations-div .card-body {
    min-height: 7rem;
    padding: 1rem;
}

.recommendations-div .card .card-img-top {
    height: 10rem;
    object-fit: cover;
    object-position: 21% 50%;
}

.recommendations-div .card>div {
    position: relative;
}

.recommendations-div h5 {
    font-size: 1.2rem;
    font-weight: bold;
}

.calification {
    font-size: 0.8rem;
    position: absolute;
    bottom: 1em;
    left: 0.7rem;
    color: white;
}

.recommendations-div span {
    font-size: 0.8rem;
}

.recommendations-div .overlay-image {
    height: 10rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

.recommendations-div .card .fa-directions {
    color: #FFC640;
    font-size: 1rem;
}

@media (min-width: 768px) {
    main .col-md-3 {
        max-width: 20%;
    }
}

/**** FOOTER STYLES ****/

footer {
    background-color: rgb(170, 170, 170);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer i {
    font-size: 2rem;
    color: #fff;
}

section .home {
    background-color: #fff;
}
.bg-white{
    background-color: #fff;
}