/* Theme Name: Canuck Theme URI: https://canuckdemo.kevinsspace.ca/ Author: Kevin Archibald Author URI: https://kevinsspace.ca/ Description: Canuck remains a full featured theme with all options avaiable in the free version of the theme, there is no up sell version. Set up a great landing page with any of 15 sections that can be stacked in any orde. No other page builder is required. All theme options can be backed up to a private page so content is preserved during theme switch. Canuck has unlimited Portfolio pages that can be setp in any of 9 layouts. Canuck also has a Feature template and a Mosaic Portfolio template, offering unlimited set up of these pages. For bloggers, Canuck offers audio, gallery, image, quote, and video post formats and users can choose one of 6 layouts for the main blog index. Set each page up with one sidebar, two sidebars, or full width. There is extensive documentation available in the Appearance->Canuck theme page and instructional videos available at the Author site. Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,grid-layout,flexible-header,custom-background,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-image-header,featured-images,footer-widgets,full-width-template,post-formats,sticky-post,theme-options,threaded-comments,translation-ready,blog,e-commerce,portfolio Version: 1.3.0 Requires at least: 5.2 Tested up to: 5.5 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI:https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html Text Domain: canuck */ /* Canuck is a full featured WordPress Theme Copyright (C) 2020 or later Kevin Archibald Canuck is distributed under the terms of the GNU GPL This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. NOTE: DO NOT EDIT THIS FILE, IF YOU DO IT WILL BE OVERWRITTEN BY THE NEXT UPDATE. CREATE CHILD THEME INSTEAD. See:http://codex.wordpress.org/Child_Themes */ /** * * Table of Content * * General ------------------------------ ~ 0066 * Header ------------------------------- ~ 0136 * Navigation --------------------------- ~ 0254 * Page Titles -------------------------- ~ 0297 * Layouts ------------------------------ ~ 0303 * Sidebars ----------------------------- ~ 0327 * Footer ------------------------------- ~ 0340 * Misc Page Styles --------------------- ~ 0371 * Post Styles -------------------------- ~ 0382 * Comment Styles ----------------------- ~ 0716 * Misc Styles / Accessibility ---------- ~ 0773 * Colorbox Styles ---------------------- ~ 0838 * Flex Slider Styles ------------------- ~ 0887 * Masonry Styles ----------------------- ~ 0988 * Other plugin styles ------------------ ~ 1004 * Media Queries ------------------900--- ~ 1016 * Media Queries --------------700--- ~ 1158 * Media Queries --------------480--- ~ 1255 * */ /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> General */ body { width: 100%; font-size: 100%; font-weight: normal; line-height: 1.5em; word-wrap: break-word; margin: 0; padding: 0; } /* ---------------- clear fixes ----------------------- */ .clearfix { clear: both; } .clearleft { clear: left; } .clearright { clear: right; } /* ---------------- Headers --------------------------- */ h1,h2,h3,h4,h5,h6 { line-height: 1.5em; margin: 10px 0 0 0; padding: 0; font-weight: 300; } h1 { font-size: 2.75em; } h2 { font-size: 2.25em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1.125em; } span.title { font-size: 1.25em; } /* ---------------- basic paragraph ------------------- */ p { font-size: 1em; margin: 0; padding: 0.75em 0 0 0; line-height: 1.5em; } p:first-child { margin: 0; padding: 0; } /* ---------------- Misc HTML tags -------------------- */ address { font-size: 1em; font-style: italic; } blockquote, blockquote p { margin-left: 1em; font-style: italic; font-weight: 600; line-height: 1.5em; vertical-align: bottom; } blockquote p:before { padding: 0 0.5em 0 0; font-size: 1em; content:'"'; line-height: 1.5em; vertical-align: top; } pre { margin: 1em 0 0 0; padding: 1em; font-size: 1em; border-radius: 10px; overflow-x: auto; } label { font-size: 1em; } code { font-size: 1em; } q { font-style: italic; } q:before, q:after { content:'"'; } /* ------------- unordered list ----------------------- */ ul { margin: 0 0 0 1.5em; padding: 0; line-height: 1.5em; } ul li { font-size: 1em; list-style: disc; list-style-position: outside; } ul li li { font-size: 1.0em; list-style: circle; list-style-position: outside; } ul li li li { font-size: 1.0em; list-style: square; list-style-position: outside; } /* -------------- special lists ----------------------- */ ul.recent-posts li { list-style: none; } /* -------------- ordered list ------------------------ */ ol { margin: 0 0 0 1.5em; padding: 0; line-height: 1.5em; } ol li { font-size: 1em; list-style: decimal; list-style-position: outside; } ol li li { font-size: 1em; list-style: lower-roman; list-style-position: outside; } ol li li li { font-size: 1em; list-style: decimal; list-style-position: outside; } /* -------------- ordered/unordered combo lists ------- */ ol ul li { list-style: disc; list-style-position: inside; } ol ul ul li { list-style: circle; list-style-position: inside; } ul ol li { list-style: decimal; list-style-position: inside; } ul ol ul li { list-style: circle; list-style-position: inside; } ul ul ol li { list-style: decimal; list-style-position: inside; } /* --------------definition list ---------------------- */ dt { margin: 0; padding: 0; font-size: 1em; font-weight: bold; } dl { margin: 0; padding: 0; font-size: 1.0em; } dd { margin-left: 1em; font-size: 1em; } /* ------ links default ------------------------------- */ a { transition: .5s ease; } a:link, a:active, a:visited, a:hover { text-decoration: none; } /* ------------------ table styles -------------------- */ table { font-size: 1em; border-collapse: collapse; border-spacing: 0; } thead { font-weight: bold; text-align: center; } th { padding: 0.625em; } tfoot { font-weight: bold; } tbody { text-align: left; } tr { padding: 0.625em; } td { padding: 0.625em; text-align: left; } /* ----------------------------------scroll to top ---- */ body .scrolltotop { padding: 8px 10px 10px 10px; font-size: 20px; display: none; position: fixed; bottom: 20px; right: 20px; border-radius: 3px; z-index: 999999; } body.sticky .scrolltotop { display: inline-block; } body.sticky .scrolltotop:hover { transition: .5s ease; } /* ---------------------------- animations -------------*/ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes searchHeightOn { from { height: 0; } to { height: 25px; } } @keyframes searchHeightOff { from { height: 25px; } to { height: 0; } } @keyframes menuDropDown { from { opacity: 0; } to { opacity: 1; } } @keyframes menuDropOut { from { opacity: 1; } to { opacity: 0; } } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Header */ /* ============================================= Header Setup Styles */ .header-wide-no-feature,.header-wide-slider,.header-wide-image { position: fixed; width: 100%; float: left; padding: 0; margin: 0; z-index: 99000; } .sticky-spacer { width: 100%; float: left; margin-top: 160px; line-height: 0; } /* -------------------------------- Header top strip --------------- */ .header-topstrip-wide { width: 100%; float: left; margin: 0; padding: 0; } .header-topstrip-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; height: 40px; } .header-topstrip-wrap .header-topstrip-left { width: 50%; float: left; margin: 0; padding: 0;text-align: left; font-size: 14px; line-height: 40px; vertical-align: middle; overflow: hidden; } .header-wide-no-feature .header-topstrip-left a, .header-wide-slider .header-topstrip-left a { margin: 0; padding: 10px; font-size: 14px; vertical-align: middle; transition: .75s ease; } .header-wide-image .header-topstrip-left a { margin: 0; padding: 10px 10px 10px 10px; font-size: 14px; line-height: 40px; vertical-align: middle; transition: .75s ease; } .header-topstrip-left .contact-hours { margin: 0 15px 0 0; } .header-topstrip-left .contact-hours i { margin: 0 5px 0 0; } .header-topstrip-left .contact-phone { margin: 0 15px 0 0; } .header-topstrip-left .contact-phone i { margin: 0 5px 0 0; } .header-topstrip-wrap .header-topstrip-right { width: 50%; float: right; margin: 0; padding: 0; text-align: right; min-height: 40px; } .header-top-strip-social { width: calc(100% - 30px); margin: 0; padding: 0; float: left; } /* ---------------------------- header navigation bar ------------------ */ .header-logo-menu-wide { width: 100%; float: left; margin: 0; padding: 0; } .header-logo-menu-strip { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; z-index: 9999; } /* ----------------------------------------- Logo ----------------- */ .header-logo-menu-strip .header-image-left { width: 230px; height: 100px; float: left; margin: 10px 20px 10px 0; padding: 0; text-align: left; } .header-wide-no-feature .header-image-left a, .header-wide-slider .header-image-left a { width: 100%; height: 100%; display: flex; align-items: center; } .header-wide-image .header-image-left a { display: block; float: left; width: 230px; height: 100px; margin: 0; padding: 0; background-repeat: no-repeat; background-position: left center; background-size: contain; } .header-logo-menu-strip .header-image-left img { max-width: 230px; max-height: 100px; } .header-logo-menu-strip .header-image-left img:hover { opacity: 0.5; } /* ----------------------------------------------------- header search */ .canuck-show-search-trigger { width: 25px; float: right; margin: 0 5px 0 0; padding: 0; text-align: center; } .canuck-show-search-trigger a { clear: none; display: block; width: 25px; line-height: 40px; border: none; margin: 0; } .canuck-show-search-trigger a i svg { vertical-align: middle; } .canuck-search { width: 200px; margin: 0; float: right; height: 0; overflow: hidden; display: none; } .canuck-search.search-on { display: block; height: 25px; animation: searchHeightOn .5s ease-in; } .canuck-search .searchform { max-width: none; } .canuck-search button { float: right; width: 25px; height: 25px; margin: 0; background-color: transparent; border: none; } .canuck-search .searchform .search-field { clear: both; float: right; width: 150px; height: 25px; font-size: 16px; vertical-align: middle; } .canuck-search input:focus { outline: none; border: 1px solid #ffffff; } .canuck-search input::placeholder { opacity: 1; color: #ffffff; } /* ------------------ sticky header --------------------------------- */ body.sticky .header-wide-no-feature,body.sticky .header-wide-slider { box-shadow: 0 5px 10px rgba(0,0,0,0.3); transition: .25s ease; } body.sticky .header-wide-image { box-shadow: 0 5px 10px rgba(0,0,0,0.3); transition: all .25s ease; } body.sticky .header-wide-no-feature .header-topstrip-wide, body.sticky .header-wide-slider .header-topstrip-wide, body.sticky .header-wide-image .header-topstrip-wide { display: none; } body.sticky .header-logo-menu-strip nav { margin: 15px 0 0 0; } body.sticky .header-image-left { height: 60px; } body.sticky .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { display: block; float: left; width: 230px; height: 40px; padding: 10px 0 10px 0; background-repeat: no-repeat; background-position: left; background-size: contain; } body.sticky .header-logo-menu-strip div.header-image-left a img { max-width: 100%; max-height: 100%; vertical-align: middle; } /* --------------------- header Image background ----------------------- */ .header-image-wrap { width: 100%; float: left; margin: 0; padding: 0; position: relative; } .header-image-wrap img { width: 100%; float: left; margin: 0; padding: 0; } .header-image-overlay { position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; height: 100%; } .header-image-overlay-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; } .header-image-overlay-wrap h1 { display: flex; width: 100%; clear: both; float: left; margin: 130px 0 0 0; padding: 0 5px 0 5px; justify-content: center; } .header-image-overlay-wrap span { display: flex; width: 100%; float: left; clear: both; margin: 0; padding: 0 5px 0 5px; justify-content: center; } /* ------------------------------------------------ Social link styles --- */ .social-screen-reader-text { position: absolute; top: -9999em; left: -9999em; } .canuck-social { display: inline-block; width: 25px; line-height: 40px; text-align: center; transition: .75s ease; } .canuck-social svg { margin: 1px 0 -5px 0; } .canuck-social:hover svg path,.canuck-social:focus svg path { fill: #ffffff; transition: .75s ease; } .social-codepen:hover,.social-codepen:focus { outline: none; background-color: #000000; } .social-dribble:hover,.social-dribble:focus { outline: none; background-color: #FF7904; } .social-facebook svg { width: 10px; } .social-facebook:hover,.social-facebook:focus { outline: none; background-color: #3b5998; } .social-flickr:hover,.social-flickr:focus { outline: none; background-color: #ffffff; } .social-flickr:hover svg path,.social-flickr:focus svg path { fill: #FF0084; } .social-github:hover,.social-github:focus { outline: none; background-color: #ffffff; } .social-github:hover svg path,.social-github:focus svg path { fill: #7C007C; } .social-instagram:hover,.social-instagram:focus { outline: none; background-color: #3f729b; background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); transition: .75s ease; } .social-pinterest:hover,.social-pinterest:focus { outline: none; background-color: #c8232c; } .social-pinterest svg { width: 14px; } .social-linkedin:hover,.social-linkedin:focus { outline: none; background-color: #0e76a8; } .social-etsy svg { width: 14px; } .social-etsy:hover,.social-etsy:focus { outline: none; background-color: #F1641E; } .social-qq:hover,.social-qq:focus { outline: none; background-color: #eaeaea; } .social-qq:hover svg path,.social-qq:focus svg path { fill: #01A3E3; } .social-reddit:hover,.social-reddit:focus { outline: none; background-color: #F54B00; } .social-rss:hover,.social-rss:focus { outline: none; background-color: #FD9F13; } .social-snapchat:hover,.social-snapchat:focus { outline: none; background-color: #F7EC1E; } .social-snapchat:hover svg path,.social-snapchat:focus svg path { fill: #000000; } .social-tiktok:hover,.social-tiktok:focus { outline: none; background-color: #93CCAF; } .social-tumblr svg { width: 11px; } .social-tumblr:hover,.social-tumblr:focus { outline: none; background-color: #395976; } .social-twitter:hover,.social-twitter:focus { outline: none; background-color: #33ccff; } .social-viber:hover,.social-viber:focus { outline: none; background-color: #7D3DAF; } .social-vimeo:hover,.social-vimeo:focus { outline: none; background-color: #1AB7EA; } .social-whatsapp:hover,.social-whatsapp:focus { outline: none; background-color: #47AD5D; } .social-youtube:hover,.social-youtube:focus { outline: none; background-color: #c4302b; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Navigation */ /* -------------------------------------------------------- header nav */ .header-logo-menu-strip .nav-container { width: calc(100% - 250px); clear: none; float: left; height: 120px; margin: 0; padding: 0; line-height: 1em; overflow: hidden; display: flex; } body.sticky .header-logo-menu-strip .nav-container { height: 80px; } .header-wide-no-feature .header-logo-menu-strip nav a:hover, .header-wide-slider .header-logo-menu-strip nav a:hover, .header-wide-image .header-logo-menu-strip nav a:hover { transition: .5s ease; } /* -------------------------------------------- sidebar toggle buttons */ button.sidebar-a-toggle { width: 20px; margin: 0; padding: 10px 2px 10px 2px; display: none; position: fixed; left: 0; top: 25%; border-radius: 0 5px 5px 0; z-index: 10000; } button.sidebar-b-toggle { width: 20px; margin: 0; padding: 10px 2px 10px 2px; display: none; position: fixed; right: 5px; top: 25%; border-radius: 5px 0 0 5px; z-index: 10000; } button.sidebar-a-toggle:hover, button.sidebar-b-toggle:hover { cursor: pointer; transition: .5s; } /* ------------------------------------------- hide mobile menu button */ .main-menu,.main-menu.toggle-on { display: block; } .dropdown-toggle { display: none; } button.menu-1-toggle { display: none; } /* ------------------------------------------------------------ buttons */ .header-wide-no-feature button, .header-wide-slider button { border: none; background: none; padding: 0; } .header-wide-image button { background: none; border: none; padding: 0; } .header-wide-no-feature .menu-1-toggle svg path, .header-wide-slider .menu-1-toggle svg path { fill: #474747; } .header-wide-image .menu-1-toggle svg path { fill: #ffffff; } body.sticky .header-wide-image button { background: none; border: none; padding: 0; } /* -------------------------------------------------------------- Menus */ .main-nav li { list-style: none; } #main-menu-right { width: 100%; float: right; margin: auto 0 auto 0; padding: 0; } #main-menu-right ul { float: right; margin: 0; padding: 0; line-height: 1.75em; } #main-menu-right ul li { float: left; margin: 0; padding: 10px 20px 0 0; } #main-menu-right ul li a { padding: 0 5px 0 5px; } #main-menu-right ul li.menu-item-has-children > a:after { display: inline-block; content: "\005E"; transform: rotate(180deg); margin: 0 0 5px 5px; font-size: 8px; font-weight: bold; vertical-align: middle; line-height: 1em; } #main-menu-right ul ul li.menu-item-has-children > a:after { position: absolute; top: 100%; left: -9999em; padding: 0; margin: 0; } #main-menu-right ul li > ul { position: absolute; top: 100%; left: -9999em; padding: 0; margin: 0; } #main-menu-right ul li:hover > ul, #main-menu-right ul li.focus > ul { display: block; position: absolute; width: 160px; left: auto; top: auto; height: auto; margin: 0; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 999; } #main-menu-right ul ul li { width: 160px; float: left; clear: both; margin: 0; padding: 0; } #main-menu-right ul ul li > a { float: left; width: 140px; margin: 0; padding: 10px; } #main-menu-right ul ul li > a:hover { margin: 0; } #main-menu-right ul ul li.menu-item-has-children > a:before { display: inline-block; margin: 0 5px 5px 0; content: "\0003E"; transform: rotate(180deg); font-size: 8px; font-weight: bold; line-height: 1em; color: #474747; } #main-menu-right ul ul li > ul { position: absolute; top: 100%; left: -9999em; padding: 0; margin: 0; } #main-menu-right ul ul li:hover > ul, #main-menu-right ul ul li.focus > ul { display: block; position: absolute; width: 160px; left: 0; top: auto; height: auto; margin: 0 0 0 -160px; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 999; } #main-menu-right ul ul ul li > a:hover { margin: 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Page Titles */ #page-title-wide { width: 100%; float: left; } .page-title-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; overflow: hidden; z-index: 1; } .page-title-wrap h1.center-title { width: 100%; float: left; line-height: 1em; padding: 0.75em 0 0.75em 0; margin: 0; text-align: center; vertical-align: baseline; } .breadcrumbs-center { display: block; max-width: 1000px; margin: 0 auto 1em auto; font-size: 0.75em; line-height: 1em; text-align: center; padding: 0 0 1em 0; } .breadcrumbs-center a { transition: .5s ease; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Layouts */ #main-section { width: 100%; clear: both; float: left; background-color: #FFFFFF; padding: 0 0 20px 0; } #main-section-home { width: 100%; clear: both; float: left; background-color: rgba(255,255,255,0); margin: 0; padding: 0; } #content-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 10px 30px 0 30px; overflow: hidden; z-index: 1; } #content-wrap-home { width: 100%; clear: both; float: left; background-color: rgba(255,255,255,0); margin: 0; padding: 0; } #main-section-home #content-wrap { max-width: 100%; margin: 0 auto 0 auto; padding: 0; overflow: hidden; z-index: 1; } #fullwidth { clear: both; width: 100%; float: left; margin: 0; padding: 0; background-color: #FFFFFF; } #fullwidth-home { clear: both; width: 100%; float: left; margin: 0; padding: 0; } #fullwidth .page { max-width: 1100px; margin: 0 auto 0 auto; padding: 30px; } #fullwidth.search .page { max-width: 1100px; margin: 0 auto 0 auto; padding: 0; } #fullwidth .page .page-entry { width: 100%; float: left; margin: 0; padding: 0; } #fullwidth.search article { width: 100%; float: left; margin: 0 0 40px 0; } #feature-slider-wide { width: 100%; clear: both; float: left; margin: 0; padding: 0; } #feature-slider-wrap { width: 100%; clear: both; float: left; margin: 0; padding: 0; background-color: #ffffff; } #feature-slider-wrap .widget { clear: both; display: block; max-width: 1100px; margin: 20px auto 20px auto; padding: 0; } .canuck-feature-thumb-wrapper { max-width: 1100px; margin: 0 auto 0 auto; padding: 10px 30px 0 30px; overflow: hidden; z-index: 1; } .canuck-feature-15to1 { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } /* ---------------------------------------------------------------- two column layouts */ #two-column-content { float: left; width: 65%; margin: 0; padding: 0 0 25px 0; } #two-column-content.search article { width: 100%; float: left; margin: 0 0 40px 0; } #two-column-sidebar-left { position: inherit; float: left; margin: 0 2.5% 0 0; padding: 0 2.5% 25px 0; width: 30%; } #two-column-sidebar-right { float: left; width: 30%; margin: 0 0 0 2.5%; padding: 0 0 25px 2.5%; } /* -------------------------------------------------------------- three column layouts */ #three-column-content { float: left; width: 50%; padding: 0 0 20px 0; margin: 0; } #three-column-content.search article { width: 100%; float: left; margin: 0 0 40px 0; } #three-column-sidebar-left { position: inherit; float: left; width: 21%; margin: 0 2% 0 0; padding: 0 2% 20px 0; } #three-column-sidebar-right { float: left; width: 21%; margin: 0 0 0 2%; padding: 0 0 20px 2%; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Sidebars */ .widget ul { padding: 0; margin: 0; } .widget li { list-style: none; padding: 0.5em 0 0 0; } .widget select { display:block; width: 95%; float: left; } .widget option { display: block; max-width: 100%; overflow: hidden; } #two-column-sidebar-right .widget, #three-column-sidebar-right .widget { float: left; width: 95%; margin: 0 0 1em 0; padding: 0 0 0.5em 5%; } #two-column-sidebar-left .widget, #three-column-sidebar-left .widget { float: left; width: 95%; margin: 0 0 1em 0; padding: 0 5% 0.5em 0; } #two-column-sidebar-right h2, #two-column-sidebar-left h2, #three-column-sidebar-right h2, #three-column-sidebar-left h2 { font-size: 1em; padding: 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Footer */ #canuck-footer { width: 100%; float: left; margin: 0; padding: 0; background-size: 100% 100%; background-repeat: no-repeat; } .footer-overlay { width: 100%; float: left; margin: 0; padding: 25px 0 25px 0; } #footer-wrap { clear: both; display: block; max-width: 1100px; margin: 0 auto 0 auto; padding: 30px 30px 0 30px; text-decoration: none; font-size: 1em; line-height: 1em; overflow: hidden; } #footer-wrap h3 { font-size: 1.25em; line-height: 2em; padding: 0; margin: 0; } /* ------------------------------------------------- Footer top strip --------------- */ .footer-topstrip-wrap { width: 100%; float: left; margin: 0 0 40px 0; padding: 0; overflow: hidden; } .footer-topstrip-wrap .footer-topstrip-left { width: 50%; float: left; padding: 0; margin: 0; text-align: left; font-size: 14px; line-height: 40px; vertical-align: middle; overflow: hidden; } .footer-topstrip-left a { font-size: 14px; transition: .75s ease; margin: 0; padding: 10px; } .footer-topstrip-left .contact-hours { margin: 0 15px 0 0; } .footer-topstrip-left .contact-hours i { margin: 0 5px 0 0; } .footer-topstrip-left .contact-phone { margin: 0 15px 0 0; } .footer-topstrip-left .contact-phone i { margin: 0 5px 0 0; } .footer-topstrip-wrap .footer-topstrip-right { width: 50%; float: right; padding: 0; margin: 0; text-align: right; height: 40px; overflow: hidden; } #footer-wrap ul { font-size: 1em; padding: 0; margin: 0; } #footer-wrap ul li { list-style: none; } #footer-wrap .widget { margin: 1em 0 0 0; } .footer-col-wrap { width: 100%; padding: 15px 0 15px 0; margin: 0; overflow: hidden; z-index: 1; } .footer-col-wrap .widget { clear: both; float: left; margin: 10px 0 0 0; } .footercol-3-1 { float: left; width: 30%; margin: 0 1% 0 0; padding: 0 2% 0 0; } .footercol-3-2 { float: left; width: 30%; margin: 0 1% 0 1%; padding: 0 1% 0 1%; } .footercol-3-3 { float: left; width: 30%; margin: 0 0 0 1%; padding: 0 0 0 2%; } .footercol-4-1 { float: left; width: 22.5%; margin: 0 1% 0 0; padding: 0 1% 0 0; } .footercol-4-2,.footercol-4-3 { float: left; width: 22.5%; margin: 0 0.5% 0 0.5%; padding: 0 1% 0 1%; } .footercol-4-4 { float: left; width: 22.5%; margin: 0 0 0 1%; padding: 0 0 0 1%; } #copyright { width: 100%; margin: 50px 0 0 0; padding: 0; font-size: 0.875em; overflow: hidden; z-index: 1; } #copyright-wrap { width: 100%; margin: 0; padding: 0; overflow: hidden; z-index: 1; } #copyright ul { list-style: none; font-size: 0.75em; } .copyright_c1 { width: 30.33%; float: left; margin: 0 1% 0 0; padding: 0 1% 0 1%; text-align: left; font-size: 0.75em; } .copyright_c2 { width: 29.33%; float: left; margin: 0 1% 0 1%; padding: 0 1% 0 1%; text-align: center; font-size: 0.75em; } .copyright_c3 { width: 29.33%; float: right; margin: 0 0 0 1%; padding: 0 1% 0 1%; text-align: right; font-size: 0.75em; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Misc Page Styles */ /* ------------------------------------------------------------------- 404 Page Styling */ #error-404 { margin: 0; } /* ---------------------------------------------------- WordPress template page styling */ .author-bio-header { float: left; width: 100%; margin: 0 0 20px 0; padding: 0 0 40px 0; } .author-bio-header .avatar { width: 20%; height: auto; float: left; margin: 0; padding: 0; } .author-bio-content-wrap { width: calc(80% - 20px); float: left; margin: 0 0 0 20px; padding: 0; } .author-bio-content-wrap p { font-size: 1.25em; margin: 0; padding: 0; } .author-bio-header a { margin: 10px 0 20px 0; } /* --------------------------------------------------------------------- Feature styles */ .feature-wrap-full { float: left; width: 100%; margin: 0; padding: 0; } .feature-wrap-full img { padding: 0; margin: 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Post Styles */ /* ---------------------------------------------------------------- General Post Styles */ /* ---------------- WordPress read-more */ .post-content-tf .read-more-wrap { width: 100%; float: left; margin: 10px 0 10px 0; text-align: left; } .read-more-wrap a.read-more { display: inline-block; margin: 10px 0 0 0; padding: 5px 35px 5px 35px; font-size: 1em; position: relative; opacity: 0.999; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .read-more-wrap a.read-more:before { content: ''; width: 100%; top: 0%; height: 0; opacity: 0; position: absolute; left: 0; z-index: -1; transition: all 0.3s; } .read-more-wrap a.read-more:hover { cursor: pointer; } .read-more-wrap a.read-more:hover:before { height: 100%; opacity: 1; } .post-content-sf .read-more-wrap { width: 100%; float: left; margin: 5px 0 5px 0; text-align: right; } .post-content-sf .read-more-wrap a.read-more { margin: 5px 0 0 0; padding: 3px 15px 3px 15px; } .post-content-grid .read-more-wrap { width: 100%; float: left; margin: 5px 0 5px 0; text-align: right; font-size: .875em; } .post-content-grid .read-more-wrap a.read-more { margin: 5px 0 0 0; padding: 3px 15px 3px 15px; } /* --------- post image styling ------- */ img { max-width: 100%; height: auto; margin: 0; padding: 0; } img.border { max-width: 98%!important; height: auto!important; border-radius: 5px!important; padding: 0!important; margin-top: 0.625em!important; margin-bottom: 0.625em!important; } .image-post-feature { width: 100%; float: left; margin: 0; } .wp-caption { display: block; max-width: 100%; margin: 0.5em 0 0.5em 0; } .wp-caption.border { max-width: 98%!important; height: auto!important; border-radius: 5px!important; padding: 0!important; margin-top: 0.625em!important; margin-bottom: 0.625em!important; } .wp-caption img { max-width: 100%; height: auto; padding: 0; margin: 0; } .post-content .wp-caption p { margin: 0; padding: 0; } .wp-caption-text { text-align: center; margin: 0; padding: 0.25em; font-size: 1em; font-style: italic; } .wp-block-image .aligncenter img { margin: 0 auto 0 auto; } /* ---- WordPress alignment classes ---- */ .alignleft,.wp-caption.alignleft { float: left; margin: 0.5em 1em 0 0; padding: 0; } .alignright,.wp-caption.alignright { float: right; margin: 0.5em 0 0 1em; padding: 0; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { margin-right: 1em; } img.wp-smiley { padding: 0; margin: 0; border: none; float: none; } /* --------------------------------------------------------------------------- Layouts */ .canuck-one-col { width: 100%; float: left; margin: 0; padding: 0; } /* ---- Grid System 2 column ---- */ .canuck-two-col-left { width: 46%; float: left; margin: 0 4% 35px 0; padding: 0; } .canuck-two-col-right { width: 46%; float: left; margin: 0 1% 35px 3%; padding: 0; } .grid-feature-wrap { width: 100%; float: left; margin: 0; padding: 0; } /* ---- Grid System 3 column ---- */ .canuck-three-col-left { width: 31%; float: left; margin: 0 3.5% 25px 0; padding: 0; } .canuck-three-col-center { width: 31%; float: left; margin: 0 0 25px 0; padding: 0; } .canuck-three-col-right { width: 31%; float: left; margin: 0 0 25px 3.5%; padding: 0; } /* ---------------------------------------------------------------- Post Grid Options */ .post-wrap-grid { width: 100%; float: left; margin: 15px 0 0 0; padding: 0; } .post-overlay-grid { width: 100%; float: left; margin: 0; padding: 0; } .post-header-grid { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-grid .post-title { width: 100%; float: left; margin: 0 0 15px 0; padding: 0; font-size: 1.25em; line-height: 1.25em; } /* --- post titles --- */ .post-header-grid .post-title a { margin: 5px 0 30px 0; transition: .5s ease; } .post-meta-grid { font-size: .875em; } /* ------------------------------------------------------------------- Two Stamp Options */ .canuck-two-stamp-left { width: calc(50% - 2px); float: left; margin: 0 2px 4px 0; padding: 0; line-height: 0; } .canuck-two-stamp-right { width: calc(50% - 2px); float: left; margin: 0 0 4px 2px; padding: 0; line-height: 0; } .two-stamp-post .post-wrap-stamp { width: 100%; float: left; position: relative; margin: 0; padding: 0; } .two-stamp-post .stamp-feature { width: 100%; float: left; margin: 0; padding: 0; } .two-stamp-post .post-overlay-stamp { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; height: 100%; z-index: 1000; overflow: hidden; } .two-stamp-post .post-overlay-stamp-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .two-stamp-post .stamp-title { width: calc(100% - 15px); float: left; margin: 0 0 10px 15px; font-weight: bold; font-size: 1em; } .two-stamp-post .stamp-title a { margin: 0; padding: 0; } .two-stamp-post .stamp-title a:hover { transition: .5s ease; } .two-stamp-post .stamp-meta { width: calc(100% - 10px); float: left; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments, .two-stamp-post .post-overlay-stamp .pmeta-timestamp { float: left; padding: 0; margin: 0 10px 15px 15px; font-size: 0.875em; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments a { transition: .5s ease; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments a:hover { transition: .5s ease; } /* ----------------------------------------------------------------- Three Stamp Options */ .canuck-three-stamp-left { width: calc(33.33% - 4px); float: left; margin: 0 4px 4px 0; padding: 0; line-height: 0; } .canuck-three-stamp-center { width: calc(33.33% - 4px); float: left; margin: 0 2px 4px 2px; padding: 0; line-height: 0; } .canuck-three-stamp-right { width: calc(33.33% - 4px); float: left; margin: 0 0 4px 4px; padding: 0; line-height: 0; } .three-stamp-post .post-wrap-stamp { width: 100%; float: left; position: relative; margin: 0; padding: 0; } .three-stamp-post .stamp-feature { width: 100%; float: left; margin: 0; padding: 0; } .three-stamp-post .post-overlay-stamp { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; height: 100%; z-index: 1000; overflow: hidden; } .three-stamp-post .post-overlay-stamp-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .three-stamp-post .stamp-title { width: calc(100% - 15px); float: left; margin: 0 0 10px 15px; font-weight: bold; font-size: 1em; } .three-stamp-post .stamp-title a { margin: 0; padding: 0; } .three-stamp-post .stamp-title a:hover { transition: .5s ease; } .three-stamp-post .stamp-meta { width: calc(100% - 10px); float: left; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments, .three-stamp-post .post-overlay-stamp .pmeta-timestamp { float: left; padding: 0; margin: 0 10px 15px 15px; font-size: 0.875em; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments a { transition: .5s ease; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments a:hover { transition: .5s ease; } /* ----------------------------------------------------------- Post Feature Top Options */ #two-column-content article.top-feature-post, #two-column-content.search article { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #two-column-content article.top-feature-post:first-child, #two-column-content.search article:first-child { margin: 0 0 25px 0; } #three-column-content article.top-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #three-column-content article.top-feature-post:first-child { margin: 0 0 25px 0; } .post-wrap-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-overlay-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-header-tf { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-tf .post-title { width: 100%; float: left; margin: 0 0 15px 0; padding: 0; } .post-header-tf .post-title a { line-height: 1em; margin: 5px 0 30px 0; transition: .5s ease; } /* ----------------------------------------------------------- Post Side Feature Options */ #two-column-content article.side-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #two-column-content article.side-feature-post:first-child { margin: 0 0 25px 0; } #three-column-content article.side-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #three-column-content article.side-feature-post:first-child { margin: 0 0 25px 0; } #fullwidth article.side-feature-post { width: 100%; float: left; margin: 30px 0 30px 0; padding: 0; } #fullwidth article.side-feature-post:first-child { margin: 0 0 30px 0; } .side-feature-wrap { width: 35%; float: left; margin: 5px 5% 0 0; padding: 0; } .post-wrap-sf { width: 60%; float: left; margin: 0; padding: 0; } .post-overlay-sf { width: 100%; float: left; margin: 0; padding: 0; } .post-header-sf { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-sf .post-title { width: 100%; float: left; margin: 0; padding: 0; font-size: 1.5em; line-height: 1.5em; } .post-content-sf { clear: both; } /* --------------------------------------------------------------- Post Archive Options */ .archive article { margin: 40px 0 0 0; } .archive article:first-child { margin: 0; } .post-wrap-archive { width: 100%; float: left; margin: 0; padding: 0; } .post-overlay-archive { width: 100%; float: left; margin: 0; padding: 0; } .post-header-archive { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-archive .post-title { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; } .post-header-archive .post-title a { line-height: 1em; margin: 5px 0 30px 0; transition: .5s ease; } /* ------------------------- Post Meta Options for Top Feature and Side Feature layouts */ .post-meta-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-meta-sf { width: 100%; float: left; clear: both; margin: 10px 0 0 0; padding: 5px 0 5px 0; } .pmeta-timestamp,.pmeta-author, .pmeta-post-comments,.pmeta-categories, .pmeta-taglist,.pmeta-sticky, .pmeta-edit,.pmeta-no-title { float: left; margin: 0 15px 0 0; padding: 0; line-height: 1.3125em; } .post-meta-sf .pmeta-post-comments { float: right; margin: 0 5px 0 25px; } .pmeta-author a,.pmeta-post-comments a, .pmeta-categories a,.pmeta-taglist a, .pmeta-edit a,.pmeta-no-title a { transition: .5s ease; } .pmeta-author a:hover,.pmeta-post-comments a:hover, .pmeta-categories a:hover,.pmeta-taglist a:hover, .pmeta-edit a:hover,.pmeta-no-title a:hover { transition: .5s ease; } .pmeta-no-title i { color: red; } .pmeta-timestamp i,.pmeta-author i, .pmeta-post-comments i,.pmeta-categories i, .pmeta-taglist i, .pmeta-sticky i,.pmeta-edit i { margin: 0 5px 0 0; } .pmeta-timestamp i:hover, .pmeta-author i:hover, .pmeta-categories i:hover, .pmeta-taglist i:hover, .pmeta-post-format i:hover { cursor: help; } .pmeta-pagelist,.pmeta-edit,.pmeta-no-title { float: left; padding-right : 10px; } /* post meta icons */ .fa-comment,.fa-time,.fa-user,.fa-bookmark, .fa-copy,.fa-tags,.fa-edit,.fa-align-justify, .fa-sticky-note { font-size: 1em; } /* ----------------------------------------------------------------------- Post Content */ .post-content-tf { width: 100%; float: left; padding: 0; margin: 5px 0 0 0; } .post-content-tf p { padding: 0.75em 0 0 0; margin: 0; } .post-content-tf p:first-child { padding: 0; margin: 0; } /* ======================================================== post format content : audio */ .audio-post-feature { position: relative; width: 100%; margin: 0; padding: 0; } .top-feature-post .audio-post-feature { font-size: 2em; line-height: 1.33em; } .side-feature-post .audio-post-feature { font-size: 1em; } .audio-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .audio-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px; height: 100%; } .audio-feature-meta { width: 90%; float: left; margin: 0 5% 30px 5%; padding: 0; line-height: 1em; } .audio-feature-audio { width: 90%; float: left; margin: 0 5% 0 5%; padding: 0; } /* ======================================================= post format content : gallery */ /* ----------- CLASSIC WP Gallery styles ----------- */ .gallery { width: 100%; float: left; margin: 0; padding: 0; } .gallery figure { float: left; margin: 0; line-height: 1em; } .gallery-columns-1 figure { padding: 0 0 3px 0; width: 100%; font-size: 1em; } .gallery-columns-2 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-2 figure:nth-child(2n+3) { clear: both; } .gallery-columns-3 figure { padding: 2px 5px 2px 5px; width: calc(33.3333% - 11px); font-size: 1em; } .gallery-columns-3 figure:nth-child(3n+4) { clear: both; } .gallery-columns-4 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: .875em; } .gallery-columns-4 figure:nth-child(4n+5) { clear: both; } .gallery-columns-5 figure { padding: 1px 4px 1px 4px; width: calc(20% - 9px); font-size: .75em; } .gallery-columns-5 figure:nth-child(5n+6) { clear: both; } .gallery-columns-6 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .gallery-columns-6 figure:nth-child(6n+7) { clear: both; } .gallery-columns-7 figure { padding: 1px 4px 1px 4px; width: calc(14.2857% - 9px); font-size: 8px; } .gallery-columns-7 figure:nth-child(7n+8) { clear: both; } .gallery-columns-8 figure { padding: 1px 4px 1px 4px; width: calc(12.5% - 9px); font-size: 8px; } .gallery-columns-8 figure:nth-child(8n+9) { clear: both; } .gallery-columns-9 figure { padding: 1px 4px 1px 4px; width: calc(11.1111% - 9px); font-size: 8px; } .gallery-columns-9 figure:nth-child(9n+10) { clear: both; } .gallery-columns-10 figure { padding: 1px 4px 1px 4px; width: calc(10% - 9px); font-size: 8px; } .gallery-columns-10 figure:nth-child(10n+11) { clear: both; } .gallery-icon { width: 100%; float: left; margin: 0; padding: 0; text-align: center; } .gallery-icon a { width: 100%; margin: 0; padding: 0; float: left; } .gallery img { padding: 2px!important; height: auto; width: calc(100% - 6px); } .gallery .gallery-caption { width: calc(100% - 12px); float: left; margin: 0; padding: 5px; } /* ----------- BLOCK WP Gallery styles ----------- */ .wp-block-gallery { display: block; float: left; list-style-type: none; padding: 0; margin: 0; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { margin: 0; padding: 0; display: block; float: left; } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { margin: 0; padding: 0; height: auto; } @supports ((position:sticky)) { .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { display: block; } } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { display: block; max-width: 100%; height: auto; } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { width: 100% } @supports ((position:sticky)) { .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { width: auto } } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { position: inherit; bottom: inherit; width: calc(100% - 10px); max-height: none; overflow: hidden; padding: 5px; color: inherit; text-align: center; font-size: 1em; font-style: italic; line-height: 1em; background: none; } .wp-block-gallery .blocks-gallery-image figcaption img, .wp-block-gallery .blocks-gallery-item figcaption img { display: inline } .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { width: 100% } @supports ((position:sticky)) { .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { height: auto; } } .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item img { padding: 2px!important; border: 1px solid #e3e3e3!important; background-color: #ffffff!important; height: auto; width: calc(100% - 6px); } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { width: inherit; } .wp-block-gallery .blocks-gallery-image:nth-of-type(even), .wp-block-gallery .blocks-gallery-item:nth-of-type(even) { margin-right: inherit; } .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item { width: inherit; margin-right: inherit; } @media (min-width:600px) { .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item { width: inherit; margin-right: inherit; } .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n) { margin-right: inherit; } .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n) { margin-right: inherit; } .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n) { margin-right: inherit; } .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n) { margin-right: inherit; } .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n) { margin-right: inherit; } .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n) { margin-right: inherit; } .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n) { margin-right: inherit; } .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n) { margin-right: inherit; } } .wp-block-gallery.columns-1 .blocks-gallery-item, .wp-block-gallery.columns-1 .blocks-gallery-image { padding: 0 0 3px 0; width: 100%; font-size: 1em; } .wp-block-gallery.columns-2 .blocks-gallery-item, .wp-block-gallery.columns-2 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-2 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-2 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(33.3333% - 11px); font-size: 1em; } .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(3n+4), .wp-block-gallery.columns-3 .blocks-gallery-image:nth-child(3n+4) { clear: both; } .wp-block-gallery.columns-4 .blocks-gallery-item, .wp-block-gallery.columns-4 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: .875em; } .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-4 .blocks-gallery-image:nth-child(4n+5) { clear: both; } .wp-block-gallery.columns-5 .blocks-gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(20% - 9px); font-size: .75em; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(5n+6), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(5n+6) { clear: both; } .wp-block-gallery.columns-6 .blocks-gallery-item, .wp-block-gallery.columns-6 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(6n+7) { clear: both; } .wp-block-gallery.columns-7 .blocks-gallery-item, .wp-block-gallery.columns-7 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(14.2857% - 9px); font-size: 8px; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(7n+8), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(7n+8) { clear: both; } .wp-block-gallery.columns-8 .blocks-gallery-item, .wp-block-gallery.columns-8 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(12.5% - 9px); font-size: 8px; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(8n+9), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(8n+9) { clear: both; } .wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child { margin-right: inherit; } .wp-block-gallery .blocks-gallery-item.has-add-item-button { width: 100%; } .wp-block-gallery.alignleft,.wp-block-gallery.alignright { max-width: 100%; width: inherit; } .wp-block-gallery.aligncenter, .wp-block-gallery.alignleft,.wp-block-gallery.alignright { display: block; } .wp-block-gallery.aligncenter .blocks-gallery-item figure { justify-content: inherit; } /* ========================================================== post format content : image */ .post-format-image-feature { width: 100%; position: relative; } .post-format-image-feature img { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .post-format-image-overlay { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 1s ease; } .post-format-image-feature:hover img { opacity: 0.3; } .post-format-image-feature:hover .post-format-image-overlay { opacity: 1; } .post-format-image-overlay-content { font-size: 1em; padding: 5%; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } .post-wrap-grid .image-entry { width: 100%; float: left; clear: both; padding:0; margin: 0; } .grid-post .post-format-image-overlay-content h6 { font-size: 14px; line-height: 1em; } .grid-post .post-format-image-overlay-content span { font-size: 10px; line-height: 1em; } .side-feature-post .post-format-image-overlay-content h6 { font-size: 14px; line-height: 1em; } .side-feature-post .post-format-image-overlay-content span { font-size: 10px; line-height: 1em; } /* =================================================================== post format : quote */ /* ------------------- post format feature : quote */ .quote-post-feature { position: relative; width: 100%; margin: 0; padding: 0; } .top-feature-post .quote-post-feature { font-size: 2em; line-height: 1.33em; } .side-feature-post .quote-post-feature { font-size: 1em; } .quote-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .quote-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px 30px 30px 30px; height: calc(100% - 40px); width: calc(100% - 60px) } .quote-post-feature-quote { font-family: 'Book Antiqua', serif; float: left; font-size: 1em; line-height: 1em; } .quote-post-feature-quote i { color: rgba(255,255,255,.5); vertical-align: top; margin: -5px 10px 0 0; font-size: 1.5em; } .quote-post-feature-author, .quote-post-feature-author a { clear: both; float: right; margin: 10px; padding: 0; z-index: 999; } .single .quote-post-feature-quote { font-size: 1.5em; } .single .quote-post-feature-quote i { font-size: 1.5em; margin: -15px 10px 0 0; } .side-feature-wrap .quote-post-feature-overlay { padding: 20px; } .side-feature-wrap .quote-post-feature-quote { font-size: .875em; } .side-feature-wrap .quote-post-feature-quote i { font-size: 1em; margin: -10px 10px 0 0; } /* ------------------- post format content : quote */ .format-quote .entry-content p { clear: both; float: left; margin: 0; padding: 0; } .format-quote .entry-content blockquote { clear: both; float: left; width: calc(100% - 35px); margin: 10px 0 10px 0; padding: 15px; font-weight: normal; font-size: 1.2em; font-style: italic; } .format-quote .entry-content blockquote p { clear: both; float: left; width: 100%; margin: 0; padding: 0; font-weight: normal; font-size: 1em; font-style: italic; } .format-quote .entry-content blockquote cite, .format-quote .entry-content blockquote p cite { clear: both; float: right; margin-top: 0; margin-right: 1em; font-style: normal; font-weight: normal; font-size: 1em; } .format-quote .entry-content blockquote a { font-weight: bold; } .format-quote .entry-content blockquote p:before { display: none; } /* ---- quote grid post format ---- */ .post-wrap-grid .quote-entry { font-size: .825em; } .post-wrap-grid .quote-entry blockquote cite, .post-wrap-grid .quote-entry blockquote p cite { clear: both; float: right; margin-top: 0; margin-right: 1em; font-style: normal; font-weight: normal; font-size: 1em; } /* =================================================================== post format : video */ .video-post-feature { position: relative; width: 100%; float: left; margin: 0; padding: 0; } .video-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .video-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Comment Styles */ /* ---- post title comments link ---- */ .post-title-comments { float: right; font-size: 0.5em; padding: 0; } .post-title-comments i { cursor:help; } /* ---- Page Comments ---- */ .page .comments-title { margin: 2em 0 0 0; } .page .commentlist { font-size: 1em; margin: 15px 0 0 0; } /* ---- Post Comments ---- */ .comments-wrap { width: 100%; float: left; margin: 15px 0 15px 0; } .comments-area { width: 100%; float: left; margin: 0; padding: 0; } .comment-list { width: 100%; float: left; font-size: 1em; margin: 15px 0 0 0; padding: 0; } .comment.depth-1 { width: calc(100% - 72px); float: left; margin: 15px 0 0 0; padding: 20px 0 8px 72px; } .comment.depth-2,.comment.depth-3, .comment.depth-4,.comment.depth-5, .comment.depth-6,.comment.depth-7, .comment.depth-8,.comment.depth-9,.comment.depth-10 { width: calc(100% - 20px); float: left; margin: 1.5em 0 0 -52px; padding: 1.5em 0 0 72px; } .comments-title { width: 100%; float: left; margin: 0; } .comment-author .avatar { float: left; margin: 0 14px 0 -72px; padding: 2px; background-color: white; } .comment-author cite { margin: 0; padding: 0; font-style: normal; } .comment-author span { display: none; } .comment-meta { font-size: 0.75em; padding: 0; margin: 0; } .comment-body .reply { width: 100%; float: left; margin: 5px 0 0 0; text-align: left; } .comment-reply-link { display: inline-block; margin: 10px 0 0 0; padding: 0 5px 3px 5px; font-size: 1em; position: relative; opacity: 0.999; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .comment-reply-link:before { content: ''; width: 100%; top: 0%; height: 0; opacity: 0; position: absolute; left: 0; z-index: -1; transition: all 0.3s; } .comment-reply-link:hover { cursor: pointer; } .comment-reply-link:hover:before { height: 100%; opacity: 1; } .comment-list .bypostauthor .comment-author cite:before { content: 'Author: '; font-size: 0.75em; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0 0.5em 0 0; } .commentnav { padding: 15px 2% 15px 2%; font-size: 0.8em; } p.no-comments { width: 100%; float: left; padding: 1em 0 1em 0; margin: 1em 0 0 0; } .comment-awaiting-moderation { margin: 0; font-size: 0.875em; color: red; } .comment-edit-link { font-size: 1em; } .comment-edit-link:before { content: '['; padding: 0 5px 0 0; font-size: 1em; } .comment-edit-link:after { content: ' ]'; padding: 0 5px 0 0; font-size: 1em; } .pingback,.trackback { width: 100%; float: left; padding: 1.5em 0 0.5em 0; margin: 1em 0 0 0; } /* ---- Response Form Styling ---- */ .comment-respond { width: 100%; float: left; margin: 1em 0 0 0; padding: 0; font-size: 1em; } .page #respond { margin: 0; padding: 0; font-size: 1em; } #respond h3 #reply-title { width: 100%; float: left; font-size: 1.25em; padding: 0.5em 2% 0.5em 2%; } #respond .comment-notes { width: 100%; float: left; padding: 0; margin: 0; } #respond p { width:100%; font-size: 1em; } #respond label { clear: both; float: left; margin: 0.5em 0 0 0; } #respond .required { margin: 0.5em 0 0 0; } .comment-form-author input,.comment-form-email input, .comment-form-url input { clear: both; width: calc(100% - 10px); float: left; margin: 0.5em 0 0.5em 0; border: none; padding: 5px; } #respond textarea { clear: both; width: calc(100% - 10px); float: left; margin: 0.5em 0 0.5em 0; border: none; padding: 5px; font: inherit; font-size: 1em; } input#author, input#email, input#url { font-size: 1em; } .comment-form .form-submit input#submit.submit { float: left; clear: both; margin: 10px 0 0 0; padding: 0 5px 3px 5px; font-size: 1em; position: relative; opacity: 0.999; border: none; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .comment-form .form-submit input#submit.submit:hover { cursor: pointer; transition: .5s; } .comment-form .form-submit input#submit.submit:hover:before { height: 100%; opacity: 1; } p.form-allowed-tags { clear: both; width: 100%; float: left; margin: 1em 0 0 0; padding: 0; font: inherit; } p.form-allowed-tags code { font: inherit; } input#submit { margin-bottom: 20px; } #respond .error { color: red; float: left; line-height: 1em; font-size: 1em; margin: 10px 0 0 0; } .comment-form-cookies-consent { width: 100%; float: left; clear: both; } input#wp-comment-cookies-consent { width: 15px; float: left; margin: 12px 5px 0 0; } #respond .comment-form-cookies-consent label { width: calc(100% - 20px); float: left; clear: none; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Misc Styles */ /* ------------------ Accessibility -------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .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; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #content-wrap[tabindex="-1"]:focus, #content-wrap-home[tabindex="-1"]:focus { outline: 0; } /* ------------------ Error Styles --------------------- */ .error { width: calc(100% - 40px); margin: 0; padding: 20px; float: left; color: red; font-size: 1.3em; } .feature-no-video { display: block; width: 100%; float: left; clear: both; background-color: white; color: red; margin: 0; padding: 50px 100px 50px 100px; } /* ------------- Author Widget -------------------- */ .canuck-author-widget { float: left; width: 100%; margin: 10px 0 10px 0; } .canuck-author-widget .author-widget-avatar img { float: left; width: 50px; border: none; box-shadow: none; margin: 0 10px 0 0; padding: 0; } .canuck-author-widget .author-widget-content-wrap { width: calc(100% - 60px); display: block; float: left; margin: 0; padding: 0; } .canuck-author-widget .author-widget-name { font-size: 1em; line-height: 1em; font-weight: bold; margin: 0 0 10px 0; } .canuck-author-widget .author-widget-bio { font-size: 1em; line-height: 1.0em; } /* WordPress Generated Class */ /* ---------- WordPress Recent Posts styles -------------- */ .widget_recent_entries ul,.canuck_recent_posts ul { margin:0; padding: 0; font-size: 0.875em; } .widget_recent_entries li,.canuck_recent_posts li { width: 100%; float: left; margin: 5px 0 5px 0; list-style: none; padding: 5px 0 10px 0; } .canuck_recent_posts li img { width: 25%; float: left; margin: 0; padding: 0; } .recent-post-wrap { width: calc(75% - 15px); float: left; margin: 0 0 10px 10px; padding: 0; } .canuck_recent_posts li a { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; transition: .5s; } .widget_recent_entries li a { transition: .5s; } .widget_recent_entries li a:hover, .canuck_recent_posts li a:hover { transition: .5s; } .canuck_recent_posts li span { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; font-size: .875em; } .widget_recent_entries li:last-child, .canuck_recent_posts li:last-child { border-bottom: none; margin: 5px 0 0 0; } /* ----------- WordPress Calender Widget Style ----------- */ #wp-calendar { float: left; font-size: 0.875em; border-collapse: separate; border-spacing: 3px; } #wp-calendar caption { font-size: 1em; font-weight: bold; padding-bottom: 0.5em; } #wp-calendar thead th { border: none; margin: 0; width: 5%; padding: 0; text-align: center; } #wp-calendar tbody { border: none; font-size: 0.875em; } #wp-calendar tbody td { border: none; text-align: center; width: 5%; padding: 0; } #wp-calendar tbody td a { font-weight: bold; } #wp-calendar tfoot { background: none; } #wp-calendar tfoot tr { border: none; } #wp-calendar tfoot td { border: none; } #wp-calendar tr #prev a, table#wp-calendar tr #next a { font-size: 0.917em; font-weight: bold; padding-top: 0; padding-bottom: 0; } /* ------------- tag widget styles -------------------- */ .tagcloud a { display: inline-block; font-size: 0.75em!important; padding: 2px 5px 2px 5px; margin: 2px 2px 2px 0; border-radius: 3px; } /* -------------------comment styles --------------- */ .commentnav { width: 100%; float: left; clear: both; margin: 0; } .commentnav .left { float: left; } .commentnav .right { float: right; } /* --------------- the_posts_pagination() styles ------------ */ .postpagenav { width: 100%; float: left; clear: both; margin: 20px 0 20px 0; padding: 0; } #fullwidth .postpagenav { margin: 40px 0 30px 0; } .nav-links .page-numbers { padding: 0 5px 0 5px; } .nav-links .page-numbers.dots, .nav-links .page-numbers.dots:hover { font-weight: bold; border: none; } /* -------------- search form ------------------*/ .searchform { max-width: 200px; margin: 0; } .searchform .search-field { width: 70%; border: none; padding: 0.25em; } .fa-search { background: none; border: none; font-size: 1em; margin: 0; padding: 0; } .fa-search:before { content: "\f002"; } .fa-search:hover { cursor: pointer; } /* ------- Single post pagenavi ------- */ .postpagenav .left { width: 40%; float: left; padding: 0; margin: 0; } .postpagenav .right { width: 40%; float: right; padding: 0; margin: 0; text-align: right; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Color box styles */ /* Colorbox Core Style:The following CSS is consistent between example themes and should not be altered. */ #colorbox,#cboxOverlay,#cboxWrapper { position:absolute; top:0; left:0; z-index:9999; overflow:hidden; transform: translate3d(0,0,0); } #cboxWrapper { max-width:none; } #cboxOverlay { position:fixed; width:100%; height:100%; } #cboxMiddleLeft,#cboxBottomLeft { clear:left; } #cboxContent { position:relative; } #cboxLoadedContent { overflow:auto; } #cboxTitle { margin:0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; height:100%; } #cboxPrevious,#cboxNext, #cboxClose,#cboxSlideshow { cursor:pointer; } .cboxPhoto { float:left; margin:auto; border:0; display:block; max-width:none; } .cboxIframe { width:100%; height:100%; display:block; border:0; padding:0; margin:0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. */ #cboxOverlay { background:url(js/colorbox/images/overlay.png) repeat 0 0; opacity: 0.9; /*filter: alpha(opacity = 90);ka removed*/ } #colorbox { outline:0; } #cboxTopLeft { width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -101px 0; } #cboxTopRight { width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -130px 0; } #cboxBottomLeft { width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -101px -29px; } #cboxBottomRight { width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -130px -29px; } #cboxMiddleLeft { width:21px; background:url(js/colorbox/images/controls.png) left top repeat-y; } #cboxMiddleRight { width:21px; background:url(js/colorbox/images/controls.png) right top repeat-y; } #cboxTopCenter { height:21px; background:url(js/colorbox/images/border.png) 0 0 repeat-x; } #cboxBottomCenter { height:21px; background:url(js/colorbox/images/border.png) 0 -29px repeat-x; } #cboxContent { background:#fff; overflow:hidden; } .cboxIframe { background:#fff; } #cboxError { padding:50px; border:1px solid #ccc; } #cboxLoadedContent { margin-bottom:28px; } #cboxTitle { position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494; } #cboxCurrent { position:absolute; bottom:4px; left:58px; color:#949494; } #cboxLoadingOverlay {background:url(js/colorbox/images/loading_background.png) no-repeat center center; } #cboxLoadingGraphic { background:url(js/colorbox/images/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline:0; } #cboxSlideshow { position:absolute; bottom:4px; right:30px; color:#0092ef; } #cboxPrevious { position:absolute; bottom:0; left:0; background:url(js/colorbox/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px; } #cboxPrevious:hover { background-position:-75px -25px; } #cboxNext { position:absolute; bottom:0; left:27px; background:url(js/colorbox/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px; } #cboxNext:hover { background-position:-50px -25px; } #cboxClose { position:absolute; bottom:0; right:0; background:url(js/colorbox/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px; } #cboxClose:hover { background-position:-25px -25px; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Masonry */ .masonry-gallery * { box-sizing: border-box; } .masonry-gallery { background: #ffffff; width: 100%; float: left; margin: 30px 0 20px 0; padding: 0; } .masonry-gallery:after { content: ''; display: block; clear: both; } .masonry-grid-sizer, .masonry-grid-item { width: calc(33.333% - 5px); margin: 0; padding: 2.5px; } .masonry-grid-item { float: left; position: relative; } .masonry-grid-item img { display: block; max-width: 100%; } .masonry-grid-item .masonry-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; height: calc(100% - 5px); margin: 0 0 2.5px 2.5px; width: 0%; opacity: 1; transition: .5s ease; } .masonry-grid-item:hover .masonry-image-overlay { opacity: 1; width: calc(100% - 5px); } .masonry-grid-item .masonry-image-overlay .masonry-overlay-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; } .masonry-grid-item:hover .masonry-image-overlay .masonry-overlay-wrap { transition-property: color; transition: .5s; } .masonry-grid-item .masonry-image-overlay .masonry-text { width: calc(100% - 5px); float: left; clear: both; margin: 0; padding: 0; text-align: center; } .masonry-grid-item .masonry-image-overlay .masonry-text a { margin: 0 10px 0 0; padding: 2px 5px 2px 5px; opacity: 1; text-align: center; font-size: 16px; border-radius: 3px; transition-property: color; transition: .5s ease; } .masonry-grid-item:hover .masonry-image-overlay .masonry-text a { transition-property: color; transition: .5s; transition-timing-function: linear; transition-delay: .5s; } .masonry-grid-item .masonry-image-overlay .masonry-text a:hover { cursor: pointer; transition-property: color; transition: .25s ease; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Other Plugin Styles */ /* ========================================================== Woo Commerce */ .woocommerce-MyAccount-navigation li { list-style: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: none; background: #E3E3E3; padding: 5px 5px 5px 5px; } .woocommerce-Price-currencySymbol { margin: 0 0 0 5px; } .fa-shopping-bag { font-size: 14px; } /* ========================================================== Jetpack */ /* Subscribe style adjustments */ .comment-subscription-form { width: 100%; margin: 0; padding: 0; float: left; clear: both; } .comment-subscription-form input { width: 20px; margin: 15px 10px 0 0; padding: 0; float: left; } .comment-subscription-form label { width: calc(100% - 30px); margin: 10px 0 0 0!important; padding: 0; float: left; clear: none!important; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Media Styles */ /* ========================================================================== 900 px */ @media only screen and (max-width:900px){ /* --------------------------------------------------------- layouts */ /* ------- sidebar toggle buttons -------- */ #two-column-sidebar-left.toggle-sb-a, #two-column-sidebar-right.toggle-sb-b, #three-column-sidebar-left.toggle-sb-a, #three-column-sidebar-right.toggle-sb-b { position: absolute; top: 100%; left: -9999em; padding: 0; margin: 0; } button.sidebar-a-toggle.toggle-on { display: block; } button.sidebar-b-toggle.toggle-on { display: block; } button.sidebar-a-toggle:hover, button.sidebar-b-toggle:hover { cursor: pointer; transition: .5s; } #two-column-sidebar-left.toggle-sb-a.toggle-on { display: block; position: absolute; left: 0; top: 25%; height: auto; width: 80%; margin: 0 0 0 15px; padding: 10px; z-index: 2000; animation: .5s ease-in-out; } #two-column-sidebar-right.toggle-sb-b.toggle-on { display: block; position: absolute; left: 0; top: 25%; height: auto; width: calc(80% - 45px); margin: 0 25px 0 20%; padding: 10px; z-index: 2000; animation: .5s ease-in-out; } #two-column-content { float: left; width: 100%; margin: 0; padding: 0; } #three-column-sidebar-left.toggle-sb-a.toggle-on { display: block; position: absolute; left: 0; top: 250%; height: auto; width: 80%; margin: 0 0 0 15px; padding: 10px; z-index: 2000; animation: .5s ease-in-out; } #three-column-sidebar-right.toggle-sb-b.toggle-on { display: block; position: absolute; left: 0; top: 25%; height: auto; width: calc(80% - 45px); margin: 0 25px 0 20%; padding: 10px; z-index: 2000; animation: .5s ease-in-out; } #three-column-content { float: left; width: 100%; margin: 0; padding: 0; } /* --------------------------------------------------------- header */ .header-wide-no-feature .header-logo-menu-strip, .header-wide-slider .header-logo-menu-strip, .header-wide-image .header-logo-menu-strip { width: 100%; float: left; margin: 0; padding: 0; height: auto; } .header-wide-no-feature .header-logo-menu-strip .header-image-left, .header-wide-slider .header-logo-menu-strip .header-image-left, .header-wide-image .header-logo-menu-strip .header-image-left { height: 60px; width: 200px; float: left; text-align: left; line-height: inherit; margin: 0; padding: 10px 0 10px 25px; } .header-wide-no-feature .header-logo-menu-strip .header-image-left a, .header-wide-slider .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; height: 60px; float: left; margin:0; padding: 0; } .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; float: left; margin: 0; padding: 0; background-size: contain; background-position: left center; background-repeat: no-repeat; height: 60px; } .header-logo-menu-strip .header-image-left img { max-width: 100%; max-height: 100%; margin: 10px 0 0 20px; } .header-logo-menu-strip .nav-container { width: 100%; clear: both; float: left; margin: 0; padding: 0; text-align: center; height: auto; } .sticky-spacer { margin-top: 120px; } /* ------------------------------------------------------ sticky header */ body.sticky .header-logo-menu-strip .nav-container { margin: 0; height: auto; } body.sticky header.header-wide-no-feature div.header-logo-menu-strip, body.sticky header.header-wide-slider div.header-logo-menu-strip, body.sticky header.header-wide-image div.header-logo-menu-strip { width: 100%; float: left; margin: 0; padding: 0; height: inherit; text-align: center; } body.sticky header.header-wide-no-feature div.header-image-left, body.sticky header.header-wide-slider div.header-image-left, body.sticky header.header-wide-image div.header-image-left { display: none; } body.sticky .menu-1-toggle { display: block; width: auto; left: 50%; top: 20%; height: auto; margin: 0; } body.sticky .menu-1-toggle:focus { outline: none; } body.sticky .menu-1-toggle svg path { fill: #474747; } /* -------------------------------------------------------- Navigation */ button.menu-1-toggle { outline: none; position: relative; top: 20px; left: 30%; display: inline-block; margin: 0; padding: 5px; background-color: rgba(0, 0, 0, 0); border: none; } button.menu-1-toggle:hover { cursor: pointer; } .dropdown-toggle { display: block; } .nav-container { padding: 5px 0 5px 0; } .main-nav { position: absolute; top: 100%; left: -9999rem; padding: 0; margin: 0; clear: both; background-color: white; } .main-nav.toggle-on { display: block; position: absolute; width: 100%; left: 0; top: auto; height: auto; margin: 0; padding: 0; clear: both; z-index: 999999;} /* first (top) level */ #main-menu-right ul { display: block; width: 100%; float: left; margin: 0; text-align: left; border-top: none; } #main-menu-right ul li { display: block; width: 100%; float: left; margin: 0; padding: 0; text-align: center; font-size: 1rem; line-height: 1.5rem; } #main-menu-right ul li a, #main-menu-right ul li.current-menu-item > a, #main-menu-right ul li.current-menu-ancestor > a { padding: 5px 10px 5px 10px; display: block; width: calc(100% - 80px); float: left; margin: 0; line-height: 1.5em; text-align: left; } #main-menu-right ul li.menu-item-has-children > a:after { content: ""; margin: 0; } /* removes submenu indicator */ #main-menu-right ul li button { display: block; width: 50px; float: left; margin: 0; padding: 0; background-color: rgba(255,255,255,0); border: none; text-align: center; } #main-menu-right ul li button:hover { cursor: pointer; } #main-menu-right ul li button:after { display: block; content: "\005E"; transform: rotate(180deg); margin: 0; padding: 0; font-size: 1.25em; line-height: 2.05em; text-align: center; } #main-menu-right ul button.toggle-button-on:after { content: "\005E"; transform: rotate(0deg); } #main-menu-right ul li.focus > ul, #main-menu-right ul li > ul { display: none; } #main-menu-right ul li:hover > ul { position: absolute; top: 100%; left: -9999em; padding: 0; margin: 0; } #main-menu-right ul li ul.toggle-ul-on, #main-menu-right ul ul li ul.toggle-ul-on, #main-menu-right ul ul ul li ul.toggle-ul-on { display: block; position: relative; width: 100%; left: auto; top: auto; height: auto; margin: 0; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 999; } #main-menu-right ul li.menu-item-has-children > a:after { content: ""; margin: 0; } /* removes submenu indicator */ #main-menu-right ul ul li.menu-item-has-children > a:before { content: ""; margin: 0; } /* removes submenu indicator */ #main-menu-right ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul li a, #main-menu-right ul ul li.current-menu-item > a, #main-menu-right ul ul li.current-menu-ancestor > a { display: block; width: calc(100% - 90px); float: left; margin: 0; padding: 5px 10px 5px 20px; line-height: 1.5em; text-align: left; } #main-menu-right ul ul li button { display: block; width: 50px; float: left; margin: 0; padding: 0; background-color: rgba(255,255,255,0); border: none; text-align: center; } #main-menu-right ul ul li button:hover { cursor: pointer; } #main-menu-right ul ul li button:after { display: block; content: "\005E"; transform: rotate(180deg); margin: 0; padding: 0; font-size: 1.25em; line-height: 2.0em; text-align: center; } #main-menu-right ul ul ul li.menu-item-has-children > a:before { content: ""; margin:0; } /* removes submenu indicator */ #main-menu-right ul ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul ul li a, #main-menu-right ul ul li.current-menu-item > a, #main-menu-right ul ul ul li.current-menu-ancestor > a { width: calc(100% - 110px); float: left; margin: 0; padding: 5px 10px 5px 40px; } #main-menu-right ul ul ul li button { display: block; width: 50px; float: left; margin: 0; padding: 0; background-color: rgba(255,255,255,0); border: none; text-align: center; } #main-menu-right ul ul ul li button:hover { cursor: pointer; } #main-menu-right ul ul ul li ul button:after { display: block; content: "\005E"; transform: rotate(180deg); margin: 0; padding: 0; font-size: 1.25em; line-height: 2.0em; text-align: center; } #main-menu-right ul ul ul ul li.menu-item-has-children > a:before { content: ""; margin: 0; } /* removes submenu indicator */ #main-menu-right ul ul ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul ul ul li a, #main-menu-right ul ul ul ul li.current-menu-item > a, #main-menu-right ul ul ul ul li.current-menu-ancestor > a { width: calc(100% - 130px); float: left; margin: 0; padding: 5px 10px 5px 60px; } /* -------------------------------------------------------- page titles */ #page-title-wide .page-title-wrap h1.center-title { width: 98%; float: left; font-size: 1.5em; line-height: 1em; padding: 0.75em 0 0.75em 0; margin: 0; } /* --------------------------------------------------------------- blog */ .three-stamp-post .stamp-title { font-size: .875em; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments, .three-stamp-post .post-overlay-stamp .pmeta-timestamp { font-size: 0.75em; } /* ------------------------------------------------------------- footer */ #footer-wrap { font-size: .875em; } #footer-wrap h3 { font-size: 1em; line-height: 1.25em; padding: 0; margin: 0; } #footer-wrap ul { font-size: .875em; padding: 0; margin: 0; } #footer-wrap ul li { list-style: none; } #footer-wrap .widget { margin: 1em 0 0 0; } #footer-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; overflow: hidden; z-index: 1; } .footer-col-wrap { width: 100%; padding: 15px 0 15px 0; margin: 0; overflow: hidden; z-index: 1; } .footer-col-wrap .widget { clear: both; margin: 10px 0 0 0; } .footercol-3-1 { float: left; width: 30%; margin: 0 1% 0 0; padding: 0 2% 0 0; } .footercol-3-2 { float: left; width: 30%; margin: 0 1% 0 1%; padding: 0 1% 0 1%; } .footercol-3-3 { float: left; width: 30%; margin: 0 0 0 1%; padding: 0 0 0 2%; } .footercol-4-1 { float: left; width: 22.5%; margin: 0 1% 0 0; padding: 0 1% 0 0; } .footercol-4-2,.footercol-4-3 { float: left; width: 22.5%; margin: 0 0.5% 0 0.5%; padding: 0 1% 0 1%; } .footercol-4-4 { float: left; width: 22.5%; margin: 0 0 0 1%; padding: 0 0 0 1%; } #copyright { width: 100%; margin-bottom: 1em; font-size: 0.875em; overflow: hidden; z-index: 1; } #copyright-wrap { max-width: 1000px; margin: 0 auto 0 auto; padding: 8px 30px 8px 30px; overflow: hidden; z-index: 1; } #copyright ul { list-style: none; font-size: 0.75em; } .copyright_c1 { width: 30.33%; float: left; margin: 0 1% 0 0; padding: 0 1% 0 1%; text-align: left; font-size: 0.75em; } .copyright_c2 { width: 29.33%; float: left; margin: 0 1% 0 1%; padding: 0 1% 0 1%; text-align: center; font-size: 0.75em; } .copyright_c3 { width: 29.33%; float: right; margin: 0 0 0 1%; padding: 0 1% 0 1%; text-align: right; font-size: 0.75em; } /* ---------------------------- Post Galleries - adjust to 6 column max */ .gallery-columns-7 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .gallery-columns-7 figure:nth-child(7n+8) { clear: none; } .gallery-columns-7 figure:nth-child(6n+7) { clear: both; } .gallery-columns-8 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .gallery-columns-8 figure:nth-child(8n+9) { clear: none; } .gallery-columns-8 figure:nth-child(6n+7) { clear: both; } .gallery-columns-9 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .gallery-columns-9 figure:nth-child(9n+10) { clear: none; } .gallery-columns-9 figure:nth-child(6n+7) { clear: both; } .gallery-columns-10 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .gallery-columns-10 figure:nth-child(10n+11) { clear: none; } .gallery-columns-10 figure:nth-child(6n+7) { clear: both; } /* ---------------------- Block Post Galleries - adjust to 6 column max */ .wp-block-gallery.columns-7 .blocks-gallery-item, .wp-block-gallery.columns-7 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(7n+8), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(7n+8) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(6n+7) { clear: both; } .wp-block-gallery.columns-8 .blocks-gallery-item, .wp-block-gallery.columns-8 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); font-size: 10px; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(8n+9), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(8n+9) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(6n+7) { clear: both; } } /* ======================================================================================================== 700 */ @media only screen and (max-width:700px){ /* ---------------------------------------------------- Header top strip */ .header-topstrip-wrap { padding: 0 10px 0 10px; } .header-topstrip-wrap .header-topstrip-left { font-size: 12px; } .canuck-social { width: 18px; } .canuck-social svg { width: 12px; margin: 0 0 -2px 0; } .social-tumblr svg { width: 9px; } .social-etsy svg { width: 10px; } .social-pinterest svg { width: 12px; margin: 0 0 -4px 0; } .social-facebook svg { width: 8px; } .canuck-show-search-trigger svg { width: 14px; } .header-image-overlay h1 { font-size: 1.5em; margin: 120px 0 0 0; } .header-image-overlay span { font-size: 1em; } #page-title-wide .page-title-wrap h1.center-title { font-size: 1.25em; } .header-wide-no-feature .header-logo-menu-strip .header-image-left, .header-wide-slider .header-logo-menu-strip .header-image-left, .header-wide-image .header-logo-menu-strip .header-image-left { height: 60px; width: 160px; float: left; text-align: left; line-height: inherit; margin: 0; padding: 10px 0 10px 25px; } .header-wide-no-feature .header-logo-menu-strip .header-image-left a, .header-wide-slider .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; height: 60px; float: left; margin:0; padding: 0; } .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; float: left; margin: 0; padding: 0; background-size: contain; background-position: left center; background-repeat: no-repeat; height: 60px; } .header-logo-menu-strip .nav-container { width: 100%; clear: both; float: left; margin: 0; padding: 0; text-align: center; height: auto; } .header-logo-menu-strip .header-image-left img { margin: 0 0 0 20px; } .sticky-spacer { margin-top: 120px; } /* -------------------------------------------------------------- footers */ #footer-wrap { width: calc(100% - 60px); padding: 0 30px 0 30px; margin: 0; } .footercol-3-1,.footercol-3-2,.footercol-3-3 { float: left; width: 100%; padding: 0; margin: 1em 0 0 0; } .footercol-4-1,.footercol-4-2,.footercol-4-3,.footercol-4-4 { float: left; width: 100%; padding: 0; margin: 1em 0 0 0; } .footer-topstrip-wrap { padding: 0 10px 0 10px; } .footer-topstrip-wrap .footer-topstrip-left { font-size: 10px; } /* ---------------------------------------------------------- Post Styles */ .side-feature-wrap { width: 100%; float: left; margin: 0; padding: 0; } .post-wrap-sf { width: 100%; float: left; margin: 20px 0 0 0; padding: 0; } /* ------------------------------------------------- Grid System 2 column */ #two-column-content article.grid-post { width: 100%; float: left; margin: 50px 0 0 0; padding: 0; } #two-column-content article.grid-post:first-child { margin: 0; } .canuck-two-col-left { width: 100%; float: left; margin: 0; padding: 0; } .canuck-two-col-right { width: 100%; float: left; margin: 0; padding: 0; } /* ------------------------------------------------- Grid System 3 column */ #fullwidth article { width: 100%; float: left; margin: 50px 0 0 0; padding: 0; } #fullwidth article:first-child { margin: 0; } .canuck-three-col-left { width: 100%; float: left; margin: 0; padding: 0; } .canuck-three-col-center { width: 100%; float: left; margin: 0; padding: 0; } .canuck-three-col-right { width: 100%; float: left; margin: 0; padding: 0; } /* ------------------------------------------------------------ Comments -*/ .comment.depth-2,.comment.depth-3,.comment.depth-4, .comment.depth-5,.comment.depth-6,.comment.depth-7, .comment.depth-8,.comment.depth-9,.comment.depth-10 { width: calc(100% - 5px); float: left; margin: 1.5em 0 0 5px; padding: 1.5em 0 0 0; } /* ----------------------------------------------- slider with button nav */ .flex-control-nav li { margin: 0 4px 0 4px; } .flex-control-paging li a { width: 7px; height: 7px; box-shadow: inset 0 0 2px rgba(255, 255, 255, .5); border-radius: 13px; } /* ------------ Post Galleries - adjust to 4 column max -*/ .gallery-columns-5 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-5 figure:nth-child(5n+6) { clear: none; } .gallery-columns-5 figure:nth-child(4n+5) { clear: both; } .gallery-columns-6 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-6 figure:nth-child(6n+7) { clear: none; } .gallery-columns-6 figure:nth-child(4n+5) { clear: both; } .gallery-columns-7 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-7 figure:nth-child(7n+8) { clear: none; } .gallery-columns-7 figure:nth-child(6n+7) { clear: none; } .gallery-columns-7 figure:nth-child(4n+5) { clear: both; } .gallery-columns-8 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-8 figure:nth-child(8n+9) { clear: none; } .gallery-columns-8 figure:nth-child(6n+7) { clear: none; } .gallery-columns-8 figure:nth-child(4n+5) { clear: both; } .gallery-columns-9 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-9 figure:nth-child(9n+10) { clear: none; } .gallery-columns-9 figure:nth-child(6n+7) { clear: none; } .gallery-columns-9 figure:nth-child(4n+5) { clear: both; } .gallery-columns-10 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .gallery-columns-10 figure:nth-child(10n+11) { clear: none; } .gallery-columns-10 figure:nth-child(6n+7) { clear: none; } .gallery-columns-10 figure:nth-child(4n+5) { clear: both; } /* ------------ Block Post Galleries - adjust to 4 column max -*/ .wp-block-gallery.columns-5 .blocks-gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(5n+6), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(5n+6) { clear: none; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(4n+5) { clear: both; } .wp-block-gallery.columns-6 .blocks-gallery-item, .wp-block-gallery.columns-6 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(4n+5) { clear: both; } .wp-block-gallery.columns-7 .blocks-gallery-item, .wp-block-gallery.columns-7 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(7n+8), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(7n+8) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(4n+5) { clear: both; } .wp-block-gallery.columns-8 .blocks-gallery-item, .wp-block-gallery.columns-8 .blocks-gallery-image { padding: 1px 4px 1px 4px; width: calc(25% - 9px); font-size: 10px; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(8n+9), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(8n+9) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(4n+5) { clear: both; } } /* ============================================================================================================ 600 */ @media only screen and (max-width:600px){ .header-image-overlay-wrap h1 { margin: 100px 0 0 0; font-size: 1em; } .header-image-overlay-wrap span { font-size: .875em; } .header-wide-slider .header-logo-menu-strip .header-image-left, .header-wide-image .header-logo-menu-strip .header-image-left { height: 45px; width: 100px; float: left; text-align: left; line-height: inherit; margin: 0; padding: 5px 0 5px 25px; } .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { background-size: contain; height: 45px; } .header-logo-menu-strip .header-image-left img { max-width: 60%; max-height: 60%; margin: 10px 0 0 20px; } button.menu-1-toggle { top: 10px; } } /* ============================================================================================================ 480 */ @media only screen and (max-width:480px){ /* ------------------------------------------------- Header top strip --------------- */ .header-topstrip-wrap .header-topstrip-left,.footer-topstrip-wrap .footer-topstrip-left { font-size: 9px; } .header-topstrip-left .contact-hours,.footer-topstrip-left .contact-hours { margin: 0 5px 0 0; } .header-topstrip-left .contact-hours i,.footer-topstrip-left .contact-hours i { display: none; } .header-topstrip-left .contact-phone,.footer-topstrip-left .contact-phone { margin: 0 5px 0 0; } .header-topstrip-left .contact-phone i, .footer-topstrip-left .contact-phone i { display: none; } .header-topstrip-right .social-nav-class li a:before, .footer-topstrip-right .social-nav-class li a:before { font-size: 10px; width: 25px; } .header-wide-image .header-logo-menu-strip .header-image-left { padding: 0 0 0 25px; } .header-image-overlay-wrap h1 { margin: 100px 0 0 0; } /* -------------------------------------------------------------------------- General */ body { font-size: 75%; line-height: 1.3125em; } h1,h2,h3,h4,h5,h6 { line-height: 1.3125em; } h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5, span.title { font-size: 1.00em; } h6 { font-size: 0.8571em; } /* ---------------------------------------------------------------- portfolio layouts */ #fullwidth .thin-border { display: none; } .portfolio-two-column { width: 100%; } .portfolio-three-column { width: 100%; } .portfolio-four-column { width: 100%; } /* ---------------------------------------------------------------- masonary template */ .masonry-grid-sizer,.masonry-grid-item { width: calc(50% - 5px); } /* ----------------------------------------------------------------- feature elements */ .slider-wrapper .nivo-thumbs-enabled a.nivo-control img { max-width: 20px; } .slider-wrapper .nivo-controlNav img { margin-right: 0; } .half-slider-wrapper .nivo-thumbs-enabled a.nivo-control img { max-width: 24px; } .center-slider-wrapper .nivo-thumbs-enabled a.nivo-control img { max-width: 24px; } /* -------------------------------------------------------------- copywright elements */ .copyright_c1,.copyright_c2,.copyright_c3 { clear:both; float:left; width:90%; margin: 0.25em 5% 0.25em 5%; padding: 0; text-align: left; } /* ------------------------------------------------------------------------ Color Box */ #cboxTitle { visibility: hidden; } .post-wrap-standard-content, .post-wrap-audio-content, .post-wrap-gallery-content, .post-wrap-image-content, .post-wrap-quote-content, .post-wrap-video-content { width: 100%; float: left; overflow: visible; } .post-header { width: 100%; float: left; overflow: visible; } /* ----------------------------------------- Post Galleries - adjust to 2 column max */ .gallery-columns-3 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-3 figure:nth-child(3n+4) { clear: none; } .gallery-columns-3 figure:nth-child(2n+3) { clear: both; } .gallery-columns-4 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-4 figure:nth-child(4n+5) { clear: none; } .gallery-columns-4 figure:nth-child(2n+3) { clear: both; } .gallery-columns-5 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-5 figure:nth-child(5n+6) { clear: none; } .gallery-columns-5 figure:nth-child(4n+5) { clear: none; } .gallery-columns-5 figure:nth-child(2n+3) { clear: both; } .gallery-columns-6 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-6 figure:nth-child(6n+7) { clear: none; } .gallery-columns-6 figure:nth-child(4n+5) { clear: none; } .gallery-columns-6 figure:nth-child(2n+3) { clear: both; } .gallery-columns-7 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-7 figure:nth-child(7n+8) { clear: none; } .gallery-columns-7 figure:nth-child(6n+7) { clear: none; } .gallery-columns-7 figure:nth-child(4n+5) { clear: none; } .gallery-columns-7 figure:nth-child(2n+3) { clear: both; } .gallery-columns-8 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-8 figure:nth-child(8n+9) { clear: none; } .gallery-columns-8 figure:nth-child(6n+7) { clear: none; } .gallery-columns-8 figure:nth-child(4n+5) { clear: none; } .gallery-columns-8 figure:nth-child(2n+3) { clear: both; } .gallery-columns-9 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-9 figure:nth-child(9n+10) { clear: none; } .gallery-columns-9 figure:nth-child(6n+7) { clear: none; } .gallery-columns-9 figure:nth-child(4n+5) { clear: none; } .gallery-columns-9 figure:nth-child(2n+3) { clear: both; } .gallery-columns-10 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .gallery-columns-10 figure:nth-child(10n+11) { clear: none; } .gallery-columns-10 figure:nth-child(6n+7) { clear: none; } .gallery-columns-10 figure:nth-child(4n+5) { clear: none; } .gallery-columns-10 figure:nth-child(2n+3) { clear: both; } /* ------------ Block Post Galleries - adjust to 2 column max - */ .wp-block-gallery.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(3n+4), .wp-block-gallery.columns-3 .blocks-gallery-image:nth-child(3n+4) { clear: none; } .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-3 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-4 .blocks-gallery-item, .wp-block-gallery.columns-4 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-4 .blocks-gallery-image:nth-child(4n+5) { clear: none; } .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-4 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-5 .blocks-gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(5n+6), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(5n+6) { clear: none; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(4n+5) { clear: none; } .wp-block-gallery.columns-5 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-5 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-6 .blocks-gallery-item, .wp-block-gallery.columns-6 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(4n+5) { clear: none; } .wp-block-gallery.columns-6 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-6 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-7 .blocks-gallery-item, .wp-block-gallery.columns-7 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(7n+8), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(7n+8) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(6n+7), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(4n+5) { clear: none; } .wp-block-gallery.columns-7 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-7 .blocks-gallery-image:nth-child(2n+3) { clear: both; } .wp-block-gallery.columns-8 .blocks-gallery-item, .wp-block-gallery.columns-8 .blocks-gallery-image { padding: 2px 5px 2px 5px; width: calc(50% - 11px); font-size: 1em; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(8n+9), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(8n+9) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(6n+6), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(6n+7) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(4n+5), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(4n+5) { clear: none; } .wp-block-gallery.columns-8 .blocks-gallery-item:nth-child(2n+3), .wp-block-gallery.columns-8 .blocks-gallery-image:nth-child(2n+3) { clear: both; } }