:root {
    --primary: #262626;
    --primary-light: #3B3B3B;
    --voyager: #262464;
    --deltav: #ff4800;
    --volta-main: #eb5e24;
    --volta-secondary: #283747;

    --codeac-light: #4e7391;
    --codeac-mid: #2E4D6B;
    --codeac-dark: #0d2543;

    --cicta-purple: #7606cc;
    --cicta-purple-dark: #6305AB;
    --cicta-blue: #3506cc;
    --cicta-blue-dark: #270599;

    --bordervalue: 10px;

    --icon-astra: /icons/astra.svg;
    --icon-astra: /icons/astra.svg;
    --icon-voyager: /icons/voyager.svg;
    --icon-voyager-white: /icons/voyager_white.svg;
    --icon-voyager-black: /icons/voyager_main_black.svg;
    --icon-deltav: /icons/deltav.svg;
    --icon-deltav-white: /icons/deltav_white.svg;
}



/* *----- Custom variables -----* */
#voyager {
    font-weight: bold;
    color: var(--voyager);
}
#deltav {
    font-weight: bold;
    color: var(--deltav);
}
#volta {
    font-weight: bold;
    color: var(--volta-main);
}



/* *----- IDs -----* */
/* Horizontal Bar */
#color-grey {
    height: 0.075rem;
    background-color: #cccccc;
}

/* Sizes */
#size-logos_nav { width: 8rem; vertical-align: middle; }
#size-logos_index { width: 12rem; }
#size-logos_contact { width: 14rem; }
#size-logos_groups { width: 14rem; }

/* Navbar logo */
#position-logos_nav { align-self: center; text-align: center;}

/* Slideshow */
#slideshow {
    display: flex;
    overflow: hidden;
    position: inherit;
    align-items: center;
    justify-content: center;
    border-radius: var(--bordervalue);
}
.slideshow-normal{
    width: 425px;
    height: 425px;
}
#slideshow>div {
    position: absolute;
}

/* Custom ids */
#voyager-size-mobile{
    width: 45rem;
}



/* *----- CLASSES -----* */
/* Mobile - Desktop */
.desktop-only {
    display: none;
}
.mobile-only {
    display: none;
}

/* Hero */
.hero.is-index {
    background: url('/icons/astragif.gif') no-repeat center;
    background-size: cover;
}
.hero.is-codeac {
    background-image: linear-gradient(141deg, var(--primary) 0%, var(--codeac-mid) 70%, var(--codeac-light) 100%);
}
.hero.is-cicta {
    background-image: linear-gradient(141deg, var(--primary) 0%, var(--cicta-blue) 50%, var(--cicta-purple) 70%);
}
.hero.is-volta {
    background-image: linear-gradient(141deg, var(--volta-main) 0%, var(--volta-secondary) 65%);
}

/* Figure caption */
.is-caption {
    font-size: small;
    font-style: italic;
}

/* Menu and tabs */
.menu-list a.is-active {
    background-color: var(--primary);
    color: #fff;
}
.tabs li.is-active a{
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: bold;
}

/* Alignment */
.is-fcentered {
    justify-content: center;
    text-align: center;
}
.is-valign {
    align-content: center;
}

/* Multimedia config */
.is-imgframe-hr {
    width: 55%;
    height: auto;
}
.is-imgframe-vr {
    width: 35%;
    height: auto;
}
.is-videoframe {
    width: 560px;
    height: 300px;
}

/* Custom config */
.is-customframe {
    width: 100%;
    height: 600px;
}
.is-customframe-docs {
    width: 100%;
    height: 320px;
}
.is-customframe-pdfs {
    width: 100%;
    height: 460px;
}
.is-customframe-vr {
    width: 60%;
    height: 40em;
}
.is-circle {
    border-radius: 50%;
}
.language-switch span {
    margin-right: 5px;
}

/* Logo config */
.is-logo {
    display: flex;
    align-items: center;
}



/* *----- ELEMENTS -----* */
iframe { border-radius: var(--bordervalue); }



/* *----- MEDIA -----* */
@media screen and (max-width: 1280px) {
    .is-mobile-center {
        text-align: center;
    }

    /* Multimedia config */
    .is-imgframe-hr {
        width: 100%;
        height: auto;
    }
    .is-imgframe-vr {
        width: 75%;
        height: auto;
    }
    .is-videoframe {
        width: 100%;
        height: 200px;
    }

    /* Custom config */
    .is-customframe {
        width: 100%;
        height: 320px;
    }
    .is-customframe-vr {
        width: 100%;
        height: 30em;
    }
}


@media (min-width: 769px) {
    .desktop-only {
        display: block;
    }
}


@media screen and (max-width: 768px) {
    /* *----- IDs -----* */
    #slideshow{
        width: 100%;
        height: 400px;
    }
    #voyager-size-mobile{
        width: 100%;
    }

    /* *----- CLASSES -----* */
    /* Custom config */
    .mobile-only {
        display: block;
    }
    .size-mobile{
        width: 100%;
    }
    .size-mobile-less{
        width: 70%;
    }
    .is-customframe-vr {
        width: 100%;
        height: 30em;
    }
}