/* ===== imports ===== */ @import url('flexmenu.css?version=02152019'); /*@import url('bootstrap.min.css?version=02152019');*/ @import url('/_include/bootstrap-5.2.3-dist/css/bootstrap.min.css?version=5.2.3'); @import url('styles.css?version=02152019'); big { /*override because client used the tag to increase text SMH */ font: 400 1rem 'Open Sans', Arial, Sans-serif; } a { color: #AC1E2D; text-decoration: none; } a:visited { color: #AC1E2D; text-decoration: underline; } a:hover { color: #7a4d80; text-decoration: none; } a:active { color: #AC1E2D; text-decoration: none; } /* ===== flexMenu ===== */ header.flexmenu { display: none; } /* ====== utility =======*/ header.utility { background: #E3E3E3; } header.utility { } .utilNav { } .utilNav ul { margin: 0; padding: 0; font: 400 .75em 'Open Sans', Arial, Sans-serif; text-transform: uppercase; letter-spacing: .1em; } .utilNav li { display: block; float: left; padding: .938em 1.2em; } .utilNav li.selected { display: block; background: #FFF; color:#AC1E2D; } .utilNav li.selected a { color: #592C5F; } .utilNav li a { color:#6E6E6E; } .utilNav li a:hover { color: #592C5F; } .afTag { font: 300 1.6em/1.2em 'Open Sans Condensed', Arial, Sans-serif; color: #592c5f; } .afDonate a { background: #AC1E2D; color: #FFF; border: 1px solid #AC1E2D; } .afDonate a:hover { background: #AF414C; color: #FFF; } /* ===== main header ===== */ header.main { width: 100%; background: #FFF; } header.main .logo { padding: 30px 0 20px 0; } header.main .utilityNav { margin-top: 40px; padding: 40px 0 10px 0; text-align: right; } header.main .utilityNav ul { list-style: none; font-size: .95em; } header.main .utilityNav li { display: inline-block; padding: 0 10px; position: relative; vertical-align: middle; } header.main .utilityNav li a { color: #4F5859; font-weight: 600; } header.main .utilityNav li a:hover { color: #EB1C2D; font-weight: 600; text-decoration: none; -webkit-transition: color 100ms linear; -ms-transition: color 100ms linear; transition: color 100ms linear; } /* search */ header.main ul li.search input[type=text] { width: 25px; color: #333; box-sizing: border-box; border-radius: 4px; font-size: 13px; background-color: #FFF; background-image: url('/images/icn/search.png'); background-position: 5px; background-repeat: no-repeat; padding: 5px 0 5px 30px; -webkit-transition:width 0.4s ease-in-out; transition: width 0.4s ease-in-out; border: none; cursor: pointer; } header.main ul li.search input[type=text]:focus { width: 150px; background-image: url('/images/icn/search.png'); background-color: #FFF; color: #333; padding: 5px 0 5px 30px; /*border: 2px solid #abc5e7;*/ } /* ===== navigation ===== nav.main { background: #794D80 none repeat scroll 0 0; border-bottom: 1px solid #333; border-top: 1px solid #333; position: relative; z-index: 2; } nav.main ul { margin: 0; padding: 0; list-style: none; display: inline-block; } nav.main li { display: inline; position: relative; } nav.main li:hover { background: #592C5F; color: #002B55; } nav.main li a { display: block; color: #FFF; text-decoration: none; padding: 1em 1.25em; } nav.main li a:hover { background: #400F47; -webkit-transition: background 300ms linear; -ms-transition: background-color 300ms linear; transition: background-color 300ms linear; } nav.main ul > li:hover { display: inline-block; color: #EB1C2D; } nav.main ul > li { display: inline-block; text-align: left; } nav.main ul > li:hover { display: inline-block; } nav.main li ul li a { padding: 1em 1.25em; } nav.main ul ul { display: none; position: absolute; top: 100%; background-color: #400F47; } nav.main ul li:hover > ul { display: block; } nav.main ul li ul li { width: 250px; } nav.main ul ul > li a { display: block; background-color: #400F47; } nav.main ul ul > li a:hover { background: #592C5F; color: #F1BCFF; } nav.main ul.socialIcons { float: right; font-size: 1.5em; } nav.main ul.socialIcons li a { padding: .65em .5em; } nav.main ul.socialIcons li:hover { background: none !important; } */ nav.main { background: #794D80 none repeat scroll 0 0; border-bottom: 1px solid #333; border-top: 1px solid #333; position: relative; z-index: 2; } /* ===== main nav ===== */ nav.main { display: table; margin: 0 auto; background: #794D80; width: 100%; } nav.main ul { margin: 0; padding: 0; list-style: none; position: relative; z-index: 2; border-right: 1px solid #794D80; } nav.main li { float: left; display: inline; position: relative; border-right: 1px solid #794D80; } /* custom style to accommodate border */ nav.main li:nth-child(3), nav.main li:nth-child(6), nav.main li:nth-child(9), nav.main li:nth-child(12),nav.main li:nth-child(15), nav.main li:nth-child(18),nav.main li:nth-child(21) { border-right: none; } nav.main li a { display: block; float: left; color: #FFF; text-decoration: none; padding: 15px 22px; text-shadow: 1px 1px 1px #592C5F; } nav.main li a:hover { color: #F1BCFF; background: #592C5F; } nav.main ul > li { display: inline-block; } nav.main ul > li:hover { /* section selected hover state */ display: inline-block; background:#592C5F; } nav.main ul ul { /* section item sublist hide */ display: none; position: absolute; top: 100%; min-width: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); background-color: #292929; } nav.main ul li:hover > ul { /* section item sublist display/dropdown upon hover */ display: block; background: #592C5F; width: 1024px; } nav.main ul ul > li a { display: inline-block; float: left; padding: 15px 25px; color: #FFF; width: 340px; background-color: #592C5F; /*border-left: 1px dotted #400F47; border-bottom: 1px dotted #400F47;*/ } nav.main ul ul > li a:hover { color: #F1BCFF; background: #400F47; } /* shift sub-menu */ nav.main ul li:hover:nth-child(2) > ul { /* section item sublist display/dropdown upon hover */ position: absolute; left: -137px; } nav.main ul li:hover:nth-child(3) > ul { /* section item sublist display/dropdown upon hover */ position: absolute; left: -274px; } nav.main ul li:hover:nth-child(4) > ul { /* section item sublist display/dropdown upon hover */ position: absolute; left: -387px; } nav.main ul li:hover:nth-child(6) > ul { /* section item sublist display/dropdown upon hover */ position: absolute; left: -713px; } /* ===== carousel ===== */ .carouselContainer { background: #4d205b; } #carouselWrap { height: 341px; } #owlWrap { } #owlWrap img { display: block; } .fundWrap { /*height: 341px;*/ /*background: url(/images/template/bg-give.jpg) no-repeat;*/ background-size: cover; } .fundWrap ul { list-style: none; padding: 0; margin: 15px 0; } .fundWrap li:before { text-shadow: 1px 1px 2px #000; } .fundWrap li a { display: block; width: 100%; color: #FFF; text-shadow: 1px 1px 2px #000; border: 1px solid #FFF; border-radius: 6px; margin: 5px 0; padding: 8px 20px; box-sizing: border-box; text-align: center; text-transform: uppercase; font: 600 1em 'Open Sans', Arial, Sans-serif; } .fundWrap li a:hover { color: #F1BCFF; background: #592C5F; opacity: .5; } .fundWrap img { display: block; margin: 0 auto; } /* Carousel 2 */ #owl-dup { font: 400 .9em 'Open Sans', Arial, Sans-serif; width: 400px; color: #592C5F; } /*#owl-dup .item { height: 250px; } .owl-video-tn { height: 275px !important; background: #FFF !important; } .owl-video-frame iframe { height: 250px !important; }*/ /* home content 1*/ .hm-content-1 h1 { font: 400 1.75em 'Open Sans', Arial, Sans-serif; color: #666666; } .hm-content-1 ul { margin: 0; padding: 0; list-style: none; } .hm-content-1 li { border-bottom: 1px dotted #E5E5E5; } .hm-content-1 li a { color: #592c5f; display: block; padding: 15px; } .hm-content-1 li a:hover { color: #AC1E2D; background: #E5E5E5; text-decoration: none; } .hm-content-1 li a:before { content: '\00bb\00a0\00a0'; } .hm-content-2 { background: #F3F3F3; } .hm-content-2 ul { margin: 0; padding: 0; list-style: none; font: 400 1.25em 'Open Sans', Arial, Sans-serif; } .hm-content-2 li { display: block; width: 33.33%; float: left; } .hm-content-2 li a { display: block; box-sizing: border-box; background: #592C5F; text-align: center; color: #FFF; margin: 0 10px; padding: 15px 65px; } .hm-content-2 li a:hover { background: #794D80; color: #F1BCFF; text-shadow: 1px 1px 1px #592C5F; text-decoration: none; } .hm-content-3 h1 { font: 400 1.75em 'Open Sans', Arial, Sans-serif; color: #666666; } .hm-content-3 a { color: #592c5f; } .hm-content-3 a:hover { color: #C90000; text-decoration: none; } /* ===== section content ===== */ #sectionTitleWrap { background-color: #592c5f; padding: 15px 0; } span.sectionTitle { font: 400 1.75em 'Open Sans', Arial, Sans-serif; color: #FFF; text-shadow: 1px 1px 5px #3B0844; } /* breadcrumbs */ .breadcrumbs { font: 400 .8em 'Open Sans', Arial, Sans-serif; color:#666666; } .breadcrumbs a { color:#582C5F; } .breadcrumbs a:hover { color:#666666; text-decoration: underline; } /* ===== section side navigation ===== */ .sideNav h2 { font: 600 1.4em 'Open Sans', Arial, Sans-serif; color: #666666; } .sideNav ul { margin: 0; padding: 0; list-style: none; } .sideNav li { border-bottom: 1px dotted #AD73B7; } .sideNav a:before { content: '' } .sideNav .selected { font-weight: 700; } .sideNav li a { color: #582C5F; display: block; padding: 10px; } .sideNav li a:hover { color: #AC1E2D; background: #E5E5E5; text-decoration: none; } .sideNav ul ul { margin-bottom: 15px; list-style: none; font: 400 .9em 'Open Sans', Arial, Sans-serif; } .sideNav li ul li { border-bottom: none; } .sideNav li ul li a:before { content: ''; } .sideNav li ul li a { color: #686463; display: block; padding: 10px; } .sideNav li ul li a:hover { background: #E5E5E5; } .art-content { min-height: 600px; font: 400 .9em 'Open Sans', Arial, Sans-serif; } .art-content img { max-width: 100% !important; } /* ===== footer ===== */ footer.main { background: #592c5f; color: #ffffff; width: 100%; font-size: .9em; } footer.main h3 { font-weight: 600; color: #FFF; text-transform: uppercase; font-size: 1.1em; } footer.main a { color: #FFF; } footer.main a:hover { color: #794d80; text-decoration: none; } footer.main .footLogo { padding: 25px 15px; } footer.main .footLinks ul { list-style: none; margin: 0; padding: 0; } footer.main .footSocial ul { list-style: none; margin: 0; padding: 0; font-size: 1.5em; } footer.main .footSocial li { display: inline-block; } footer.main .footSocial ul li a { padding: .65em .5em; } footer.main .footSocial ul li a:hover { color: #794d80 !important; text-decoration: none; } .footSocial ul li:hover { background: none !important; } footer.main .footDisclaimer { border-top: 1px solid #794d80; margin: 25px 0 0 0; padding: 15px 15px 0px 15px; text-align: center; } /* ========================= EDI STANDARD MEDIA QUERIES ============================ */ /* desktop ----------- */ @media only screen and (max-width: 1200px) { } /* tablet (landscape) ----------- */ @media only screen and (max-width: 1170px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { header.flexmenu { display: none; } nav.main li a { padding: 1em; } } /* tablet (portrait) ----------- */ @media only screen and (max-width: 768px), only screen and (max-width: 768px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { header.flexmenu { display: block; } nav.main, .sideNav, .breadcrumbs { display: none; } .fundWrap { background-size: cover; } } /* tablet PRO (landscape) ----------- */ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { header.flexmenu { display: none; } nav.main li a { padding: 1em; } } /* tablet PRO (portrait) ----------- */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { header.flexmenu { display: block; } nav.main, .sideNav, .breadcrumbs { display: none; } .fundWrap { background-size: cover; } } /* mobile phone (landscape) ----------- */ @media only screen and (max-width: 667px), only screen and (max-width: 667px), only screen and (max-width: 667px), only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ header.flexmenu { display: block; } section.hm-content-3 { text-align: center; } } /* mobile phone (portrait)----------- */ @media only screen and (max-width: 375px), only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ header.flexmenu { display: block; } header.main { text-align: center; } section.hm-content-3 { text-align: center; } } /* iPhone X (landscape) NOTE: this breakpoint is the same as IPAD Portrait ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ header.flexmenu { display: block; } nav.main, .sideNav{ display: none; } } /* iPhone X (portrait) ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ } /* iPhone XS Max, XR (landscape) ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* iPhone XS Max, XR (portrait) ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ }