| body { |
| font-family: 'Montserrat', 'Source Sans Pro','Helvetica Neue', Helvetica, Arial, sans-serif; |
| font-weight: 300; |
| padding-top:60px; |
| background-color: #fff; |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| font-family: 'Montserrat', 'Source Sans Pro','Helvetica Neue', Helvetica, Arial, sans-serif; |
| text-transform: uppercase; |
| font-weight: 600; |
| } |
| |
| h3.h3-small { |
| font-size: 20px; |
| } |
| a { |
| word-break: normal; |
| } |
| |
| section { |
| padding: 25px 0 50px; |
| } |
| |
| .visible-home { |
| display: none; |
| } |
| |
| #home .hidden-home { |
| display: none; |
| } |
| |
| #home .visible-home { |
| display: block; |
| } |
| |
| .public-good .btn { |
| margin: 0 10px; |
| } |
| .about-foundation .btn { |
| margin-right: 10px; |
| } |
| |
| .navbar-default .navbar-toggle { |
| border: none; |
| } |
| |
| .navbar-toggle { |
| margin-top: 0px; |
| margin-bottom: 0px; |
| } |
| |
| .main .navbar-nav { |
| display: none; |
| } |
| |
| .search-form { |
| right: 0; |
| left: initial; |
| width: 500px; |
| max-width: 90vw; |
| } |
| |
| @media (min-width: 768px) { |
| .main .navbar-nav { |
| display: flex; |
| } |
| .navbar-nav { |
| float: none; |
| } |
| .navbar-justified { |
| display: flex; |
| justify-content: space-between; |
| } |
| } |
| |
| /* SUBMENU STYLING */ |
| .dropdown-submenu li { |
| padding-left: 20px; |
| } |
| |
| /* HOME MAIN HEADER */ |
| #home #main-header { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| align-items: flex-start; |
| padding-bottom: 20px; |
| border-bottom: 1px solid rgb(48, 50, 132); |
| } |
| |
| #home #main-header .main { |
| width: 100%; |
| padding: 0 20px; |
| } |
| |
| #home #main-header .sideImg { |
| width: 33%; |
| margin-right: 20px |
| } |
| |
| #home #main-header .sideImg:first-child { |
| order: 1; |
| } #home #main-header .sideImg:nth-child(3) { |
| order: 2; |
| } |
| |
| |
| |
| #home #main-header h2 { |
| margin-top: 40px; |
| padding-bottom: 20px; |
| border-bottom: 1px solid rgba(48,50,132); |
| margin-bottom: 20px; |
| } |
| |
| @media (min-width: 768px) { |
| #home #main-header .sideImg:first-child { |
| order: 0; |
| } |
| |
| #home #main-header .main { |
| width: 70%; |
| } |
| |
| #home #main-header .sideImg { |
| width: 15%; |
| padding-top: 50px; |
| margin-right: 0; |
| } |
| #home #main-header .sideImg:nth-child(3) { |
| order: 0; |
| } |
| } |
| |
| /* SECOND TIER HEADER */ |
| #main-header { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| align-items: center; |
| padding-bottom: 20px; |
| border-bottom: 1px solid rgb(48, 50, 132); |
| } |
| |
| #main-header .main { |
| width: 100%; |
| padding: 0 20px; |
| } |
| |
| #home #main-header .sideImg:first-child, |
| #main-header .sideImg:nth-child(3) { |
| max-width: 125px; |
| } |
| |
| #home #main-header .sideImg:nth-child(3) { |
| margin-right: 0; |
| } |
| |
| #main-header h2 { |
| padding-bottom: 20px; |
| border-bottom: 1px solid rgba(48,50,132); |
| margin-bottom: 20px; |
| font-size: 20px; |
| } |
| |
| @media (min-width: 768px) { |
| #main-header .sideImg:first-child { |
| order: 0; |
| width: 20%; |
| padding-right: 10px; |
| } |
| |
| #main-header .main { |
| width: 70%; |
| } |
| |
| #main-header h2 { |
| font-size: 20px; |
| } |
| |
| #main-header .sideImg:nth-child(3) { |
| width: 10%; |
| margin-right: 0; |
| } |
| } |
| |
| |
| ul.white > li > a, |
| a.white { |
| color: #ddd; |
| } |
| |
| ul.white > li > a:hover, |
| a.white:hover { |
| color: #fff; |
| } |
| |
| .white { |
| color: #fff; |
| } |
| |
| .bg-gray { |
| background: #eee; |
| } |
| .bg-white { |
| background: #fff; |
| } |
| |
| .letter-header { |
| display: block; |
| background-color: #f3f3f3; |
| color: #303284; |
| text-align: center; |
| } |
| |
| .list-unstyled { |
| list-style: none; |
| } |
| |
| .no-top-margin{ |
| margin-top: 0px; |
| } |
| |
| .no-btm-margin { |
| margin-bottom: 0px; |
| } |
| |
| #apacheQuotes { |
| padding: 25px 0; |
| } |
| |
| #apacheQuotes blockquote { |
| border: none; |
| } |
| /* |
| #apacheQuotes blockquote p { |
| font-size: 2em; |
| }*/ |
| |
| #apacheQuotes blockquote footer { |
| color: rgba(255,255,255,.8); |
| } |
| |
| @media (min-width: 768px) { |
| #apacheQuotes blockquote p { |
| font-size: 1.5em; |
| } |
| } |
| |
| @media (min-width: 992px) { |
| #apacheQuotes blockquote p { |
| font-size: 2em; |
| } |
| } |
| |
| .video-responsive{ |
| overflow:hidden; |
| padding-bottom:56.25%; |
| position:relative; |
| height:0; |
| } |
| .video-responsive iframe{ |
| left:0; |
| top:0; |
| height:100%; |
| width:100%; |
| position:absolute; |
| } |
| |
| #video-thumbnails button { |
| margin: 0; |
| padding: 0; |
| border: none; |
| } |
| |
| /* Custom Left Tabs */ |
| .tabs-left > .nav-tabs { |
| border-bottom: 0; |
| } |
| |
| .tabs-left > .nav-tabs > li, |
| .tabs-right > .nav-tabs > li { |
| float: none; |
| } |
| |
| .tabs-left > .nav-tabs > li > a, |
| .tabs-right > .nav-tabs > li > a { |
| min-width: 74px; |
| margin-right: 0; |
| margin-bottom: 3px; |
| border: none; |
| } |
| |
| .tabs-left > .nav-tabs > li > a:hover:after { |
| content: ""; |
| position: absolute; |
| right: -24px; |
| top: 50%; |
| width: 0; |
| height: 0; |
| border-top: 25px solid transparent; |
| border-bottom: 25px solid transparent; |
| border-left: 25px solid #eee; |
| margin-top: -25px; |
| } |
| |
| .tabs-left > .nav-tabs > .active > a:after, |
| .tabs-left > .nav-tabs > .active > a:hover:after { |
| content: ""; |
| position: absolute; |
| right: -24px; |
| top: 50%; |
| width: 0; |
| height: 0; |
| border-top: 25px solid transparent; |
| border-bottom: 25px solid transparent; |
| border-left: 25px solid #282661; |
| margin-top: -25px; |
| } |
| |
| |
| .tabs-left > .nav-tabs > li > a { |
| margin-right: -1px; |
| width: 90%; |
| } |
| |
| .tabs-left > .nav-tabs > li > a:hover, |
| .tabs-left > .nav-tabs > li > a:focus { |
| border: none; |
| } |
| |
| .projectCategory { |
| display: inline-block; |
| position: relative; |
| top: -.4em; |
| font-size: .5em; |
| text-transform: capitalize; |
| text-align: center; |
| white-space: nowrap; |
| vertical-align: baseline; |
| background-color: #EA7826; |
| color: #fff; |
| padding: .2em .6em .3em; |
| margin-right: 5px; |
| border-radius: .25em; |
| } |
| |
| /* Cards */ |
| |
| .card { |
| background-color: #fff; |
| display: flex; |
| flex-direction: column; |
| } |
| /* Highlights & Updates*/ |
| .highlights { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| } |
| |
| .highlights .card:hover, |
| .updates .card:hover { |
| box-shadow: 0px 5px 15px #aaa; |
| } |
| |
| .highlights .card { |
| margin-bottom: 20px; |
| } |
| |
| @media (min-width: 768px) { |
| .highlights .card { |
| width: calc(50% - 10%); |
| } |
| } |
| |
| @media (min-width: 992px) { |
| .highlights .card { |
| width: calc(25% - 10px); |
| margin-bottom: 0; |
| } |
| } |
| |
| .highlights .card img { |
| width: 100%; |
| object-fit: cover; |
| } |
| |
| .highlights .card .card-content { |
| padding: 10px 15px; |
| } |
| |
| .highlights .card a { |
| color: #333; |
| } |
| |
| .highlights .card a:hover { |
| text-decoration: none; |
| cursor: pointer; |
| } |
| |
| .highlights .card a h4 { |
| text-decoration: underline; |
| } |
| |
| .updates .card { |
| border: 1px solid #333; |
| padding: 10px 15px; |
| } |
| |
| .updates .card .content { |
| padding-bottom: 20px; |
| } |
| |
| .updates { |
| display: grid; |
| grid-gap: 20px; |
| grid-template-columns: 1fr; |
| } |
| |
| @media (min-width: 768px) { |
| .updates { |
| grid-template-columns: 1fr 1fr 1fr; |
| } |
| |
| .updates .card:first-child { |
| grid-column-start: 1; |
| grid-column-end: -1; |
| } |
| } |
| |
| .updates .card a.continue { |
| display: block; |
| margin-top: auto; |
| border-top: 1px solid rgb(48, 50, 132); |
| padding-top: 10px; |
| font-weight: 700; |
| text-align: right; |
| } |
| |
| /* Slideshow container */ |
| .slideshow-container { |
| position: relative; |
| } |
| |
| /* Slides */ |
| .mySlides { |
| display: none; |
| padding: 0px; |
| text-align: center; |
| } |
| |
| /* Next & previous buttons */ |
| .prev, .next { |
| cursor: pointer; |
| position: absolute; |
| top: 50%; |
| width: auto; |
| padding: 16px; |
| color: rgba(255,255,255,.8); |
| font-weight: bold; |
| font-size: 20px; |
| border-radius: 0 3px 3px 0; |
| user-select: none; |
| transform: translatey(-25%); |
| } |
| |
| /* Position the "next button" to the right */ |
| .next { |
| right: 0; |
| } |
| |
| /* On hover, add a black background color with a little bit see-through */ |
| .prev:hover, .next:hover { |
| background-color: rgba(0,0,0,0.3); |
| color: white; |
| text-decoration: none; |
| } |
| |
| /* The dot/bullet/indicator container */ |
| .dot-container { |
| text-align: center; |
| padding: 0 20px 20px; |
| margin-top: -20px; |
| } |
| |
| /* The dots/bullets/indicators */ |
| .dot { |
| cursor: pointer; |
| height: 10px; |
| width: 10px; |
| margin: 0 2px; |
| background-color: rgba(255,255,255,.8); |
| border-radius: 50%; |
| display: inline-block; |
| transition: background-color 0.6s ease; |
| } |
| |
| /* Add a background color to the active dot/circle */ |
| .active.dot, |
| .dot:hover { |
| background-color: rgba(255,255,255,.2); |
| } |
| |
| /* Media Adjustments */ |
| @media (max-width: 992px){ |
| .navbar-nav > li > a { |
| padding-left: 5px; |
| } |
| } |
| |
| /* ensure that anchor links are not hidden behind the header */ |
| :target::before { |
| display: block; |
| content: " "; |
| height: 42px; |
| margin-top: -42px; |
| visibility: hidden; |
| } |
| |
| /* Add Skip to Content Link */ |
| #skiptocontent a { |
| padding: 10px 14px; |
| position: absolute; |
| top: -40px; |
| left: 0px; |
| color: white; |
| border-bottom-right-radius: 8px; |
| background: #662F8F; |
| webkit-transition: top 1s ease-out; |
| transition: top 1s ease-out; |
| z-index: 9999; |
| } |
| |
| #skiptocontent a:focus { |
| position: absolute; |
| left: 0; |
| top: 0; |
| outline: none; |
| webkit-transition: top .1s ease-in; |
| transition: top .1s ease-in; |
| } |