/*==============+
| CUSTOM STYLES |
+==============*/
/* Global */
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Merriweather', serif;
    font-size: 11pt;
    font-weight: 300;
}
    @media (min-width: 576px) {
        body {
            font-size: 14pt;
        }
    }

img {
    width: auto;
    max-width: 100%;
}

a {
    color: #989898;
}

footer a:active, footer a:hover, footer a:visited {
    color: #ffffff;
}

/* Bootstrap Custom Styles */
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border: none;
    z-index: 999;
    padding: .25rem;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.navbar-nav-expanded {
    padding: 30px;
    background: #FFFFFF;
}
    @media (min-width: 768px) {
        .navbar-nav-expanded {
            width: 300px;
            float: right;
        }
    }
    @media (min-width: 992px) {
        .navbar-nav-expanded {
            background: transparent;
        }
    }

#main-nav {
    position: absolute; 
    top: 66px; 
    left: 0;
    width: 100%;
    font-size: 10pt;
}
    @media (min-width: 576px) {
        #main-nav {
            width: 300px;
            top: 80px;
            left: auto;
            right: 15px;
        }
    }
    @media (min-width: 992px) {
        #main-nav {
            position: static;
            width: auto;
        }
    }

#main-nav .navbar-nav .nav-link {
    color: #303030;
    -webkit-transition: all .3s;
    transition: all .3s;
}
    @media (min-width: 992px) {
        #main-nav .navbar-nav .nav-link {
            color: #FFFFFF;
        }
    }

.scrolled-nav #main-nav .navbar-nav .nav-link {
    color: #303030;
}

#main-nav-list {
    position: relative;
    width: 100%;
}

.btn {
    font-size: 11pt;
}
    @media (min-width: 576px) {
        .btn {
            font-size: 14pt;
        }
    }

.btn-primary {
    color: #fff;
    background-color: #003595;
    border-color: #003595;
}

.btn-primary:hover {
   background-color: #005AB3;
   border-color: #005AB3;
}

.btn-outline-primary {
    color: #003595;
    background-color: transparent;
    background-image: none;
    border-color: #003595;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #003595;
    border-color: #003595;
}

/* Hover.css Custom Styles */
.hvr-underline-from-center:before {
    left: 50%;
    right: 50%;
    background: #FFFFFF;
    height: 1px;
}

.scrolled-nav .hvr-underline-from-center:before {
    background: #303030;
}

.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
    left: 25%;
    right: 25%;
}

/* Main Navigation */
.navbar-main {
    height: 86px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.navbar-main.scrolled-nav { /* Update main navbar height on scroll */
    height: 66px;
    background: rgba(255,255,255,1) !important;
    box-shadow: 0 5px 10px #666666;
}

.navbar-brand {
    width: 236px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.scrolled-nav .navbar-brand  { /* Update logo width on scroll */
    width: 200px;
}

.icon-bar {
    transition: all 0.2s;
    display: block;
    width: 33px;
    height: 3px;
    border-radius: 1px;
    margin-left: 2px;
    background-color: #FFFFFF;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.scrolled-nav .icon-bar {
    background-color: #303030;
}

.top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.middle-bar {
    opacity: 0;
    margin-top: 6px;
}

.bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
    margin-top: 6px;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);  
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0); 
}

.navbar-nav {
    margin: 0 auto;
}

/* Hero Image */
.hero-image {
    height: 75%;
    position: relative;
}

.text-shadow {
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.image-bg-container-xl {
    height: 75vh;
    min-height: 550px;
    width: 100%;
    position: relative;
}

.image-bg-xl {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
}

.image-bg-overlay:after {
    content: "";
    background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00ffffff',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.bg-element-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
    width: 100%;
    z-index: 2;
    padding: 5px 15px;
}

.bg-text-1 {
    color: #FFFFFF;
    font-size: 30pt;
    font-family: 'Oswald', sans-serif;
}
    @media (min-width: 576px) {
        .bg-text-1 {
            font-size: 45pt;
        }
    }
    @media (min-width: 768px) {
        .bg-text-1 {
            font-size: 65pt;
        }
    }

.bg-text-2 {
    color: #FFFFFF;
    font-size: 16pt;
}
    @media (min-width: 576px) {
        .bg-text-2 {
            font-size: 18pt;
        }
    }
    @media (min-width: 768px) {
        .bg-text-2 {
            font-size: 20pt;
        }
    }

/* Miscellanous */
.border-test {
    border: 1px solid red;
}

.cursor-pointer:hover {
    cursor: pointer;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-decoration-underline:hover {
    text-decoration: none;
}

.text-decoration-none {
    text-decoration: none;
}

.border-none {
    border: none;
}

.width-auto {
    width: auto;
}

.width-100-percent {
    width: 100%;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: rgba(0,0,0,0.8);
}

.overlay.enabled {
    display: initial;
}

.centered-text {
    position: absolute;
    max-width: 90%;
    max-height: 300px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.large {
    font-size: 18pt;
}
    @media (min-width: 576px) {
        .large {
            font-size: 30pt;
        }
    }

.cart-count {
    color: #FFFFFF;
    background: #FF0000;
    display: inline-block;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: .25rem;
}

.line-height-1-25 {
    line-height: 1.25;
}

.fund-tooltip {
    display: none;
}
    @media (min-width: 576px) {
        .fund-tooltip {
            position: relative;
            display: inline-block;
            font-family: 'Oswald', sans-serif;
            color: #FFFFFF;
            background: #000000;
            border-radius: 5px;
            padding: 0 5px;
            /*position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;*/
        }
    }

.fund-tooltip:hover {
    cursor: pointer;
}

.fund-tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 1s;
}

.fund-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.fund-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Colors */
.white {
    color: #ffffff;
}

.black {
    color: #000000;
}

/* Backgrounds */
.bg-black {
    background: #000000;
}

.bg-white {
    background: #ffffff;
}

.bg-white-semi-transparent {
    background: rgba(255,255,255,0.6);
}

.bg-transparent {
    background: transparent;
}

.bg-light-gray {
    background: #F6F6F6;
}

.bg-dark-gray {
    background: #303030;
}

/* Margins */
.margin-0-auto {
    margin: 0 auto;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

/* Padding */
.padding-top-15 {
    padding-top: 15px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-top-50 {
    padding-top: 50px;
}

.padding-bottom-50 {
    padding-bottom: 50px;
}

/* Headings */
.h1-heading {
    font-family: 'Homemade Apple', cursive;
    font-size: 16pt;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}
    @media only screen and (min-width: 576px) {
        .h1-heading {
            font-size: 20pt;
        }
    }

.scrolled-nav .h1-heading {
    color: #303030;
}

.h2-heading-dark {
    font-family: 'Oswald', sans-serif;
    font-size: 14pt;
    color: #303030;
}
    @media only screen and (min-width: 576px) {
        .h2-heading-dark {
            font-size: 26pt;
        }
    }

/* Pledge Wall Page */
.grid-item {
    width: 300px;
}

.pledge-amount {
    font-family: 'Oswald', sans-serif;
    font-size: 12pt;
    color: #303030;
}
    @media only screen and (min-width: 576px) {
        .pledge-amount {
            font-size: 16pt;
        }
    }

.fund-image {
    width: 75px;
    margin-right: 15px;
}