body {margin-top:90px;}
    h1 {font-size:32px;}
    h2 {font-size:30px; padding-top:16px; padding-bottom:9px;}
    h3 {font-size:28px; padding-top:16px;}
    h4 {font-size:26px; padding-top:14px;}
    h5 {font-size:24px; padding-top:14px;}
    h6 {font-size:1rem; padding-top:14px;}
    p {font-size:1rem; padding:3px 0px;}

    .navbar {background-color:#F9E10F; padding:0px; box-shadow: 0 4px 8px #000; z-index:999;}
    .navbar-brand {padding:0px;background-color:#F9E10F;}
     nav {background-color: #202C2A;}
    .navbar-brand img {padding:0px;margin:0px;}
    .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
    .nav-link {color: #202C2A; font-weight:bold; font-size: 14px; margin:0px 7px; border-bottom:solid 3px #F9E10F;-webkit-transition: border-bottom 0.6s ease;transition: border-bottom 0.6s ease;-webkit-transform: transition}
    .nav-link:hover {color:#202C2A; border-bottom:solid 3px #202C2A;}
    .dropdown-menu {margin: 0px; padding: 0px;}
    .dropdown-item {border-bottom:solid 1px #202C2A;padding: 8px 15px;}
    .dropdown-item:hover {background-color: #F9E10F;}
    .btn-danger {color: #fff;background-color: #B22222;border-color: #B22222; text-decoration: none;}
    .btn-danger:hover {background-color: #006400;border-color: #006400; text-decoration: none;}
    .btn-lg {font-size:26px; padding:15px;}
    #firstContainer {
     display:flex;
     margin-top:-12px;
     background-image: URL('/static/images/signature-of-hope-bg-01.jpg');
     background-repeat: no-repeat;
     background-position: center top;
     background-attachment: fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-color: #202C2A;
     height: 650px;
    }   
    .infoBox01 {
     padding:10px;
     position: inherit;
     top:180px;
     left:120px;
     width:500px;
     background-color:#202C2A;
    }
    .infoBoxHeader {
     margin:5px;
     color:#F9E10F;
     align-self: center;
    }
    .infoBoxHeader h1 {font-size:42px;}
    .infoBoxCopy {
     font-size:18px;
     color:#FFF;
     padding:0px 10px;
    }
    .npo {color:#F9E10F;}
    .infobox-col {
     padding:8px;
    }
    .infoBoxButton {
     background-color:#F9E10F;
     width:100%;
     margin:0px 0px 0px 0px;
     padding: 15px;
     font-size:26px;
     color:#202C2A;
     line-height:30px;
    }
    .infobox-col a {
     background-color: #F9E10F;
     border: solid 2px #202C2A;
     color: #202C2A;
    }
    .infobox-col a:hover {
     background-color: #202C2A;
     border: solid 2px #F9E10F;
     color: #F9E10F;
    }
    #secondContainer {
     padding: 40px 10px;
    }
#secondContainer h3 {padding:20px 0px;}
.fbCopy a {font-size:50px;margin:0px 25px;color:#F9E10F;}
.fbCopy a:hover {font-size:50px;margin:0px 25px;color:#3b5998;text-decoration: none;}
.twitterCopy a {font-size:50px;margin:0px 25px;color:#F9E10F;}
.twitterCopy a:hover {font-size:50px;margin:0px 25px;color:#0084b4;text-decoration: none;}
.youtubeCopy a {font-size:50px;margin:0px 25px;color:#F9E10F;}
.youtubeCopy a:hover {font-size:50px;margin:0px 25px;color:#FF0000;text-decoration: none;}
.linkedinCopy  a {font-size:50px;margin:0px 25px;color:#F9E10F;}
.linkedinCopy a:hover {font-size:50px;margin:0px 25px;color:#0077B5;text-decoration: none;}

#thirdContainer { 
 max-height: 600px !important;
 overflow: hidden;
}
.carousel-item {
 max-height:600px;
 min-height:200px;
}
.casrousel-caption h3 {
 font-size:36px;
}
.carousel-caption {
 font-size:18px;
}
.carousel a {
 background-color:#F9E10F;
 margin:0px 0px 0px 0px;
 padding: 15px;
 font-size:26px;
 color:#202C2A;
 border:solid 2px #202C2A;
}
.carousel a:hover {
 background-color:#202C2A;
 color:#F9E10F;
 border:solid 2px #F9E10F;
}
.carousel-indicators li {
 margin-right: 3px;
 margin-left: 3px;
 height:10px;  
 display: inline-block;
 text-indent: 0;
 cursor: pointer;
 border: none;
 background-color: #FFF;
}
.carousel-indicators .active {margin-right: 3px;margin-left: 3px;background-color: #F9E10F;}
.fourthContainer {position: relative;margin:0px;padding:40px 10px 50px 10px;color:#000;z-index: 700;}
.fourthContainer::before {content: "";position: absolute;top:0;bottom:0;right:0;left:0;z-index: -2;background-image:url('/static/images/signature-of-hope-bg-02.jpg');background-size: cover;background-position: center center;background-color: #202C2A;opacity: .6;}
.fourthContainer h2 {font-size:46px;}
.involved {margin-top:10px;}
.involved .card-body {padding:8px;}
.involved .btn {background-color:#F9E10F;border:solid 2px #F9E10F;padding:10px;width:100%;height:100%;}
.involved a {color:#202C2A; padding:15px; font-size:26px;}
.involved a:hover {color:#F9E10F;background-color:#202C2A;border:solid 2px #F9E10F;}
.involvedCard {width:100%;background-color:#202C2A;}
.card-img-top {height:180px; size: cover; overflow-y: hidden;}
.testimonial {padding-top:30px;height:85px;}
.testimonialPages {background-color:#e0e0e0; margin:15px; padding:30px!Important;}
.statement {font-size:20px;}
.statement span {color:#202C2A;font-size:18px;font-weight:bold}

#fifthContainer {padding:30px 0px 10px 0px!important; background-color: #E0E0E0;}
#fifthContainer img {padding-bottom:20px;}

footer {padding:50px 0px;background-color: #202C2A;color:#e4e3e3;}
footer h5 {font-size:18px;padding-top:12px;}
footer p {font-size:16px;margin:8px; line-height:1.3em;}
footer .bottomLinks a {color:#F9E10F;}
footer .bottomLinks a:hover {color:#e4e3e3;; text-decoration:none;}
.fbFooter a {font-size:40px;padding-right:5px;margin-top:10px;color:#F9E10F;}
.fbFooter a:hover {font-size:40px;padding-right:5px;margin-top:10px;color:#3b5998;text-decoration: none;}
.twitterFooter a {font-size:40px;padding-right:5px;margin-top:10px;color:#F9E10F;}
.twitterFooter a:hover {font-size:40px;padding-right:5px;margin-top:10px;color:#0084b4;text-decoration: none;}
.youTubeFooter a {font-size:40px;padding-right:5px;margin-top:10px;color:#F9E10F;}
.youTubeFooter a:hover {font-size:40px;padding-right:5px;margin-top:10px;color:#FF0000;text-decoration: none;}
.linkedinFooter a {font-size:40px;padding-right:5px;margin-top:10px;color:#F9E10F;}
.linkedinFooter a:hover {font-size:40px;padding-right:5px;margin-top:10px;color:#0077B5;text-decoration: none;}
.copywrite h1 {font-size:40px;}
.copywrite p {font-size:10px;line-height:18px;}
.footerAddy p {line-height:1.2em;}
.footerAddy a {color:#fff; text-decoration: none;}
.footerAddy a:hover {color:#F9E10F; text-decoration: none;}
.newsletter button {
 background-color:#F9E10F;
 width:100%;
 margin:0px 0px 0px 0px;
 padding: 10px;
 font-size:18px;
 font-weight:bold;
 color:#202C2A;
 border:solid 2px #202C2A;
}
.newsletter button:hover {
 background-color:#202C2A;
 color:#F9E10F;
 border:solid 2px #F9E10F;
 cursor: grab;
}
#copyWrapper {padding:20px 0px;}

blockquote {border-right:solid 3px #202C2A;margin:10px 0px; padding:20px!important; background-color:#e0e0e0;}
.values {position: relative;margin:0px;padding:40px 10px 50px 10px;color:#000;z-index: 700;}
.values::before {content: "";position: absolute;top:0;bottom:0;right:0;left:0;z-index: -2;background-image:url('/static/images/signature-of-hope-values.jpg');background-size: cover;background-position: center center;background-color: #202C2A;opacity: .4;}
.values h2 {font-size:32px;}
.vision {border-right:solid 3px #202C2A; margin-top:20px;}

.ourTeam {padding:10px 0px;}
.ourTeam a {color:#000; text-decoration: none;}
.ourTeam a:hover {color:#006400; text-decoration: none;}

#craig {padding:10px 5px;}
#mike {padding:10px 5px;}
#kieron {padding:10px 5px;}
#bryan {padding:10px 5px;}
#natalie {padding:10px 5px;}

#ourPartners {padding:20px 0px;}
#ourPartners a {color: #006400;}
#ourPartners a:hover {color:#202C2A;}

.financials btn {color:#fff;}
.financials a {
 padding:15px;
 margin:5px 0px;
 width:180px;
 color:#202C2A!important;
 font-size:26px;
 background-color:#F9E10F;
 border: solid 2px #202C2A;
}
.financials a:hover {
 padding:15px;
 width:180px;
 color:#F9E10F!important;
 font-size:26px;
 background-color:#202C2A;
 border: solid 2px #F9E10F;
}

.changeRight {background-color:#A0A0A0; color:#000; border:solid 1px #000; padding:25px;}
.change h2 { color:#F3E29D; font-size:20px; padding-top:15px;padding-bottom:0px;}
.change p {padding:2px 0px;}

.blogFeature {display:none;margin:0px; padding:0px;}
.blogFeature h4 {font-size:16px; padding-left:8px; padding-top:10;}
.blogFeature a {color:#000000;}

#stories img {
 padding:5px;
 margin:-1px;
}

#back-to-top {
 display:none;
 position: fixed;
 right:20px;
 bottom:20px;
 width:40px;
 height:40px;
 border:solid 1px #F9E10F;
 background: #202C2A url('/static/images/cd-top-arrow.svg') no-repeat center 50%; z-index:999;opacity: 1;
}
#back-to-top:hover {
 cursor: pointer;
 opacity:0.6!important;
}

.message {
 background-color:#F9E10F;
 margin:0px 0px 0px 0px;
 padding: 10px;
 font-size:18px;
 font-weight:bold;
 color:#202C2A;
 border:solid 2px #202C2A;
}
.message:hover {
 background-color:#202C2A;
 color:#F9E10F;
 border:solid 2px #F9E10F;
 cursor: grab;
}

.blogFeature .card {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 background-image: linear-gradient(to right, rgba(214,214,214,0.5), rgba(214,214,214,0.5));

}
.blogFeature .card:hover {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 background-image: linear-gradient(to right, rgba(214,214,214,0.9), rgba(214,214,214,0.9));
}

.newsCard {
 background-color: #E0E0E0;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 /* background-image: linear-gradient(to right, rgba(214,214,214,0.9), rgba(214,214,214,0.9)); */
 margin:10px 7px;
 padding:10px;
}
.newsCard:hover {
 background-image: linear-gradient(to right, rgba(214,214,214,0.5), rgba(214,214,214,0.5));
}


#test {text-align: right; font-size:30px; text-decoration: underline;}



@media (max-width:1500px) {
.devider {top:-50px;}
}

@media (max-width:1200px) {
.infoBoxHeader h1 {font-size:36px;}
.infoBoxCopy {font-size:16px;}
.devider {top:-43px;}
.copywrite h1 {font-size:30px;}
.donateNav {margin:5px 10px 20px 5px;}
}
@media (max-width:992px) {
.infoBoxHeader h1 {font-size:34px;}
.statement {font-size:16px;}
.statement span {font-size:14px;}
.card-img-top {height:120px; size: cover; overflow-y: hidden;}
.fourthContainer h2 {font-size:34px;}
#fifthContainer {padding:20px 10px 10px 10px;}
.devider {top:-38px;}
.copywrite h1 {font-size:25px;}
.infoBoxButton {padding:10px; font-size:18px;}
.carousel a {padding:10px; font-size:18px;}
.involved a {padding:10px; font-size:18px;}
}
@media (max-width:770px) {
 body {margin-top:60px;}
 .logo {width: 90px; height: auto;}
 .infoBox01 {top:50px; left:10px; max-width:350px;}
 .infoBoxHeader h1 {font-size:32px;padding:10px;}
 .infoBoxButton {font-size:18px;padding:10px;}
 .carousel a {font-size:18px;padding:10px;}
 .involved a {font-size:18px;padding:10px;}
 .card-img-top {height:auto; size: auto; overflow-y: hidden;}
 #secondContainer {padding:30px 0px;}
 .fourthContainer h2 {font-size:32px;}
 #fifthContainer {padding:20px 10px 10px 10px;}
 .copywrite h1 {font-size:24px;}
 .changeRight {margin:20px 15px;}
}
@media (max-width:425px) {
 
 h1 {font-size:34px;}
 h2 {font-size:22px; padding-top:14px;}
 h3 {font-size:20px; padding-top:14px;}
 h4 {font-size:18px; padding-top:12px;}
 h5 {font-size:16px; padding-top:12px;}
 p {padding:7px 0px; font-size:0.9rem;}
 
 #firstContainer {margin-top:-18px;}
 .infoBoxHeader h1 {font-size:30px;}
 .infoBox01 {top:30px; left:10px; width:280px;}
 #secondContainer {padding:20px 0px;}
 #secondContainer h3 {font-size:22px;}
 .fbCopy a {font-size:50px;margin:10px 25px;color:#F9E10F;}
 .fbCopy a:hover {font-size:50px;margin:10px 25px;color:#3b5998;text-decoration: none;}
 .twitterCopy a {font-size:50px;margin:10px 25px;color:#F9E10F;}
 .twitterCopy a:hover {font-size:50px;margin:10px 25px;color:#0084b4;text-decoration: none;}
 .youtubeCopy a {font-size:50px;margin:10px 25px;color:#F9E10F;}
 .youtubeCopy a:hover {font-size:50px;margin:10px 25px;color:#FF0000;text-decoration: none;}
 .linkedinCopy  a {font-size:50px;margin:10px 25px;color:#F9E10F;}
 .linkedinCopy a:hover {font-size:50px;margin:10px 25px;color:#0077B5;text-decoration: none;}
 carousel-inner {min-height:300px;}
 .carousel a {font-size:18px;padding:10px;}
 .fourthContainer h2 {font-size:30px;}
 #fifthContainer {padding:20px 10px 10px 10px;}
 .btn-lg {font-size:20px; padding:10px;}
 #craig {padding:10px 0px;}
 #mike {padding:10px 0px;}
 #kieron {padding:10px 0px;}
 #bryan {padding:10px 0px;}
 .change {font-size:16px;}
 #back-to-top {width:30px; height:30px; right:5px; bottom:5px;}
}
@media (max-width:360px) {
 .infoBox01 {width:100%; padding-left:0px; margin-left:-10px; align-self: center;}
 .infoBoxHeader h1 {font-size:26px;}
 .fourthContainer h2 {font-size:28px;}
 .infoBoxCopy {font-size:11px!important;}
 p {font-size:0.9rem;}
 .infoBoxButton {padding:8px; font-size:22px; line-height:26px;}
 
 #fifthContainer {padding:20px 10px 10px 10px;}
 .btn-lg {font-size:16px; padding:10px;}
 #change h2 {color:#F3E29D; font-size:16px;}
}