body, html {
  padding: 0; margin: 0;  }
.parallax {position: absolute;height: 100%;left: 0px;right: 0px;background-attachment: fixed;background-position: top center;background-repeat: no-repeat;background-size: cover;}
.HeroBanner {position: relative;height: auto;}
.banner1, .banner2, .banner3{ display: none; }
@keyframes leftFadeIn {
  0% { position: absolute; left: -4em; opacity: 0; }
  100% { position: absolute; left: 0; opacity: 1; }
}
.giving-title { position: relative; color: #fff !important; background: rgba(0, 0, 0, .65); border-radius: 0 10px 10px 0; padding-left: 30px; padding-right: 20px; top: 20%; animation-name: leftFadeIn; animation-duration: 3s; animation-fill-mode: forwards; }
.giving-hover {display: block;margin: 0;background-size: 100% 200%;background-image: linear-gradient(to bottom, transparent 50%, rgb(33, 65, 42, .85) 50%);-webkit-transition: background-position .7s;-moz-transition: background-position .7s;transition: background-position .7s;position: absolute;bottom: 0;max-width: 350px;width: 100%;border-radius: 20px 20px 0 0;background-color: rgba(0, 0, 0, .65);overflow: hidden;padding: 20px 20px 15px;box-sizing: border-box;}
.hover-1 { left: 30px; }
.hover-2 { left: 50%; transform: translate(-50%, 0%); }
.hover-3 { right: 30px; }
.giving-hover:hover { background-position: 0 100%; }
.giving-link { text-decoration: none; font-size: 1.2em; color: #fff; text-align: center; }
.description { padding-bottom: 2px; }
.giving-link p { margin-bottom: 20px; margin-top: 0px; }
.giving-link p:last-child { margin-bottom: 0px; }
.givingTitle { position: relative; margin: 0 0px 12px; padding-bottom: 14px; }
.givingTitle:before {content: '';position: absolute;background: #ffc658;height: 2px;left: 0%;right: 0%;bottom: 0px;}
a.readmore { border: 1px solid #ffc658; color: #fff; display: inline-block; padding: 10px 20px; text-decoration: none; }
a.readmore:hover { background-color: #000; border-color: transparent }
.giving-link:hover { color: #f8f8f8; }
.no-show { visibility: hidden; max-height: 0; transition: max-height 1s ease-out; overflow: hidden; }
.fade-in { -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; max-height: 1000px; transition: max-height 2s ease-in; }
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media(max-width:1199px) {
  .giving-hover { max-width: 310px; }
  .givingTitle { font-size: 1em; }
}
@media(max-width:1024px) {
  .heroDescription {/* margin-top: 30px; */padding-top: 63vh;}
  .giving-hover { max-width: 100%; position: static; transform: translate(0%, 0%); border-radius: 10px; }
  .giving-link { width: calc(100% - 20px); display: inline-block; margin: 0px 10px 10px; }
  .no-show { overflow: inherit; }
  .HeroBanner {height: auto;}
  .parallax {height: 60vh;/* position: relative; */}
  .description.fade-in { visibility: initial; max-height: inherit; }
  .description { visibility: initial; max-height: inherit; display: none; }
  .givingTitle {font-size: 1em;/* text-align: left; */}
  .givingTitle:after {
    content: '';
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #ccc;
    /* height: 2px; */
    margin-left: 10px;
    /* right: 0%; */
    margin-top: 5px;
}
.titleActive:after {border-top: 0;border-bottom: 8px solid #ccc;margin-top: 3px;}
.giving-title {
    line-height: 60px;
    padding-left: 30px;
    padding-right: 30px;
}
}
@media(max-width:767px) {
  .parallax {height: 70vh;background-attachment: initial;}
  .heroDescription {
    padding-top: 73vh;
}
  .giving-title h1 { font-size: 25px; line-height: 60px; padding-left: 20px; padding-right: 20px; top: 20%; animation-name: leftFadeIn; animation-duration: 3s; animation-fill-mode: forwards; }
}
@media(max-width:414px) {
  .parallax {height: 40vh;}
    .heroDescription {
    padding-top: 43vh;
}
}