.innovation_hero {
    display: flex;
    position:relative;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: left;
    max-height:90%;
    height: calc(82vh - 127px);
    min-height:540px;
}
.challenge_detail_wrapper {
    display:flex;
    flex:1;
    flex-flow:row;
    justify-content:space-between;
    align-items:flex-start;
}
.challenge_view_header {
    display:flex;
    flex:1;
    flex-flow:column;
    justify-content:flex-end;
    align-items: center;
}
.challenge_image_wrapper {
    display:block;
    position:relative;
    width:98%;
    height:220px;
    margin:0 auto 30px auto;
    border-radius:14px;
    overflow:hidden;
    background-color:rgba(0, 183, 255, 0.275);
    object-fit: cover;
    background-position: center center;
    background-size: cover;
    opacity:.8;
}
#sort_community {
    background-color:#0691b3;
    font: 600 .75rem Montserrat, sans-serif !important;
    border:none;
}
a.dropdown-item {
    font: 600 .75rem Montserrat, sans-serif !important;
}
.submitted_by {
    font: 600 .6rem Montserrat, sans-serif !important;
}
.community_list {
    max-height:50vh;
    overflow-y:scroll;
    z-index:99999;
}
.challenge_wrapper select {
    max-width:200px;
    font: 600 .8rem Montserrat, sans-serif !important;
}
.denied_listItem select {
    max-width:200px;
    font: 600 .8rem Montserrat, sans-serif !important;
}
.portal_bg {
    position: relative;
    background-image: url(../img/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.innovation_workshop {
    position: relative;
    background-image: url(../img/member/innovation_hub_workshop.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.hero_bg1 {
    position: relative;
    background-image: url(../img/future_pr/future_pr3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.hero_challenge {
    position: relative;
    background-image: url(../img/future_pr/header-challenge.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.hero_top {
    display:flex;
    flex:1;
    flex-flow:column;
    justify-content:center;
    align-items:center;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: 1;
}
.hero_bottom {
    display:flex;
    position:relative;
    flex:1;
    flex-flow:column;
    justify-content:flex-start;
    align-items:center;
    width: 100%;
    height: 70%;
    z-index: 1;
}
.dynamic_txt {
    display:flex;
    flex-flow:column;
    justify-content:center;
    align-items:center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56%;
    z-index: 1;
    font: 300 1.4rem Montserrat, sans-serif;
}
.btn-success {
    color: #fff;
    background-color: #0691b3;
    border-color: #0691b3;
    font: 600 1rem Montserrat, sans-serif;
}
.campaign_subtitle {
    color: #007693;
    font: 600 1rem Montserrat, sans-serif;
} 
.accordion-collapse * {
    color: #5b5b5b;
    font: 400 .8rem Montserrat, sans-serif;
}
h5.card-title {
    color: #0691b3;
    font: 600 .8rem Montserrat, sans-serif;
}
.card-body p {
    color: #606060;
    font: 400 0.8rem Montserrat, sans-serif;
}
.accordion-button {
    color: #0691b3;
    font: 600 .8rem Montserrat, sans-serif;
}
.accordion-item:first-of-type .accordion-button {
    color: #0691b3;
    font: 600 .8rem Montserrat, sans-serif;
}
.accordion-button:not(.collapsed) {
    color: #0691b3;
    background-color: #e7f1ff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    font: 600 .8rem Montserrat, sans-serif;
}
.ai_nav {
    display:flex;
    align-items:center;
    justify-content:center;
    height:60px;
    width:120px;
    background-color:rgba(34, 48, 48, 0.843);
    border-radius:5px;
    border: 1px solid #01c9fb77;
    font: 500 1rem Montserrat, sans-serif;
    color:rgb(12, 232, 240);
    cursor:pointer;
    transition: all 0.3s ease-in-out;
}
.ai_nav:hover {
    color:rgb(45, 45, 45);
    background-color:rgba(12, 232, 240, 0.761);
    transition: all 0.3s ease-in-out;
}
.ai_headline_wrapper {
    display:flex;
    flex-flow:column;
    align-items:center;
    justify-content: center;
    width:80%;
    height:100px;
    background-color: rgba(34, 48, 48, 0.843);
    border-radius: 5px;
    border: 1px solid #01c9fb77;
    color: rgb(12, 232, 240);
    transition: all 0.6s ease-in-out;
    padding-top:40px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:30px;
    margin:60px auto;
    text-align:center;
}
.ai_headline {
    font: 700 1.2rem Montserrat, sans-serif;
    text-align:center;
}
.hub_logo {
    font: 800 1.4rem Montserrat, sans-serif;
}
.blu {
    color:rgba(12, 232, 240, 0.761);
}
.ai_wrapper {
    display:flex;
    flex:0 0 30%;
    flex-flow:column;
    justify-content:space-between;
    align-items:flex-end;
    max-height:280px;
}
.ai_readout {
    display:flex;
    flex:2;
    flex-flow:column;
    width: 100%;
    height: 320px;
    margin:0;
    padding:14px; 
    overflow:hidden;
    max-width:100%;
    background-color: rgba(34, 48, 48, 0.843);
    border-radius: 5px;
    border: 1px solid #01c9fb77;
    color: rgb(12, 232, 240);
    transition: all 0.6s ease-in-out;
    max-height:200px;
    max-width:600px;
}
.ai_readout_bottom {
    display:flex;
    flex:0 0 20%;
    margin-top:14px;
    display:flex;
    flex:1;
    flex-flow:row;
    justify-content:space-evenly;
    align-items:stretch;
    max-height:80px;
    width:100%;
    max-width:100%;
}
.navx_spacer {
    display:flex;
    flex:0 0 10%;
}
.dynamic_txt {
    font: 500 1rem Montserrat, sans-serif;
    color:rgb(12, 232, 240);
}
.logo_txt {
    font: 300 2.2rem Montserrat, sans-serif;
    color:rgb(12, 232, 240);
}
.logo_txt_top {
    font: 300 .9rem Montserrat, sans-serif;
    color:rgb(12, 232, 240);
}
.fixed_logo {
    display:block;
    position:absolute;
    top:20px;
    left:20px;
}
.ai_error_wrapper {
    margin-top:14px;
    display:flex;
    flex:0 0 20%;
    flex-flow:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:14px;
    width:100%;
    max-width:100%;
    flex-flow:row;
    background-color:rgba(34, 48, 48, 0.843);
    border-radius:5px;
    border: 1px solid #01c9fb77;
    font: 500 1rem Montserrat, sans-serif;
    color:rgb(12, 232, 240);
    transition: all 0.3s ease-in-out;
}
.ai_error_wrapper * {
    font: 700 .6rem Montserrat, sans-serif;
    color:rgba(224, 224, 224, 0.819);
}
.ai_nav_disabled {
    opacity:.3;
    pointer-events:none;
}
.home_description {
    display:flex;
    flex-flow:column;
    align-items:flex-end;
    justify-content:center;
    bottom:100;
    left:0;
    right:0;
    margin:40px auto 0 auto;
    font: 700 .6rem Montserrat, sans-serif;
    background-color:rgba(0, 0, 0, 0.722);
    max-width:600px;
    padding:14px;
    border-radius:8px;
}
.accordion-body {
    display:flex;
    position:relative;
    padding: 1rem 1.25rem;
} 
.challenge_wrapper {
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
    justify-content:stretch;
    align-items:stretch;
    width:100%;
    height:44px;
    border-radius:5px;
    border: 1px solid #d2d2d2;
    margin-bottom:8px;
}
.challenge_listItem {
    display:flex;
    flex:1;
    align-items:flex-start;
    justify-content: flex-start;
    padding:9px;
}
.challenge_wrapper * {
    font: 700 .6rem Montserrat, sans-serif;
}
.denied_wrapper {
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
    justify-content:stretch;
    align-items:stretch;
    width:100%;
    height:44px;
    border-radius:5px;
    border: 1px solid #d2d2d2;
    margin-bottom:8px;
}
.denied_listItem {
    display:flex;
    flex:1;
    align-items:flex-start;
    justify-content: flex-start;
    padding:9px;
}
.denied_wrapper * {
    font: 700 .6rem Montserrat, sans-serif;
}
.flex2 {
    flex:2;
}
.acc_column {
    flex-flow:column;
}

@media (orientation: portrait) {
    .home_description {
        display:none;
    }
    .hub_logo {
        font: 300 1.6rem Montserrat, sans-serif;
    }
    .ai_wrapper {
        display:flex;
        flex:2;
        flex-flow:column;
        justify-content:center;
        align-items:flex-end;
    }
    .ai_readout {
        display:flex;
        flex:1;
        margin:0;
        padding:14px 14px 0 14px; 
        transition: all 0.6s ease-in-out;
        max-height:200px;
    }
    .ai_readout_bottom {
        display:flex;
        flex:1;
        margin-top:14px;
        display:flex;
        flex:1;
        flex-flow:row;
        justify-content:space-evenly;
        align-items:stretch;
        max-height:80px;
        width:100%;
        max-width:100%;
    }
    .ai_readout_bottom {
        margin-top:14px;
        display:flex;
        flex:1;
        flex-flow:row;
        justify-content:space-evenly;
        align-items:stretch;
        max-height:80px;
        width:100%;
        max-width:100%;
    }
    .nav_spacer {
        display:flex;
        flex:0 0 10%;
    }
    .card-cover {
        opacity:.8;
      }
      .card-cover:hover {
        opacity:.98;
      }
    .innovation_hero {
        display: flex;
        flex-direction: column-reverse;
        height: 90vh;
        width:100%;
        overflow:hidden;
        justify-content: space-between; /* This will space the children evenly vertically */
    }
    .card-cover {
        position: relative;
        overflow: hidden;
        background-size: auto 130%;
        transition: background-size 600ms ease-in-out; /* Add a transition */
        opacity:.7;
      }
      .card-cover:hover {
        background-size: auto 150%; /* Enlarge the background image */
        opacity:1;
        border: 2px solid #00d5ff;
        opacity:.8;
      }
      
      .card-cover::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 238, 255, 0.377); /* Semi-transparent black color */
        filter: brightness(0.7); /* Darken the image */
        z-index: 1;
      }
      
      .card-cover h2 {
        position: relative;
        z-index: 999;
        color: white;
        font: 800 .8rem Montserrat, sans-serif;
      }

    .hero_top {
        align-items:flex-start;
        flex: 0 0 auto; /* This means that the item cannot grow or shrink, and it will be the height of its content */
        overflow:hidden;
    }

    .hero_bottom {
        overflow:hidden;
        flex: 0 0 auto; /* This means that the item cannot grow or shrink, and it will be the height of its content */
        align-items:center;
        justify-content:flex-end;
        padding:0 14px;
    }

    .ai_nav {
        width: 100%;
        margin: 10px 0;
    }
    .hero_bg1 {
        position: relative;
        background-image: url(../img/hero/hero_portrait1.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}