/* Set up Root elements */
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 :root{
     --darkShadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem;
     --liteShadow: 0 0.5rem 1rem rgb(234 237 255);
     --green:#7ebd73;
     --blue: #007db8;
     --orange: #e9824f;
     --yellow: #ffc500;
     --grey: #808285;
     --black: #212427;
     --litegrey: #AEAFB1;
     --bs-breadcrumb-divider: "\F285";
     --mainFont: pf-grand-gothik-variable, proxima-nova, Inter, sans-serif;
}

 h1,h2,h3,h4,h5,h6{
    
    font-weight: 700;
    letter-spacing: 1px;
}
nav{
    z-index: 5;
}
blockquote{
    font-size: 2rem;
    display: inline-block;
}
html{
     font-family: var(--mainFont);
     overflow-x: clip;
}

 main{
     overflow-wrap: break-word;
     font-family: var(--mainFont);
     background: #fff;
}
a{  color: unset;
    text-decoration: none;
    transition: ;
    text-decoration: underline ease-in;
}

img{
    border-radius: 5px;
}
 a:hover {
     color: var(--blue);
     word-wrap: break-word;
     text-decoration: underline;
     text-decoration-thickness: 2.5px;
     text-underline-offset: 5px;
}
body{
    font-family: var(--mainFont);
}
figcaption, p.caption{
    padding-top:8px;
    color: var(--grey);
}
figure img{
    max-width: 100%;
    height: auto;
}
figure.image{
    padding: 1rem;
}
input::placeholder {
  color: #e3e3e3;
}
 iframe:focus, [href]:focus, [tabindex]:focus{
     outline: .25rem solid #2491ff;
     outline-offset: 0rem;
}

.bg-txgio{
    background: #f2f2f3 !important;
}

/* Top Navigation */

 a.nav-link, .sitemap a, .by-the-numbers {
     color: #fff;
}
 .nav-scroll-controls{
    position: sticky;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(33, 36, 39, 1) 45%);
 }
 .nav-scroll-btn{
    pointer-events: auto;
    width: 65px;
    height: 35px;
    border: none;
    color: white;
    background: none;
    font-weight: 900;
}
.sub-nav-container{
    display: flex;
    align-items: center;
}
 
 .sub-navigation{
    background: #212427;
    border-top: 1px solid var(--grey);
    font-size: 1.1rem;
    color: #fff;
    padding: 8px 0;
    text-transform: capitalize;
}
 .sub-nav-fade{
      display: flex;
    flex-wrap: nowrap;
    padding: 0 20px;
    margin: 0;
    list-style: none;
    transition: transform 0.5s ease-in-out;
    white-space: nowrap;
}
.inner-nav-wrapper{
    margin: auto;
}

 .inner-sub-navigation{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 56px;
    display: flex;
    align-items: center;
   
}

 .txgio-alert{
     background: #e94f4f;
     padding: .5rem .7rem;
     font-weight: 700;
     border-radius: 0;
     margin-bottom: 0;
}
 .txgio-alert > button{
     padding: 10px !important;
}
 button.popup {
     position: fixed;
     transform: rotate(270deg);
     font-size: 1.2rem;
     border: 0;
     font-weight: 600;
     background: #007DB8;
     padding: 10px 20px 30px 20px;
     z-index: 1000;
     bottom: 11rem;
     right: -67px;
     color: #fff;
     box-shadow: #00000040 3px 14px 14px;
     text-transform: uppercase;
}

.dropdown-item {
    font-weight: 600;
    color: #fafafa;
 }
 .dropdown:hover > .dropdown-menu{
     display: block;
     transition: all .2s ease-in-out;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--blue);
    background-color: #ffffff0d;
    font-weight: 600;
}

 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     width: 100%;
     left: 0;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
.txgio-ul .nav-item .bi-chevron-down, 
#loadMoreBtn i {
    display: inline-block;
    font-size: .8rem;
    transition: transform 0.3s ease-in-out;
}
.txgio-ul .nav-item:hover .bi-chevron-down,
#loadMoreBtn:hover i{
  transform: rotate(180deg);
}

.txgio-ul .nav-item:hover .nav-link, 
.txgio-ul .nav-item:hover .bi-chevron-down,
#subnav-list .nav-link:focus, 
#subnav-list .nav-link:hover{
  color: var(--blue);
}
 .dropdown:hover .dropdown-content {
     display: block;
}
.txgio-nav, .sub-navigation, .txgio-mobile{
     background:#212427;
     z-index: 10;
}
.txgio-nav .modal-backdrop.fade.show{
     display: none !important;
 }
a.txgio-mobile-dropdown,
#navAccord .accordion-button:not(.collapsed) {
    color: #ffffff !important;
    padding: .5rem 0 !important;
    background-color: #212427 !important;
    font-size: 1.25rem;
 }
