html, body {
    height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.nav-text{
    color:#0099C7 !important;
    font-family: sans-serif;
}
.nav-text:hover{
    color:#FF9500 !important;
}
.person-divider{
    background: black;

}
.regular-text{
    font-size:21px;
}
.front-page-text{
    font-size: 50px;
    margin:0 10px;
    font-weight: bold;
    text-align: center;
}
.support-us{
    margin:50px auto;
    width: 15%;
    display:block;
}
.contact-logo{
    margin: 0 5px;
}
.contact-logo:hover{
    text-decoration: none;
}
.navbar-nav > li > .dropdown-menu a:link,
.navbar-nav > li > .dropdown-menu a:hover { background-color: black;}

@media screen and (max-width:8in) {
    .person-holder{
        flex-direction: column;
    }
    .person-image{
        min-width:75% !important;
        margin-bottom: 50px;
    }
    .person-text{
        min-width:85% !important;
    }
    .front-page-text{
        font-size: 32px;
    }
    .program-holder{
        flex-direction:column;
    }
    .program{
        min-width:100%;
    }
    .btn-donate{
        min-width:60%;
    }
    .support-us{
        min-width:30%;
    }
    .sponsor-bx{
        min-width: 95%;
    }
    .article{
        min-width:85%;
    }
    .card-holder{
        flex-direction: column;
    }
    .card{
        min-width:85%;
    }
    .front-page-holder{
        height:auto !important;
    }
    .ca3-scroll-down-arrow{
        visibility: hidden;
    }



}
@media screen and (min-width:8in) {
    .program-holder{
        height:inherit;
    }
}
.frontpage-image{
    width:100%;
    margin:10px auto;
    display: block;
}
.zoom-in-sm{
    transition: transform .4s;
}
.zoom-in-sm:hover{
    transform:scale(1.03);
}
.zoom-in{
    transition:transform .4s;
}
.zoom-in:hover{
    transform:scale(1.05);
}
.zoom-in-lg{
    transition:transform .4s;
}
.zoom-in-lg:hover{
    transform:scale(1.25);
}
.card-holder{
/*    https://getbootstrap.com/docs/4.0/components/card/*/
    display: flex;
    width:90%;
    margin:0 auto;
    align-items: center;
}
.card{
    width:30%;
    height:575px;
    margin:10px auto;
    border-radius: 50px;
    padding:10px 20px;
    align-items: center;
    transition: box-shadow .3s;
}
.card:hover{
    box-shadow: 0 0 11px rgba(33,33,33,.2);
}
.card img{
    transition:transform .3s;
}
.card:hover img{
    transform:scale(1.05);
}
.person-holder{
    display: flex;
    margin:55px 5%;
    align-items: center;
}
.person-image{
    width: 37%;
    border-radius: 50px;
}
.person-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 5%;
    width:61%;
}
.site-holder{
    width:100%;
    height:100vh;
    display: flex;
    flex-direction: column;
}
.program-holder{
    display: flex;
    max-width:100%;
}
.program{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:50%;
}
.program-image{
    width:50%;
}
.article{
    width:50%;
    margin: 20px auto;
}
.article-text{
    font-size: 24px;
}
.article-caption{
    font-size:18px;
    text-align: center;
    margin: 10px auto;
}
.article-image{
    width:75%;
    margin: 0 12.5%;
}
.article-image-tall{
    width:60%;
    margin: 10px 20%;
}
.blurb{
    width:75%;
    margin: 25px 0;
}
.btn-donate{
    margin:10px auto;
    display:block;
    width:30%;
    height:100px;
    font-size: 50px;
}

.learn-more{
    font-size:40px;
    margin: 10px 0;
    font-family: 'Josefin Sans',sans-serif;
}
.article-header{
    font-weight: bold;
    font-size:32px;
}

.link-orange, .link-blue {
    /* RESET */
    text-decoration: none;
    line-height: 1;

    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 5px 5px;
    overflow: hidden;
    color: black;
    vertical-align: bottom;
    transition: color .3s ease-out;
}

.link-orange::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translateY(calc(100% - 2px));
    width: 100%;
    height: 100%;
    background-image: linear-gradient(60deg, #FF9500, #FF9500);
    transition: transform .25s ease-out;
}

.link-blue::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translateY(calc(100% - 2px));
    width: 100%;
    height: 100%;
    background-image: linear-gradient(60deg, #0099C7, #0099C7);
    transition: transform .25s ease-out;
}

.link-orange:hover, .link-blue:hover{
    color:black;
}
.link-orange:hover::before, .link-blue:hover::before {
    transform: translateY(0);
    transition: transform .25s ease-out;
}

.sponsor-divider{
    background: black;
}

.sponsor-bx{
    width:75%;
    margin:100px auto;
}

.sponsor-image{
    width:22.666%;
    margin:25px 5%;
}

h1, h2, h3, h4, h5, h6, p{
    font-family: 'Josefin Sans',sans-serif;
}

.underline{
    background: black;
    margin-top:0;
}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,153,199, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: #0099C7;
}

.custom-toggler:hover{
    border-color:#FF9500;
}

.btn-donate {
    color: #FFFFFF;
    background-color: #0099C7;
    border-color: #0099C7;
}

.btn-donate:hover,
.btn-donate:focus,
.btn-donate:active,
.btn-donate.active,
.open .dropdown-toggle.btn-donate {
    color: #FFFFFF;
    background-color: #02789C;
    border-color: #0099C7;
}

.btn-donate:active,
.btn-donate.active,
.open .dropdown-toggle.btn-donate {
    background-image: none;
}

.btn-donate.disabled,
.btn-donate[disabled],
fieldset[disabled] .btn-donate,
.btn-donate.disabled:hover,
.btn-donate[disabled]:hover,
fieldset[disabled] .btn-donate:hover,
.btn-donate.disabled:focus,
.btn-donate[disabled]:focus,
fieldset[disabled] .btn-donate:focus,
.btn-donate.disabled:active,
.btn-donate[disabled]:active,
fieldset[disabled] .btn-donate:active,
.btn-donate.disabled.active,
.btn-donate[disabled].active,
fieldset[disabled] .btn-donate.active {
    background-color: #0099C7;
    border-color: #0099C7;
}

.btn-donate .badge {
    color: #0099C7;
    background-color: #FFFFFF;
}
/* info on fading in: https://stackoverflow.com/questions/27747970/how-to-make-images-fade-visible-when-im-scrolling/27748638*/
.fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ca3-scroll-down-arrow {
    background-image: url("http://image.flaticon.com/icons/svg/3/3907.svg");
    background-size: contain;
    background-repeat: no-repeat;

}

.ca3-scroll-down-link {
    cursor:pointer;
    height: 60px;
    width: 80px;
    margin: 0px 0 0 -40px;
    line-height: 60px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    color: #FFF;
    text-align: center;
    font-size: 70px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

    -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
    -moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
    animation:         ca3_fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes ca3_fade_move_down {
    0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes ca3_fade_move_down {
    0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes ca3_fade_move_down {
    0%   { transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,20px); opacity: 0; }
}