[id*="custom-html"]{padding:0 !important; position:relative;}
.text-show{display: block !important;}
.text-dark-blue{color: #003eab !important;}
.text-light{color: #fff !important;}
.position-relative{position: relative;}
.break-line{display: block;}

#top-hero{position: relative; padding: 0;}
#top-hero h1{display: none;}
#top-hero .row {height: 500px; align-items: center;}

#intro-section h3{display: none;}

#report-section .btn.color-adjusted {background-color: #fff !important; border-color: #fff !important; color: #003eab !important;}
#report-section .border-adjusted {color: #fff !important;}
#report-section .border-adjusted:hover {background-color: transparent!important;}
#report-section .border-adjusted::before {background-color: #fff !important;}

.community-highlight-box {width: 49%; height: 350px; position: relative;}
.community-highlight-box:first-child{margin-right: 10px;}
.community-highlight-box .cover{position:absolute; top:0; width:100%; height:100%; z-index:1;color:transparent;}
.community-highlight-box .h4:before, .zoom-box .cover:before{background-color: transparent;}
.community-highlight-box .imgLink {height: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow:hidden;}
.community-highlight-box .imgLink img {width: 100%;object-fit:cover;height: 350px;display: block;}
.community-highlight-box:hover .cover {-webkit-transition: all 0.4s ease-in; -moz-transform: all 0.4s ease-in; -ms-transform: all 0.4s ease-in; -o-transform: all 0.4s ease-in; transform: all 0.4s ease-in; background: rgba(0, 178, 255, 0.85);}
.community-highlight-box:hover a:before{background-color: transparent !important;}
.community-highlight-box a.h4{position:absolute; bottom:0; left:0; color:#fff !important; z-index:5; margin:0; padding:1.5rem; line-height:1.7rem; font-size: 1.7rem; text-shadow: 2px 2px 4px #222;}

h2.section-title{color: #003eab !important; font-size: 55px;}

#connect-the-uconnected {position: relative; overflow: hidden; z-index: 0;}
#talent-of-tomorrow h3, #connect-the-uconnected h3{display: none; margin-top: 0;}
.news-box {position: relative;}
.news-box img {display: block; width: 100%; height: 550px; object-fit:cover !important;}
.news-box .overlay {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);overflow: hidden; width: 100%;height: 100px; padding:0 1rem; transition: .5s ease;}
.news-box .overlay:hover {height: 100%;}
.news-box .caption {color: #fff; display:flex;height: 100px; align-items: center;}
.news-box .caption h5{align-items: center!important; color:#fff !important; margin: 0 auto!important; text-align: center;}
.news-box .description {display: none; color:#fff;}
.news-box .description p{line-height: 1.4rem; margin: 0;}
.news-box .overlay:hover .description{display: block;}

.left-side-image.d-flex, .right-side-image.d-flex{width: 100%; height: 500px; padding: 0; margin: 0;}
.left-side-image.d-flex .img-box img, .right-side-image.d-flex .img-box img{object-fit: cover; width: 100%; height: 500px;}
.left-side-image .img-box {position: absolute; left: 0; overflow-y: hidden; width: 50%;}
.right-side-image .img-box{position: absolute; right: 0; overflow: hidden; width: 50%;}
.left-side-image .desc, .right-side-image .desc{padding: 0; width: 45%;}
.left-side-image .desc{margin-left: 54%;}

#charity-events h3, #download-report h3{display: none; margin-top: 0;}

.slider-wrapper {width: 100%; height: 500px; position: relative;}
.slide {float: left; position: absolute; width: 100%; height: 100%; opacity: 0;	transition: opacity 1s linear;}
.slider-wrapper > .slide:first-child {opacity: 1;}

/* Bar Graph Horizontal */
.bar-graph .year {-webkit-animation: fade-in-text 2.2s 0.1s forwards; -moz-animation: fade-in-text 2.2s 0.1s forwards; animation: fade-in-text 2.2s 0.1s forwards; opacity: 0;}
.bar-graph-horizontal {max-width: 100%;}
.bar-graph-horizontal .year {font-weight: bold; font-size: 16px;}
.bar-graph-horizontal .bar {overflow: hidden; position: relative; width: 0; height: 25px;}
.step-icon {width: 40px; margin: 0 5px; text-align: center;}
.step-icon img{width: 30px;}
.bar-graph-one .bar-one .bar {background-color: #585858; -webkit-animation: show-bar-one 1.2s 0.1s forwards; -moz-animation: show-bar-one 1.2s 0.1s forwards; animation: show-bar-one 1.2s 0.1s forwards;}
.bar-graph-one .bar-two .bar {background-color: #4c724c; -webkit-animation: show-bar-two 1.2s 0.2s forwards; -moz-animation: show-bar-two 1.2s 0.2s forwards; animation: show-bar-two 1.2s 0.2s forwards;}
.bar-graph .number-item {font-weight: 500; font-size: 16px; font-family: "Galano Grotesque",Helvetica,sans-serif; white-space: nowrap; margin-left: 5px;}
.bar-graph .number-2022 {color: #4c724c;}
.bar-graph .number-2021 {color: #585858;}
.bar-graph .numbers .number-item{overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);}

/* Bar Graph Horizontal Animations */
@-webkit-keyframes show-bar-one {
  0% {
    width: 0;
  }
  100% {
    width: 30%;
  }
}

@-webkit-keyframes show-bar-two {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#report-section h2{display: none;}
#report-section .col-md-5 {width: 80%;}

.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@media (max-width: 1100px){
    h2.section-title {font-size: 30px;}
    #connect-the-uconnected {margin-top: 0;}
    #connect-the-uconnected h2 {margin-top: 0; margin-bottom: 1rem;}
    .break-line{display: inline; margin-left: 10px;}
}

@media (max-width: 1100px) {
    .community-highlight-section .left-side, .community-highlight-section .right-side{width: 90%; margin: auto; height: auto;}
    .community-highlight-section .left-side .imgLink img, .community-highlight-section .right-side .imgLink img{object-fit: cover; width: 100%; height: 400px;}
    .right-side .d-flex{height: auto;}
    .community-highlight-section .community-section-box{margin-bottom: 1rem;}
    .community-highlight-box a.h4 {line-height: 1.5rem; font-size: 1.5rem; padding: 10px;}
    .community-highlight-box:first-child{margin-right: 0;}
    .left-side-image.d-flex, .right-side-image.d-flex{width: 90%; margin: auto; height: auto;}
    .left-side-image .img-box, .right-side-image .img-box{position: relative; left: 0; right: 0; margin: auto; width: 100%;}
    .left-side-image.d-flex .img-box img, .right-side-image.d-flex .img-box img {object-fit: cover; width: 100%; height: 400px;}
    .left-side-image .desc, .right-side-image .desc {width: 100%; margin: auto !important; padding-top: 1rem;}
    .right-side-image.d-flex {flex-direction: column-reverse;}
    .slider-wrapper {height: 400px;}
}

@media (max-width: 850px) {
    .news-box .overlay{height: 100%;}
    .news-box .description {display: block;} 
    .news-section.d-flex{flex-direction: column;}
    .news-section .col.me-2{margin-right: auto; margin-bottom: 1rem;}
}

@media (max-width: 700px) {
    .community-highlight-box {width: 100%; height: 213px !important; margin-bottom: 1rem;}
    #talent-of-tomorrow, #talent-of-tomorrow h2{margin-top: 0; padding-top: 2rem;}
}

@media (max-width: 500px) {
    .slider-wrapper, .slider-wrapper img {height: 130px !important;}
}