/*********** Table of Contents ***********
    1.0 - Utilities
    2.0 - Full Banner
    3.0 - Committee Banner
    4.0 - Domicile Banner
    5.0 - Socials
    6.0 - Tabs
    7.0 - Button
    8.0 - Search Engine
    9.0 - Articles
*****************************************/


/******************************/
/****** 1.0 - Utilities *******/
/******************************/
.vertical-bottom {
    align-items: flex-end;
}

.vertical-center {
    align-items: center;
}

.header-row button, .publicBanner .actionButton {
    padding: 10px 50px;
    background: #444444;
    border: none;
    color: white;
    box-shadow: inset 0px 3px 7px -2px #000000;
    outline-color: var(--background-primary-accent-color);
}

.domicileBanner .carousel-inner, .domicileBanner .carousel-item, .domicileBanner .apa-carousel-image-background {
    height: 100%;
}

.header-row {
    border-left: 5px solid var(--button-accent-color);
    margin: 0px 0 20px 0 !important;
}

.half-header-row {
    border-left: 5px solid var(--button-accent-color);
    margin: 0px 0 20px 0 !important;
}

.alert-header {
    border-left: 5px solid var(--button-accent-color);
    color: white;
}

/********************************/
/****** 2.0 - Full Banner *******/
/********************************/

.publicBanner {
    height: auto;
    min-height: calc(50vh - 60px);
    width: 100%;
    background-size: cover;
    background-image: var(--background-image);
    position: relative;
    overflow: hidden;
    background-position-y: 32%;
}


.publicBanner.committeeBanner .image-overlay, .publicBanner.domicileBanner .image-overlay {
    min-height: 100%;
    /*height: calc(60vh - 60px);*/
}
    .publicBanner.committeeBanner .image-overlay {
        padding-bottom: 1.5rem !important;
    }

.publicBanner .headerText {
    font-size: min(max(50px, 8vw),10vw);
    line-height: min(max(50px, 6vw),8vw);
    font-weight: 700;
}

.publicBanner .subparagraph {
    width: 50%;
}

    .publicBanner .image-overlay {
        min-height: calc(50vh - 60px);
        background-size: cover;
        background-image: linear-gradient(0deg, #ffffff, transparent);
        /*background: rgba(255,255,255, 0.9);*/
        /*background-image: linear-gradient(276deg, #ffffffc9, #ffffffb8, #ffffffdb, #ffffff);*/
        /*animation: anim3;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;*/
    }
.publicBanner.empty-banner {
    background-image: none;
    /*background-image: linear-gradient(276deg, #ffffffc7, #ffffffc7, #ffffffe0, #ffffff);*/
}

.publicBanner #navbar {
background: transparent;
}

.li-border {
    margin-left: 1rem !important;
    border-right: 1px solid #1d1d1dc7;
    margin-right: 1rem !important;
}

.darkMode .li-border {
    margin-left: 1rem !important;
    border-right: 1px solid tan;
    margin-right: 1rem !important;
}

.main-banner-content {
    height: 100%;
    width: 100%;
}

.main-public-banner {
    /*min-height: calc(80vh - 100px);*/
}

.publicBanner .left-container h1 {
    font-size: min(max(50px, 8vw),10vw);
    line-height: min(max(50px, 6vw),8vw);
    font-weight: 700;
}

.publicBanner .left-container hr {
    width: 25%;
    border-top: 1px solid rgb(0 0 0 / 50%);
}

.slidedown {
    color: var(--background-image);
    font-size: 30px;
    border: none;
    background: transparent;
    transition: 0.2s ease;
}

    .slidedown:hover {
        font-size: 35px;
    }

.publicBanner .right-container .col {
    float: right;
}

.publicBanner .right-container span {
    display: block;
    transform: rotate(90deg); /* Legacy vendor prefixes that you probably don't need... */ /* Safari */
    -webkit-transform: rotate(90deg); /* Firefox */
    -moz-transform: rotate(90deg); /* IE */
    -ms-transform: rotate(90deg); /* Opera */
    -o-transform: rotate(90deg);
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 3px;
    color: #0000005e;
    font-weight: 600;
    font-size: 14px;
}

.publicBanner .right-container ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.publicBanner .right-container img {
    width: 30px;
}

.publicBanner .right-container li {
    width: 100%;
}

/*************************************/
/****** 3.0 - Committee Banner *******/
/*************************************/
.committeeBanner {
    height: auto;
    width: 100%;
    background-size: cover;
    background-image: var(--background-image);
    position: relative;
    overflow: visible;
    min-height: auto;
    background-position-y: 43%;
}

.publicBanner.committeeBanner {
    background-image: none;
    /*height: calc(60vh - 60px);*/
}

.committeeBanner h5 {
    font-size: min(max(18px, 1vw),4vw);
}

.committeeBanner .contact-section,
.committeeBanner .contact-section a,
.domicileBanner .contact-section,
.domicileBanner .contact-section a {
    color: black;
}

@media only screen and (max-width: 769px) {
    .committeeBanner .bottom-0.contact-section {
        position: relative;
    }

    .domicileBanner .bottom-0.contact-section {
        position: relative;
    }
    .publicBanner .subparagraph {
        width: 100%;
    }
}
/************************************/
/****** 4.0 - Domicile Banner *******/
/************************************/
.domicileBanner {
    height: auto;
    width: 100%;
    background-size: cover;
    background-image: none;
    position: relative;
    overflow: hidden;
    min-height: auto;
}
#demo {
    position: absolute;
    height: 100%;
    width: 100%;
}

.domicileBanner .carousel img {
    background-size: cover;
    width: 100%;
    height: auto;
}
.carousel-indicators li {
    background-color: black;
}
.darkMode .domicileBanner .carousel-indicators li {
    background-color: tan;
}