.toggler-icon {
     display: block;
     position: absolute;
     height: 3px;
     width: 100%;
     background: #fbfafa;
     border-radius: 1px;
     opacity: 1;
     left: 0;
     transform: rotate(0deg);
     transition: .25s ease-in-out;
}
 .mega-menu-container .col-5{
     color: #fff;
     background-image: linear-gradient(131deg, #090e12 0%, #093664 74%, #0d1b57 100%);
     display: flex;
     justify-content: center;
     padding: 1rem 0;
}
 .megaside{
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: .5rem;
}
 .megalist {
     padding: 1rem 0;
     column-count: 2;
     column-gap: 50px;
     -moz-column-count: 2;
     -moz-column-gap: 50px;
     -webkit-column-count: 2;
     -webkit-column-gap: 50px;
}
 .megalist li{
     list-style: none;
     font-size: 1.2rem;
}
.megalist .nested,
.megalist ul ul{
    font-weight: 300;
}

 .megalist li a{
    color: #f7f7f7;
}

 ul.txgio-ul{
    gap: 3px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.basicdrop{
    text-align: center;
    left: -55%;
    padding: 0;
    border: 2px solid var(--green) !important;
}
.fullmenu.dropdown-menu {
    width: 100vw;
    left: 50%;
    transform: translate(-50%, 0);
}

 .sub-nav{
    box-shadow: var(--darkShadow);
    border: none;
    background: #212427;
    color: #fff;
}
.subnav-drop {
    color: var(--black);
    background: #E0E7F3;
}
/*
.txgio-ul .nav-item.dropdown::after {
 content: "";
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 60px;
    display: block;
}*/
 .sub-nav h3, .txgio-ul.nav-link:hover{

    text-decoration: underline var(--blue) !important;
    text-decoration-thickness: 2.5px  !important;
    text-underline-offset: 5px !important;
 }


/*---Forms Controls------*/


 .custom-nav-buttons a, .button-large.dark{
     color: #fff;
     font-size: 1.2rem;
     font-weight: 500;
     margin: 0 10px;
}
.custom-nav-buttons .btn a:hover{
      color: #dbdbdb;
}



 .form-content {
     width: 74vw;
     margin: -15rem auto 8rem auto;
     position: relative;
     border-radius: 20px;
     box-shadow: var(--darkShadow);
}
 .txgio-nav-content input{
     background: transparent;
     color: #fff !important;
     width: 14rem;
     border: solid 1px #fff;
     border-radius: 5px;
     height: 37px;
     padding: 10px;
}


/*----- Header & Page Top--------------*/
 .dynamic-columns-1{
     height:570px;
}
 .dynamic-columns-2{
     height:500px;
}
 .dynamic-columns-3{
     height:230px !important;
     margin-bottom: 3rem;
}
 .dynamic-columns-4{
     height:57vh !important
}
.dynamic-columns-1 img.slider-cropped{
     height:700px !important;
}

.masthead{
     position: relative;
     background: no-repeat center center;
     background-size: cover;
     background-attachment: scroll;
}
.masthead.masthead-right{
  background-position: right top;
 }
 
 .img-bg-container .preface{
     align-items: center;
     width: 75vw;
     padding-bottom: 5rem;
}
.img-bg-container.content-position div.px-3{
       text-align: right;
}
 .img-bg-container  div.px-3 div{
    width: 50%;
    float: right;
 }
 
.img-bg-container .txgio-breadcrumbs .breadcrumb-item{
    color: #fff !important;
    text-decoration: underline #fff;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.img-bg-container .breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}


.header-img-bg{
    background: -webkit-linear-gradient(270deg, rgba(27, 28, 30, 0) 0%, rgba(27, 28, 30, 0.9) 82%) !important;
    background: linear-gradient(272deg, rgba(27, 28, 30, 0) 0%, rgb(27 28 30 / 90%) 82%) !important;
    height: 100%;
}

.dynamic-columns-3 .img-bg-container{
    background: linear-gradient(132deg, rgb(0 0 0 / 66%) 0%, rgb(0 0 0 / 25%) 100%);

}
.innercontent{
    padding-left: 0 !important;
    padding-right: 0!important;
}

.content-position{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
 .img-bg-container{
     padding: 1rem;
     font-family: var(--mainFont);
     bottom: 0;
     color: #fff;
     position: absolute;
     text-shadow: 2px 2px 14px #0000005e;
     width: 100%;
     height: 100%;
     background: -webkit-linear-gradient(354deg, rgba(27, 28, 30, 0) 0%, rgba(27, 28, 30, 0.9) 82%);
     background: linear-gradient(96deg, rgba(27, 28, 30, 0) 0%, rgb(27 28 30 / 90%) 82%)
}
.bg-container{
     padding: 1rem;
     font-family: var(--mainFont);
     bottom: 0;
     color: #fff;
     position: absolute;
     text-shadow: 2px 2px 14px #0000005e;
     width: 100%;
     height: 100%;
}
.big-img{
    position: relative;
    height: inherit;
    overflow: hidden;
    width: 100%
    border: none;
    border-radius: 0;
}
.big-img img{
    object-fit: contain;
}
.top-section-content{
    padding-bottom: 60px;
}
.intro-heading{
    padding-left: 1rem;
    padding-right: 1rem;
}
.preface{
    padding-top: 50px;
}

 .preface h2{
    text-decoration: underline var(--yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
}

 .button-container{
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
}
 .button-container a{
     max-width: 170px;
     min-width: fit-content;
     flex: 1;
}
.btn:hover{
    filter: brightness(0.85);
}
#customNavBtns .button-large:hover{
    
}

#customNavBtns .button-large{
    color: #fff;
}

.orange-btn{
    background-color: var(--orange) !important;
    font-size: 20px;
    color: #fff;
   
}
.blue-btn{
    background-color: var(--blue) !important;
    font-size: 20px;
    color: #fff;
   
}
.green-btn{
    background-color: var(--green) !important;
    font-size: 20px;
    color: #fff;

}
.white-btn{
    background-color: #fff !important;
    font-size: 20px;
    color: #222;
    border: 1px solid #222 !important;

}

.clear-btn{
   color: #fff;
    border: solid #fff 2px;
    
}
.clear-btn-dark{
   color: var(--black);
    border: solid #212427 2px;
    
}
.button-large{
    padding: 6px 30px;
    font-size: 1.2rem;
}

 .explore-btn, .explore-btn2{
     color: #222;
     font-size: 1.15rem;
     font-weight: 700;
     transition: all .2s ease-in-out;
}
 .explore-btn:hover, .explore-btn2:hover, .navbar-dark .navbar-nav .nav-link:hover {
     text-decoration: underline;
     text-decoration-thickness: 2.5px;
     text-underline-offset: 5px;
}
 .explore-btn:after, .explore-btn2:after{
     display: inline-block;
     font-size: 9px;
     margin-left: 10px;
     content: "\F2E1";
     font-family: 'Bootstrap-icons';
     background: var(--blue);
     color: #fff;
     padding: 3px 6px 3px 5px;
     border-radius: 20px;
     transform: rotate(45deg);
}
/*----Adjusting Bootstrap 5.0 Elements----*/

.project-status-box{
    padding: 2rem 0 4rem 0;
}
.project-status-box h4, 
.project-status-box h3{
    font-weight: 500;
}
.progress.bg-light{
    height: 10px;
}
.txgio-status{
   align-items: flex-end;
}

.project-status-box .txgio-loadbar{
    background: var(--blue);
    height 10px;
}
.project-status-box .txgio-status h5{
    margin-top: 1rem;
    font-weight: 900;
    color: var(--blue);
}
.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    font-weight: 900;
    padding-right: 0.7rem;
    font-family: 'bootstrap-icons';
}
.txgio-breadcrumbs{
    margin-top: 40px;
}
.txgio-breadcrumbs .breadcrumb-item.active {
     text-decoration: none !important;
    
}
.txgio-modal-styles .modal-dialog {
     max-width: 55% !important;
}
.modal-backdrop.fade, .modal-backdrop {
    position: relative !important;
    
}
 button.btn-close{
     line-height: 0;
     font-weight: 600;
     font-family: cursive;
     color: #fff;
}
 .modal button.btn-close{
     background: #842029;
     padding: 1rem;
     border-radius: 50%;
     position: relative;
     bottom: -20px;
     left: -20px;
     z-index: 5;
     opacity: 1;
}
 .upcoming-events{
     height: 100%;
}
 .col > .info-card{
     height: 100%;
     overflow: hidden;
}
 .a-wrap .card-body{
     margin-top: 30px;
}
 .image-container{
     overflow: hidden;
 }
 .image-container .card-img {
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
}
 .cardbody > a {
     position: relative;
     bottom: 0px;
}

 .info-card.staffer{
     background: #212427;
     justify-content: center;
     margin: 0;
     min-height: 110px;
}
.staff-grouping{
     display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
}

 .info-card{
     overflow:hidden;
     border-radius: 1rem;
     border: solid 1px #cccccc52;
     margin-bottom: 1rem;
     box-shadow: var(--darkShadow);
     background: #F2F2F3;
}
.icon-list-card span{
    color: var(--grey)
    align-items: center;
    display: flex;
    gap: 5px;
}
.material-symbols-outlined {
    vertical-align: -6px;
}
.timecard-num{
    display: flex;
    flex-direction: column;
    position: absolute;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
    font-weight: 600;
    text-align: center;
    top: 0;
    background: #ffffff;
    color: #000000;
    font-size: 2.5rem;
    line-height: 1;
    z-index: 999;
}
.timecard-num span:nth-child(2){
    font-size: 1.5rem;
}
 .info-card .card-body button{
     margin-top: 20px;
     position: relative;
     font-size: 1.2rem;
     bottom: 10px;
     padding-left: 30px;
      padding-right: 30px;
}

 .info-card .image-container img{
     border-radius: 16px 16px 0 0;
     height: 300px;
     object-fit: cover;
    transition: 0.5s ease-in-out;
    
}

 .card:hover{
     box-shadow: var(--liteShadow);
}
 i.info-card-icon{
     top: 0;
     position: absolute;
     right: 0;
     font-size: 1rem;
     color: var(--grey);
     padding: 1rem;
}
h3.by-the-numbers-h3{
    line-height: 2rem;
    font-size: 1.3rem;
    font-weight: 500;
    border-bottom: 1px solid #fff;
    width:70%;
}

.count-grid{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr) minmax(10rem, 1fr));
}
.count-grid div {
    text-align: center;
    align-content: center;
    padding: 1rem;
    background-color: #E6E7E8;
    border-radius: 1rem;
    font-size: 1.2rem;
    position: relative; 
}

