@font-face {
    font-family: AlegreyaSans-Bold;
    src: url('Font/Alegreya/AlegreyaSans-Bold.ttf');
}

@font-face {
    font-family: Helvica-Bold;
    src: url('Font/Helvica/Helvetica-Bold.ttf');
}

@font-face {
    font-family: Geomanist-Regular;
    src: url('Font/Geomanist/Geomanist-Regular.otf');
}

.b-bar-link.active {
    background: #c892c2 !important;
    color: #fff
}

.AlegreyaSans-Bold {
    font-family: AlegreyaSans-Bold !important;
}

.Helvica-Bold {
    font-family: Helvica-Bold !important;
}

.Geomanist-Regular {
    font-family: Geomanist-Regular !important;
}

:root {
    --color-secundario: #80577C;
    --color-primario: #AB57A1;
    --color-cuarto: #332832;
    --color-terciario: #332031;
    --color-quinto: #331730;
}
.main-content {
    padding: 20px;
}

h1, h2 {
    font-family: AlegreyaSans-Bold !important;
    color: var(--color-secundario) !important;
}
h3, h4, h5, h6 {
    font-family: Helvica-Bold !important;
    color: var(--color-secundario) !important;
}

i {
    color: white !important);
    font-size: 25px;
    margin-bottom: 5px !important;
}

body {
    margin: 0;
    font-family: Geomanist-Regular !important;
    background: url('/Img/Fondos/fondo-educativo-desktop.png') no-repeat center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    overflow-x: hidden;
    /*padding-top: 50px;
    padding-bottom: 20px;
    height: 100%;*/
}

    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(--color-secundario);
        border-radius: 10px;
    }

    body::-webkit-scrollbar-track {
        background-color: var(--color-cuarto);
        border-radius: 10px;
    }

hr {
    border: solid 1.5px;
    border-color: var(--color-cuarto) !important;
    width: 100%;
}

html {
    font-size: 20px;
}

.container {
    max-width: 100% !important;
}

.center {
    display: flex;
    justify-content: center;
}

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

.align-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.align-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.container-main {
    padding: 20px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    margin-top: 30px !important;
    transition-duration: 1s;
}

    .container-main:hover {
        background-color: rgba(255, 255, 255, 0) !important;
        transition-duration: 1s;
    }