@media only screen and (max-width: 769px) {
    .domicileBanner .carousel img {
        background-size: cover;
        height: 100%;
        width:auto;
    }
}
.domicileBanner .image-overlay {
    background-image: linear-gradient(35deg, #ffffff, #ffffffbd, #ffffff8c, #ffffffd4, #ffffffc9);
}

/****** 2.2 - Search engine Banner *******/
#search-bar .template-button{
    padding: 0px 10px;
}

.domicileBanner .apa-carousel-image-background {
    background-size: cover;
    background-position: center;
}
/****************************/
/****** 5.0 - Socials *******/
/****************************/
#Socials img {
    height: 75px;
    width: auto;
}
#Socials .header-row {
    margin:0 !important;
}

.parent {
    display: flex;
}

.parent .article-date {
    padding-right: 10px;
}

.darkMode .parent .article-date {
    color: tan;
}

    .parent .article-more {
        background: transparent !important;
        border-left: 2px solid var(--button-accent-color) !important;
        padding-left: 10px;
        cursor: pointer;
    }

    .darkMode .parent .article-more {
        color: tan;
    }

/*************************/
/****** 6.0 - Tabs *******/
/*************************/
.templateTab-bar {
    /*padding: 0.75rem 1.25rem;*/
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.templateTab-bar a:hover, .templateTab-bar .active {
    background: #00000040;
    color: white;
    text-decoration: none;
}

/***************************/
/****** 7.0 - Button *******/
/***************************/
.template-button,
.template-button:focus,
::-webkit-file-upload-button {
    color: white;
    padding: 10px 50px;
    background: #444444;
    border: none;
    color: white;
    box-shadow: inset 0px 3px 7px -2px #000000;
    outline-color: var(--background-primary-accent-color);
    text-decoration: none !important;
}

    .template-button:hover,
    ::-webkit-file-upload-button:hover {
        background: var(--background-primary-accent-color);
        box-shadow: none;
        color: white;
    }

    .template-button.active {
        background: var(--button-accent-color);
    }

        .template-button.active:hover {
            background: var(--background-primary-accent-color);
        }

.template-button a,
a.template-button {
    color: white;
}

.template-button a:hover,
a.template-button:hover {
    text-decoration: none;
}
    .darkMode .template-button a:hover,
    .darkMode a.template-button:hover {
        color: white;
    }
/******** 4.1 - Temp Tab container Component  ********/
html.edit-mode .templateTab-bar {
    position: relative;
}

html.edit-mode .GenericTabs-TabsSections {
    background-color: #5c5c5ca8 !important;
    position: relative;
}

html.edit-mode .GenericTabs-GlobalContainer .Container-label,
html.edit-mode .GenericTabs-TabsSections .Container-label {
    color: white !important;
    text-align: center;
    position: absolute;
    opacity: 0.3;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

/**********************************/
/****** 8.0 - Search Engine *******/
/**********************************/
.search-engine-banner .headerText {
    font-size: min(max(42px, 4vw),10vw);
    line-height: min(max(42px, 2vw),8vw);
    font-weight: 700;
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}
.search-engine-banner {
    min-height: calc(50vh - 60px);
    width: 100%;
    background-size: cover;
    background-image: var(--background-image);
    position: relative;
    overflow-x: clip;
    background-position-y: 41%;
}
    .search-engine-banner.center-banner {
        min-height: calc(50vh - 60px);
        width: 100%;
        background-size: cover;
        background-image: var(--background-image);
        position: relative;
        overflow-x: clip;
        background-position-x: 50%;
    }

    .search-engine-banner .image-overlay {
        background-size: cover;
        min-height: calc(50vh - 60px);
        background-image: linear-gradient(0deg, #ffffff, transparent);
        /*background-image: linear-gradient(276deg, #ffffffc7, #ffffff75, #ffffffe0, #ffffff);*/
        
        /*animation: anim3;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;*/
    }

.search-engine-banner #navbar {
    background: transparent;
}

.main-banner-content {
    height: 100%;
    width: 100%;
}

.search-banner.main-banner-content {
    /*min-height: calc(50vh - 60px);*/
}
.search-banner-header {
    /*    width: min-content;
    display: table-caption;*/
    font-size: min(max(50px,5vw),30vw);
    line-height: min(max(50px, 5.4vw),30vw);
    font-weight: bold;
}


/*****************************/
/****** 9.0 - Articles *******/
/*****************************/
.single-article-container {
    border: 2px solid #c7c7c7;
    height: 100%;
}

.apa-about .right-container {
    width: 100% !important;
    height: auto;
    transition: 0.5s ease;
    float: right;
}

.apa-about .card-container {
    height: 600px !important;
}


@media only screen and (max-width: 576px) {
    .apa-about .card-container {
        height: 400px !important;
    }
}

.main-button {
    padding: 10px 50px;
    background: #444444;
    border: none;
    color: white;
    box-shadow: inset 0px 3px 7px -2px #000000;
    outline-color: var(--background-primary-accent-color);
}

#Benefits .nav-item .active {
    background: #0000008f;
    color: white;
    text-underline-position: under;
}

.more-button {
    padding: 10px 50px;
    background: #444444;
    border: none;
    color: white;
    box-shadow: inset 0px 3px 7px -2px #000000;
    outline-color: var(--background-primary-accent-color);
    border-radius: 0;
}

/***************************/
/****** 10.0 - Tiles *******/
/***************************/


/*************************/
/****** 11.0 - Commmittee *******/
/*************************/

.filterContententDiv {
    color: #c9c9c9;
}
#committee-cards a:hover .container-body {
    background: #222222;
}
#committee-cards a:hover {
    color: white !important;
    transition: 0.3s ease;
}
.container-body {
    background: #2e2e2e;
}