/* Theme Name: Catch Adaptive Theme URI: https://catchthemes.com/themes/catch-adaptive/ Author: Catch Themes Author URI: https://catchthemes.com/ Description: Catch Adaptive is a Simple, Clean and Bold Full Width Responsive WordPress Theme based on Catch Base Theme. Built on HTML5, CSS3, Masonry and Theme Customizer for real time customization, it comes with a whole set of interesting and rich features which makes this theme highly customizable and flexible. Make your beautiful yet professional website in no time. This theme is translation ready and also currently translated in French, Brazilian Portuguese and German languages. Check out Theme Instructions at https://catchthemes.com/theme-instructions/catch-adaptive/, Support at https://catchthemes.com/support/ and Demo at https://catchthemes.com/demo/catch-adaptive/ Version: 2.1.8 Requires at least: 5.6 Tested up to: 6.6 Requires PHP: 5.6 License: GNU General Public License, version 3 (GPLv3) License URI: http://www.gnu.org/licenses/gpl-3.0.txt Text Domain: catch-adaptive Domain Path: /languages/ Tags: blog, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, front-page-post-form, post-formats, sticky-post, theme-options, threaded-comments, translation-ready Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1. Reset 2. Typography 3. Elements 4. Padding/Margin 5. Forms 6. Navigation 7. Accessibility 8. Alignments 9. Clearings 10. Header Area 11. Promotion Area 12. Featured Content Area 13. Content 14. Widgets 15. Comments 16. Media 17. Captions 18. Galleries 19. Footer 20. Extra Elements 21. Responsive design --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1. Reset --------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } *, *:before, *:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a img { border: 0; } .entry-content a:not(.more-link):not(.button):not(.wp-block-button__link), .entry-summary a:not(.more-link):not(.button):not(.wp-block-button__link), .ew-about a:not(.more-link):not(.button), .widget_text a:not(.more-link):not(.button), .comment-content a { text-decoration: none; } .entry-content a:not(.more-link):not(.button):hover, .entry-content a:not(.more-link):not(.button):focus, .entry-summary a:not(.more-link):not(.button):hover, .entry-summary a:not(.more-link):not(.button):focus, .ew-about a:not(.more-link):not(.button):hover, .ew-about a:not(.more-link):not(.button):focus, .widget_text a:not(.more-link):not(.button):hover, .widget_text a:not(.more-link):not(.button):focus, .comment-content a:hover, .comment-content a:focus { text-decoration: none; } /*-------------------------------------------------------------- 2. Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #000000; text-shadow: 1px 1px 1px #EEEEEE, 2px 2px 1px #EEEEEE, -2px -2px 1px #EEEEEE, -1px -1px 1px #EEEEEE; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.2; margin: 0 0 10px; } h1 { font-size: 35px; } h2 { font-size: 28px; } h3 { font-size: 24px; } h4 { font-size: 20px; } .sidebar-header, h5 { font-size: 18px; } h6 { font-size: 14pt; font-weight: 100; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } .site-title { font-size: 80px; } #feature-slider .cycle-pager span { font-size: 45px; } .entry-title, #promotion-message h2, #featured-content #featured-heading { font-size: 18px !important; } #scrollup:before { font-size: 40px; } #featured-content .entry-title { font-size: 35px; } .comments-title, .site-description, #search-toggle, #header-toggle, .genericon.genericon-menu, .widget_catchadaptive_social_icons .genericon { font-size: 20px; } .entry-meta span a:before, #infinite-handle span { font-size: 16px; } #feature-slider .cycle-prev:before, #feature-slider .cycle-next:before { font-size: 50px; line-height: 50px; } .widget-title { line-height: 1.4; } .catchadaptive-nav-menu .sub-menu a, .catchadaptive-nav-menu .children a, .sidebar-header .widget_nav_menu .sub-menu a, #breadcrumb-list .wrapper { font-size: 11px; } #nav-below .wp-pagenavi a, #nav-below .wp-pagenavi span, .page-links span { font-size: 11px; line-height: 30px; } .entry-meta, #site-generator { display: none !important; } #respond.comment-respond { display: none; } .entry-meta, #site-generator { font-size: 13px; } .widget_calendar #wp-calendar caption { font-size: 11px; font-weight: 500; } /*-------------------------------------------------------------- 3. Elements --------------------------------------------------------------*/ .site { width: 100%; } .wrapper { width: 1280px; margin: 0 auto; } a { color: #990000; text-decoration: none; } a:hover, a:focus, a:active { color: #404040; outline: none; text-decoration: none; } hr { content: ""; display: block; width: 100%; height: 45px; /* Adjust height as needed */ margin: 20px 0; /* Space above and below HR image */ background: url('https://sugarboop.delulu.scottsavino.com/images/unicorn-hr.png') no-repeat center; background-size: cover; border: none; /* Remove default HR border */ opacity: 0.9; } .entry-container .metaslider, .entry-container .metaslider-flex, .entry-container .ml-slider, .entry-container .ms-theme-default-base, .entry-container .has-dots-nav { position: relative !important; /* Create a new stacking context */ z-index: 1 !important; /* Ensure it's above the parent visually */ opacity: 1 !important; /* Full opacity for the slider elements */ background: rgba(255, 255, 255, 1)!important; /* Ensure background is fully opaque */ } ol, ul { margin: 0; padding: 0; } ul { list-style: none; } ol { list-style: none; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 0; } table { border-top: none; border-left: none; font-weight: bold; margin: 0 0 2em; width: 100%; } th { border-bottom: 0px solid #eee; border-right: 0px solid #eee; color: #666; font-weight: 700; padding: 8px; text-transform: uppercase; } td { border-bottom: 0px solid #eee; border-right: 0px solid #eee; padding: 8px; } blockquote:before { content: "\201C"; display: block; font-size: 30px; height: 0; left: -20px; position: relative; top: -10px; } .entry-content ol, .entry-content ul { margin-bottom: 20px; margin-left: 20px; } .entry-content ol > li { list-style-type: decimal; } .entry-content ul > li { list-style-type: square; } .entry-content ol ol, .entry-content ul ul { margin-bottom: 0; } .entry-content code { background-color: #333; color: #ddd; } .displayblock, #heading, #primary, #secondary, #comments, .catchadaptive-nav-menu a, .sidebar-header .widget_nav_menu a { display: block; } .displaynone { display: none; } .sticky { display: block; } /* Genericons */ .genericon:before, #feature-slider .cycle-prev:before, #feature-slider .cycle-next:before, #content-prev:before, #content-next:before, .posted-on a:before, .byline a:before, .cat-links span + a:before, .tags-links span + a:before, .comments-link a:before, .edit-link a:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; vertical-align: text-bottom; } #scrollup:before { content: '\f432'; } #feature-slider .cycle-prev:before, #content-prev:before { content: "\f430"; } #feature-slider .cycle-next:before, #content-next:before { content: "\f429"; } .entry-meta .posted-on a:before { content: "\f307"; } .entry-meta .author a:before { content: "\f304"; } .edit-link a:before { content: "\f411"; } .cat-links span + a:before { content: "\f301"; } .tags-links span + a:before { content: "\f302"; } .entry-meta .comments-link a:before { content: "\f300"; } /*-------------------------------------------------------------- 4. Padding/Margin --------------------------------------------------------------*/ .site { margin: 0 auto; padding-top: 44px; } #masthead { padding-top: 94px; padding-bottom: 50px; } .catchadaptive-masonry #main { padding-bottom: 60px; } #site-branding, #site-logo, #site-header, .sidebar-header-toggle .widget, .sidebar-header .widget, #promotion-message .wrapper, #promotion-message .section, #content .wrapper, .hentry, .no-results, .not-found, .sidebar, #comments, #nav-below, .post-navigation, .paging-navigation, .comment-navigation, #supplementary .widget, #site-generator { padding: 20px; } #featured-content, #supplementary { padding: 20px 0; } .wrapper { padding: 0 20px; } .page-header { padding: 20px 20px 0 20px; } #featured-content .featured-heading-wrap { padding: 20px 20px 0; } #feature-heading { padding: 20px 0 0; } #footer-left-content, #footer-right-content { padding: 10px 20px; } .page-header .page-title { margin-bottom: 0; padding-bottom: 10px; } #promotion-message .right a { padding: 10px 25px; } button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 9px 15px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 5px 10px; } .nav-header-right .wrapper, #header-featured-image .wrapper, #feature-slider .wrapper { padding: 0; } .sidebar-header .widget, #masthead .sidebar-header, #promotion-message .right { padding-top: 0; } #featured-content p { padding-bottom: 0; } .widget { margin-bottom: 40px; } blockquote { margin: 20px 40px; } .page-links { margin: 0 0 20px; } #feature-heading { margin: 0 20px; } #featured-content .entry-container { margin-top: 20px; } p, #nav-below, .sidebar-primary .search-field, .hentry .featured-image, .comment-navigation, .paging-navigation, .post-navigation { margin-bottom: 20px; } #header-toggle:before { margin-top: 12px; } .entry-meta .posted-on, .entry-meta .byline, .entry-meta .comments-link, .entry-meta .cat-links { margin-right: 10px; } #promotion-message .right a { margin-top: 7px; } #promotion-message h2 { margin-bottom: 5px; } .page-content, .entry-content, .entry-summary, #promotion-message p, .catchadaptive-masonry #nav-below { margin: 0; } #featured-content .entry-content { margin-top: 0; } .sidebar-header-toggle .widget, .sidebar-header .widget { margin-bottom: 0; } #masthead { margin-top: -44px; } /*-------------------------------------------------------------- 5. Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } /* button, /*input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, .8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ /*-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ /*}*/ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: border-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } /*-------------------------------------------------------------- 6. Navigation --------------------------------------------------------------*/ .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous, .nav-previous, .pagination-previous { float: left; width: 50%; font-weight: bold !important; font-size: 14pt !important; margin-top: 40px; z-index: 978; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next, .nav-next, .pagination-next { float: right; text-align: right; width: 50%; font-weight: bold !important; font-size: 14pt !important; margin-top: 40px; z-index: 978; } .paging-navigation { clear: both; /* Clears any floated elements above */ z-index: 979; } .paging-navigation .nav-previous { float: left; /* Positions Older Stories on the left */ width: 50%; /* Ensures both links take up equal space */ text-align: left; /* Align text to the left */ } .paging-navigation .nav-next { float: right; /* Positions Newer Stories on the right */ width: 50%; /* Matches the width of Older Stories */ text-align: right; /* Align text to the right */ } .post-navigation span { display: block; } .nav-header-right .wrapper { float: right; margin-right: -18px; } .sidebar-header .widget_nav_menu { position: relative; z-index: 199; } /* Primary Menu */ #fixed-header { left: 0; position: fixed; top: 0; width: 100%; z-index: 198; } .admin-bar #fixed-header { top: 32px; } .nav-primary { background: #444; background: rgba(0,0,0,0.7); width: 100%; } .nav-primary .menu { float: left; } .nav-primary .menu a { color: #C9C9C9; font size: 12px !important; } .nav-primary .menu li a:hover, .nav-primary .menu li a:focus { color: #fff; } .nav-primary .menu li:hover > a { color: #fff; } .nav-primary .menu .current-menu-item > a, .nav-primary .menu .current-menu-ancestor > a, .nav-primary .menu .current_page_item > a, .nav-primary .menu .current_page_ancestor > a { color: #fff; } .nav-primary .menu .sub-menu a, .nav-primary .menu .children a { background: #444; background: rgba(0,0,0,0.7); border: none; } .nav-primary .menu .sub-menu .sub-menu, .nav-primary .menu .children .children { border: none; margin: -43px 0 0 250px; } .nav-primary .menu .sub-menu li a:hover, .nav-primary .menu .sub-menu li a:focus, .nav-primary .menu .children li a:hover, .nav-primary .menu .children li a:focus { color: #fff; } .nav-secondary { background-color: #f2f2f2; position: relative; z-index: 197; } .nav-footer { background-color: #111; text-align: center; } #colophon .nav-footer a { color: #eeeeee; } #colophon .nav-footer .current-menu-item a, #colophon .nav-footer .current_page_item a { color: #ccc; } .catchadaptive-nav-menu li, .sidebar-header .widget_nav_menu li { display: inline-block; float: left; text-align: left; } .nav-footer .catchadaptive-nav-menu li { float: none; } .catchadaptive-nav-menu a, .sidebar-header .widget_nav_menu a { color: #666; padding: 10px 20px; } .catchadaptive-nav-menu li a:hover, .catchadaptive-nav-menu li a:focus, .sidebar-header .widget_nav_menu li a:hover, .sidebar-header .widget_nav_menu li a:focus { color: #21759b; text-decoration: none; } /* Hover Parent */ .catchadaptive-nav-menu li:hover > a, .sidebar-header .widget_nav_menu li:hover > a { } .catchadaptive-nav-menu .current-menu-item > a, .catchadaptive-nav-menu .current-menu-ancestor > a, .catchadaptive-nav-menu .current_page_item > a, .catchadaptive-nav-menu .current_page_ancestor > a, .sidebar-header .widget_nav_menu .current-menu-item > a, .sidebar-header .widget_nav_menu .current-menu-ancestor > a { color: #21759b; } .catchadaptive-nav-menu .sub-menu, .catchadaptive-nav-menu .children, .sidebar-header .widget_nav_menu .sub-menu { left: -9999px; margin: 0; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 275px; z-index: 200; } .sidebar-header .widget_nav_menu .sub-menu { border-top: 1px solid #eee; } .catchadaptive-nav-menu .sub-menu a, .catchadaptive-nav-menu .children a, .sidebar-header .widget_nav_menu .sub-menu a { background-color: #fff; border: 1px solid #eee; position: relative; width: 275px; } .catchadaptive-nav-menu .sub-menu a, .catchadaptive-nav-menu .children a, .sidebar-header .widget_nav_menu .sub-menu a { border-top: none; } .nav-secondary .catchadaptive-nav-menu .sub-menu a, .nav-secondary .catchadaptive-nav-menu .children a { background-color: #f2f2f2; border-color: #f9f9f9; } .catchadaptive-nav-menu .sub-menu li a:hover, .catchadaptive-nav-menu .sub-menu li a:focus, .catchadaptive-nav-menu .children li a:hover, .catchadaptive-nav-menu .children li a:focus, .sidebar-header .widget_nav_menu .sub-menu li a:hover, .sidebar-header .widget_nav_menu .sub-menu li a:focus { color: #21759b; } .catchadaptive-nav-menu .sub-menu .sub-menu, .catchadaptive-nav-menu .children .children, .sidebar-header .widget_nav_menu .sub-menu .sub-menu { border-top: 1px solid #eee; margin: -43px 0 0 249px; } .nav-secondary .sub-menu .sub-menu, .nav-secondary .catchadaptive-nav-menu .children .children { border-color: #f9f9f9; } .catchadaptive-nav-menu .menu-item:hover, .catchadaptive-nav-menu .page_item:hover, .sidebar-header .widget_nav_menu .menu-item:hover { position: static; } .catchadaptive-nav-menu .menu-item:hover > .sub-menu, .catchadaptive-nav-menu .menu-item.focus > .sub-menu, .catchadaptive-nav-menu .page_item:hover > .children, .catchadaptive-nav-menu .page_item.focus > .children, .sidebar-header .widget_nav_menu .menu-item:hover > .sub-menu, .sidebar-header .widget_nav_menu .menu-item.focus > .sub-menu { left: auto; opacity: 1; } #logo-icon { float: left; } #logo-icon a { display: block; line-height: 0 } #logo-icon img { max-height: 44px; padding: 6px 0; width: auto; } /* Menu Search */ #header-toggle { background-color: transparent; color: #eee; cursor: pointer; float: right; height: 44px; text-align: center; width: 44px; } #header-toggle:hover { background-color: transparent; color: #aaa; } #header-container { background-color: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #eee; bottom: -56px; clear: both; left: 0; position: absolute; width: 100%; z-index: 999; } .nav-primary .search-submit { display: none; } .nav-primary .search-form { padding: 10px 40px; } .nav-primary .search-field { border-color: #eee; -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; width: 100%; } .nav-primary .search-field:focus { border-color: #666; color: #000; font-family: "Gabby" !important; font-size: 14pt !important; } /* WP Page Navi */ #nav-below .wp-pagenavi, .page-links { clear: both; float: right; } #nav-below .wp-pagenavi a, #nav-below .wp-pagenavi span, .page-links span { border: none; float: left; height: 28px; color: #21759b; text-align: center; display: block; padding: 0 10px; text-decoration: none; } .page-links span { margin-left: 10px; } .page-links span, .page-links a:hover span { background-color: #000; color: #fff; } .page-links a span { background-color: #f2f2f2; color: #404040; } .page-links span.pages { background-color: transparent; color: #404040; margin-left: 0; padding: 0; } #nav-below .wp-pagenavi a, #nav-below .wp-pagenavi span { background-color: #f2f2f2; margin: 0 0 0 10px; } #nav-below .wp-pagenavi span.pages { color: #404040; background-color: transparent; padding: 2px 0 0 0; } #nav-below .wp-pagenavi a:hover, #nav-below #wp_page_numbers ul li a:hover { background-color: #000; color: #fff; } #nav-below .wp-pagenavi span.current{ background-color: #000; color: #fff; font-weight: normal; } /* Jetpack Infinite Scroll */ #content #infinite-handle { bottom: 15px; position: absolute; text-align: center; top: auto !important; width: 100%; } #content #infinite-handle span { background: none transparent; display: inline-block; padding: 0; } #content #infinite-handle span button { background-color: #000; color: #ddd; display: inline; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; } #content #infinite-handle span button:hover, #content #infinite-handle span button:focus { background-color: #000; color: #fff; } #content #infinite-handle span button:before { content: "+ "; } .infinite-loader { width: 100%; text-align: center; } .infinite-loader .spinner { display: block; position: absolute !important; top: auto !important; bottom: 10px !important; left: 50% !important; transform: translate(-50%, -50%); } /*-------------------------------------------------------------- 7. Accessibility --------------------------------------------------------------*/ /* Assistive text */ .assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); margin: 0; } /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 8. Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 9. Clearings --------------------------------------------------------------*/ .clear:after, .hentry:after, .archive-post-wrap:after, .wrapper:after, .catchadaptive-nav-menu:after, .featured-content-wrap:after, #content_sidebar_wrap:after, .widget:after, .widget-wrap:after, #nav-below:after, .page-links:after, #site-generator:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /*-------------------------------------------------------------- 10. Header Area --------------------------------------------------------------*/ #masthead { background-color: #000; color: #ddd; height: 100%; width: 100%; } .site-title a, .site-description { color: #ddd; } .site-title a:hover { color: #fff; text-decoration: none; } #site-branding, #site-logo, #site-header { display: block; text-align: center; width: 100%; } #site-logo { z-index: 4; } #site-logo a { display: block; line-height: 0; } .site-title { text-transform: uppercase; font-weight: bold; text-shadow: 3px 3px 0 rgba(0,0,0,0.5); } .site-description { font-style: italic; } .sidebar-header, .sidebar-header a { color: #ddd; } .sidebar-header a:hover { color: #fff; text-decoration: none; } .sidebar-header .search-submit { display: none; } #header-featured-image { clear: both; display: block; line-height: 0; position: relative; width: 100%; text-align: center; } #header-featured-image .wrapper { width: 100%; } .sidebar-header { width: 100%; text-align: center; } .sidebar-header .widget-title { text-transform: uppercase; } /*-------------------------------------------------------------- 11. Promotion Area --------------------------------------------------------------*/ #promotion-message { background-color: #111; color: #ddd; } #promotion-message .left, #promotion-message .right { display: block; text-align: center; width: 100%; } #promotion-message .right a { background-color: #21759b; border: 2px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; display: inline-block; } #promotion-message .right a:hover { background-color: #165d7d; text-decoration: none; } /*-------------------------------------------------------------- 12. Featured Content Area --------------------------------------------------------------*/ #featured-content { background-color: #000; background-image: url("../catch-adaptive-archive/images/default-featured-bg.jpg"); background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; background-size: cover; color: #ddd; height: 100%; width: 100%; } #featured-content.border-top { border-top: 1px solid #eee; border-bottom: none; } #featured-content .featured-heading-wrap { text-align: center; } #feature-heading { border-bottom: 1px solid #eee; } #featured-content .entry-title, #featured-content .entry-title a { color: #2f80b3; text-align: center; } #featured-content .entry-title a:hover { color: #e300e3; } #featured-content .featured-content-image { display: block; line-height: 0; } #featured-content .hentry { border: none; float: left; } #featured-content.layout-four .hentry { width: 25%; } #featured-content.layout-three .hentry { width: 33.33%; } #featured-content.layout-four .hentry:nth-child(4n+1), #featured-content.layout-three .hentry:nth-child(3n+1) { clear: both; } #featured-content .featured-content-wrap { clear: both; display: block; overflow: hidden; position: relative; } #content-controls { display: block; overflow: hidden; text-align: center; width: 100%; } #content-prev, #content-next { background: #444; background: rgba(0,0,0,0.5); cursor: pointer; display: inline-block; font-size: 25px; line-height: 15px; padding: 5px; } #content-next { margin-left: 5px; } #featured-content .featured_content_slider_wrap { clear: both; overflow: hidden; width: 100% } #featured-content figure a { display: block; line-height: 0; } /*-------------------------------------------------------------- 13. Content --------------------------------------------------------------*/ #main { float: left; width: 900px; } .sidebar-primary { float: right; width: 340px; } .sidebar-primary .search-field { -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; width: 100%; } .page-header .page-title { border-bottom: 1px solid #eee; } .entry-title, .entry-title a { font-size: 24px; color: #EEEEEE; font-weight: 575; text-shadow: 1px 1px 1px #fa2ad9, 2px 2px 1px #fa2ad9, -2px -2px 1px #fa2ad9, 3px 3px 1px #fa2ad9, -3px -3px 1px #fa2ad9, -1px -1px 1px #fa2ad9; } .featured-image { border-radius: 25px; overflow: hidden; box-sizing: border-box; /* Prevents resizing */ } .featured-image:hover { border: 5px solid #FA2AD9; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); border-radius: 25px; background-image: } .entry-title a:hover { color: #fa2ad9; text-shadow: 1px 1px 1px #000000, 2px 2px 1px #000000, -2px -2px 1px #000000, 3px 3px 1px #000000, -3px -3px 1px #000000, -1px -1px 1px #000000; transition: color 0.3s ease; } .entry-title a:hover, .entry-meta a:hover { text-decoration: none; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /* Two Columns (Content Right, Left Sidebar) */ .content-right #main { float: right; } .content-right .sidebar-primary { float: left; } .excerpt-image-left .has-post-thumbnail .archive-post-wrap .featured-image, .excerpt-image-right .has-post-thumbnail .archive-post-wrap .featured-image { display: inline; width: 40%; } .excerpt-image-left .has-post-thumbnail .archive-post-wrap .entry-container, .excerpt-image-right .has-post-thumbnail .archive-post-wrap .entry-container { display: inline; width: 56%; } .excerpt-image-left .has-post-thumbnail .archive-post-wrap .featured-image { float: left; } .excerpt-image-left .has-post-thumbnail .archive-post-wrap .entry-container { float: right; } .excerpt-image-right .has-post-thumbnail .archive-post-wrap .featured-image { float: right; } .excerpt-image-right .has-post-thumbnail .archive-post-wrap .entry-container { float: left; } /* One Column (No Sidebar, Content Width) */ .no-sidebar.content-width #main { display: block; float: none; margin: 0 auto; width: 900px; } /* One Column (No Sidebar, Full Width) */ .no-sidebar.full-width #main { width: 100%; } .no-sidebar.full-width.excerpt-image-left .has-post-thumbnail .archive-post-wrap .featured-image { width: 33%; } .no-sidebar.full-width.excerpt-image-left .has-post-thumbnail .archive-post-wrap .entry-container { width: 64%; } /*-------------------------------------------------------------- 14. Widgets --------------------------------------------------------------*/ .widget-title { text-align: center; } #content .widget-title, #supplementary .widget-title { background-color: #111; color: #fff; padding: 10px; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /* Calender widget */ .widget_calendar #wp-calendar { width: 100%; text-align: center; } .widget_calendar #wp-calendar caption, .widget_calendar #wp-calendar td, .widget_calendar #wp-calendar th { text-align: center; } .widget_calendar #wp-calendar caption { padding: 5px 0 3px 0; text-transform: uppercase; } .widget_calendar #wp-calendar th { background: #f2f2f2; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-weight: bold; } .widget_calendar #wp-calendar tfoot td { background: #f2f2f2; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } /*-------------------------------------------------------------- 15. Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } #respond form label { display: block; } .comments-title { margin-bottom: 20px; } .comment-body { border-bottom: 4px double #eee; margin-bottom: 20px; padding-bottom: 20px; } .wpcf7-response-output-off { z-index: 9999; width: 330px; height: 359px; background-image: url('https://scottsavino.com/mailing-list-popup/soon.png'); background-repeat: no-repeat; border: none; display: block; margin-right: auto; margin-left: auto; margin-bottom: auto; margin-top: auto; } .input:focus::-webkit-input-placeholder { color:transparent; } .input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ .input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ .input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ .comment-body .comment-meta { margin-bottom: 20px; } .comment-body .comment-author img { float: left; line-height: 0; margin-right: 10px; padding: 0; } /*-------------------------------------------------------------- 16. Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } .hentry .featured-image a { display: block; line-height: 0; } /*-------------------------------------------------------------- 17. Captions --------------------------------------------------------------*/ caption { font-weight: bold; } .wp-caption { background-color: #f3f3f3; border: 1px solid #ddd; margin-bottom: 15px; max-width: 100%; padding: 5px 5px 0; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 8px 0; } /*-------------------------------------------------------------- 18. Galleries --------------------------------------------------------------*/ #main .gallery { margin-bottom: 1.5em; } #main .gallery img { border: 1px solid #eee; padding: 5px; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- 19. Footer --------------------------------------------------------------*/ #colophon { background-color: #fff; } #colophon a, #colophon a:active { color: #21759b; } #colophon a:hover, #colophon a:focus { color: #404040; } #site-generator { background-color: #000; color: #ddd; } #site-generator a { color: #ddd; } #site-generator a:hover { color: #fff; } #supplementary .widget-area { float: left; width: 100%; } #supplementary.two .widget-area { width: 50%; } #supplementary.three .widget-area { width: 33.33%; } #supplementary.four .widget-area { width: 25%; } #footer-left-content, #footer-right-content { width: 50%; } #footer-left-content { float: left; } #footer-right-content { float: right; text-align: right; } #site-generator.one #footer-left-content, #site-generator.one #footer-right-content { display: block; float: none; text-align: center; width: 100%; } /*-------------------------------------------------------------- 20. Extra Elements --------------------------------------------------------------*/ /* Catch Adaptive Scrollup */ #scrollup { background-color: #666; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #eee; cursor: pointer; display: none; height: 40px; position: fixed; bottom: 20px; right: 20px; padding-left: 1px; text-align: center; text-decoration: none; width: 40px; z-index: 9999; } #scrollup:hover { background-color: #000; color: #fff; text-decoration: none; } /* Catch Adaptive breadcrumb */ #breadcrumb-list { background-color: #ddd; } #breadcrumb-list .wrapper { padding: 0 30px; } #breadcrumb-list span { color: #666; display: block; float: left; font-style: italic; } #breadcrumb-list span.sep { float: right; margin-left: 0; padding: 0 0 0 5px; } #breadcrumb-list span.sep, #breadcrumb-list span.archive-text, #breadcrumb-list span.search-text, #breadcrumb-list span.tag-text, #breadcrumb-list span.author-text { border: none; } #breadcrumb-list a, #breadcrumb-list a span { color: #21759b; display: inline-block; padding: 5px 10px; } #breadcrumb-list a:hover, #breadcrumb-list a:hover span { color: #404040; text-decoration: none; } #breadcrumb-list .breadcrumb-current { background-color: #f2f2f2; padding: 5px 10px; } /* jQuery Cycle 2 Custom CSS */ #feature-slider { background-color: #fff; clear: both; display: block; overflow: hidden; position: relative; } #feature-slider .cycle-slideshow { margin: 0 auto; padding: 0; position: relative; } #feature-slider, #feature-slider .wrapper, #feature-slider .cycle-slideshow { width: 100%; } #feature-slider .cycle-slideshow img { display: block; margin: 0 auto; } #feature-slider .cycle-pager { text-align: center; width: 100%; z-index: 101; position: absolute; bottom: 0; overflow: hidden; } #feature-slider .cycle-pager span { font-family: arial; line-height: 20px; width: 14px; height: 20px; display: inline-block; color: #f2f2f2; cursor: pointer; margin: 0 2px; } #feature-slider .cycle-pager span.cycle-pager-active { color: #000; } #feature-slider .cycle-pager > * { cursor: pointer; } #feature-slider .cycle-prev:before, #feature-slider .cycle-next:before { display: block; text-align: center; width: 50px; height: 50px; } #feature-slider .cycle-prev, #feature-slider .cycle-next { background: #444; background: rgba(0,0,0,0.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #fff; cursor: pointer; display: block; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 47%; text-decoration: none; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; z-index: 101; } #feature-slider .cycle-prev { left: -20px; } #feature-slider .cycle-next { right: -20px; } #feature-slider:hover .cycle-prev { left: 40px; opacity: 1; filter: alpha(opacity=100); } #feature-slider:hover .cycle-next { right: 40px; opacity: 1; filter: alpha(opacity=100); } #feature-slider .cycle-slideshow .hentry { position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 0; display: block; } #feature-slider .cycle-slideshow article:first-child { position: static; z-index: 100; } #feature-slider .entry-container { bottom: 44px; color: #fff; left: 25%; padding: 20px; position: absolute; text-align: center; width: 50%; z-index: 101; } #feature-slider .entry-container:hover { background: #444; background: rgba(0,0,0,0.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #feature-slider .entry-title, #feature-slider .entry-title a { color: #fff; } #feature-slider .entry-content { margin: 0 } #feature-slider .entry-content p:last-child { margin-bottom: 0; } .disabled { opacity: .5; filter:alpha(opacity=50); } /* Social Icons */ .widget_catchadaptive_social_icons .widget-wrap { margin-left: -5px; } .site .widget_catchadaptive_social_icons a.genericon { background-color: #f2f2f2; border: 1px solid #eee; border-radius: 3px; -moz-border-radius: 3px; box-sizing: content-box; -webkit-border-radius: 3px; -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; color: #404040; margin: 0 0 5px 5px; padding: 5px; } .site .widget_catchadaptive_social_icons a.genericon:hover { background-color: #000; border-color: #000; color: #fff; } .site .widget_catchadaptive_social_icons a:hover { text-decoration: none; } .site .widget_catchadaptive_social_icons a.genericon-facebook-alt:hover { background-color: #3b5998; border-color: #3b5998; } .site .widget_catchadaptive_social_icons a.genericon-twitter:hover { background-color: #00aced; border-color: #00aced; } .site .widget_catchadaptive_social_icons a.genericon-googleplus-alt:hover { background-color: #dd4b39; border-color: #dd4b39; } .site .widget_catchadaptive_social_icons a.genericon-mail:hover { background-color: #1d62f0; border-color: #1d62f0; } .site .widget_catchadaptive_social_icons a.genericon-feed:hover { background-color: #dc622c; border-color: #dc622c; } .site .widget_catchadaptive_social_icons a.genericon-wordpress:hover { background-color: #21759b; border-color: #21759b; } .site .widget_catchadaptive_social_icons a.genericon-github:hover { background-color: #4183c4; border-color: #4183c4; } .site .widget_catchadaptive_social_icons a.genericon-linkedin:hover { background-color: #007bb6; border-color: #007bb6; } .site .widget_catchadaptive_social_icons a.genericon-pinterest:hover { background-color: #cb2027; border-color: #cb2027; } .site .widget_catchadaptive_social_icons a.genericon-flickr:hover { background-color: #ff0084; border-color: #ff0084; } .site .widget_catchadaptive_social_icons a.genericon-vimeo:hover { background-color: #aad450; border-color: #aad450; } .site .widget_catchadaptive_social_icons a.genericon-youtube:hover { background-color: #bb0000; border-color: #bb0000; } .site .widget_catchadaptive_social_icons a.genericon-tumblr:hover { background-color: #32506d; border-color: #32506d; } .site .widget_catchadaptive_social_icons a.genericon-instagram:hover { background-color: #517fa4; border-color: #517fa4; } .site .widget_catchadaptive_social_icons a.genericon-codepen:hover { background-color: #000; border-color: #000; } .site .widget_catchadaptive_social_icons a.genericon-path:hover { background-color: #ff442c; border-color: #ff442c; } .site .widget_catchadaptive_social_icons a.genericon-dribbble:hover { background-color: #ea4c89; border-color: #ea4c89; } .site .widget_catchadaptive_social_icons a.genericon-skype:hover { background-color: #12a5f4; border-color: #12a5f4; } .site .widget_catchadaptive_social_icons a.genericon-digg:hover { background-color: #333; border-color: #333; } .site .widget_catchadaptive_social_icons a.genericon-reddit:hover { background-color: #ff4500; border-color: #ff4500; } .site .widget_catchadaptive_social_icons a.genericon-stumbleupon:hover { background-color: #eb4924; border-color: #eb4924; } .site .widget_catchadaptive_social_icons a.genericon-pocket:hover { background-color: #f13753; border-color: #f13753; } .site .widget_catchadaptive_social_icons a.genericon-dropbox:hover { background-color: #2281cf; border-color: #2281cf; } .site .widget_catchadaptive_social_icons a.genericon-spotify:hover { background-color: #81b900; border-color: #73a500; } .site .widget_catchadaptive_social_icons a.genericon-polldaddy:hover { background-color: #bc0b0b; border-color: #bc0b0b; } .site .widget_catchadaptive_social_icons a.genericon-foursquare:hover { background-color: #f94877; border-color: #f94877; } .site .widget_catchadaptive_social_icons a.genericon-twitch:hover { background-color: #6441a5; border-color: #6441a5; } .site .widget_catchadaptive_social_icons a.genericon-cloud:hover { background-color: #00aced; border-color: #00aced; } .site .widget_catchadaptive_social_icons a.genericon-website:hover, .site .widget_catchadaptive_social_icons a.genericon-cart:hover, .site .widget_catchadaptive_social_icons a.genericon-phone:hover, .site .widget_catchadaptive_social_icons a.genericon-handset:hover { background-color: #42b41e; border-color: #42b41e; } .site .widget_catchadaptive_social_icons a.genericon-link:hover { background-color: #2e6da4; border-color: #2e6da4; } .site .widget_catchadaptive_social_icons a.custom-icon { border: none; background: transparent; padding: 0; } .site .widget_catchadaptive_social_icons .icon-hover, .site .widget_catchadaptive_social_icons .has-hover:hover .icon-static { display: none; } .site .widget_catchadaptive_social_icons .has-hover:hover .icon-hover { display: inline-block; text-decoration: none; border: none; } /* Disable Responsive */ .disable-responsive .wrapper { width: 1280px; } .disable-responsive #fixed-header, .disable-responsive #content, .disable-responsive #colophon, .disable-responsive #feature-slider, .disable-responsive #promotion-message, .disable-responsive #featured-content { min-width: 1300px; } .disable-responsive #footer-left-content, .disable-responsive #footer-right-content { width: 620px; } /* New CSS */ .catchadaptive-masonry #nav-below { bottom: 0; left: 0; position: absolute; width: 100%; } .catchadaptive-masonry #main .hentry { float: left; width: 50%; } .catchadaptive-masonry #main .entry-footer { display: none; } .catchadaptive-masonry #main .hentry:nth-child(2n+1) { clear: both; } .catchadaptive-masonry.no-sidebar.full-width #main .masonry-normal { width: 33.33% } .catchadaptive-masonry.no-sidebar.full-width #main .masonry-full { width: 100%; } .catchadaptive-masonry.no-sidebar.full-width #main .hentry:nth-child(2n+1) { clear: none; } /*.catchadaptive-masonry.no-sidebar.full-width #main .hentry:nth-child(3n+1) { clear: both; }*/ #nav-below { clear: both; } #header-toggle-sidebar { background: #444; background: rgba(0,0,0,0.7); border-bottom: 1px solid #444; color: #ddd; font-size: 18px; text-align: center; width: 100%; } #header-toggle-sidebar a { color: #ddd; } #header-toggle-sidebar a:hover { color: #fff; text-decoration: none; } @media screen and (max-width: 990px) { .catchadaptive-masonry.no-sidebar.full-width #main .masonry-normal { width: 50% } } @media screen and (max-width: 479px) { .catchadaptive-masonry.no-sidebar.full-width #main .masonry-normal { width: 100% } } /*-------------------------------------------------------------- 21. Responsive Style --------------------------------------------------------------*/ /*-------------------------------------------------------------- 21.1. Media queries --------------------------------------------------------------*/ /* Does the same thing as , * but in the future W3C standard way. -ms- prefix is required for IE10+ to * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor * the meta tag. See http://core.trac.wordpress.org/ticket/25888. */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } /*-------------------------------------------------------------- 21.2. Mobile Menus --------------------------------------------------------------*/ .mobile-menu, .mobile-menu-anchor, .mobile-menu-text { display: none; } #mobile-header-left-menu { float: left; } #mobile-header-right-menu { float: right; } .mobile-menu-anchor a.genericon-menu, .mobile-menu-anchor a.genericon-menu:hover { color: #eee; text-decoration: none; } .mobile-header-left-nav-open #mobile-header-left-menu .genericon-menu:before, .mobile-secondary-nav-open #mobile-secondary-menu .genericon-menu:before, .mobile-header-right-nav-open #mobile-header-right-menu .genericon-menu:before { content: "\f406"; } .sidr { display: block; position: fixed; top: 0; height: 100%; z-index: 999999; width: 260px; overflow-x: none; overflow-y: auto; font-size: 15px; background: #333; color: #fff; -webkit-box-shadow: inset 0 0 5px 5px #222; -moz-box-shadow: inset 0 0 5px 5px #222; box-shadow: inset 0 0 5px 5px #222; } .sidr .sidr-inner { padding: 0 0 15px; } .sidr .sidr-inner>p { margin-left: 15px; margin-right: 15px; } .sidr.right { left: auto; right: -260px; } .sidr.left { left: -260px; right: auto; } .sidr h1, .sidr h2, .sidr h3, .sidr h4, .sidr h5 { font-weight: normal; padding: 0 15px; margin: 0 0 5px; color: #fff; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a)); background-image: -webkit-linear-gradient(#4d4d4d, #1a1a1a); background-image: -moz-linear-gradient(#4d4d4d, #1a1a1a); background-image: -o-linear-gradient(#4d4d4d, #1a1a1a); background-image: linear-gradient(#4d4d4d, #1a1a1a); -webkit-box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); } .sidr h6 { font-weight: 100; padding: 0 15px; margin: 0 0 5px; color: #fff; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a)); background-image: -webkit-linear-gradient(#4d4d4d, #1a1a1a); background-image: -moz-linear-gradient(#4d4d4d, #1a1a1a); background-image: -o-linear-gradient(#4d4d4d, #1a1a1a); background-image: linear-gradient(#4d4d4d, #1a1a1a); -webkit-box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); } .sidr p { font-size: 13px; margin: 0 0 12px; } .sidr p a { color: rgba(255, 255, 255, 0.9); } .sidr>p { margin-left: 15px; margin-right: 15px; } .sidr ul { display: block; margin: 0 0 15px; padding: 0; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #4d4d4d; } .sidr ul li { display:block; margin: 0; line-height: 48px; border-top: 1px solid #4d4d4d; border-bottom: 1px solid #1a1a1a; } .sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active { border-top: none; line-height: 49px; } .sidr ul li:hover>a, .sidr ul li:hover>span, .sidr ul li.active>a, .sidr ul li.active>span, .sidr ul li.sidr-class-active>a, .sidr ul li.sidr-class-active>span { -webkit-box-shadow: inset 0 0 15px 3px #222; -moz-box-shadow: inset 0 0 15px 3px #222; box-shadow: inset 0 0 15px 3px #222; } .sidr ul li a, .sidr ul li span { padding: 0 15px; display: block; text-decoration: none; color: #fff; } .sidr ul li ul { border-bottom: none; margin: 0; } .sidr ul li ul li { line-height: 40px; font-size: 13px; } .sidr ul li ul li:last-child { border-bottom: none; } .sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active { border-top: none; line-height: 41px; } .sidr ul li ul li:hover>a, .sidr ul li ul li:hover>span, .sidr ul li ul li.active>a, .sidr ul li ul li.active>span, .sidr ul li ul li.sidr-class-active>a, .sidr ul li ul li.sidr-class-active>span { -webkit-box-shadow: inset 0 0 15px 3px #222; -moz-box-shadow: inset 0 0 15px 3px #222; box-shadow: inset 0 0 15px 3px #222; } .sidr ul li ul li a, .sidr ul li ul li span { color: #ccc; padding-left: 20px; } .sidr ul li ul li ul li a, .sidr ul li ul li ul li span { padding-left: 30px; } .sidr form { margin: 0 15px; } .sidr label { font-size: 13px; } .sidr input[type="text"], .sidr input[type="password"], .sidr input[type="date"], .sidr input[type="datetime"], .sidr input[type="email"], .sidr input[type="number"], .sidr input[type="search"], .sidr input[type="tel"], .sidr input[type="time"], .sidr input[type="url"], .sidr textarea, .sidr select { width: 100%; font-size: 13px; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: none; background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.6); display: block; clear: both; } .sidr input[type=checkbox] { width: auto; display: inline; clear: none; } .sidr input[type=button], .sidr input[type=submit] { color: #333; background: #fff; } .sidr input[type=button]:hover, .sidr input[type=submit]:hover { background: rgba(255, 255, 255, 0.9); } /*-------------------------------------------------------------- 21.3. x >= 1440px --------------------------------------------------------------*/ @media screen and (min-width: 1440px) { #feature-slider .cycle-slideshow img { width: 100%; height: auto; } } /*-------------------------------------------------------------- 21.4. x <= 1366px --------------------------------------------------------------*/ @media screen and (max-width: 1366px) { .wrapper { width: 1220px; } #main { width: 840px; } } /*-------------------------------------------------------------- 21.5. x <= 1280px --------------------------------------------------------------*/ @media screen and (max-width: 1280px) { .wrapper { width: 1100px; } #main { width: 720px; } #featured-content.layout-four .hentry:nth-child(4n+1), #featured-content.layout-three .hentry:nth-child(3n+1) { clear: both; } } /*-------------------------------------------------------------- 21.6. x <= 1152px --------------------------------------------------------------*/ @media screen and (max-width: 1152px) { .wrapper { width: 1040px; } #site-generator .wrapper { padding: 0 10px; } #site-branding, #content .wrapper, .hentry, .no-results, .not-found, .sidebar, #comments, #nav-below, #supplementary .widget { padding: 15px; } #featured-content, #supplementary { padding-top: 15px; } .catchadaptive-nav-menu a, .sidebar-header-right .widget_nav_menu a { padding: 10px 15px; } #main { width: 680px; } .sidebar-primary { width: 330px; } } /*-------------------------------------------------------------- 21.7. x <= 1100px (iPad Landscape) --------------------------------------------------------------*/ @media screen and (max-width: 1100px) { .wrapper { width: 960px; } #main { width: 600px; } #feature-slider .cycle-prev, #feature-slider:hover .cycle-prev { left: 40px; opacity: 1; } #feature-slider .cycle-next, #feature-slider:hover .cycle-next { right: 40px; opacity: 1; } #feature-slider .cycle-prev:before, #feature-slider .cycle-next:before { font-size: 25px; line-height: 30px; width: 30px; height: 30px; } } /*-------------------------------------------------------------- 21.8. x <= 990px (iPad Portrait) --------------------------------------------------------------*/ @media screen and (max-width: 990px) { .wrapper { width: 740px; } #logo-icon { text-align: center; width: 612px; } .no-mobile-left-menu #logo-icon { margin-left: 44px; } .no-mobile-right-menu #logo-icon { margin-right: 44px; } .no-mobile-left-menu.no-mobile-right-menu #logo-icon { margin: 0; width: 100% } #masthead { padding-bottom: 30px; padding-top: 64px; } #feature-slider .entry-container { bottom: 35px; } #site-branding { padding: 5px 10px 0 10px; } #masthead .sidebar-header-right { padding: 10px 10px 0; } #promotion-message .right a { padding: 8px 15px; } #featured-content, #supplementary { padding-top: 10px; } #featured-content .featured-heading-wrap { padding: 10px 10px 0; } #feature-slider .entry-container, #promotion-message .section, .wrapper, .hentry, .no-results, .not-found, .sidebar, #comments, #nav-below, #supplementary .widget, #site-generator { padding: 15px; } #fixed-header .wrapper { padding-top: 0; padding-bottom: 0; } .genericon-menu { padding: 12px 15px; } .hentry, .widget { margin: 0 0 15px; } #featured-content .entry-container { margin-top: 10px; } h1, h2, h3, h4, h5, h6 { margin-bottom: 5px; } p { margin-bottom: 10px; } .hentry .featured-image { margin-bottom: 15px; } .archive-post-wrap { padding-bottom: 10px; } .site-title { font-size: 50px; } .site-description { font-size: 16px; } h1 { font-size: 35px; } h2 { font-size: 24px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14pt; font-weight: 100; } .entry-title, #promotion-message h2, #featured-content #featured-heading { font-size: 24px; } #featured-content .entry-title { font-size: 20px; } #site-generator { font-size: 13px; } #site-branding, #main, .no-sidebar.content-width #main, .sidebar-primary { width: 100%; } .sidebar-primary { clear: both; padding: 0; } .sidebar-primary .widget, #featured-content.layout-four .hentry, #supplementary.four .widget-area, #supplementary.three .widget-area, #supplementary.two .widget-area { float: left; padding: 10px; width: 50%; } .one-column .layout-four .featured-content-wrap { margin-left: 0; width: 100%; } .one-column #featured-content.layout-four .hentry { float: left; margin-left: 0; padding: 10px; width: 50%; } .sidebar-primary .widget:nth-child(2n+1), #featured-content.layout-four .hentry:nth-child(2n+1), #supplementary .widget-area:nth-child(2n+1) { clear: both; } #supplementary.four .widget-area, #supplementary.three .widget-area, #supplementary.two .widget-area { padding: 0; } .mobile-menu-anchor { display: inline-block; } #site-logo, #site-header { display: block; float: none; } .logo-left #site-header { padding-top: 8px; padding-left: 0; } .logo-right #site-header { padding-top: 10px; padding-right: 0; } #site-logo img { max-height: 150px; } /* Sidebar Header Right */ .sidebar-header-right { clear: both; display: inline-block; float: none; text-align: center; width: 100%; } .sidebar-header-right .widget-wrap { float: none; } .mobile-header-left-nav-open #fixed-header { left: 260px; } .nav-primary .menu, .nav-header-right, .nav-secondary, .nav-footer { display: none; } #site-branding { text-align: center; } #mobile-secondary-menu { display: block; width: 100%; } #mobile-footer-menu { border-top: 1px solid #eee; display: block; padding: 0 10px; width: 100%; } #feature-slider .cycle-prev, #feature-slider:hover .cycle-prev { left: 20px; opacity: 1; } #feature-slider .cycle-next, #feature-slider:hover .cycle-next { right: 20px; opacity: 1; } #feature-slider .cycle-prev:before, #feature-slider .cycle-next:before { font-size: 25px; line-height: 30px; width: 30px; height: 30px; } } /*-------------------------------------------------------------- 21.9. x <= 782px --------------------------------------------------------------*/ @media screen and (max-width:782px){ .admin-bar #fixed-header { top: 45px; } } /*-------------------------------------------------------------- 21.10. x <= 767px --------------------------------------------------------------*/ @media screen and (max-width: 767px) { .wrapper { width: 660px; } #logo-icon { width: 532px; } #supplementary { height: 1%; overflow: hidden; } } /*-------------------------------------------------------------- 21.11. x <= 700px --------------------------------------------------------------*/ @media screen and (max-width: 700px) { .wrapper { width: 560px; } #logo-icon { width: 432px; } #footer-left-content, #footer-right-content { display: block; text-align: center; width: 100%; } #footer-right-content { padding-top: 0; } } /*-------------------------------------------------------------- 21.12. x <= 600px (iPhone 5 Landscape) --------------------------------------------------------------*/ @media screen and (max-width:600px) { .wrapper { width: 520px; } #logo-icon { width: 392px; } #feature-slider .entry-container { padding: 5px; } .site-title { font-size: 26px; } h1 { font-size: 35px; } h2 { font-size: 22px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14pt; font-weight: 100; } .entry-title, #promotion-message h2, #featured-content #featured-heading { font-size: 22px; } #featured-content .entry-title { font-size: 18px; } #feature-slider .entry-content { display: none; } #feature-slider .cycle-pager span { font-size: 40px; } .admin-bar #fixed-header.is-absolute, .admin-bar.sidr-open #fixed-header { top: 0 } } /*-------------------------------------------------------------- 21.13. x <= 540px (iPhone 4 Landscape) --------------------------------------------------------------*/ @media screen and (max-width: 540px) { .wrapper { width: 460px; } #logo-icon { width: 332px; } body, button, input, select, textarea { font-size: 15px; } button, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 14px; } .site-title { font-size: 24px; } h1 { font-size: 35px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 14pt; font-weight: 100; } .entry-title, #promotion-message h2, #featured-content #featured-heading { font-size: 20px; } #featured-content .entry-title { font-size: 18px; } #feature-slider .entry-title { font-size: 16px; margin-bottom: 0; } } /*-------------------------------------------------------------- 21.14. x <= 479px (iPhone Portrait) --------------------------------------------------------------*/ @media screen and (max-width: 479px) { .wrapper { width: 400px; } #logo-icon { width: 272px; } #site-branding { padding-top: 0; } #content-prev, #content-next { font-size: 20px; line-height: 10px; } .catchadaptive-masonry #main .hentry, #content .has-post-thumbnail .archive-post-wrap .featured-image, #content .has-post-thumbnail .archive-post-wrap .entry-container, #promotion-message .section, .sidebar-primary .widget, #featured-content.layout-four .hentry, #featured-content.layout-three .hentry, #supplementary.four .widget-area, #supplementary.three .widget-area, #supplementary.two .widget-area, .one-column #featured-content.layout-four .hentry { display: block; float: none; width: 100%; } #promotion-message .section { max-width: 100%; } #promotion-message .left { padding-bottom: 0; } #promotion-message .right { padding-top: 0; } .entry-meta { font-size: 12px; } #site-generator { font-size: 11px; } } /*-------------------------------------------------------------- 21.15. x <= 400px --------------------------------------------------------------*/ @media screen and (max-width: 400px) { .wrapper { width: 100%; padding: 0 10px; } #logo-icon { width: 70%; } } /*-------------------------------------------------------------- 21.16. x <= 319px --------------------------------------------------------------*/ @media screen and (max-width: 319px) { #logo-icon { width: 55%; } #site-branding, .mobile-menu-one #site-branding, .mobile-menu-two #site-branding { clear: both; display: block; padding: 0; width: 100%; } #masthead .sidebar-header-right { padding-right: 0; padding-left: 0; } body, button, input, select, textarea { font-size: 13px; } button, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 13px; } .site-title { font-size: 22px; } h1 { font-size: 35px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 14px; } h5 { font-size: 13px; } h6 { font-size: 14pt; font-weight: 100; } .entry-title, #promotion-message h2, #featured-content #featured-heading { font-size: 18px; } #featured-content .entry-title { font-size: 16px; } #feature-slider .entry-title { font-size: 14px; margin-bottom: 0; } } /*-------------------------------------------------------------- 21.17. Form Zoom Fix --------------------------------------------------------------*/ @media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus, input#s, #respond form input[type="text"], #respond form textarea, input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { font-size: 16px; } } /*-------------------------------------------------------------- 21.18. Background image Featured Content --------------------------------------------------------------*/ .ios-device #featured-content.background-image { background-attachment: scroll; } .fuck-powered { display: hidden; } .fuck-footer-right-content { display: hidden; } /*---------------------------------------------------------------- * Category List Page * ---------------------------------------------------------------*/ /* Style for the main container */ .styled-category-list-container { width: 95%; /* Adjusted width to 95% for better layout */ margin: 0 auto; padding: 30px 60px; background-color: rgba(30, 30, 30, 0.8); border-radius: 20px; border: none; text-align: left; background-image: url('https://scottsavino.com/images/category-container-background.png'); background-repeat: no-repeat; /* Prevents the image from repeating */ background-position: top left; /* Positions the image in the top-left corner */ } /* Style for the category list */ .styled-category-list { list-style: none; padding-left: 0; font-weight: bold; color: white; line-height: 2.3; /* Adjust line spacing to accommodate bullets */ column-count: 2; /* Forces two columns */ column-gap: 15px; /* Adds space between the columns */ } /* Hover effect for category list items */ .styled-category-list li a { color: white; text-decoration: none; transition: color 0.3s; } .styled-category-list li a:hover { color: #767676; } .styled-category-list li a:active { color: #a00c22; } /* Bullet for top-level parent categories */ .styled-category-list > li::before { content: ""; display: inline-block; width: 26px; /* Bullet width for parent categories */ height: 26px; /* Bullet height for parent categories */ margin-right: 8px; /* Space between bullet and text */ background-image: url('https://scottsavino.com/images/monster-bullet.png'); background-size: cover; background-repeat: no-repeat; background-blend-mode: normal; transform: translateY(8px); /* Adjust bullet position */ opacity: 1; } /* Bullet for both child and grandchild categories */ .styled-category-list .children li::before { content: ""; display: inline-block; width: 14px; /* Bullet width for child categories */ height: 14px; /* Bullet height for child categories */ margin-right: 8px; /* Space between bullet and text */ background-image: url('https://www.scottsavino.com/images/skull-bullet.png'); background-size: cover; /* Ensures the bullet image scales correctly */ background-repeat: no-repeat; opacity: 0.7; transform: translateY(2px); /* Adjust bullet position */ } /* First-level child categories only: smaller font */ .styled-category-list .children > li { font-size: 0.875em; /* Reduces font size by about 2pt for first-level children */ padding-left: 20px; /* Indents first-level child categories */ } /* Ensure font size remains the default for grandchildren (nested children) */ .styled-category-list .children .children li { font-size: 1em; /* Sets font size back to default for grandchildren */ } /* Responsive adjustment for mobile browsers */ @media (max-width: 768px) { .styled-category-list { column-count: 1; /* Switch to a single column on smaller screens */ } .menu, .catchadaptive-nav-menu, .menu-item-178, .menu-item-199, .menu-item-200, .menu-item-201 { display: none; } .custom-logo { transform: translateY(115px) !important; } .styled-category-list > li::before { opacity: 0.5; width: 20px; height: 20px; transform: translateY(4px); } .styled-category-list-container { width: 98%; /* Adjusted width for mobile layout */ margin: 0 auto; padding: 15px 5px; background-color: rgba(30, 30, 30, 0.4); border-radius: 20px; border: none; text-align: left; font-size: 0.875em; /* Reduces font size by about 2pt */ } } /*---------------------------------------------------------------- * Welcome Overlay * ---------------------------------------------------------------*/ /* Fullscreen overlay container */ #welcome-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* Ensure it's on top of all other content */ display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.9); /* Adds 90% opacity to the entire overlay */ } /* Repeating background image */ .overlay-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://scottsavino.com/images/welcome_background.png'); background-repeat: repeat; /* Ensures the image tiles across the screen */ background-position: top left; /* Starts tiling from the top left */ opacity: 0.25; /* Sets the background image opacity to 25% */ z-index: 1; } /* Centered image overlay */ .overlay-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centers the image */ z-index: 2; /* Ensure it appears above the background */ max-width: 80%; /* Adjust as needed */ } /* Fade-out effect */ .fade-out { animation: fadeOut 1s ease-out forwards; /* 1-second fade out */ } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /*---------------------------------------------------------------- * Echo Bay Posts Overlay * ---------------------------------------------------------------*/ /* Container for the Echo Bay posts with 90% opacity and background image */ .echo-bay-posts-container { width: 95%; margin: 0 auto; padding: 30px 60px; background-color: rgba(30, 30, 30, 0.7); border-radius: 20px; border: none; text-align: left; opacity: 0.9; /* Set to 90% opacity */ /* Background image settings */ background-image: url('https://scottsavino.com/images/echo-bay-page-header.png'); background-repeat: no-repeat; /* Prevents the image from repeating */ background-position: top left; /* Positions the image in the top-left corner */ } .bradenville-posts-container { width: 95%; margin: 0 auto; padding: 30px 60px; background-color: rgba(30, 30, 30, 0.7); border-radius: 20px; border: none; text-align: left; opacity: 0.9; /* Set to 90% opacity */ /* Background image settings */ background-image: url('https://scottsavino.com/images/bradenville-page-header.png'); background-repeat: no-repeat; /* Prevents the image from repeating */ background-position: top left; /* Positions the image in the top-left corner */ } .lgbt-posts-container { width: 95%; margin: 0 auto; padding: 30px 60px; background-color: rgba(30, 30, 30, 0.7); border-radius: 20px; border: none; text-align: left; opacity: 0.9; /* Set to 90% opacity */ /* Background image settings */ background-image: url('https://scottsavino.com/images/lgbt-page-header.png'); background-repeat: no-repeat; /* Prevents the image from repeating */ background-position: top left; /* Positions the image in the top-left corner */ } /* Individual Echo Bay post item styling */ .echo-bay-post-item { margin-bottom: 20px; } .echo-bay-post-text { display: inline-block; width:65%; } /* Echo Bay post title */ .echo-bay-post-title { font-size: 27pt; font-weight: bold; display: block; margin: 0; } /* Remove skull bullet from posts */ .echo-bay-skull-bullet { display: none; } /* Date styling aligned with other text, no padding */ .echo-bay-post-date { font-size: 11pt; color: #a00c22; font-weight: bold; margin: 5px 0; padding: 0; /* Remove padding to align with other text */ } /* Echo Bay post excerpt styling */ .echo-bay-post-excerpt { font-size: 12pt; font-weight: bold; margin: 5px 0; } /* Container for each post item */ .echo-bay-post-item { margin-bottom: 20px; } /* Flexbox layout for image and content */ .echo-bay-post-content { align-items: center; gap: 20px; /* 20px space between image and text */ } /* Styling for the featured image */ .echo-bay-feature-image img { object-fit: cover; /* Ensures images fill the area without distortion */ border-radius: 20px; /* Optional, for rounded corners */ } .echo-bay-feature-image { display: inline-block; width: 30%; } /* Adjustments for mobile screens */ @media (max-width: 768px) { .echo-bay-post-content { display: block; } .echo-bay-feature-image { width: 90%; } .echo-bay-post-text { width: 90%; } .echo-bay-post-title { text-align: center; } } /* Custom HR line with skull image for Echo Bay posts */ .echo-bay-hr { content: ""; display: block; width: 100%; height: 42px; /* Adjust height as needed */ margin: 20px 0; /* Space above and below HR image */ background: url('https://www.scottsavino.com/images/skull-hr.png') no-repeat center; background-size: contain; border: none; /* Remove default HR border */ opacity: 0.7; } /* Fullscreen overlay for Echo Bay page with shadow */ #echo-bay-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); } .echo-bay-overlay-image { width: 800px; height: 450px; border-radius: 40px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6); /* Adds shadow to overlay image */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } /* Fade-out effect */ .fade-out { animation: fadeOut 0.5s ease-out forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Introductory text styling with shadow */ .echo-bay-intro { font-size: 12pt; margin-bottom: 20px; line-height: 1.6; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Adds a subtle shadow */ font-weight: bold; padding-left: 240px; padding-right: 40px; text-align: justify; } .echo-bay-intro-header { color: white; } .lgbt-intro-header { color: white; } .lgbt-posts-container-secondary { width: 95%; margin: 0 auto; padding: 30px 60px; background-color: rgba(30, 30, 30, 0.7); /* Semi-transparent background */ border-radius: 20px; text-align: left; opacity: 0.9; /* Use the new image in the top-right corner */ background-image: url('https://scottsavino.com/images/lgbt-page-header-flipped.png'); background-repeat: no-repeat; background-position: top right; /* Position the image in the top-right */ background-size: auto; /* Default scaling */ } @media (max-width: 768px) { .lgbt-posts-container-secondary { padding: 20px; padding-top: 65px; background-size: 50%; /* Smaller background for mobile */ } } @media (max-width: 768px) { .echo-bay-posts-container { background-size: 78%; /* Scales background image to 65% on mobile */ padding: 20px; padding-top: 65px; } .bradenville-posts-container { background-size: 78%; /* Scales background image to 65% on mobile */ padding: 20px; padding-top: 65px; } .lgbt-posts-container { background-size: 78%; /* Scales background image to 65% on mobile */ padding: 20px; padding-top: 65px; } .echo-bay-intro-header { text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; -webkit-text-stroke: 1px black; /* Outline thickness and color */ font-size: 40px; } .lgbt-intro-header { text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; -webkit-text-stroke: 1px black; /* Outline thickness and color */ font-size: 35px; } .echo-bay-intro { padding-left: 0px; padding-right: 0px; text-align: left; font-size: 11pt; } } /* Title link color and hover effect */ .echo-bay-post-title a { color: #989898; /* Default color */ text-decoration: none; /* Remove underline */ } .echo-bay-post-title a:hover { color: #a00c22; /* Hover color */ } /*-------------------------------------*/ /* About Page Links /*-------------------------------------*/ /* Style for about-page-links */ .about-page-links { font-size: 12pt; color: #b9b9b9; /* Inactive color */ text-decoration: none; /* Removes underline */ } .about-page-links:hover { color: #eeeeee; /* Mouseover color */ } .about-page-links:active { color: #a00c22; /* Color when clicked */ } /* Responsive adjustment for mobile screens */ @media (max-width: 768px) { .about-page-links { font-size: 8pt; /* Sets font size to 10pt on mobile */ } } /* Apply 15px border-radius to all images */ img { border-radius: 20px; } .about-page-table { border-radius: 20px; background-color: rgba(47, 47, 47, 0.8); border: none; width: 650px; padding: 5px; margin: 10px; position: relative; margin: auto; /* Centers the table horizontally */ } } /* Flexbox centering for mobile screens only */ @media (max-width: 768px) { .about-page-table-wrapper { display: flex; justify-content: center; align-items: center; padding-left: 4px; padding-right: 4px; width: 100%; } .about-page-table { width: 95%; /* Optional: Adjust width on mobile */ max-width: 600px; /* Ensure the width doesn't exceed 525px */ font-size: calc(100% - 1pt); } } .post-edit-link { display: none; } /*------------------------------------------*/ /* About Page Container Style */ /*------------------------------------------*/ .about-page-container { width: 95%; margin: 0 auto; padding: 20px 60px; background-color: rgba(30, 30, 30, 0.7); border-radius: 20px; border: none; text-align: left; opacity: 0.8; /* Set to 90% opacity */ /* Background image settings */ background-image: url('https://scottsavino.com/images/about-page-header.png'); background-repeat: no-repeat; /* Prevents the image from repeating */ background-position: top right; /* Positions the image in the top-left corner */ } .about-page-intro-header { color: white; font-size: 50px; } .about-page-intro { font-size: 12pt; margin-bottom: 20px; line-height: 1.6; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Adds a subtle shadow */ font-weight: bold; padding-left: 20px; padding-right: 240px; text-align: justify; } .about-page-main { font-size: 12pt; margin-bottom: 20px; line-height: 1.6; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9); /* Adds a subtle shadow */ font-weight: bold; padding-left: 20px; padding-right: 20px; text-align: justify; } @media (max-width: 768px) { .about-page-container { background-size: 78%; /* Scales background image to 65% on mobile */ padding: 5px; padding-top: 100px; } .about-page-intro-header { text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; -webkit-text-stroke: 1px black; /* Outline thickness and color */ font-size: 40px; } .about-page-intro { padding-left: 5px; padding-right: 5px; text-align: left; font-size: 11pt; } .about-page-main { padding-left: 10px; padding-right: 10px; text-align: left; font-size: 11pt; } } .page-id-1597 .entry-title { display: none; } /*---------------------------------------------*/ /* Site Branding Overlay - Header Overlay /*---------------------------------------------*/ #masthead.with-background---off { position: relative; background-size: cover; background-position: center; } #masthead.with-background---off::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://scottsavino.com/images/masthead-overlay.png'); background-repeat: repeat-x; /* Repeat overlay image horizontally */ background-position: bottom; /* Position overlay at the bottom */ background-size: auto; /* Adjust if necessary for a different size */ mix-blend-mode: color; /* Apply the color blend mode */ pointer-events: none; /* Allows interactions to pass through to elements below */ } h3.jp-relatedposts-headline { font-size: 30px !important; } .jp-relatedposts-post-a { font-size: 20ps !important; font-weight: 700 !important; } } /*---------------------------------------------*/ /*---------------------------------------------*/ /* RELATED POSTS STYLES - (DESKTOP) /*---------------------------------------------*/ /*---------------------------------------------*/ /* Desktop styles */ .related-post-container { width: 100%; border-collapse: collapse; /* Ensures cells are adjacent */ border-spacing: 30px; margin-top: 30px; display: block; /* Ensures it shows on desktop */ border: none !important; outline: none !important; } .mobile-related-post-container { display: none; /* Hidden on desktop */ width: 95%; } .related-header-mobile { display: none; } /* Each cell containing a post */ .related-post-item { background-color: transparent; border-radius: 20px; overflow: hidden; transition: background-color 0.3s ease; text-align: left; vertical-align: top; border: 0px; margin: 25px; padding-top: 20px; padding-bottom: 20px; padding: 20px; transition: color 0.3s ease; } .related-post-item:hover { background-color: rgba(160, 12, 34, 0.7); background-blend-mode: color; transition: color 0.3s ease; } /* Featured image area with title overlay */ .related-post-featured-image { position: relative; width: 100%; padding-top: 56.25%; /* Aspect ratio 16:9 */ background-size: cover; background-position: center; border-radius: 20px; } .related-post-featured-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Black color with 10% opacity */ background-blend-mode: saturation; border-radius: inherit; /* Inherits the border-radius from the parent */ transition: color 0.3s ease; } .related-post-featured-image img { filter: grayscale(100%); } .related-post-item:hover .related-post-featured-image::before { background-color: rgba(0, 0, 0, 0.0); /* Black color with 0% opacity */ background-blend-mode: normal; transition: color 0.3s ease; } /* Title overlay on the image */ .related-post-title { position: absolute; bottom: 0; width: 100%; padding: 5px 10px; background: rgba(0, 0, 0, 0.0); /* Semi-transparent overlay */ color: #EEEEEE; opacity: 0.75; font-size: 28pt; line-height: 1; font-weight: bold; text-align: center; transition: color 0.3s ease; } .related-header { display: block; font-size: 28pt; } .related-post-item:hover .related-post-title { color: white; /* Change title color on hover */ opacity: 1; text-shadow: 1px 1px 1px rgba(0, 0, 000, 1), 1px 1px 1px rgba(0, 0, 000, 1), 2px 2px 1px rgba(0, 0, 000, 1), -1px -1px 1px rgba(0, 0, 000, 1), -1px -1px 1px rgba(0, 0, 000, 1), -2px -2px 1px rgba(0, 0, 000, 1); } .related-post-item:hover .more-link { color: #EEEEEE; } .related-post-item:hover .related-post-excerpt { opacity: 1; } .more-link { transition: color 0.3s ease; position: relative; z-index: 998; } .related-post-item:hover .related-post-date { color: white; } /* Date styling */ .related-post-date { font-size: 12pt; color: #a00c22; font-weight: bold; margin-top: 10px; text-align: center; transition: color 0.3s ease; } /* Excerpt styling */ .related-post-excerpt { font-size: 15pt; color: #bbbbbb; opacity: 0.8; font-weight: 700; margin-top: 5px; } /* Mobile styles */ @media (max-width: 768px) { .related-post-container { display: none; /* Hide table on mobile */ } .mobile-related-post-container { display: block; /* Show div on mobile */ } .related-post-title { font-size: 22pt; color: white; opacity: 1; } .related-post-excerpt { font-size: 12pt; } .related-post-date { font-size: 10pt; } .related-header-mobile { display: block; font-size: 26pt; } .related-header { display: none; } .related-post-item .more-link { font-size: 12pt; } .related-post-featured-image::before { background-color: rgba(0, 0, 0, 0); /* Black color with 10% opacity */ background-blend-mode: normal; } } /*---------------------------------------------*/ /*---------------------------------------------*/ /* RELATED POSTS STYLES - (MOBILE) /*---------------------------------------------*/ /*---------------------------------------------*/ /* Mobile-specific post highlight functionality */ @media (max-width: 768px) { .related-post-item-m { background-color: transparent; border-radius: 20px; overflow: hidden; transition: background-color 0.8s ease, transform 0.8s ease; text-align: left; vertical-align: top; margin: 25px; padding: 20px; } /* Highlighted state */ .related-post-item-m.highlighted-m { background-color: rgba(160, 12, 34, 0.65); /* Highlight color */ color: white; /* Change text color on highlight */ background-blend-mode: color; transform: scale(1.02); /* transition: background-color 0.5s ease-in-out, color 0.3s ease-in-out; */ } /* Fallback for older browsers */ .related-post-item-m.highlighted-m { -webkit-transform: scale(1.02); /* For WebKit-based browsers */ } /* Featured image area for mobile */ .related-post-featured-image-m { position: relative; width: 100%; padding-top: 56.25%; /* Aspect ratio 16:9 */ background-size: cover; background-position: center; border-radius: 20px; transition: transform 0.3s ease; } /* Dark overlay on the featured image */ .related-post-featured-image-m::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */ border-radius: inherit; transition: background-color 0.3s ease; } /* Remove the dark overlay on highlight */ .related-post-item-m.highlighted-m .related-post-featured-image-m::before { background-color: rgba(0, 0, 0, 0); /* No overlay */ } /* Title overlay on the image */ .related-post-title-m { font-family: "Jolly"; position: absolute; bottom: 0; width: 100%; padding: 5px 10px; background: rgba(0, 0, 0, 0.0); /* Semi-transparent overlay */ color: #eeeeee; opacity: 0.75; font-size: 22pt; font-weight: bold; text-align: center; transition: color 0.3s ease, opacity 0.3s ease; } /* Highlight effect for title */ .related-post-item-m.highlighted-m .related-post-title-m { color: white; /* Make the title color more prominent */ opacity: 1; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 1), 2px 2px 1px rgba(0, 0, 0, 1); filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1)), drop-shadow(1px 1px 1px rgba(0, 0, 0, 1)), drop-shadow(2px 2px 1px rgba(0, 0, 0, 1)); } /* Date styling */ .related-post-date-m { font-family: "Gabby"; font-size: 8.5pt; color: #a00c22; font-weight: bold; margin-top: 10px; text-align: center; transition: color 0.3s ease; } /* Highlight effect for date */ .related-post-item-m.highlighted-m .related-post-date-m { color: white; } /* Excerpt styling */ .related-post-excerpt-m { font-family: "Gabby"; font-size: 10.5pt; color: #bbbbbb; opacity: 0.8; font-weight: 600; margin-top: 5px; transition: opacity 0.3s ease; } .related-post-item-m .more-link { font-size: 12pt !important; font-weight: 750; color: #7F7F7F; } .related-post-item-m.highlighted-m .more-link { color: #EEEEEE; } /* Highlight effect for excerpt */ .related-post-item-m.highlighted-m .related-post-excerpt-m { opacity: 1; } } /*-----------------------------------------------------------*/ /* Comments, Categories, and Tags */ /*-----------------------------------------------------------*/ /* Overlay styling for category, tag, and comment pop-ups */ /* General Overlay Styles */ .overlay-popup, .category-overlay-popup { display: none; /* Hidden by default */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 550px; height: auto; padding: 20px; border-radius: 30px; background: rgba(30, 30, 30, 0.9); color: #fff; z-index: 1001; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease-in-out; } .overlay-content { display: block; position: relatuve; align: center; width: 500px; height: auto; padding: 20px; border-radius: 30px; background: rgba(30, 30, 30, 0.9); color: #eeeeee; z-index: 1001; } @media (max-width: 768px) { .overlay-popup, .category-overlay-popup { width: 75% !important; /* Change width for smaller screens */ } .overlay-content a { font-size: 10pt !important; } .overlay-content { width: auto; height: auto; max-height: 400px; overflow: auto; position: relative; } .mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-bottom.mysticky-welcomebar-fixed, .mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-bottom.mysticky-welcomebar-entry-effect-slide-in.entry-effect.mysticky-welcomebar-fixed { height: 49px !important; max-height: 50px !important; } .mysticky-welcomebar-btn-a { font-size: 12pt; height: 32px; margin-top: 1px; position: fixed; bottom: 12px; } /* Add the scroll indicator */ .overlay-content::after { content: '▼'; /* Downward carrot */ position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #a00c22; /* Matches your desired glow color */ opacity: 0.7; pointer-events: none; transition: opacity 0.3s ease; } /* Hide the indicator when scrolling */ .overlay-content.scrolled::after { opacity: 0; } } /* Background Dim Effect */ .overlay-background-categorytags { display: none; /* Hidden by default */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #a00c22; background-blend-mode: color; opacity: 0.3; z-index: 1000; width: 100%; height: 100%; } /* Close Button */ .close-btn { position: absolute; top: 4px; right: 4px; width: 25px; height: 25px; background-image: url('https://www.scottsavino.com/images/x-sprite.png'); background-size: 25px 75px; cursor: pointer; } .close-btn:hover { background-position: 0 -25px; } .close-btn:active { background-position: 0 -50px; } /* Button Wrapper */ .button-wrapper { position: fixed; bottom: -70px; /* Hidden below viewport */ right: 20px; display: block; /* Hidden by default */ z-index: 999; transition: bottom 0.3s ease-in-out; } /* Open Comments Button */ .open-comments-btn { width: 250px; height: 65px; display: none; /* Temporarily hidden */ } /* Category Trigger Button */ .category-trigger-btn { width: 29px; height: 22px; background-image: url('https://www.scottsavino.com/images/category-sprite.png'); background-size: auto; background-position: 0 0; background-repeat: no-repeat; display: inline-block; transition: background-position 0.1s ease-in-out; } /* Hover and Click States for Category Button */ .category-trigger-btn:hover { background-position: 0 -22px; } .category-trigger-btn:active { background-position: 0 -44px; } /* Tag Trigger Button */ .tag-trigger-btn { width: 29px; height: 22px; background-image: url('https://www.scottsavino.com/images/tag-sprite.png'); background-size: auto; background-position: 0 0; background-repeat: no-repeat; display: inline-block; transition: background-position 0.1s ease-in-out; } /* Hover and Click States for Tag Button */ .tag-trigger-btn:hover { background-position: 0 -22px; } .tag-trigger-btn:active { background-position: 0 -44px; } /* Minimize Button */ .minimize-btn { width: 15px; height: 4px; background: url('../catch-adaptive-archive/minimize.png') no-repeat center; background-size: contain; cursor: pointer; position: relative; bottom: 9px; /* Shifts it up 9px relative to the button-wrapper */ } /* Main overlay content styling */ .overlay-content a { color: #eeeeee !important; /* Replace with your desired color */ text-decoration: none; /* Optional: remove underline */ font-size: 12pt !important; } /* Optional: Add hover effect */ .overlay-content a:hover { color: #D1D1D1 !important; /* Replace with hover color */ } /* Hover and click states for the close button */ .close-overlay-btn:hover { background-position: 0 -25px; /* Hover state */ } .close-overlay-btn:active { background-position: 0 -50px; /* Active state */ } /* Show overlay with transition */ .overlay-background-categorytags.active, .overlay-content.active { display: block; opacity: 1; } /*---------------------------------------------------------------------*/ /*---------------------------------------------------------------------*/ /* FONT FAMILIES /*---------------------------------------------------------------------*/ /*---------------------------------------------------------------------*/ @font-face { font-family: "Jolly Lodger"; src: url("https://scottsavino.com/fonts/jolly.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Jolly"; src: url("https://scottsavino.com/fonts/jolly.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Gabriele Bad AH"; src: url("https://scottsavino.com/fonts/gabby.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Gabriele Bad"; src: url("https://scottsavino.com/fonts/gabby.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Gabby"; src: url("https://scottsavino.com/fonts/gabby.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Wobbly"; src: url("https://scottsavino.com/fonts/wobbly.ttf") format("truetype"); font-weight: normal; font-style: normal; } /*-------------------------------------------------*/ /*-------------------------------------------------*/ /* BROKEN BROKEN BROKEN - QUESTION MARK TOOLTIP FOR POSTS /*-------------------------------------------------*/ /*-------------------------------------------------*/ /*.tooltip-container { display: inline-block; position: relative; vertical-align: middle; height:auto; } .info-icon { width: 20px; height: 20px; background: url('/images/info-icon.png') no-repeat; background-size: cover; background-position: top center; cursor: pointer; } .info-icon:hover { background-position: bottom center; } .tooltip-content { display: none; position: absolute; margin: 6px; background-color: #005f68; /* Background color */ /* background-image: url('/images/tooltip-splatter.png'); /* Background image */ /* background-blend-mode: add; background-repeat: no-repeat; /* Prevent image tiling */ /* background-position: bottom center; /* Center the image */ /* color: white; border-radius: 10px; padding: 6px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 1); text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); text-align: center; font-size: 13.5px; width: 275px; height: auto; font-family: "Gabby"; font-weight: 575; line-height: 1.5; z-index: 10; } .info-icon:hover + .tooltip-content { display: block; } */ /*-------------------------------------------------*/ /*-------------------------------------------------*/ /* QUESTION MARK TOOLTIP FOR POSTS /*-------------------------------------------------*/ /*-------------------------------------------------*/ /*-------------------------------------------------*/ /* QUESTION MARK TOOLTIP FOR POSTS - FIXED VERSION */ /*-------------------------------------------------*/ /* Table Styling */ .title-tooltip-table { width: auto; /* Adjusts to fit the title */ border: none; /* No borders */ border-spacing: 0; /* Removes spacing between cells */ } .title-tooltip-table td { padding: 0; /* No padding for the cells by default */ vertical-align: top; /* Aligns content to the top */ } /* Title Cell */ .title-cell { width: auto; /* Allows the title to take up as much space as needed */ } /* Tooltip Icon Cell */ .tooltip-cell { width: 30px; /* Fixed width for the tooltip cell */ padding: 5px; /* Padding around the tooltip icon */ text-align: left; /* Align icon to the left */ vertical-align: top; /* Align icon to the top */ } /* Tooltip Icon */ .custom-tooltip-icon { width: 20px; height: 20px; top: 8px !important; background: url('/images/info-icon.png') no-repeat; background-size: cover; /* Ensures the icon scales properly */ background-position: top center; cursor: pointer; position: relative; } #wpd-field-submit-0_0 { background-color: #a00C22 !important; font-family: 'Jolly Lodger' !important; font-size: 25px !important; font-weight: 675 !important; letter-spacing: 1.6px !important; } .fas, .fa-bell-slash, .wpdicon, .wpdicon-off, .wpdicon-on { border: none!important; } .wc_social_plugin_wrapper, .wpd-form-wrap, .wpd-form-head, .wpd-form, .wpd-form-wrapper, .wpd-main-form-wrapper, .wpd-thread-wrapper, .wpd-thread-list { padding-left: 24px !important; padding-right: 24px !important; } /* Tooltip Icon Hover */ .custom-tooltip-icon:hover { background-position: bottom center; /* Shows bottom part of sprite on hover */ } /* Tooltip Content */ .custom-tooltip-content { display: none; position: absolute; margin: 6px; background-image: url('/images/tooltip-splatter.png'); /* Decorative overlay */ background-repeat: no-repeat; /* Prevent tiling */ background-position: bottom center; /* Position image at the bottom */ color: white; /* Text remains white */ border-radius: 10px; padding: 6px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 1); /* Subtle drop shadow */ text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); /* Make text more readable */ text-align: center; font-size: 13.5px; width: 275px; height: auto; font-family: "Gabby"; font-weight: 575; line-height: 1.5; z-index: 10; } .custom-tooltip-icon:hover + .custom-tooltip-content { display: block; /* Show tooltip on hover */ } /*-------------------------------------------------*/ /*-------------------------------------------------*/ /* TEAL RED SPLASH OVERLAY HEADER /*-------------------------------------------------*/ /*-------------------------------------------------*/ #masthead { position: relative; /* Create a positioning context for the pseudo-element */ z-index: 0; /* Ensure the pseudo-element stays beneath content */ } #masthead::before { content: ''; position: absolute; top: 100%; /* Position it directly beneath the header */ left: 0; width: 100%; height: 55px; /* Feather height */ background: linear-gradient(to bottom, #2393d8, rgba(35, 147, 216, 0)); /* Gradient fading to transparent */ background-blend-mode: color-dodge; z-index: -20; /* Place the overlay behind the header content */ opacity: 0.8; pointer-events: none; /* Ensure it doesn’t block interactions */ } #masthead { position: relative !important; /* This is crucial for containing the absolute positioned child */ width: 100% !important; height: auto; /* Let content determine height */ } /* Fix indicator positioning and prevent text overlap */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator { position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; padding-left: 10px !important; /* Add space between text and indicator */ } /* Fix vertical alignment for icons-only menu items */ #mega-menu-item-2941 > a.mega-menu-link, #mega-menu-item-2889 > a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; } /* Add padding to prevent text and indicator overlap for text items */ #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding-right: 25px !important; /* Make room for indicator */ } .rotateHeader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; /* Let's keep this at -1 since we want it behind the logo */ background-position: top; background-size: cover; background-repeat: no-repeat; } .social-buttons-box { display: none; position: absolute; /* Attach to the viewport, not dependent on masthead */ bottom: 0px; /* Stick to the bottom */ left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Centers horizontally */ background-image: url('https://scottsavino.com/images/social-buttons-holder.png'); background-position: center bottom; background-blend-mode: screen; background-repeat: no-repeat; background-size: 100% 100%; /* Scale width to 100%, maintain aspect ratio */ width: 385px; height: 145px; vertical-align: bottom; z-index: -1; padding-bottom: 15px; pointer-events:none; } .social-buttons-box-2 { display:none; position: absolute; bottom: 0px; margin-left: 50%; transform: translateX(-50%); width: 385px; text-align: center; margin-bottom: 15px; pointer-events: auto; } .zoom-social-icons-shortcode { margin-left: 50%; transform: translateX(-50%); width: 385px; pointer-events: auto; } .custom-logo { transform: translateY(20px); z-index: 9999 !important; width: 450px; height: 155px; } .logo-left { height: 235px !important; } .emoji { color: white !important; text-weight: 400; } .registeredUser { background-image: url('https://scottsavino.com/images/registeredUser.png'); } .entry-header { font-size: 15px !important; } .sarcasm { font-style: italic; transform: skewX(-10deg); /* Skews the text in the opposite direction of traditional italics */ text-decoration: dotted underline; } .user-registration { background-color: #004F54 !important; width: 100%, auto; height: 150px, auto; max-width: 100%; margin: 40px; padding: 30px; font-weight: 500; color: #EEEEEE; margin-top: 40px; margin-left: 40px; margin-right: 40px; margin-bottom: 40px; opacity: 0.7; background-blend-mode: color; border-radius: 25px; } .user-registration a { color: #9A9A9A !important; font-weight: 600; width: 100%; } .user-registration a:hover { color: #eeeeee !important; font-weight: 600; text-decoration: underline; } .rememberMeForever { color: #b9b9b9; letter-spacing: 2px; font-size: 14px !important; font-weight:600; font-stretch: semi-expanded; } .user-registration-form__label-for-checkbox.inline { margin-top: 30px !important; } .rememberMeForever { color: #b9b0b0 !important; margin-top: -20px !important; } .user-registration-form__input-checkbox { background-color: #EEEEEE !important; margin-top: -20px !important; } .rememberMeForever:hover { color: #000000 !important; } .user-registration-form__input-checkbox:hover + .rememberMeForever { color: #000000; /* Changes the color on hover */ } .user-registration-form__input-checkbox:hover { background-color: #EEEEEE !important; } .deleteMe { display: none; } #joinCult2:hover, .joinCult2:hover { color: #A00C22; } .profileDashboard { display: none; } .profileDetails { display: none; } .changePassword { display: none; } .loginH1 { display: none; } .lost_password { align-content: right !important; position: relative; margin-bottom: 10px; text-align: center; color: #b9b9b9 !important; margin-right: 0px !important; text-align: right !important; font-family: 'Gabriele Bad AH'!important; letter-spacing: 1px; font-size: 14px; font-weight: 475; } .lost_password:hover { color: #000000 !important; } /* -------------------------------------------------------------------- Member Pages Setup -----------------------------------------------------------------------*/ .ui-accordion-icons { align-content: center; align-items: center; align-text: center; text-align: center; font-size: 22px; font-weight: 700; color: #000000; } a.pm-difl { display:none; } div.pm-group-view { margin: 20px; padding: 20px; border-radius: 25px; } .menu-item-2786, .menu-item-2805, .menu-item-2802, .menu-item-2806, .menu-item-2804, .menu-item-2799, .menu-item-2800, .menu-item-2801, .menu-item-2809, .menu-item-2810, .menu-item-2858 { color: #EEEEEE !important; text-align: right !important; text-justify: right !important; align-items: right !important; width: 265px !important; } .user-registration-MyAccount-content__body h2 { font-size: 35px !important; color: #EEEEEE !important; } .user-registration a { color: #EEEEEE !important; text-shadow: 0px 0px 1px #000000; } .user-registration a:hover { color: #000000 !important; } .user-registration-MyAccount-navigation-link.is-active a { color: #000000 !important; text-shadow: none !important; text-weight: 650 !important; border-bottom-color: #004F54 !important; } .user-registration-MyAccount-content__body p { color: #EEEEEE !important; } .is-active { } #ur-frontend-form { border-width: 0px !important; } .form-row-wide label { text-align: left; color: #9A9A9A !important; font-weight: 600; } .page-id-2352 input[type="submit"], .page-id-2352 button[type="submit"], .user-registration-Button, .button, button[name="save_change_password"], .stopFuckingUpMyButton, .loginButton { background-color: #A00C22 !important; /* Your desired color */ border: none; /* Remove border */ cursor: pointer; /* Change cursor to pointer */ border-radius: 15px !important; /* Rounded corners */ color: #DCDCDC !important; /* Light grey text color */ padding: 10px 20px !important; /* Add some padding for a clean button look */ font-family: "Jolly Lodger" !important; font-size: 28px !important; font-weight: 525; letter-spacing: 2px;/* Optional: adjust font size for readability */ transition: background-color 0.3s ease !important; } #user-registration-frontend-listing-search-field { margin-right: 25px !important; width: 450 !important; } button.stopFuckingUpMyButton { padding: 10px 20px !important; padding-block: 10px !important; padding-inline: 20px !important; } .user-forms { border: 0px !important; } .ur-label { color: #bebebe !important; } .hiddenDragon { width: 1px; /* Set the width to 1px */ height: 1px; /* Set the height to 1px */ overflow: hidden; /* Hide any content that overflows */ position: absolute; /* Optional: Allows positioning elsewhere if needed */ top: -9999px; /* Move it out of view to ensure it's hidden */ left: -9999px; /* Move it out of view horizontally */ } .user-registration-Button:hover, .button:hover, .stopFuckingUpMyButton:hover, .loginButton:hover { background-color: #6C0716 !important; padding: 10px 20px !important; /* Add some padding for a clean button look */ } .loginPopup { display: none; } .loginButtonBox { display: flex; /* Center the inner div */ justify-content: center; /* Horizontally align */ align-items: center; /* Vertically align (if applicable) */ height: 100vh; /* Optional: Ensure it takes full viewport height */ width: 100%; } .loginButton { display: inline; width: 100px; max-wdith: 200px; height: auto; background-color: #f0f0f0; /* Optional: Background for visibility */ padding: 10px; /* Optional: Add padding for better readability */ border: 1px solid #ccc; /* Optional: Add a border for better visualization */ text-align: center; font-family: 'Jolly Lodger' !important; } .logoutButton { display: none; width: 100px; max-wdith: 200px; height: auto; background-color: #f0f0f0; /* Optional: Background for visibility */ padding: 10px; /* Optional: Add padding for better readability */ border: 1px solid #ccc; /* Optional: Add a border for better visualization */ text-align: center; font-family: 'Jolly Lodger' !important; } .fuckinQuit{ display:none; } /* -------------------------------------------------------------------- Input Field Layouts -----------------------------------------------------------------------*/ /*label, .user-registration-form-row, .user-registration-form-row--wide, .form-row, .form-row-wide { color: #9A9A9A; font-family: "Jolly Lodger" !important; letter-spacing: 2px; font-size: 18px; font-weight:600; font-stretch: semi-expanded !important; } */ input[type="text"] { font-family: "Gabby" !important; /* Replace with your desired font */ font-size: 13pt !important; font-weight: 700;/* Adjust size for readability */ } input[type="search"] { position: relative; /* Allows the placeholder to move relative to this */ } input[type="search"]::placeholder { font-family: "Jolly Lodger"; /* Font for placeholder */ font-size: 20pt; /* Adjust as needed */ color: #a00c22; line-height: 1.5; font-weight: 600; position:relative; top:4px;/* Optional: placeholder text color (red in your branding) */ } input[type="submit"], button[type="submit"] { background-color: #a00c22; /* Red color for branding */ border: none; /* Remove default border */ border-radius: 15px !important; /* Rounded corners */ color: #bebebe; /* Light grey text color */ padding: 10px 20px !important; /* Add some padding for a clean button look */ font-size: 28px !important; font-weight: 525; letter-spacing: 2px;/* Optional: adjust font size for readability */ cursor: pointer; /* Change cursor to pointer for better UX */ transition: background-color 0.3s ease !important; /* Smooth hover effect */ } /* Optional hover effect */ input[type="submit"]:hover, button[type="submit"]:hover { background-color: #6C0716; /* Slightly darker red on hover */ } /* Style the typed text */ input[type="search"], input[type="email"], input[type="password"], input[type="url"], textarea, #user_registration_description { font-family: "Gabby"; /* Font for typed text */ font-size: 13pt; /* Adjust as needed */ color: #004f54; font-weight:750; position:relative; top:0px;/* Optional: typed text color (teal in your branding) */ } a.password_preview.dashicons.dashicons-hidden::before { display:none; position:absolute; right: 10px; width: 22px !important; height: 22px !important; } a.password_preview.dashicons.dashicons-hidden { display:none; position:absolute; right: 10px; width: 22px !important; height: 22px !important; } a.password_preview.dashicons.dashicons-visibility::before { display: none; position:absolute; right: 10px; width: 22px !important; height: 22px !important; } a.password_preview.dashicons.dashicons-visibility { display:none; position:absolute; right: 10px; width: 22px !important; height: 22px !important; } span.input-form-field-icons { width: 22px; height: 22px; position: absolute; } .user-registration-error { font-weight: 700 !important; } user-registration-password-strength.short { opacity: 0.8 !important; } .user-buttons-join { width: 300px; /* Set a fixed width suitable for your longest value */ text-align: center; /* Ensure text stays centered */ white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Prevent overflow issues */ height: 115px; vertical-align: middle; border-radius: 25px !important; z-index:500; } .user-buttons-replacement { width: 300px; text-align: center; white-space: normal; overflow:hidden; height: 115px; vertical-align: middle; background-color: #535353; color: #EEEEEE; pointer-events: none; z-index: 501; border-radius: 25px !important; } body.page-id-2349 .about-hidden, body.page-id-2349 .website-hidden, body.page-id-2349 .profile-pic-hidden, body.page-id-2349 input[type="url"] { display:none; } body.page-id-2348 .about-hidden, body.page-id-2348 .website-hidden, body.page-id-2348 input[type="url"] { display: block; } /* -------------------------------------------------------------------- Profile Layout -----------------------------------------------------------------------*/ /*.pm-user-group-name, .pm-group-badge, .pg-additional-info, .pg-additional-col, .pg-group-col, .pm-clip { display:none !important; border: none !important; }*/ .pg-cover-image-mask { background-size: cover !important; /* Ensures the image covers the entire div */ background-position: center !important; /* Centers the image within the div */ background-repeat: no-repeat !important; /* Prevents the image from repeating */ } .pm-popup-info { position: relative; /* Adjust width as needed */ margin: 0 auto; /* Horizontal centering */ text-align: center; width: 80%; left: 10%; right: 10%; font-size: 11px; color: #B9B9B9 !important; } .pg-message-footer { border-bottom-right-raidus: 15px; border-top-right-radius: 15px; } .pg-additional-info { display:none !important; } .pm-profile-title { position: relative; } .pm-user-name, .pm-profile-title { font-family: "Jolly Lodger"; position: relative !important; width: 100% !important; text-align: center !important; font-size: 38px !important; letter-spacing: 4px; font-weight: 650; text-shadow: 0px 0px 15px #000000; overflow: visible; /* Prevent clipping */ height: auto; /* Adjust height to fit content */ } /* New Header with Centered Logo */ .headerless-header { background-image: url('https://scottsavino.com/images/email/header.png'); background-repeat: repeat-x; /* Repeat horizontally */ background-position: center; height: 123px; /* Fixed height */ position: relative; margin: 0; padding: 0; z-index: 10; /* Ensure it appears at the top */ } .headerless-header .headerless-logo { position: absolute; top: 50%; /* Center vertically */ left: 50%; /* Center horizontally */ transform: translate(-50%, -50%); /* Perfect centering */ max-height: 100px; /* Scale logo appropriately */ width: auto; } .wpdiscuz_select { font-family: 'Gabriele Bad AH' !important; } .wpd-sbs-toggle, .wpdiscuz-subscribe-form-intro, .wpd-login { color: #EEEEEE; } .wpd-login a { color: #C3C3C3 !important; } .wpd-login a:hover { color: #EEEEEE !important; } #wpd-editor-wraper-0_0 { opacity: 0.9; } .wpd-prim-button { background-color: #004F54; color: #EEEEEE; } #wpd-post-rating { margin-bottom:20px !important; background-color: #A00C22 !important; border-radius:25px; padding: 20px; } #wpdcom { margin-top: 10px !important; background-color: #004F54 !important; border-radius:25px; padding: 20px; } #comments, #respond, .comments-area, .wpd-dark { background-color: transparent !important; } .ql-editor, .ql-blank { color: #A00C22 !important; font-family:"Gabriele Bad AH" !important; font-weight: 575; letter-spacing: 0.5px; } .more-link { font-family: "Pacifico" !important; color: #fa2ad9; text-shadow: 1px 1px 1px #EEEEEE, 2px 2px 1px #EEEEEE, -2px -2px 1px #EEEEEE, 3px 3px 1px #EEEEEE, -3px -3px 1px #EEEEEE, -1px -1px 1px #EEEEEE !important; font-weight: 300 !important; } .more-link:hover { color: #EEEEEE !important; text-shadow: 1px 1px 1px #fa2ad9, 2px 2px 1px #fa2ad9, -2px -2px 1px #fa2ad9, 3px 3px 1px #fa2ad9, -3px -3px 1px #fa2ad9, -1px -1px 1px #fa2ad9 !important; } @supports (-webkit-touch-callout: none) { .entry-summary { font-family: 'Pacifico', sans-serif !important; } } .entry-summary p { font-family: 'Gabriele Bad AH', !important; } .pm-center-button a { color: #B4B4B4 !important; font-weight:650; font-size: 14px; } .pm-center-button a:hover { color: #EEEEEE !important; font-weight:650; font-size: 14px; } .pm-login-header.pm-dbfl.pm-bg.pm-border-bt h3 { letter-spacing: 1.5px; font-weight: 400; } .pm-radius5.pm-border { border-top-left-radius: 40px !important; border-top-right-radius: 30px !important; } .pm-login-header.pm-dbfl.pm-bg.pm-border-bt { color: #EEEEEE; background-color: #A00C22 !important; opacity: 0.8; border-top-left-radius: 40px !important; border-top-right-radius: 30px !important; } .pm-login-header-buttons.pm-dbfl.pm-pad10 { border-right-width: 8px !important; border-left-width: 8px !important; border-bottom-width: 8px !important; border-bottom-right-radius: 30px !important; border-bottom-left-radius: 30px !important; padding: 0px !important; } .errortext.pg-form-validation-error { color: #D81330 !important; font-size: 18px !important; } .pm-search-box-wrap.pm-dbfl { background-color: transparent !important; border: none !important; } .menu-item-2469, .menu-item-2470, .menu-item-2471, .menu-item-2472, .menu-item-2490, .menu-item-2484, .menu-item-2473 { margin-top: 12px !important; margin-top: 12px !important; } #site-branding::after, .logo-left::after, #site-logo::after, .custom-logo-link::after { z-index: 100 !important; } @media (max-width: 768px) { .pm-header-section, .pm-cover-image, .pg-cover-image-mask { height: 230px !important; } .pm-group-view.pg-theme-five { width: 95%; } .lost_password, .rememberMeForever { color: #b9b9b9 !important; } .lost_password:hover, .rememberMeForever:hover { color: #b9b9b9 !important; } .site-navigation, .nav-primary, .mega-menu-toggle { background: rgba(0,0,0,0.0) !important; } .mega-toggle-block, .mega-menu-toggle-animated-block, .mega-toggle-block-1 { margin-top: 15px; } } .pmrow .pm-row-spacer { text-align: center; /* Centers inline content horizontally */ } .pmrow.pm-row-spacer a#scroll-to-bottom { display: inline-block; /* Makes the link respect text alignment */ margin: 0 auto; /* Adds extra safety for centering */ } #scroll-to-bottom { opacity: 0; /* Initially invisible */ transition: opacity 0.5s ease-in; /* Smooth fade-in effect */ } #scroll-to-bottom.show { opacity: 1; /* Fully visible */ } a:not(.wp-element-button) { text-decoration: none !important; } .user-registration-form__label.user-registration-form__label-for-checkbox span { color: #EEEEEE !important; font-family: 'Gabriele Bad AH'!important; } .page-content { color: #EEEEEE !important; } #user-registration { color: #EEEEEE !important; } .ur-frontend-form, .login { color: #EEEEEE !important; } .login p, .ur-frontend-form p { color: #EEEEEE !important; } .user-registration-message::after { color: #EEEEEE !important; } .ur-search-field { background-color: #A00C22 !important; } .entry-container { background-color: #E8C6D9; opacity: 1; border-radius: 30px; padding: 40px; margin-top: 30px; } h1.entry-title { font-size: 32px !important; letter-spacing: 1px !important; color: #000000 !important; } div.menu.catchadaptive-nav-menu, div.caption-wrap, #menu-sugarboop-menupe { all:unset; font-family: "Pacifico"; letter-spacing: 1px; font-weight: 300; font-size: 16px !important; color: #EEEEEE !important; text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000 !important; } div.menu.catchadaptive-nav-menu:hover { font-size: 16px !important; color: #fa2ad9 !important; } #site-logo { margin-top: 65px !important; } #mobile-header-left-menu, #header-toggle { display: none !important; } @media (max-width: 768px) { #mega-search-2878 { font-size: 11px !important; } } /* Target input fields and placeholder text */ @media (max-width: 768px) { /* Adjust the max-width for your mobile breakpoint */ #username, #password { font-size: 12px !important; /* Text typed into the fields */ } #username::placeholder, #password::placeholder { font-size: 12px !important; /* Placeholder text */ } .page-id-2352 input[type="submit"], input[type="submit"], input[type="button"] .page-id-2352 button[type="submit"], .user-registration-Button, .button, button[name="save_change_password"], .stopFuckingUpMyButton { font-size: 20px !important; margin-bottom: 14px !important; } .rememberMeForever { color: #b9b9b9 !important; letter-spacing: 2px; font-size: 12px; font-weight:600; font-stretch: semi-expanded; } #mega-toggle-block-1 { color: #A00C22; background-color: #A00C22; border-radius: 10px; } } .search-icon:hover { background-image: url('https://scottsavino.com/wp-content/uploads/2024/12/search.png') !important; } @keyframes underline { 0% { text-decoration: underline; text-decoration-color: transparent; } 50% { text-decoration: underline; text-decoration-color: #EEEEEE; /* Choose your underline color */ } 100% { text-decoration: underline; text-decoration-color: transparent; } } .welcomeOverlay { background-color: transparent !important; } body.loaded .wpd-left-content { filter: grayscale(100%) contrast(150%); transition: filter 0.6s ease-in-out; } #wpd-bubble-wrapper { filter: grayscale(100%) contrast(225%) brightness(80%); } .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after { background-color: #EEEEEE; } @media screen and (max-width: 990px) { .mega-menu-item-2941, .mega-menu-item-2889 { display: none !important; } } /*------------------------------------------------------ /* LOGIN POPUP /*------------------------------------------------------*/ .hiddenDragon { display:none; top:50%; left:50%; transform:translate(-50%, -50%); width:494px; height:465px; max-width:494px; max-height:465px; background-color:#004F54; z-index:1000; border-radius: 35px; overflow:visible; } @media screen and (max-width: 770px) { .hiddenDragon { width:425 !important; max-width:425 !important; } #wpd-bubble-wrapper { position: absolute; margin-bottom: 40px !important; } textarea.wc_comment, textarea.wpd-field { height: 85px !important; } } .hiddenDragonz { top:50%; left:50%; transform:translate(-50%, -50%); width:494; height:494px; background-color:transparent; z-index:1001; overflow:visible; pointer-events:none; } .hiddenDragon * { opacity: 1 !important; } .dragonImage { position:absolute; pointer-events:none; width:759px; height:682px; background-image:url('https://scottsavino.com/images/login-flair/overlay.png'); background-size:contain; background-repeat:no-repeat; opacity:1; z-index:1001; } .flairImageBottom { position:relative; pointer-events:none; bottom:-85px; right:-110px; width:742px; height:357px; background-image:url('https://scottsavino.com/images/login-flair/login-flair-bottom.png'); background-size:contain; background-repeat:no-repeat; opacity:1; z-index:1001; }