/* Theme Name: Praxis Theme URI: https://praxispeace.org Author: brian@epiphanet.com Author URI: https://epiphanet.com/ Description: Theme for gjs.cpa Version: 99.99.99 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: wp-praxis Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template */ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); :root { --blue: #216da6; --dark-blue: #216ea6; --gold: #f5c070; --red: red; --bs-dropdown-header-color: #216da6 !important; } #start-music-container { transition: opacity 0.5s ease; margin-top: -200px; margin-bottom: 200px; } #start-music-container.hide { opacity: 0; pointer-events: none; visibility: hidden; /* optional: helps screen readers skip it */ } blockquote { margin: 1.5em 0; padding: 1em 1.5em; border-left: 4px solid #ccc; background-color: #f9f9f9; font-style: italic; position: relative; } blockquote p { margin: 0 0 0.5em 0; } cite { display: block; margin-top: 0.5em; font-style: normal; font-weight: bold; color: #555; } /* body { font-family: "Lobster", sans-serif; } */ .tangerine { font-family: "Tangerine", cursive !important; } .tangerine-regular { font-family: "Tangerine", cursive; font-weight: 400; font-style: normal; } .tangerine-bold { font-family: "Tangerine", cursive; font-weight: 700; font-style: normal; } #audio-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,.8); color: #333; text-align: center; padding: 5px 10px; font-family: sans-serif; font-size: 16px; box-shadow: 0 -1px 5px rgba(0,0,0,0.1); z-index: 9999; } #audio-bar a { color: #0073e6; text-decoration: none; margin: 0 10px; } #audio-bar a:hover { text-decoration: underline; } #mute-toggle { background: none; border: 1px solid #333; color: #333; padding: 5px 10px; cursor: pointer; font-size: 14px; border-radius: 4px; margin-left: 10px; } h2 { margin-bottom: 30px; } .btn-hover-gold:hover { color: var(--gold) !important; } .event-img { max-width: 80%; height: auto; } a { color: var(--blue); } a:hover { color: var(--red); } .gold { color: var(--gold) !important; } .dark-blue { color: var(--dark-blue) !important; } .blue { color: var(--blue) !important; } .red { color: var(--red) !important; } .nav-item { white-space: nowrap; } .btn-primary { background: var(--blue) !important; color: white; } .btn-primary:hover { background: white; color: var(--dark-blue) !important; } .btn-white { color: var(--blue); } .btn-white:hover { color: white; background: var(--blue); } .bg-dark { background-color: var(--dark-blue) !important; } .text-dark { color: var(--dark-blue) !important; } .bg-blue { background-color: var(--blue) !important; } body { color: #101f2e; } .dropdown-item:focus, .dropdown-item:hover, .dropdown-link:focus, .dropdown-link:hover { background-color: var(--bs-dropdown-link-hover-bg); color: var(--blue) !important; } img { max-width: 100%; height: auto; } .praxis-logo { color: #216da6 !important; font-family: Lobster !important; font-weight: bold; } .nav-link:hover { color: var(--blue) !important; /* font-family: quicksand !important;*/ /* font-weight: bold;*/ } .home-mission { font-size: 29px; } /* Everything except mobile starts: ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- oooooooooooooooooooooooooooooooooooooooooooooo ooo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ooo $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o $$$$$ $$$" "$$$$$" "$ $ $ "$ $$$$$" "$ "$ $$$ $$$$" "$$ $$oo$$$$$ $$oo$ $$$$ $$$$ " $$$$$ $$ $ " $$$ o$$$$ $ $$o "$$$$$o "$ $$ $ $$$$$ $$ $ $$$o $$$$ o $""$$ $$$$$""$$ $ $$$$ $$$$ o $$$$$ $$ $ o $$$$ $$$$ $$$ $o o$$$$$o o$ $ $ $o $$$$$o o$ $o $$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$""""""""""""""""""""""""""""""""""""""$$$$$$$$$$$$""""""""""""$$$$ $$$$ "$$$$$$$$$$" o$$$$ $$$$ "$$$$$$$$" o$$$$$ $$$$ $$$$$$$$ $$$$$$ $$$$$$$$$$$$$ $$$$$$$$$ $$$$$$ $$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$ $$$$ $$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$ "$$" $$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$o "" o$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$o o$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$o o$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$$o o$$$$$$$$$$$$ "$$$$$$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$$$$$" $$$$$$$$$$$$ $$$$$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$ $$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$ "$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ """$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$""" """""""""""""""""""""""""""""""""""""""""""""" ============================================= */ @media only screen and (min-width : 768px) { .dub-conference { height: 500px; } .menu-dubrovnik { position: fixed; top: 1px; font-size: 18px; left: 0; right: 0; text-align: center; text-decoration: underline; } .menu-dubrovnik a { color: white; background: #f9655a; display: inline-block; padding: 0 10px 1px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; font-weight: bold; font-size: 16px; } .menu-dubrovnik a:hover { background:var(--blue) !important; } .navbar-expand-lg .navbar-nav .nav-link { padding-left: 0; } .pause-music-button { -webkit-appearance: none !important; border: 0; background: 0; display: block; position: fixed; bottom: 0; right: 0; width: 100px; z-index: 9999; white-space: nowrap; font-size: 13px; background: #216ea6; padding: 7px; border-radius: 8px; letter-spacing: 0px; font-family: "DM Serif Display", serif; color: white; } .hide-desktop { display: none !important; } } /* @media breakpoint - Everything except mobile ends */ /* Extra large devices only (1200px and up) ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ============================================================================================================================================================= */ @media only screen and (min-width : 1200px){ } /* @media breakpoint - Extra Large only ends */ /* Large only (992px - 1200px) ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ============================================================================================================================================================= */ @media only screen and (min-width : 992px) and (max-width : 1199.98px){ } /* /* @media breakpoint - Large only ends */ /* Medium only ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ============================================================================================================================================================= */ @media only screen and (min-width : 768px) and (max-width : 991.98px) { } /* @media breakpoint - Medium only ends */ /* Mobile only - Small and below (767px and down) ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- .M .:AMMO: .:AMMMMMHIIIHMMM. .... .AMMMMMMMMMMMHHHMHHMMMML:AMF" .:MMMMMLAMMMMMMMHMMMMMMHHIHHIIIHMMMML. "WMMMMMMMMMMMMMMMMMMH:::::HMMMMMMHII:. .AMMMMMMMHHHMMMMMMMMMMHHHHHMMMMMMMMMAMMMHHHHL. .MMMMMMMMMMHHMMMMMMMMHHHHMMMMMMMMMMMMMHTWMHHHHHML .MMMMMMMMMMMMMMMMMMMHHHHHHHHHMHMMHHHHIII:::HMHHHHMM. .MMMMMMMMMMMMMMMMMMMMMMHHHHHHMHHHHHHIIIIIIIIHMHHHHHM. MMMMMMMMMMMMMMMMMHHMMHHHHHIIIHHH::IIHHII:::::IHHHHHHHL "MMMMMMMMMMMMMMMMHIIIHMMMMHHIIHHLI::IIHHHHIIIHHHHHHHHML .MMMMMMMMMMMMMM"WMMMHHHMMMMMMMMMMMLHHHMMMMMMHHHHHHHHHHH .MMMMMMMMMMMWWMW ""YYHMMMMMMMMMMMMF""HMMMMMMMMMHHHHHHHH. .MMMMMMMMMM W" V W"WMMMMMHHHHHHHHHH "MMMMMMMMMM". "WHHHMH"HHHHHHL MMMMMMMMMMF . IHHHHH. MMMMMMMMMM . . HHHHHHH MMMMMMMMMF. . . . HHHHHHH. MMMMMMMMM . ,AWMMMMML. .. . . HHHHHHH. :MMMMMMMMM". . F"' 'WM:. ,::HMMA, . . HHHHMMM :MMMMMMMMF. . ." WH.. AMM"' " . . HHHMMMM MMMMMMMM . . ,;AAAHHWL".. .:' HHHHHHH MMMMMMM:. . . -MK"OTO L :I.. ...:HMA-. "HHHHHH ,:IIIILTMMMMI::. L,,,,. ::I.. .. K"OTO"ML 'HHHHHH LHT::LIIIIMMI::. . '""'.IHH:.. .. :.,,,, ' HMMMH: HLI'"IIITMII::. . .IIII. . '"""" ' MMMFT:::. HML:::WMIINMHI:::.. . .:I. . . . . ' .M"'.....I. "HWHINWI:.'.HHII::.. .HHI .II. . . . . :M.',, ..I: "MLI"ML': :HHII::... MMHHL ::::: . :.. .'.'.'HHTML.II: "MMLIHHWL:IHHII::....:I:" :MHHWHI:...:W,," '':::. ..' ":.HH:II: "MMMHITIIHHH:::::IWF" """T99"' '"" '.':II:..'.'..' I'.HHIHI' YMMHII:IHHHH:::IT.. . . ... . . ''THHI::.'.' .;H.""."H" HHII:MHHI"::IWWL . . . . . HH"HHHIIHHH":HWWM" """ MMHI::HY""ML, ... . .. :" :HIIIIIILTMH" MMHI:.' 'HL,,,,,,,,..,,,......,:" . ''::HH "HWW 'MMH:.. . 'MMML,: """MM""""MMM" .'.IH'"MH" "MMHL.. .. "MMMMMML,MM,HMMMF . .IHM" "MMHHL .. "MMMMMMMMMMMM" . . '.IHF' 'MMMML .. "MMMMMMMM" . .'HMF HHHMML. .'MMF" IHHHHHMML. .'HMF" HHHHHHITMML. .'IF.. "HHHHHHIITML,. ..:F... 'HHHHHHHHHMMWWWWWW::"...... HHHHHHHMMMMMMF"'........ HHHHHHHHHH............ HHHHHHHH........... HHHHIII.......... HHIII.......... HII......... "H........ ...... W H A T - - M E W O R R Y ? ============================================================================= */ @media (max-width: 767.98px) { .fullscreen-video-section { position: relative; width: 100%; height: 100vh; /* viewport height */ padding: 0; margin: 0; overflow: hidden; height: 560px; } .start-music-container { margin-bottom: -40px; } .dub-conference { height: 200px; } .menu-dubrovnik a { color: red; text-decoration: underline; font-size: 18px; } .hide-mobile { display: none !important; } } /* @media breakpoint - Mobile Small only ends */ /* Small devices only (landscape phones, 576px and up) ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ============================================================================================================================================================= */ @media (min-width: 576px) and (max-width: 767.98px) { } /* Small devices (landscape phones, 576px and up) ends } /* breakpoint /* Extra small devices only (portrait phones, less than 576px) ============================================================================================================================================================= ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------- ============================================================================================================================================================= */ @media (max-width: 575.98px) { } /* Extra small devices ends (portrait phones) */ /* IE 11 ================ -- */ @media screen and (-ms-high-contrast: none) { } /** * Print styles */ @media print { * { color: black !important; } body { background: white !important; } }