.timestamp:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    border-right: 2px solid #030303;
}

.count-grid p{
    font-size: 1rem;
    font-weight: 500;
        }
span.counter-value,
.count-grid >.timestamp,
.timestamp h4{
    font-size: 3.2rem;
    font-weight: 700;
}

.bonding-box::-webkit-scrollbar {
  width: 5px;
  background-color:#E6E7E8;
}
.bonding-box::-webkit-scrollbar-thumb {
  background:#939598;
    border-radius:35px
}
#v-tabs-tab.bonding-box{

    height: 650px;
}
.bonding-box{
    overflow-x: hidden;
    height: 325px;
    box-shadow: inset -18px -20px 1rem 0px rgb(245 248 248);
}
.agency-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.agency-box li:first-child{
    
    font-weight: 900;
    font-size: 1.3rem;
    list-style: none;
 }
.agency-box img{
    height: 125px;
    object-fit: contain;
    width:100%
}
.agency-box{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.maps-list-edu {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap 20px;
    padding: 2rem 0;
}
.maps-list-edu .map-collection-box{
    background: #FFF;
    margin: 1rem;
}

.map-collection-box{
    background: #F2F2F3;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.map-card {
    border-radius: 5px;
    float: left;
    background-color: #fff;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    margin: 0 10px 10px 0;
    position: relative
}

.map-card .map-card-img {
    width: 30%;
    min-height: 130px;
    float: left;
    background-size: 175px 175px !important
}

.map-card .map-card-img img {
    width: 100%;
    object-fit: cover
}

.map-card .map-card-text {
    float: left;
    max-width: 70%
}

.map-card .map-card-text h3 {
    font-size: 18px;
    color: #222;
    text-decoration: none;
    padding: 0 5px;
    margin: 5px 0
}

.map-card .map-card-text p {
    padding: 0 5px 5px 5px;
    color: #222;
    font-size: 14px
}

/* For tablet and BELOW */
 
 @media only screen and (max-width: 995px) {
    .txgio-nav-content input{
        display: none;
    }
    ul.txgio-ul{
        padding-left: 1.5rem;
    }
    
    .fullmenu.dropdown-menu {
       transform: 0;
    }
    .fullmenu .row:not:(div:nth-child(3)){
     display: none;
     }
 

    figure.image{
    padding: 0;
    }
    
    .innercontent figure{
    margin: auto;
    text-align: center;
    }
     .bg-container {
      background: right 0px no-repeat;
     background: linear-gradient(180deg, rgba(27, 28, 30, 0) 10% 16%, rgb(27 28 30 / 30%) 44%)
     }
    .countup-container h1{
    font-size: calc(1.375rem + 1.5vw);
    }
    span.counter-value {
    font-size: 1.2rem;
    }
    span.counter-sign, h3.by-the-numbers-h3{
    font-size: 14px;
    }
    div.countup-content div:nth-child(1) {
        margin-left: 0;
    }
    
   .bigfeature-showcase {
    grid-template-columns: 1fr !important;
    height: unset !important;
    
    }
   
    .feature-post-2, .feature-post-3{
        height: 180px !important;
    }
     .feature-post-1{
        height: 480px !important;
        display: grid;
    }
    
  .explore-showcase.projects-grid{
        display: flex;
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; 
        padding: 1rem; 
    }
    .explore-showcase.projects-grid::-webkit-scrollbar {
        display: none;
    }

    .explore-showcase.projects-grid [class^="box-"] {
        flex: 0 0 85%; 
        scroll-snap-align: center; 
         height: 270px;
    }
    .staff-grouping {
        grid-template-columns: repeat(2, 1fr);
    }
    #ctaContact:after, #cta404 div.txgio-col:nth-child(1) {
        display: none;
    }
    #cta404:before {
        display: block;
        top: -19px;
        left: 11%;
        position: absolute;
        background-image: url(https://test.txgio.org/_images/404-unplugged_1@2x.png);
        z-index: -1;
        content: "";
        width: 218px;
        height: 100%;
        background-size: cover;
        opacity: 73%;
    }

    .txgio-cta {
        width: 90% !important;
        position: absolute;
        bottom: 35px;
        text-shadow: 7px 6px 5px #000;
    }
      .txgio-cta h2{
          font-size: 30px;
      }

    .txgio-article .col-3{
        width: 50%;
    }
     .txgio-article .col-9{
        width: 50%;
     }
    .preface#dataListType{
         flex-direction: column;
     }
    .img-bg-container  div.px-3 div.float{
        width: 100%
     }
    .package-sidebar {
      border: none; 
    }
    .Specialized-packages .row{
        padding: 10px;
    }
    .package > button {
    padding: 3px 8px;
    }
     .table-responsive{
      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
    }
    
}
/* For smaller phones and Below */
@media only screen and (max-width: 767px){
    .dynamic-columns-1 {
        height: 470px;
    }
    .dynamic-columns-2{
         height:385px;
    }
	.events .additional-content{
	flex-direction: column !important;   
	}
     div.cta-col.px-3{
	    width: 100% ;
	}
	.footer-column {
	    width: 50%;
	}
	.txgio-nav-logo > img{
	    width: 100px;
	}
	.logo-feature-text, footer > div> p.py-3.text-center{
	    font-size: 10px;
	}
	footer div.footer-column:nth-child(3){
	    order: 1;
	}
	#subnav-list, #gio-calendar{
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    .nav-fade-right .nav-scroll-controls{
        display: none;
    }
    
    .col > .info-card {
        height: 360px;
        width: 360px;
    }
    #gio-calendar > div.icon-list-card{
       font-size: 10px;
    }
    .txgio-tag-category li{
    font-size: .7rem;
    padding: .3rem;
 }
 
    .article-summery {
    font-size: 10px;
    height: 74px;
    margin-bottom: 0;
    overflow: hidden;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    }
    .txgio-article h4{
        font-size: 1rem;
    }
    .preface .text-end,
    .intro-heading .text-end{
       display: none;
    }
    .preface:not(:first-child){
     padding-top: 0;

    }
	
}
/* For tablet and ABOVE */
 
 @media only screen and (min-width: 995px) {
    .top-section-content {
      padding-bottom: 60px;
    }
   h1{
     font-size: 3.25rem;
    }
    h2{
        font-size: 2.75rem;
    }
    h3{
        font-size: 2rem;
    }
    .countup-container {
        max-width: 70%;
     }
    .projects-grid:has(.box-0:hover){
         display: grid;
         gap: 20px;
         grid-template-columns: 2fr 1fr 1fr;
    }
     .projects-grid:has(.box-1:hover){
     grid-template-columns: 1fr 2fr 1fr;
    }
     .projects-grid:has(.box-2:hover){
         grid-template-columns: 1fr 1fr 2fr;
    }

}


