:root {
    --color-master: #494949;
    --color-black: #000;
    --color-red: #cd212a;
    --color-green: #008c45;
    --color-gray: #d1d1d1;
    --color-darkgray: #505050;
    --fw-medium: 500 !important;
    --fw-semibold: 600 !important;
    --fw-bold: 700 !important;
}

html, body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--color-black);
    font-weight: 400 !important;
    font-size: 15px;
    font-style: normal;
}

html {
    position: relative;
    min-height: 100%;
    font-weight: 400 !important;
}

header .logo,
footer .logo {
    width: 22em;
    height: auto;
}

a {
    color: var(--color-master) !important;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: var(--color-red) !important;
}

.fw-medium {
    font-weight: var(--fw-medium) !important;
}

.fw-semibold {
    font-weight: var(--fw-semibold) !important;
}

.fw-bold {
    font-weight: var(--fw-bold) !important;
}

.text-master {
    color: var(--color-master);
}

.text-red {
    color: var(--color-red);
}

.text-green {
    color: var(--color-green);
}

.text-gray {
    color: var(--color-gray);
}

.bg-red {
    background-color: var(--color-red) !important;
}

header {
    background-color: #fff;
    border-bottom: 1px solid var(--color-gray);
    z-index: 999 !important;
    position: sticky;
    top: 0;
}

.flag {
    width: 2em;
    height: auto;
}

header .nav {
    font-size: 1.05rem !important;
    font-weight: var(--fw-semibold) !important;
}

    header .nav > a,
    header .nav .dropdown > a {
        border-bottom: 5px solid transparent;
    }

        header .nav > a:hover,
        header .nav .dropdown > a:hover,
        header .nav .dropdown > a:focus {
            border-bottom-color: var(--color-red);
        }

header .dropdown-menu.column {
    width: 48em;
}

.column-count-2 {
    column-count: 2;
}

.offcanvas .logo {
    width: 15rem;
    height: auto;
}

.offcanvas {
    background-image: url(/assests/images/Corpus-Image.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position-y: 130%;
    background-position-x: -120%;
}

.banner {
    height: 38em !important;
}

.banner-sub {
    height: 28em !important;
}

.accordion-button.collapsed:focus {
    box-shadow: none;
}

.accordion {
    --bs-accordion-active-bg: trasparent !important;
}

.accordion-button:not(.collapsed),
.accordion-button:focus:not(.collapsed) {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--color-red);
}

.image-mask {
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 40%, transparent 100%);
}

.img-blend {
    position: relative;
    background-blend-mode: multiply;
    background-color: rgba(0,0,0,0.3);
}

footer {
    background-color: var(--color-darkgray);
}

    footer .list-group-item {
        background-color: transparent;
        border: none;
        padding-left: 0;
    }

        footer a:not(.dropdown-item) {
            color: white !important;
        }

@keyframes lineAnimation {
    0% {
        left: -40%;
    }

    50% {
        left: 20%;
        width: 80%;
    }

    100% {
        left: 100%;
        width: 100%;
    }
}

.loader-line {
    top: 0;
    width: 100%;
    height: 3px;
    position: fixed;
    overflow: hidden;
    background-color: #ddd;
    z-index: 2051;
}

    .loader-line:before {
        content: "";
        position: absolute;
        left: -50%;
        height: 3px;
        width: 40%;
        background-color: var(--color-red);
        -webkit-animation: lineAnimation 3s linear infinite;
        -moz-animation: lineAnimation 3s linear infinite;
        animation: lineAnimation 3s linear infinite;
    }

.loader-line-local {
    width: 100%;
    height: 3px;
    position: relative;
    overflow: hidden;
    background-color: #ddd;     
    z-index: 0;
}

    .loader-line-local:before {
        content: "";
        position: absolute;
        left: -50%;
        height: 3px;
        width: 40%;
        background-color: var(--color-red);
        -webkit-animation: lineAnimation 3s linear infinite;
        -moz-animation: lineAnimation 3s linear infinite;
        animation: lineAnimation 3s linear infinite;
        margin-bottom: 10px;
    }

.loader-back-drop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2050;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    opacity: 0.5;
}


@media (max-width: 576px) {

    header .logo,
    footer .logo {
        width: 26em;
    }

    .banner-sub {
        height: 20em !important;
    }
}


.move-left {
    position: relative;
    animation-name: move-left;
    animation-duration: 0.5s;
}

@keyframes move-left {
    from {
        left: -100%;
    }

    to {
        left: 0%;
    }
}

.move-top {
    position: relative;
    animation-name: move-top;
    animation-duration: 0.5s;
}

@keyframes move-top {
    from {
        bottom: -100%;
    }

    to {
        bottom: 0%;
    }
}

.align-content-center {
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.p-border {
    border-bottom: 4px solid var(--color-red) !important;
}

#index a.btn:hover {
    color: #000 !important;
}

.text-justify {
    text-align: justify;
}