/* Theme Name: Bravado Theme URI: https://themetry.com/themes/bravado/ Author: Themetry Author URI: https://themetry.com/ Description: A theme for personal branding Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bravado Tags: custom-background, custom-menu, featured-image-header, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Bravado is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Asides ## Comments # Infinite scroll # Media ## Captions ## Galleries # Fonts # Structure # Header # Article Grid # Single # Menu Popout # Footer # Plugin Support ## Whistles --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { -webkit-appearance: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .search-field, .form-submit .submit { border-radius: 0 !important; -webkit-appearance: none !important; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-size: 16px; font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; margin-top: 0; } .comment p { margin-bottom: 2.1em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fbfbfb; /* Fallback for when there is no custom background color defined. */ } #infinite-handle { background: #f6f6f6; } body { font-family: 'Merriweather', serif; font-weight: 300; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 0; padding: 0 0 0 1em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { background: rgba( 17, 17, 17, .86 ); border: none; color: #fff; font-size: 24px; line-height: 1em; padding: 16px 15px; transition: .5s all; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: rgba( 17, 17, 17, 1 ); } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { padding-left: 3px; width: 100%; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: royalblue; } a:visited { color: purple; } a:hover, a:focus, a:active { color: midnightblue; } a:hover { text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; text-decoration: none; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 1.5em; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a, .main-navigation li.focus > a { } .main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a { } .main-navigation ul ul a:hover, .main-navigation ul ul a.focus { } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a { } /* Small menu. */ .menu-toggle, .menu-toggled .main-navigation ul { display: block; } .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .single .site-main .post-navigation { margin: 3em 0 0; } .comment-navigation .nav-previous, .posts-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; 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. */ } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after, .article-grid:before, .article-grid:after, .site-main:before, .site-main:after, .single .hentry:before, .single .hentry:after, .comment-body:before, .comment-body:after { content: ""; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after, .article-grid:after, .site-main:after, .single .hentry:after, .comment-body:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { padding: 0 0 2.0625em; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } /* Search widget. */ .widget_search .search-submit { display: none; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- ## Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-list { margin: 0 auto; padding: 0; width: 66%; } .comment-list .children { margin: 0 0 0 80px; padding: 0; } #comment-nav-above { display: none; } #comment-nav-below { margin-bottom: 50px; } .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comments-title { font-size: 44px; padding-bottom: .96em; text-align: center; } .comment-list li { list-style-type: none; } .comment-list .comment-content li { list-style-type: inherit; } .comment-author .avatar { border-radius: 50%; position: absolute; top: 0; left: 0; } .single .site-main a.comment-reply-link, .page .site-main a.comment-reply-link { background: #eee; color: #232323; display: inline-block; font-size: 16px; line-height: 1em; padding: 9px 16px; position: absolute; top: 0; right: 0; text-decoration: none; transition: .5s all; } .single .site-main a.comment-reply-link:hover, .page .site-main a.comment-reply-link:hover { background: #000; color: #fff; } .comment-author { font-size: 18px; } .says { display: none; } .comment-metadata { letter-spacing: 2px; padding: 0 0 7px; text-transform: uppercase; } .single .site-main .comment-metadata a, .page .site-main .comment-metadata a { color: #999; font-size: 14px; text-decoration: none; } .comment-body { clear: both; padding: 0 0 14px 116px; position: relative; } .comment-content, .comment-awaiting-moderation { font-size: 18px; line-height: 1.6666666em; } .comment-awaiting-moderation { color: #ff9900; } .comment p.comment-awaiting-moderation { margin-bottom: 0; } /*-------------------------------------------------------------- ## Comment Form --------------------------------------------------------------*/ .comment-respond { border: 4px solid #e9e9e9; clear: both; margin: 86px auto 0; padding: 0 27px 26px; text-align: center; width: 66%; } .comment-form { text-align: left; } .comment-form p:last-child { margin-bottom: 0; } .comment-reply-title { background: #f6f6f6; display: inline-block; font-size: 44px; margin: -31px 0 30px; padding: 0 12px; position: relative; top: -5px; } .logged-in-as { text-align: center; } .comment-notes { background: #eee; display: block; font-size: 15px; font-style: italic; margin: 0 auto 3.5em; max-width: 506px; padding: 7px 11px; text-align: center; } .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment, .form-allowed-tags, .form-submit { text-align: left; } .comment-form-author, .comment-form-email, .comment-form-url { position: relative; } .comment-form-author label, .comment-form-email label, .comment-form-url label { background: #fff; float: left; line-height: 30px; padding-left: 16px; position: absolute; top: 0; left: 0; } #author, #email, #url { text-indent: 84px; padding: 0 16px 0 0; } .comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label, #author, #email, #url { line-height: 48px; } .comment-form-comment label { background: #fff; display: block; padding-left: 16px; } #author, #email, #url, #comment { border: none; border-radius: 0; width: 100%; } #comment { padding: 0 16px 16px; } .form-allowed-tags { font-size: 15px; padding: 0 13px; } .form-allowed-tags code { background: #f1f1f1; display: block; font-size: 14px; line-height: 36px; margin: 13px -13px 0; padding: 0 13px; } .form-allowed-tags code::first-line { background: #ececec; } #cancel-comment-reply-link { display: block; font-size: 20px; } .comment .comment-respond { margin-bottom: 50px; width: 100%; } /*-------------------------------------------------------------- # Comment Pagination --------------------------------------------------------------*/ .comment-navigation { background: #eee; font-size: 25px; line-height: 90px; min-height: 90px; margin: 0 auto; max-width: 636px; position: relative; } .comment-navigation a { color: #000; display: inline-block; position: relative; text-decoration: none; } .comment-navigation a:after { background: #d6d6d6; bottom: 27px; content: ""; display: block; height: 9px; position: absolute; width: 100%; transition: .5s background; } .comment-navigation a:hover:after { background: #f9f9ac; } .comment-navigation .nav-previous { padding-right: 32px; text-align: right; } .comment-navigation .nav-next { padding-left: 32px; text-align: left; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text, .gallery-item .wp-caption-text { font-size: 16px; line-height: 1.4em; margin: 0.8075em 0; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Fonts --------------------------------------------------------------*/ .site-title, .article-grid .entry-date, .site-footer, .nav-menu, .posted-on-heading, .cat-links-heading, .tags-links-heading, .comment-metadata { font-family: 'PT Mono', serif; } .widget-title, .reply, .comment-form label, button, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="button"], input[type="reset"], input[type="submit"], .search-field, .blog .nav-links, .archive .nav-links, .search-results .nav-links, #infinite-handle, .comment-navigation, #wp-calendar caption { font-family: 'Raleway', sans-serif; font-weight: 300; } input[type="submit"].search-submit, .blog .nav-previous a:before, .blog .nav-next a:after, .archive .nav-previous a:before, .archive .nav-next a:after, .search-results .nav-previous a:before, .search-results .nav-next a:after, #infinite-handle button:after, .post-navigation .nav-previous a:before, .post-navigation .nav-next a:after, .nav-container .nav-menu .menu-item-has-children a:after, .nav-container .nav-menu .page_item_has_children a:after, .whistles-toggle .whistle-title:after, .whistles-accordion .whistle-title:after { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; font-size-adjust: none; font-stretch: normal; font-feature-settings: normal; font-language-override: normal; font-kerning: auto; font-synthesis: weight style; font-variant: normal; font-size: inherit; text-rendering: auto; -moz-osx-font-smoothing: grayscale; transform: translate(0px, 0px); } /*-------------------------------------------------------------- # Structure --------------------------------------------------------------*/ .site { margin: 0 auto; max-width: 1600px; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .site-branding { float: left; padding: 21px 0 21px 24px; } .site-title { clear: none; font-weight: normal; font-size: 16px; letter-spacing: 3px; line-height: 1em; margin: 0; text-transform: uppercase; } .site-title a { color: #000; display: inline-block; line-height: 78px; height: 78px; text-decoration: none; } .custom-logo { display: inline-block; float: left; margin-right: 17px; max-width: 78px; } .custom-logo img { height: auto; width: 100%; } .wp-custom-logo .site-title { float: left; } .menu-toggle { background: none; border: none; border-radius: 0; box-shadow: none; color: #000; float: right; font-size: 37px; margin: 48px 36px 0 0; padding: 0; position: relative; width: 36px; z-index: 1; } .menu-toggle:after { content: ""; width: 1em; height: 5px; border-top: 15px double #000; border-bottom: 5px solid #000; box-sizing: content-box; display: block; } .menu-toggle:hover { background: none; box-shadow: none; } /*-------------------------------------------------------------- # Article Grid --------------------------------------------------------------*/ .article-grid-wrap { background: #fff; } .page-title, .single .entry-title, .page .page .entry-title { font-family: 'Merriweather', serif; font-weight: bold; font-size: 58px; text-align: center; } .taxonomy-description { margin: 0 auto; max-width: 430px; text-align: center; } .article-grid .entry-title a { display: inline-block; } .article-grid .post { background: #fff; border-right: 1px solid #ebebeb; float: left; height: 0; margin: 0; padding-bottom: 25%; position: relative; width: 25%; } .article-grid .post:before { background: #ccc; content: " "; position: absolute; top: 60px; left: 60px; height: 4px; width: 24px; transition: .5s background; z-index: 3; } .article-grid .post:hover:before { background: transparent; } .article-grid .entry-header { bottom: 50px; left: 40px; right: 40px; padding: 20px; margin: -20px 0; position: absolute; transition: .5s background; z-index: 3; } .article-grid .entry-date { font-size: 16px; text-transform: uppercase; } .article-grid .posted-on a { color: #a3a3a3; text-decoration: none; } .article-grid .entry-title { font-size: 29px; font-weight: normal; margin: 0; max-height: 6em; overflow: hidden; } .entry-title a { color: #000; } .article-grid .attachment-grid-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; } .article-grid .has-post-thumbnail:after { background: rgba( 255, 255, 255, .7 ); content: ""; display: block; position: absolute; transition: .5s all; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; } .article-grid .has-post-thumbnail:hover:after { background: rgba( 255, 255, 255, 0 ); } .article-grid .has-post-thumbnail:hover .entry-header { background: #fff; } .posts-navigation, #infinite-handle { padding-top: 60px; } .blog .nav-links a, .archive .nav-links a, .search-results .nav-links a, .infinite-scroll #infinite-handle span button { color: #000; text-decoration: none; transition: .5s all; } .blog .nav-links a, .archive .nav-links a, .search-results .nav-links a, .infinite-scroll #infinite-handle span button, .infinite-scroll #infinite-handle span button:hover { border: 3px solid #000; font-size: 42px; padding: 3.5px 30px; } .blog .nav-links a:hover, .archive .nav-links a:hover, .search-results .nav-links a:hover, .infinite-scroll #infinite-handle span button:hover, .infinite-scroll #infinite-handle span button:focus { background: #000; color: #fff; } #infinite-handle button:after { content: "\f107"; margin-left: 10px; } #infinite-handle { clear: both; text-align: center; } #infinite-handle span { background: transparent !important; padding: 0 !important; } .blog .nav-previous a:before, .archive .nav-previous a:before, .search-results .nav-previous a:before { content: "\f104"; margin-right: 10px; } .blog .nav-next a:after, .archive .nav-next a:after, .search-results .nav-next a:after { content: "\f105"; margin-left: 10px; } /*-------------------------------------------------------------- # Single --------------------------------------------------------------*/ .post-header { font-size: 0; max-height: 400px; overflow: hidden; } .post-header img { width: 100%; } .single .hentry, .page .page, .comments-area, .site-footer .site-info, .not-found { margin: 0 auto; max-width: 1300px; padding-left: 50px; padding-right: 50px; } .nav-links { margin: 0 auto; max-width: 1700px; padding: 0 50px; } .single .entry-title, .page .page .entry-title { margin: 1.4em auto 1.1em; max-width: 950px; } .posted-on-heading, .cat-links-heading, .tags-links-heading { color: #999; display: block; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .cat-links-heading, .tags-links-heading { margin-top: 33px; } .entry-sidebar .edit-link { display: block; } .posted-on, .byline, .cat-links, .tags-links, .entry-sidebar .edit-link { color: #232323; font-size: 19px; } .posted-on a, .byline a, .cat-links a, .tags-links a, .post-edit-link { color: #232323; } .single .entry-content { float: left; width: 66%; /* 792px */ } .single .entry-content, .page .entry-content { font-size: 23px; line-height: 1.69565217391em; } .single .entry-content blockquote, .page .entry-content blockquote, .comment-content blockquote { font-size: 19px; line-height: 30px; margin: 0; padding: 33px 0 0 79px; position: relative; } .single .entry-content blockquote:before, .page .entry-content blockquote:before, .comment-content blockquote:before { content: "\201C"; font-size: 84px; font-style: italic; font-weight: bold; line-height: 1em; position: absolute; top: 0; left: 0; } .single .site-main a, .page .site-main a { color: #404040; } .entry-sidebar { border-left: 2px solid #fff; float: right; margin-bottom: 34.5px; padding-left: 22px; width: 27.5%; } .post-navigation { background: #eee; } .post-navigation .nav-links { display: table; height: 266px; min-width: 75%; position: relative; } .post-navigation .nav-links:after, .comment-navigation:after { background: #f6f6f6; box-sizing: content-box; content: ""; display: block; height: 100%; left: 50%; margin: -1% 0 0 -2px; padding: 1% 0; position: absolute; top: 0; transform: rotate(15deg); width: 5px; } .post-navigation a { color: #000; display: inline-block; font-size: 29px; } .post-navigation .nav-previous, .post-navigation .nav-next { display: table-cell; position: relative; vertical-align: middle; width: 50%; } .post-navigation .nav-previous { padding: 0 5% 0 10%; text-align: right; } .post-navigation .nav-previous a:before, .post-navigation .nav-next a:after { border: 2px solid #fcfcfc; border-radius: 50%; color: #fcfcfc; font-size: 45px; line-height: 55px; height: 60px; width: 60px; text-align: center; position: absolute; top: 50%; margin-top: -30px; } .post-navigation .nav-previous a:before { content: "\f104"; left: 5%; } .post-navigation .nav-next a:after { content: "\f105"; right: 5%; } .single .post-navigation .nav-next { padding: 0 10% 0 5%; text-align: left; } .single .site-main table, .page .site-main table { border-top: 2px solid #626262; } .single .site-main thead, .page .site-main thead { font-size: 15px; } .single .site-main tbody, .page .site-main tbody { font-size: 19px; line-height: 1.4em; } .single .site-main tr, .page .site-main tr { border-bottom: 1px solid #e3e3e3; } .single .site-main td, .page .site-main td, .single .site-main tbody th, .page .site-main tbody th { padding: 10px 12px; } .single .site-main thead th, .page .site-main thead th { padding: 0 12px; } .single .entry-content th, .page .entry-content th { text-align: left; } .single .comments-area { padding-top: 3em; } /*-------------------------------------------------------------- # Menu Popout --------------------------------------------------------------*/ .nav-container { overflow: auto; position: absolute; top: 0; right: 0; width: 330px; visibility: hidden; transition: .5s all; } .nav-container-wrap { background: #fbfbfb; padding: 84px 24px 0 24px; } .menu-toggled .nav-container { visibility: visible; } .menu-toggled .site-header, .menu-toggled .site-content, .menu-toggled .site-footer { left: -330px; } .site { position: relative; } .site-header, .site-content, .site-footer { background: #f6f6f6; left: 0; position: relative; transition: .5s left; z-index: 1; } .nav-container .menu { margin-bottom: 33px; } .nav-container .nav-menu { font-size: 14px; list-style: none; margin: 0; padding: 0; text-transform: uppercase; } .nav-container .nav-menu a { color: #000; display: inline-block; letter-spacing: 3px; position: relative; text-decoration: none; } .nav-container .nav-menu a:before { bottom: 1px; content: ""; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #a3a3a3; display: block; position: absolute; width: 100%; } .nav-container .nav-menu .menu-item-has-children > a:after, .nav-container .nav-menu .page_item_has_children > a:after { color: #bcbcbc; content: "\f0d7"; position: absolute; right: -17px; top: 3px; } .nav-container .nav-menu .sub-menu, .nav-container .nav-menu .children { list-style: none; margin: 20px 0 20px 13px; padding: 0; } .nav-container .nav-menu .sub-menu a, .nav-container .nav-menu .children a { border-left: 1px solid #d9d9d9; color: #666; letter-spacing: 1px; line-height: 1em; padding: 7px 0 7px 15px; text-transform: none; transition: .5s all; } .nav-container .nav-menu .sub-menu a:hover, .nav-container .nav-menu .children a:hover { border-left: 1px solid #000; color: #000; } .nav-container .nav-menu .sub-menu a:before, .nav-container .nav-menu .children a:before { display: none; } .widget-title { color: #7d7d7d; font-size: 18px; margin-bottom: .85em; position: relative; } .widget-title:after { background: #d9d9d9; content: ""; display: block; position: absolute; left: 0; bottom: -5px; height: 1px; width: 24px; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget a { color: #000; } .widget li { margin-bottom: 10px; } .nav-container .search-field { border-radius: 0; } .tagcloud a { background: #e9e9e9; color: #2f2f2f; display: inline-block; margin: 0 6px 6px 0; padding: 6px; text-decoration: none; } .widget_calendar caption { background: #d1d1d1; border-bottom: 2px solid #626262; color: #fff; font-size: 20px; line-height: 1.8em; text-transform: uppercase; } .widget_calendar tbody, .widget_calendar tfoot { text-align: center; } .widget_calendar thead tr, .widget_calendar tbody tr { border-bottom: 1px solid #e3e3e3; } .widget_calendar tr { font-size: 14px; line-height: 36px; } .nav-container .search-form { border: none; height: 36px; } .nav-container input[type="search"].search-field { font-size: 12px; } .nav-container input[type=submit].search-submit { font-size: 13px; padding: 0; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .site-footer { color: #999; letter-spacing: 3px; padding: 83px 0; text-align: center; text-transform: uppercase; } .site-footer a { color: #666; } /*-------------------------------------------------------------- # 404 --------------------------------------------------------------*/ .error404 .page-content p { font-size: 23px; margin: 0 auto; max-width: 588px; padding: 0 0 45px 0; text-align: center; } .search-form { border: 4px solid #d3d3d3; height: 96px; margin: 0 auto; max-width: 588px; } input[type="search"].search-field, input[type="submit"].search-submit { background: #fff; box-sizing: border-box; -moz-box-sizing: border-box; height: 100%; } input[type="search"].search-field { border: 0; float: left; font-size: 49px; text-indent: 15px; width: 83%; } input[type=submit].search-submit { color: #d1d1d1; font-size: 32px; width: 17%; } /*-------------------------------------------------------------- # Plugin Support --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Whistles --------------------------------------------------------------*/ .whistles-toggle .whistle-title:after, .whistles-accordion .whistle-title:after { color: #d9d9d9; content: "\f196"; font-size: 24px; position: absolute; right: 28px; top: 50%; margin-top: -9px; } .whistles-toggle .whistle-title[aria-selected="true"]:after, .whistles-accordion .whistle-title[aria-selected="true"]:after { color: #000; content: "\f056"; } .whistles-toggle .whistle-content, .whistles-accordion .whistle-content { margin: 0; padding: 40px 28px; color: #000; background: #f6f6f6; border: 0; -moz-box-sizing: border-box; box-sizing: border-box; } .whistles-toggle .whistle-content p:last-child, .whistles-accordion .whistle-content p:last-child { margin-bottom: 0; } .whistles-toggle .whistle-title:hover, .whistles-toggle .whistle-title[aria-selected="true"], .whistles-accordion .whistle-title:hover, .whistles-accordion .whistle-title[aria-selected="true"] { background: #fbfbfb; color: #000; } /*-------------------------------------------------------------- # Responsive --------------------------------------------------------------*/ @media (max-width: 1300px) { .article-grid .entry-header { left: 20px; } .article-grid .entry-title { font-size: 21px; } .article-grid .post:before { left: 40px; } } @media (max-width: 1150px) { .article-grid .post { border-bottom: 1px solid #ebebeb; width: 50%; } .article-grid .entry-title { max-height: 4.5em; } } @media (max-width: 1000px) { .article-grid .post { float: none; height: auto; padding-bottom: 30px; padding-top: 80px; padding-left: 20px; padding-right: 20px; width: 100%; } .article-grid .entry-header { position: relative; margin: 0; top: auto; left: auto; right: auto; bottom: auto; } .article-grid .entry-title { max-height: none; } .single .entry-title, .page .page .entry-title { max-width: 100%; } .single .entry-content { float: none; width: 100%; } .entry-sidebar { border: 1px solid #fff; float: none; margin-right: auto; margin-bottom: 50px; margin-left: auto; padding-top: 22px; padding-right: 22px; padding-bottom: 22px; max-width: 600px; width: 100%; } .post-navigation .nav-links:after { display: none; } .post-navigation .nav-previous, .single .post-navigation .nav-next { background: #eee; display: block; padding: 40px 50px; position: static; width: 100%; } .post-navigation .nav-links div:nth-child(1):nth-last-child(2) { margin-bottom: 2px; } .post-navigation .nav-links { background: #f6f6f6; padding: 0; } .post-navigation .nav-links { display: block; height: auto; position: static; } .post-navigation a { position: relative; } .post-navigation .nav-previous a { padding-left: 40px; } .post-navigation .nav-next a { padding-right: 40px; } .post-navigation .nav-previous { text-align: left; } .single .post-navigation .nav-next { text-align: right; } .post-navigation .nav-previous a:before, .post-navigation .nav-next a:after { border: none; color: #000; font-size: 27px; line-height: 61px; width: auto; } .post-navigation .nav-previous a:before { left: 0; } .post-navigation .nav-next a:after { right: 0; } .comment-list, .comment-respond { width: 100%; } } @media (max-width: 800px) { .posts-navigation .nav-previous, .posts-navigation .nav-next { float: none; text-align: center; width: 100%; } .posts-navigation .nav-previous { padding-bottom: 10px; } .posts-navigation .nav-next { padding-top: 10px; } .blog .nav-links a, .archive .nav-links a, .search-results .nav-links a { display: block; width: 100%; } } @media (max-width: 768px) { .comment-navigation { max-width: 100%; } .page-title, .single .entry-title, .page .page .entry-title, .comments-title, .comment-reply-title { font-size: 40px; } .single .entry-content, .page .entry-content { font-size: 18px; } .comment-author .avatar { max-width: 40px; } .comment-body { padding: 0 0 60px 60px; } .single .site-main a.comment-reply-link, .page .site-main a.comment-reply-link { position: static; } .comment-list .children { margin: 0 0 0 40px; } .post-navigation a { font-size: 20px; } .post-navigation .nav-previous, .single .post-navigation .nav-next { padding: 20px 50px; } .comment-navigation:after { display: none; } .comment-navigation .nav-previous, .comment-navigation .nav-next { float: none; padding-right: 0; padding-left: 0; text-align: center; width: 100%; } } @media (max-width: 480px) { .site-branding { padding: 21px 0 21px 20px; } .single .hentry, .page .page, .comments-area, .site-footer .site-info, .nav-links, .not-found { padding-left: 20px; padding-right: 20px; } .post-navigation .nav-previous, .single .post-navigation .nav-next { padding: 20px; } .page-title, .single .entry-title, .page .page .entry-title, .comments-title, .comment-reply-title { font-size: 30px; } .blog .nav-links a, .archive .nav-links a, .search-results .nav-links a, .infinite-scroll #infinite-handle span button, .infinite-scroll #infinite-handle span button:hover { font-size: 23px; } .site-title a { line-height: 50px; height: 50px; } .custom-logo { margin-right: 10px; max-width: 50px; } .menu-toggle { font-size: 22px; margin: 40px 21px 0 0; width: 21px; } .menu-toggle:after { height: 3px; border-top: 9px double #000; border-bottom: 3px solid #000; } .post-navigation a, .post-navigation .nav-previous a:before, .post-navigation .nav-next a:after, .single .entry-content, .page .entry-content, .single .site-main tbody, .page .site-main tbody { font-size: 16px; } .post-navigation .nav-previous a { padding-left: 24px; } .post-navigation .nav-next a { padding-right: 24px; } .comment-content, .comment-author, .single .site-main a.comment-reply-link, .page .site-main a.comment-reply-link { font-size: 14px; } .single .site-main .comment-metadata a, .page .site-main .comment-metadata a { font-size: 11px; } .comment-metadata { line-height: 1em; } .single .site-main a.comment-reply-link, .page .site-main a.comment-reply-link { padding: 5px 12px; } .comment-author .avatar { max-width: 25px; } .comment-list .children { margin: 0 0 0 25px; } .comment-body { padding: 0 0 35px 35px; } .site-footer .sep { display: block; font-size: 0.9rem; visibility: hidden; } } @media (max-width: 393px) { .nav-container { width: 100%; } .menu-toggled .menu-toggle { position: absolute; right: -100%; } .menu-toggled .site-header, .menu-toggled .site-content, .menu-toggled .site-footer { left: -100%; } .nav-container-wrap { min-height: 0 !important; } html, .menu-toggled, .menu-toggled .site, .menu-toggled .nav-container, .menu-toggled .nav-container-wrap { height: 100%; } .menu-toggled .site { overflow: hidden; } .nav-container-wrap { overflow: auto; } }