/* Before and After Slider*/

 .bfaf-container .bfaf-caption-a{
     right: 20px;
}
 .bfaf-container .bfaf-caption-b{
     left: 20px;
}
 .bfaf-container .bfaf-caption-b:hover, .bfaf-container .bfaf-caption-a:hover{
     opacity: 1;
}
 .bfaf-caption-a, .bfaf-caption-b{
     position: absolute;
     color: #fff;
     background: rgba(0, 0, 0, 0.6);
     text-align: center;
     padding: 10px;
     opacity: .20;
     transition: opacity 0.3s ease;
     z-index:100;
     top: 50%;
}
 .bfaf-image-container > img {
     display: block;
     max-width: 100%;
}
 .bfaf-slider {
     display: grid;
     place-items: center;
     min-height: unset;
}
 .bfaf-container {
     display: grid;
     place-content: center;
     position: relative;
     overflow: hidden;
     border-radius: 1rem;
     --position: 50%;
     box-shadow: var(--darkShadow);
}
 .bfaf-slider-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: left;
}
 .image-before {
     position: absolute;
     inset: 0;
     width: var(--position);
}
 .slider-drag {
     position: absolute;
     inset: 0;
     cursor: pointer;
     opacity: 0;
    /* for Firefox */
     width: 100%;
     height: 100%;
}
 .slider-drag:focus-visible ~ .slider-button {
     outline: 5px solid black;
     outline-offset: 3px;
}
 .slider-line {
     position: absolute;
     inset: 0;
     width: .2rem;
     height: 100%;
     background-color: #fff;
    /* z-index: 10;
     */
     left: var(--position);
     transform: translateX(-50%);
     pointer-events: none;
}
 .bf-slider-button {
     position: absolute;
     background-color: #fff;
     color: black;
     padding: .5rem;
     border-radius: 100vw;
     display: grid;
     place-items: center;
     top: 50%;
     left: var(--position);
     transform: translate(-50%, -50%);
     pointer-events: none;
    /* z-index: 100;
     */
     box-shadow: var(--darkShadow);
}

