/* Theme Name: Spacious Theme URI: https://themegrill.com/themes/spacious Author: ThemeGrill Author URI: https://themegrill.com Description: Spacious is an incredible free business WordPress theme that fits small to medium businesses. This responsive theme is optimized for speed. So, you end up with a business website that loads within 1 second. Since Spacious is compatible with WooCommerce, you can easily set up an online store for your business. It's amazing collection of 16 free starter demos makes building a complete website very beginner-friendly. Spacious theme supports Gutenberg and page builder plugins like Elementor, Brizy, Beaver Builder, SiteOrigin, etc. So, import a demo with just one click and start customizing it using a page builder of your choice. Here are the key Spacious features you get with this theme: >> Well-coded >> Translation & RTL Ready >> Sticky Menu >> Complete Documentation >> Multiple Widget Areas >> Optimized for SEO >> Compatible with Major Browsers. Try this free theme yourself to establish and grow your business’ online presence without having to rely on developers or designers. You can always reach out at https://themegrill.com/contact/ if you encounter any issues. Also, explore all the available free starter sites at https://themegrilldemos.com/spacious-demos. Version: 1.9.5 Tested up to: 5.5 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, footer-widgets, blog, e-commerce, rtl-language-support Text Domain: spacious Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /* =Reset -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } * { -webkit-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: collapse; border-spacing: 0; margin: 0 0 1.5em; width: 100%; } th, .wp-block-table th { font-weight: bold; border: 1px solid #EAEAEA; padding: 6px 10px; } td, .wp-block-table td{ border: 1px solid #EAEAEA; padding: 6px 10px; } caption, th, td { text-align: left; } blockquote { &:before, &:after { content: ""; } } q { &:before, &:after { content: ""; } } blockquote, q { quotes: "" ""; } a { &:focus { outline: 0; } &:hover, &:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; } img { border: 0; &:hover { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ box-shadow: #000 0 0 0; } } } embed, iframe, object { max-width: 100%; } button::-moz-focus-inner { border: 0; padding: 0; margin: 0; } /* =GLOBAL ----------------------------------------------- */ body, button, input, select, textarea { color: #666666; font: 16px 'Lato', sans-serif; line-height: 20px; word-wrap: break-word; } body { background: #eaeaea; } /* Headings */ h1, h2, h3, h4, h5, h6 { padding-bottom: 18px; color: #222222; font-weight: normal; font-family: 'Lato', sans-serif; } h1 { font-size: 30px; line-height: 36px; } h2 { font-size: 28px; line-height: 34px; } h3 { font-size: 26px; line-height: 32px; } h4 { font-size: 24px; line-height: 30px; } h5 { font-size: 22px; line-height: 28px; } h6 { font-size: 19px; line-height: 25px; } hr, .wp-block-separator { background-color: #eaeaea; border: 0; height: 1px; margin: 30px 0; } /* =TEXT ELEMENTS ----------------------------------------------- */ p { line-height: 24px; margin-bottom: 15px; font-family: 'Lato', sans-serif; font-size: 16px; } strong { font-weight: bold; } cite, em, i { font-style: italic; } pre { background-color: #fff; margin-bottom: 20px; overflow: auto; padding: 20px; border: 1px solid #EAEAEA; font-family: "Courier 10 Pitch",Courier,monospace; font-size: 14px; line-height: 1.4; white-space: pre-wrap; } code, kbd, var, samp, tt { font-family: "Courier 10 Pitch", Courier, monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap; } abbr, acronym, dfn { border-bottom: 1px dotted #666666; cursor: help; } address { display: block; font-style: italic; margin: 0 0 15px; } ins { background: #F8F8F8; } table { margin: 0 0 1.5em; width: 100%; } /* =SUPERCRIPT AND SUBSCRIPT ----------------------------------------------- */ sup, sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } dl { margin-bottom: 24px; font-size: 16px; } dt { font-weight: bold; margin-bottom: 5px; } dd { margin-bottom: 24px; } ul { list-style: none; } ol { list-style: none; list-style: decimal; } li > { ul, ol { margin: 0 0 0 10px; } } /* =BLOCKQUOTE ----------------------------------------------- */ blockquote, .wp-block-quote, .wp-block-quote.is-style-large, .wp-block-quote.has-text-align-right { font-style: italic; font-weight: normal; padding: 20px; border: 1px solid #EAEAEA; margin-bottom: 20px; em, i { font-style: normal; } cite { font-style: normal; color: #666666; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } } /* =FORMS ----------------------------------------------- */ input, textarea { -webkit-border-radius: 0; } input { &[type="text"], &[type="email"], &[type="search"], &[type="password"] { -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; } } textarea { -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; } input { &[type="text"], &[type="email"], &[type="password"], &[type="url"] { padding: 1%; border: 1px solid #EAEAEA; line-height: 20px; width: 98%; margin: 0 0 30px; background-color: #F8F8F8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } } textarea { padding: 1%; border: 1px solid #EAEAEA; line-height: 20px; width: 98%; margin: 0 0 30px; background-color: #F8F8F8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input { &[type="text"], &[type="email"], &[type="search"], &[type="password"] { &:focus { border: 1px solid #EAEAEA; } } } textarea:focus { border: 1px solid #EAEAEA; } input.s { width: 60%; padding: 4px 10px; height: 32px; color: #666666; background-color: #FFFFFF; margin: 0; vertical-align: top; border: 1px solid #EAEAEA; &:focus { padding-left: 10px; border-color: #EAEAEA; text-indent: 0; } } .spacious-button { color: #FFFFFF; display: inline-block; margin-bottom: 30px; padding: 5px 25px; -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; background-color: #0FBE7C; border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 16px; } input { &[type="reset"], &[type="button"], &[type="submit"] { color: #FFFFFF; display: inline-block; margin-bottom: 30px; padding: 5px 25px; -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; background-color: #0FBE7C; border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 16px; } } button { color: #FFFFFF; display: inline-block; margin-bottom: 30px; padding: 5px 25px; -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; background-color: #0FBE7C; border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 16px; } .spacious-button:hover { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); } input { &[type="reset"]:hover, &[type="button"]:hover, &[type="submit"]:hover { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); } } button:hover { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); } .previous a, .next a { color: #666666; padding: 5px 25px; cursor: pointer; border: 1px solid #EAEAEA; font-size: 16px; } .previous a:hover, .next a:hover { color: #0FBE7C; } input { &[type="reset"], &[type="button"], &[type="submit"] { &:active { -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); } } } /* =LINKS ----------------------------------------------- */ a { color: #0FBE7C; text-decoration: none; transition: 0.5s all ease; &:focus, &:active, &:hover { text-decoration: none; } &:focus { outline: thin dotted; } } /* =IMAGES ----------------------------------------------- */ figure { margin: 0; text-align: center; } img { max-width: 100%; height: auto; vertical-align: top; margin-bottom: 18px; } .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ } img { &[class*="align"], &[class*="wp-image-"], &[class*="attachment-"] { } &.size-full, &.size-large { max-width: 100%; height: auto; } } .entry-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } img { &.alignleft, &.alignright, &.aligncenter { margin-bottom: 1.625em; } } p img { } img#wpstats { display: none; } /* =CLEARFIX ----------------------------------------------- */ .clearfix { display: inline-block; &:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } * html .clearfix { height: 1%; } .clearfix { display: block; } .tg-after-three-blocks-clearfix { clear: both; } /* =ALIGNMENT ----------------------------------------------- */ .alignleft { display: inline; float: left; margin-right: 30px; } .alignright { display: inline; float: right; margin-left: 30px; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; text-align: center; } .no-sidebar-full-width, .no-sidebar { overflow: hidden; #primary { .entry-content { > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: unset; &.wp-block-cover, &.wp-block-cover-image { width: unset; } } > .alignwide { margin-left: -100px; margin-right: -100px; max-width: unset; } } } &.narrow-978, &.narrow-1218 { #main { overflow: hidden; } #primary { .entry-content { > .alignfull { margin-left: -25px; margin-right: -25px; &.wp-block-cover, &.wp-block-cover-image { width: unset; } } > .alignwide { margin-left: -25px; margin-right: -25px; max-width: unset; } } } } } /*****************************************************************/ /*****************************************************************/ /* =BODY ----------------------------------------------- */ body { padding-top: 30px; padding-bottom: 30px; } #page { max-width: 1268px; margin: 0 auto; background-color: #FFFFFF; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } .wide-978 { padding-top: 0; padding-bottom: 0; } .wide-1218 { padding-top: 0; padding-bottom: 0; #page { max-width: 100%; } } .narrow-978 #page { max-width: 1038px; } .wide-978 #page { max-width: 100%; padding-top: 0; padding-bottom: 0; } .inner-wrap { margin: 0 auto; max-width: 1218px; } .wide-1218 .inner-wrap { max-width: 1218px; } .narrow-978 .inner-wrap, .wide-978 .inner-wrap { max-width: 978px; } /* =FEATURED SLIDER ----------------------------------------------- */ #featured-slider { border-bottom: 1px solid #EAEAEA; position: relative; .slider-cycle { position: relative; } .slides { width: 100%; } } .wide-978 #featured-slider .slider-cycle, .wide-1218 #featured-slider .slider-cycle { max-width: 1600px; margin: 0 auto; } #featured-slider { .displayblock { display: block; } .displaynone { display: none; } } .ie8 #featured-slider .entry-container { top: 25%; } #featured-slider .entry-container { top: 50%; -ms-transform: translateY(-50%); /* IE 9 */ -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 5%; max-width: 40%; } .wide-978 #featured-slider .entry-container { left: 13.8%; } .wide-1218 #featured-slider .entry-container { left: 4.9%; } #featured-slider { .entry-description-container { background-color: #555555; background-color: rgba(0, 0, 0, 0.3); padding: 1rem 1.5rem; } img { margin-bottom: 0; } .slider-title-head { display: inline-block; left: 0; margin-bottom: 0.5rem; } .entry-title { padding: 0; } } .slider-title-head .entry-title a { color: #FFFFFF; text-decoration: none; } #featured-slider { .entry-title span { color: #FFFFFF; display: block; font-size: 26px; } .entry-content { color: #FFFFFF; padding-top: 0.5rem; p { margin: 0; padding: 0; } } .slider-read-more-button { background-color: #0FBE7C; color: #FFFFFF; text-align: center; font-family: 'Lato', sans-serif; padding: 1rem 1.5rem; float: left; margin-top: 15px; font-size: 20px; &:hover { background-color: #666666; } } } /* =SLIDER CONTROLLERS ----------------------------------------------- */ #controllers { text-align: center; line-height: 0; position: absolute; width: 100%; bottom: 15px; z-index: 999; a { width: 18px; height: 6px; margin: 0 4px; overflow: hidden; display: inline-block; background-color: #FFFFFF; color: #FFFFFF; &:hover, &.active { background-color: #0FBE7C; color: #0FBE7C; } } } /* =PAGE HEADER TITLE ----------------------------------------------- */ .header-post-title-container { border-bottom: 1px solid #EAEAEA; padding: 20px 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05) inset; .post-title-wrapper { float: left; max-width: 100%; padding-right: 30px; } } .header-post-title-class { font-size: 22px; padding-bottom: 0; line-height: 36px; } /* =BREADCRUMB NAVXT PLUGIN SUPPORT ----------------------------------------------- */ .breadcrumb { float: right; text-align: right; margin-top: 8px; margin-bottom: 2px; font-size: 12px; color: #666666; a { color: #666666; &:hover { color: #0FBE7C; } } } /* =CONTENT ----------------------------------------------- */ .sticky { display: block; } .extra-hatom-entry-title { display: none; } #main { padding: 40px 0 10px 0; } .widget_service_block { margin-bottom: 30px; padding-top: 30px; .widget-title { font-size: 22px; padding-bottom: 10px; } p { padding-bottom: 0; } .more-link-wrap { text-align: center; } a.more-link:hover { text-decoration: underline; } } .widget_featured_single_post a.read-more:hover { text-decoration: underline; } .widget-title a { color: #444444; } .tg-one-half, .tg-one-third, .tg-one-fourth { .widget-title a:hover { color: #0FBE7C; } } .tg-one-half, .tg-one-third, .tg-one-fourth { p, .service-image, .widget-title { text-align: center; } } .tg-one-third { float: left; width: 28.407225%; margin: 0 2.46305419%; padding: 0 0 30px; #colophon & { width: 31.7405583%; margin-left: 0; margin-right: 2.38916257%; &.tg-after-two-blocks-clearfix { margin-right: 0; float: right; } } } .tg-one-fourth { float: left; width: 23.1527094%; margin: 0 2.46305419% 0 0; padding: 0 0 30px; } .tg-one-fourth-last { margin: 0; } .tg-one-half { float: left; width: 48.7684729%; margin: 0 2.46305419% 0 0; padding: 0 0 30px; } .tg-one-half-last { float: right; margin: 0; } .widget_recent_work { margin-bottom: 20px; img { margin-bottom: 0; } .tg-one-half, .tg-one-third, .tg-one-fourth { .widget-title { font-size: 22px; padding-bottom: 8px; text-align: left; } } .tg-one-half, .tg-one-third, .tg-one-fourth { p { text-align: left; } } .tg-one-half, .tg-one-third, .tg-one-fourth { .service-image { text-align: center; padding-bottom: 0; } } } .widget_featured_single_post { padding-bottom: 30px; .widget-title { font-size: 22px; text-align: left; } p { text-align: left; } .service-image { text-align: left; padding-bottom: 0; } } .widget_featured_post { margin-bottom: 20px; .main-title { font-size: 24px; padding-bottom: 8px; } } .container-featured-widget-head { padding-top: 10px; padding-bottom: 15px; } .widget_featured_post { .tg-one-half, .tg-one-third, .tg-one-fourth { .widget-title { text-align: left; font-size: 20px; padding-bottom: 8px; line-height: 22px; } } .tg-one-half, .tg-one-third, .tg-one-fourth { p { text-align: left; } } .meta { font-size: 12px; padding: 3px; font-family: 'Lato', sans-serif; } } .wide-978 .widget_featured_post, .narrow-978 .widget_featured_post { .meta { font-size: 11px; } } /* =META ----------------------------------------------- */ .meta { border-bottom: 1px dashed #EAEAEA; border-top: 1px dashed #EAEAEA; padding: 5px; font-size: 15px; li { &:first-child { border-left: 0 none; padding-left: 0 !important; } border-left: 1px solid #EAEAEA; float: left; padding: 0 6px 0 6px !important; border-bottom: none !important; &:last-child { float: right; border-left: 0 none; padding-right: 0 !important; } } } .main-title { text-align: center; text-transform: uppercase; } .main-description { text-align: center; } /* =NAVIGATION ----------------------------------------------- */ .default-wp-page { .previous { float: left; margin-bottom: 30px; } .next { float: right; margin-bottom: 30px; } } .wp-pagenavi { text-align: center; } #content .wp-pagenavi .page { padding-bottom: 3px; } /* =PAGINATION ----------------------------------------------- */ .pagination { margin: 15px 0; span { padding: 2px 5px; border: 1px solid #EAEAEA; background-color: #0FBE7C; color: #FFFFFF; } a span { background-color: #FFFFFF; color: #666666; &:hover { color: #0FBE7C; border-color: #0FBE7C; text-decoration: none; } } } /* =TESTIMONIAL WIDGET ----------------------------------------------- */ .widget_testimonial { margin-bottom: 30px; .widget-title { font-size: 22px; text-align: left; } .testimonial-icon:before { display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: normal 22px/1 'Genericons'; vertical-align: top; content: '\f106'; width: 25px; height: 19px; float: left; margin-right: 3.06%; color: #0FBE7C; transform: rotate(180deg); } .testimonial-post { padding: 20px; border-width: 2px 1px 1px 1px; border-style: solid dashed dashed dashed; border-color: #0FBE7C #EAEAEA #EAEAEA #EAEAEA; font-style: italic; margin-bottom: 15px; display: block; overflow: hidden; p { margin-bottom: 0; } } .testimonial-author { text-align: right; clear: both; font-size: 12px; span { font-size: 16px; color: #666666; } } } /* =CALL TO ACTION WIDGET ----------------------------------------------- */ .widget_call_to_action { margin-bottom: 60px; } .call-to-action-content-wrapper { border-width: 1px 1px 1px 3px; border-style: dashed dashed dashed solid; border-color: #EAEAEA #EAEAEA #EAEAEA #0FBE7C; padding: 20px 3.85878489% 20px 3.69458128%; background-color: #F8F8F8; } .call-to-action-content { width: 69.5187166%; float: left; h3 { padding-bottom: 0; font-size: 24px; } p { padding-bottom: 0; margin-bottom: 0; } } .call-to-action-button { float: right; background-color: #0FBE7C; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); color: #FFFFFF; font-size: 22px; line-height: 40px; text-align: center; font-family: 'Lato', sans-serif; padding: 5px 3.28407225%; margin-top: 4px; width: fit-content; &:hover { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); } } /* Text widget */ .widget_text { word-wrap: break-word; margin-bottom: 30px; .textwidget { padding-bottom: 15px; } } .tg-one-half .widget_text .widget-title { text-align: left; } .widget_text { ul, ol { margin-top: 5px; } } /* =MEDIA ----------------------------------------------- */ .wp-caption { border: 1px solid #ccc; margin-bottom: 1.5rem; max-width: 100%; img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; } } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075rem 0; } .gallery-caption { } /* =WORDPRESS GALLERY SUPPORT ----------------------------------------------- */ .gallery { margin: 0 auto 15px; } .gallery-item { display: inline-block; padding: 15px 2%; text-align: center; vertical-align: top; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gallery-columns-3, .gallery-columns-4, .gallery-columns-5 { .gallery-item { padding: 15px 1%; } } .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { .gallery-item { padding: 10px 0.5%; } } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.66%; } .gallery-columns-7 .gallery-item { width: 14.28%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.11%; } .gallery-icon img { margin: 0 auto; } .gallery .gallery-caption { font-size: 12px; line-height: 1.2; padding-top: 5px; } .footer-widgets-area .gallery-columns-3 .gallery-item { padding: 5px 5px; } .wp-block-gallery ul.blocks-gallery-grid, ul.wp-block-gallery { padding: 0; img { margin-bottom: 0; } } /* Gutenberg Blocks Layout. --------------------------------------------------------------*/ .wp-block-gallery, .wp-block-social-links { &.alignleft, &.alignright, &.aligncenter { display: flex; } } /* =COMMENTS ----------------------------------------------- */ #comments { background-color: #FFFFFF; } .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } #comments { h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; } h2.comments-title, h3.comments-title { margin-bottom: 10px; font-size: 28px; } } .avatar { border-radius: 50%; float: left; } .comments-area { article header { margin: 0 0 10px; overflow: hidden; position: relative; } .comment-edit-link, .comment-permalink, .comment-date-time, .comment-author-link { display: block; margin-left: 100px; color: #999999; } } #content .comments-area { article header cite a:hover { color: #0FBE7C; } a { &.comment-edit-link:hover, &.comment-permalink:hover { color: #0FBE7C; } } } .comments-area { .comment-author-link { a { color: #999999; &:hover { color: #0FBE7C; } } span { margin-left: 10px; padding: 0 5px; background-color: #0FBE7C; color: #FFFFFF; border-radius: 3px; } } article header { .comment-author-link, .comment-edit-link, .comment-permalink, .comment-date-time { &:before { display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: normal 22px/1 'Genericons'; vertical-align: top; } } .comment-author-link:before { content: '\f304'; } .comment-edit-link:before { content: '\f411'; } .comment-permalink:before { content: '\f107'; } .comment-date-time:before { content: '\f307'; } } } .comment-content { padding: 2rem; background-color: #F8F8F8; border: 1px solid #EAEAEA; } .comment { margin-bottom: 20px; ul, ol { margin: 0 0 20px 20px; } ul { list-style: square outside none; } .comment-reply-link { float: right; color: #999999; &:hover { color: #0FBE7C; } &:before { content: '\f412'; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: normal 22px/1 'Genericons'; vertical-align: top; } } } .comment-list { list-style-type: none; padding: 0; margin-bottom: 3.4rem; .children { margin-left: 20px; list-style-type: none; padding: 0; } } .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; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ &: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-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } } /* Do not show the outline on the skip link target. */ #main[tabindex="-1"]:focus { outline: 0; } .nav-previous, .nav-next { margin-bottom: 15px; } .nav-previous .nav-next { a { color: #666666; padding: 5px 25px; cursor: pointer; border: 1px solid #EAEAEA; font-size: 16px; } } .nav-previous, .nav-next { a:hover { color: #0FBE7C; } } /* =COMMENT FORM ----------------------------------------------- */ #respond { h3#reply-title { line-height: 1.5; #cancel-comment-reply-link { margin-left: 1rem; font-weight: normal; font-size: 1.6rem; } } form { margin: 2.4rem 0; .comment-form-cookies-consent { #wp-comment-cookies-consent { margin-right: 5px; } label { display: inline-block; } } p { margin: 1.1rem 0; &.logged-in-as { margin-bottom: 1.6rem; } } label { display: block; line-height: 1.5; } input[type="text"], textarea { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; line-height: 1.5; padding: 10px; width: 100%; } p.form-allowed-tags { margin: 0; font-size: 1.5rem; line-height: 1.5; color: #5e5e5e; } } } .required { color: red; } .related-posts-main-title { padding-bottom: 30px; } .related-posts { margin: 0 -2.46305419%; .entry-title { font-size: 18px; line-height: 1.4; padding-bottom: 0; a { color: #444444; &:hover { color: #0FBE7C; } } } .entry-meta { border: none 0; font-size: 14px; .by-author, .date, .category, .comments, .edit-link { padding: 5px 4px 5px 0; &:before { font: 12px/20px "FontAwesome"; } a { color: #666666; &:hover { color: #0FBE7C; } } } } } /* =WIDGETS ----------------------------------------------- */ #secondary .widget ul li { line-height: 1.5; border-bottom: 1px solid #EAEAEA; padding: 5px 0; } #colophon .widget ul li { line-height: 1.5; border-bottom: 1px solid #EAEAEA; padding: 5px 0; border-bottom: 1px solid #444444; } #secondary, #colophon { .widget ul li li { border-bottom: none; } } #secondary, #colophon { .widget ul ul { padding-left: 10px; } } .widget select { border: 1px solid #DDDDDD; color: #666666; padding: 2px; width: 60%; } #secondary { h3.widget-title { font-size: 22px; line-height: 32px; padding-bottom: 15px; } .widget { margin-bottom: 35px; font-size: 16px; } } .error-404 .widget { margin-bottom: 35px; font-size: 16px; } #secondary a:hover { text-decoration: underline; } .error-404 { padding-bottom: 20px; text-align: center; .page-title { font-size: 30px; line-height: 36px; } input.s { width: 50%; } } /* =CALENDAR WIDGET ----------------------------------------------- */ #wp-calendar { th, td, caption { text-align: left; padding-bottom: 10px; } #today { color: #0FBE7C; } caption { text-align: center; } #next { padding-right: 35px; text-align: right; } } .widget_calendar #wp-calendar th { font-weight: 600; } .widget-title span { border-bottom: 2px solid #0FBE7C; padding-bottom: 5px; .elementor .widget_service_block &, .elementor .widget_testimonial &, .elementor .widget_featured_single_post & { border: none; } } #colophon #wp-calendar { th, td { border: 1px solid #444444; padding: 3px 2px 3px 8px; } } .widget { th, td { padding: 1px 1px 1px 2px; } } /* =SCROLL UP ----------------------------------------------- */ a#scroll-up { bottom: 20px; position: fixed; right: 20px; display: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: normal 26px/1 'Genericons'; vertical-align: top; color: #FFFFFF; background-color: #0FBE7C; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ border-radius: 3px; padding: 6px; &:before { content: '\f432'; } &:hover { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } } /* =READ MORE LINK ----------------------------------------------- */ .read-more, .more-link { font-size: 14px; color: #0FBE7C; font-family: 'Lato', sans-serif; } /* =PRIMARY AND SECONDARY CONTENT AREA ----------------------------------------------- */ #primary { float: left; width: 61.5763547%; } #secondary { float: right; width: 34.4827586%; } .wide-978, .narrow-978 { #primary { width: 65.5763547%; } } .wide-978, .narrow-978 { #secondary { width: 30.4827586%; } } /* =LEFT SIDEBAR CONTENT LAYOUT -------------------------------------------------------------- */ .left-sidebar { #primary { float: right; } #secondary { float: left; } } /* =NO SIDEBAR CONTENT LAYOUT -------------------------------------------------------------- */ .no-sidebar #primary { float: none; margin: 0 auto; } .no-sidebar-full-width #primary { width: 100%; } .no-sidebar, .no-sidebar-full-width { #secondary { display: none; } } /* =POST CONTENT ----------------------------------------------- */ #content { .post, .page { padding-bottom: 45px; } } .single #content .post { padding-bottom: 25px; } .post, .page { .entry-title { font-size: 26px; line-height: 32px; } } .post, .page { .entry-title a { color: #444444; &:hover { color: #0FBE7C; } } } .post .entry-content { margin-bottom: 10px; } .entry-content { ul { list-style: square; padding: 0 0 0 35px; margin-bottom: 30px; &.wp-block-gallery { padding: 0; } } ol { padding: 0 0 0 35px; margin-bottom: 30px; } li > { ul, ol { margin-bottom: 0; } } } .post .entry-content a:hover { text-decoration: underline; } .blog-medium .post .post-featured-image { float: left; width: 36%; text-align: left; padding-right: 4%; } .blog-alternate-medium #primary article { &:nth-child(odd) figure { float: left; padding-right: 4%; } &:nth-child(even) figure { float: right; padding-left: 4%; } } .post .entry-meta { border: 1px solid #EAEAEA; font-size: 14px; color: #666666; font-family: 'Lato', sans-serif; margin: 0 0 20px; .by-author, .date, .category, .comments, .edit-link { padding: 5px 10px; } .read-more-link { padding: 5px 10px; background-color: #0FBE7C; float: right; border-right: none; &:hover { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); } } a { color: #666666; } } .type-page .entry-meta a { color: #666666; } .post .entry-meta a { &.read-more { color: #FFFFFF; &:hover { color: #FFFFFF; } } &:hover { color: #0FBE7C; } } .type-page .entry-meta a:hover { color: #0FBE7C; } .post .entry-meta { span { float: left; padding: 0 6px 0 6px; &:first-child { border-left: none; } } .by-author, .date, .category, .comments, .edit-link { &:before { display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: normal 18px/1 'Genericons'; vertical-align: top; } } .by-author:before { content: '\f304'; } .date:before { content: '\f307'; } .category:before { content: '\f301'; } .comments:before { content: '\f300'; } .edit-link:before { content: '\f411'; } } .author-box { padding: 20px; border: 1px solid #EAEAEA; .author-img { img { margin-bottom: 0; } } .author-description-wrapper { margin-left: 120px; } } .single #content .tags { margin: 30px 0; a { border: 1px solid #EAEAEA; padding: 3px 5px; border-radius: 3px; color: #666666; &:hover { color: #0FBE7C; text-decoration: none; } } } /* header media css --------------------------------------------------------------*/ div.wp-custom-header { position: relative; } iframe#wp-custom-header-video { width: 100%; } .wp-custom-header-video-button { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 62px; height: 50px; font: 0/0 a; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } div#wp-custom-header:hover .wp-custom-header-video-button { visibility: visible; opacity: 1; } .wp-custom-header-video-button { &:before { content: "\f452"; display: block; font-family: "Genericons"; font-size: 20px; } &.wp-custom-header-video-pause:before { content: "\f448"; } } /* Remove the updated class from entry meta */ .date .updated { display: none; } body { &.page-template-page-builder { #primary { float: none; width: 100%; } #main { padding-top: 0; padding-bottom: 0; } } &.no-sidebar-content-stretched { #main { .inner-wrap { width: 100%; max-width: 100%; #primary { float: none; width: 100%; } } } } }