/* Dynamic Moving Component Items */


.simple-banner{
     position: relative;
     height: 450px;
}
 .simple-banner img{
     border-radius: 20px;
     object-fit: cover;
     width: 100%;
     overflow: hidden;
     height: 450px;
}
.events-page-wrapper {
    border-radius: 50px;
    margin-top: -43px;
    position: relative;
    z-index: 5;
    padding: 40px 0 0 0;
    background-color: #fff;
}
.events-page-wrapper2 {
    border-radius: 50px;
    margin-top: -50px;
    position: relative;
    z-index: 16;
    padding: 40px 0 0 0;
    background-color: #fff;
}

.block-3-hovgrow {
    padding: 0;
}

 div.latest-data-item, a.latest-data-item{
     position: relative;
     overflow:hidden;
     border-radius: 1rem;
     height: 340px;
     margin: 20px 0;
}
 .latest-data-item img{
     transition: all .2s ease-in-out;
     border-radius: 1rem;
     object-fit: cover;
     width: 100%;
     overflow: hidden;
     height: 340px;
     box-shadow: var(--darkShadow);
}
 .explore-showcase > div {
     position: relative;
     overflow: hidden;
     margin: 20px 0;
     max-height: 425px;
     height: 425px;
     border-radius: 1rem;
}
.explore-info, .post-information{

     background-image: linear-gradient(to top, #222, transparent);
}

 .explore-info .bi-play-circle-fill {
     color: var(--blue);
}
 .explore-block-1 .explore-info h3 {
     width: 65%;
}
 .explore-info h3, .post-information h4, .feature-post-1 h4  {
     color: #FFF;
     font-size: 2.1rem;
     width: 80%;
}
 .explore-info button{
     font-weight: 600;
     border-radius: 8px;
     width: 100%;
     text-align: center;
     background: #fff;
     color: #000;
     border: none;
     padding: 8px 0;
}
 .latest-infomation, .post-information{
    position: absolute;
    width: 100%;
    font-weight: 600;
    left: 0;
    color: #fff;
    right: 0;
    bottom: 0;
    padding: 1rem;
}
 .post-box:hover>img,
 .gio-calendar .image-container:hover > img{
     -webkit-transform: scale(1.1);
     -ms-transform: scale(1.1);
     transform: scale(1.1);
}
.post-box{
     position: relative;
     overflow: hidden;
     text-shadow: 1px 1px 2px #222;
    
}
 .post-box img, .explore-blocks img{
     object-fit: cover;
     height: 100%;
     width: 100%;
     transition: 0.5s ease-in-out;
}
.post-information ul{
    margin: 5px -8px;
}

.bigfeature-showcase {
    grid-template-columns: 1fr;
    height: unset;
}

 .bigfeature-showcase{
     padding: .5rem;
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-template-rows: repeat(2, 1fr);
     gap: 20px;
     height: 500px;
}
 .feature-post-1 {
     grid-row: 1 / span 2;
     overflow: hidden;
     position: relative;
     border-radius: 1rem;
}
.feature-post-2 img, .feature-post-3 img {
    height: 300px;
}
.feature-post-2 h4, .feature-post-3 h4 {

    font-size: 1.4rem;
}
 .feature-post-2, .feature-post-3 {
     display: grid;
     grid-template-rows: auto 1fr;
     overflow: hidden;
     border-radius: 1rem;
}
.package-type{
    background-color: var(--black);
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem !important;
    border-radius: 1rem 1rem 0 0;
}
.package{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30px 10px;

}
.package.sold-out{
    color: #959595 !important;
}

.package button.col:hover{
  background: var(--black);
  color: #fff;

}
.package.active{
    background: #e9ecef;
}
.package .sold-out button.btn{
        color: #ccc;
    border: solid 2px #ccc;
}

.package button.btn{
    color: var(--black);
    border: solid 2px var(--black);
    
}
.all-packages{
      border: solid 1px #ccc;
    border-radius: 1rem;
    height: 650px;
    overflow: hidden;
}
.package-sidebar {
  border-radius: 1rem;  
}
.package-class, 
.package > small{
     text-decoration: underline #007db8;
 }

 .latest-data-collection{
     grid-template-columns: 1fr 1fr 1fr;
}
 .explore-showcase, .projects-grid{
     grid-template-columns: 2fr 1fr 1fr;
}

.datahub-api-data{
     display: grid !important;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 20px;
 }
 .projects-grid{
     display: grid;
     gap: 20px;
     transition: grid-template-columns 0.5s ease-in-out;
}

.txgio-cta{
    width: 67%;
}
#ctaContact:before {
    display: block;
    top: -125px;
    left: -175px;
    position: absolute;
    background-image: url(/_uploads/footerimgs.png);
    z-index: 9999;
    content: "";
    width: 250px;
    height: 250px;
    background-size: cover;
    background-position: 50%;
}

.edu-resources{
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.edu-resources a{
    width: 230px;
    height: fit-content;
    background-color: #fff;
    font-size: 20px;
    color: #222;
    border: 1px solid #222;
}

/* article and posts */

.datalist-select{
       display: flex;
        gap: 30px;
    }
  #sTag{
        width: 200px;
    }
#sTag, #sYear {
    text-transform: capitalize;
    font-size: 1.2rem;
}
#loadMoreBtn{
    position: relative;
    background: #D9D9D9;
    z-index: 10;
}
.txgio-articlebox{
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;    
    
}
.txgio-articlebox a:hover{
    text-transform: none !important;
}
.txgio-articlebox img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: 0.5s ease-in-out;
    box-shadow: var(--liteShadow);
    }
.data-tag{
     background: #ffffb4;
     color: #000;
     display: inline-block;
     padding: 5px 8px;
     font-size: 1.2rem;
     border-radius: 8px;
     text-shadow: none;
     margin: 5px -8px;
   
}
.txgio-article,
  .txgio-article img{
      height: 12rem;
  }



/* DIR Contracts */

 .contract-box{
     background: #f2f2f3;
     border-radius: 1rem;
     padding: 20px;
     text-align: center;
     color: var(--blue) 
}
 button.character-element, .contract-box a {
     background-color: transparent;
     color: #007DB8;
     text-decoration: underline;
     border: none 
}

button.character-element[disabled]{
          color: #7c8285;
    }
.gio-calendar{
    gap: 25px;
     display: flex;
     align-items: center;
     padding: 0 1em 1rem 1rem;
}

.gio-calendar a:hover{
    text-decoration: none;
}
.gio-calendar span.btn{
    line-height: 30px;
    padding: 8px 30px;
    font-size: 1.1rem;
    letter-spacing: .5px;
    font-weight: 500;
}
#txgio-accordion .accordion-button {
    font-size: 1.2rem;
    color: var(--blue);
    font-weight: 500;
}

#txgio-accordion .accordion-item {
    margin-bottom: 15px;
    background-color: #EFF2F8 !important;
    border: none;
    border-radius: 10px !important;
}

#txgio-accordion .accordion-button:focus {
    z-index: 3;
    border-color: #d7f2fa00;
    outline: 0;
    box-shadow: none;
}
hr.divider {
    margin: 0 20px;
    color: var(--blue);
    opacity: 100;
    }
#navAccord .accordion-button:not(.collapsed)::after,
#navAccord .accordion-button::after,
#txgio-accordion .accordion-button:not(.collapsed)::after,
#txgio-accordion .accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007db8' stroke='%23007db8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
#txgio-accordion .accordion-button:focus,
#txgio-accordion .accordion-button, 
#txgio-accordion h4.accordion-header{
    border-radius: 7px;
    background: #EFF2F8 !important;
}

.txgiomap-container {
    position: relative;
    width: 100%; 
    height: 600px; 
}

.txgiomap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer; 
    z-index: 4; 
}


/*Image gallery lite-box */

 .txgio-litebox, .txgio-litebox #imgGallModalView, .txgio-litebox .modal, .txgio-litebox.modal-content, .txgio-litebox .modal-footer{
     background: rgb(255 255 255 / 90%) !important;
     background-color: rgb(255 255 255 / 90%) !important;
     border: none !important;
}
 .txgio-litebox #imgGallModalView{
     object-fit: contain;
     height: 70vh !important;
}
 .txgio-litebox .modal-dialog {
     max-width: 80vw 
}
 .txgio-img-gallery .grid, .contracts-grid .grid{
     display: grid;
     gap: 20px;
     grid-template-columns: repeat(auto-fill, 19rem);
}
 .contract-box img{
     object-fit: contain;
     background-size: contain;
     background-position: center;
}
 .gall-image:hover, .contract-box:hover{
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
     transform: scale(1.02);
}
 .gall-image {
     transition: all .2s ease-in-out;
     overflow: hidden;
     object-fit: cover;
}
 img.gall-image,
 .txgio-img-gallery 
 .gallery-box img{
     width: 100%;
     object-fit: cover;
     background-size: contain;
     background-position: center;
}

.carousel-container {
position: relative;
  margin: auto;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0)
  );
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.carousel-slide {
    min-width: 33.333%;
    padding: 0 20px 0 0 !important;
    box-sizing: border-box;
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

}

.indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}
button.slider-dot {
    height: 4px;
    width: 40px;
    background-color: #ccc;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s;
}
.slider-dot.active { 
  background-color: #333; 
}


/* Postings and Tags Sitewide  */

 .job-title button{
     width:100%;
}
 .txgio-job-posting{
     background-color: #fff;
     box-shadow: var(--darkShadow);
     padding: 2rem 4rem;
     width: 1000px;
     margin-top: -13rem;
}

 .txgio-job-posting .extra-button {
     border: solid 2px #0d6efd;
     color: #0d6efd;
     
}
 .txgio-job-posting .job-context{
     margin-top: 20px;
}
.txgio-tag-category {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    flex-direction: row;
    color: #222;
    padding: 0;
    gap: 15px;
    margin: 0 -5px;
}
 .txgio-tag-category li{
     font-size: 1rem;
    padding: .4rem;
    border-radius: 10px;
    letter-spacing: 1px;
    font-weight: 600;
     text-transform: capitalize;
    background: #ffffb4;
    text-shadow: none;
  
}
.txgio-tag-category li.other{
     background: #ccc;
}

 li.lidar{
     background:#ff8ed6;
}

 li.elevation{
     background: #ffbce7;
}
 li.bathymetry{
     background: #BFE6E1;
}
 li.GIO-Report{
     background: #b15302;
     color: #fff;
}
 li.Pre-made-Maps{
     background: #feebd1;
}
 li.education{
     background: #dfd1f5;
}
 li.imagery{
     background: #022459;
     color: #fff;
}
 li.othroimagery{
     background: var(--blue);
     color: #fff;
}

 li.Texas-Imagery-Service{
     background: #b4e6ff;

}
li.land-parcels{
    background: var(--green);
}
li.address-points {
    background: var(--orange);
   
}
 li.community-meeting{
     background: #FADED3;
}
 li.Forum{
     background: #BFCFFF;
}
 li.georodeo{
     background: #f6f004;

}
li.Historic-Imagery,li.Historic_Imagery{
    background: var(--yellow)
}

/* Footer stuff */

.txgio-cta-footer{
    background: #003E5C;
    position: relative;
}
.txgio-cta-footer div.col{
    
    position: relative;
    z-index: 10;
    
}

#ctaContact:after {
    display: block;
    top: -25px;
    right: 160px;
    position: absolute;
    background-image: url(https://test.txgio.org/_images/footerimgs-1.png);
    z-index: 1;
    content: "";
    width: 394px;
    height: 240px;
    background-size: cover;

}
#ctaContact:before {
    display: block;
    top: -19px;
    left: 100px;
    position: absolute;
    background-image: url(https://test.txgio.org/_images/footerimgs.png);
    z-index: 1;
    content: "";
    width: 275px;
    height: 231px;
    background-size: cover;
}
.cta-col{
    width: 37%;
}
.main-footer-content{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo-feature-text{
	border-left: solid 1px #fff;
}
.form-button{
    border-radius: .5rem;
    color: #fff;
    font-size: 1.5rem;
    padding: .5rem 1.6rem;
    border: none;
}
.footer-icons{
	font-size: 2.5rem;
}
.footer .sitemap ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer .sitemap ul li {
    font-size: 14px;
    margin-bottom: 5px
}

.footer .sitemap ul{
    padding-left: 0;
    list-style: none;
}

.footer a, .footer p  {
    color: #e4e4e4;
}
.footer-column h4{
	color: #fff;
}

.footer-signup .large-input{
	background: transparent;
    color: #fff !important;
    width: 100%;
    border: solid 1px #fff;
    border-radius: 5px;
    height: 50px;
    padding: 10px;
}
.footer {
    position: relative;
    padding: 1rem 0;
    background: #222;
    color: #f5f5f5;
    min-height: 375px;
    z-index: 5;
}
 .sitemap-col{
  display: grid;
   grid-template-columns: 1fr 1fr;
  padding: 10px;
}

.footer-column ul{
    padding: 0;
    margin: 0;
    line-height: 12px;
    list-style: none;
}
.footer-column li,
.sitemap-col h2{
    color: #000;
    padding: 10px 0;
    
}
.footer a:hover,
.footer .li:hover{
    text-decoration: underline;
	color: #f7f7f7;
}
/* Events Calendar table */

.txgio-cal {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}
.txgio-event:hover, .txgio-event.active{
    background: #fff;
    color: var(--blue);
    background: #fff;
    box-shadow: var(--liteShadow);
}
.txgio-event, .grid-event:hover, .txgio-event.active{ 
  border-radius: 1rem;
}

.txgio-cal .card {
  width: 50rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 20px;
  background: #fff;
  position: relative;
  background: linear-gradient(
180deg, rgba(0, 212, 255, 1) 0%, rgba(4, 151, 181, 1) 21%, rgba(255, 255, 255, 1) 17%);
}

.txgio-cal .calendar-table {
  width: 100%;
  text-align: center;
}

.txgio-cal .days-of-week {
  font-size: 12px;
  color: #aaa;
  padding-bottom: 10px;
}

.txgio-cal #calendar-body td {
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s;
}
.txgio-cal-wrapper > .material-symbols-outlined {
    color: var(--yellow);
}

.txgio-cal td[title="today"]{
  background: #E0E7F3;
  color: var(--blue);
  font-weight: 900;
}
td[data-has-event="true"] {
    font-weight: bold;
    position: relative;
    cursor: pointer;
}

td[data-has-event="true"]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--yellow); 
    border-radius: 50%;
}
  .grid-event {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }
  #indexFiltered-cal.bonding-box{
    height: 27rem;
  }
  .txgio-cal .card {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 4%);
    padding: 20px;
    background: #fff;
    position: relative;
    background: linear-gradient(180deg, #007DB8 0%, 27%, rgba(255, 255, 255, 1) 23%);
    border: none;
  }
.event-date-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.txgio-cal #calendar-body td:hover,
.txgio-cal #calendar-body td.selected-day{
    background: #ffeed5;
    color: #000;
}

.txgio-cal .big-year {
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    padding-bottom: 2rem;
    text-transform: uppercase;
}
.txgio-cal .big-year h2{
  font-weight: 700;
}
.txgio-cal .big-year p{
  font-size: 1.2rem;
  font-weight: 300;
}
button.triangle-left,
button.triangle-right{
    background: none;
    border: none;
    position: absolute;
    top: 40px;
    font-size: 1.5rem;
}

button.triangle-right{
    right: 20px;
    
}
.txgio-cal .triangle-left::after,
.txgio-cal .triangle-right::after {
 content: "";
    position: absolute;
   bottom: -10px;
    left: 0;
    right: 0;
    height: 60px;
    display: block;
}

#indexFiltered-cal .event-info{
    padding-left: 30px;
    border-left: solid 2px #e6e7e8;
}
#indexFiltered-cal .event-info:hover{
    padding-left: 30px;
    border-left: solid 3px var(--blue);
}

#indexFiltered-cal > span..material-symbols-outlined{
    color: var(--yellow);
   
}

/* Page specific stuff */


.eventstables thead th:not(:first-child){
     
    font-size: 1.5rem;
    font-weight: 700;
    padding: 15px;
}
.eventstables thead th .thead{
  border-radius: 1rem;
  font-size: 1.5rem;
  background-color: #E6E7E8;
  padding: 10px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
      flex-direction: column;
}
.eventstables thead tr th small{
    font-size: .8rem;
    font-weight: 100;
    display: block;
}
.eventstables .table>thead  {
    vertical-align: middle;
}
.eventstables .table>:not(:last-child)>:last-child>* {
    border-bottom-color: transparent;
}
.eventstables .table tbody:first-child{
    padding: 40px .5rem .5rem .5rem;
}

.eventstables td{
    font-size: 1.3rem;
    font-weight: 600;
}



.sponsors-platinum, .sponsors-silver, .sponsors-gold {
  align-items: center;
  gap: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 30px;
}

.sponsors-platinum img {
  max-width: 320px;
}


.sponsors-gold img {
  max-width: 200px;
}

.sponsors-silver img {
  max-width: 115px;
  margin: 20px 0px;
}

.sponsors-silver.partners img {
  max-width: 150px;
  margin: 20px 0px;
}
 img.slider-cropped{
	 width: 100%;
	 vertical-align: middle;
	 object-fit: cover;
}
 .sm-image-slider img.slider-cropped{
	 height:375px !important;
}

#main.404, .404{
 overflow: hidden !important; 
}