/* Theme Name: Xmag Theme URI: http://www.designlabthemes.com/xmag-wordpress-theme/ Author: Design Lab Author URI: http://www.designlabthemes.com/ Description: Xmag is a simple and easy-to-use Magazine WordPress theme. It features a simple and minimal design. We built Xmag with performance, usability, and SEO in mind. It’s fast, lightweight, and fully AMP-compatible. With Xmag your website will look amazing on all devices to provide a great user experience. Version: 1.3.4 Requires at least: 4.7 Tested up to: 6.4 Requires PHP: 5.6 Text Domain: xmag License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, news, one-column, post-formats, right-sidebar, sticky-post, theme-options, translation-ready, two-columns */ /******************************************************************************************************** * Please don't edit this file. You can lose all modifications if the theme is updated. * Please use Additional CSS via Customizer (since WordPress 4.7) or a child theme. You can overwrite specific style rules in your child theme's 'style.css' file. * See here more about Child Themes: https://codex.wordpress.org/Child_Themes ********************************************************************************************************/ /* 01: - Reset 02: - Layout 03: - Typography 04: - Elements 05: - Navigation 06: - Header 07: - Content 08: - Post Formats 09: - Comments 10: - Blocks 11: - Widgets 12: - Additional Styles 13: - Responsive */ /* * 01. 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { text-rendering: optimizelegibility; line-height: 1; } ol, ul { list-style: none; } blockquote,q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0 } pre { font-family: monospace; font-size: 1em; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration-style: dotted; } b, strong { font-weight: 700; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /* * 02: Layout */ body { background-color: #ffffff; } #page { margin: 0; padding: 0; } .container { max-width: 740px; padding: 0 20px; margin: auto; transition: all 0.5s ease-in-out 0s; } .content-area, .sidebar { max-width: 100%; width: 100%; } .content-area { margin-bottom: 20px; } .site-content { margin: 20px 0; } /* Grid */ .row { margin-right: -10px; margin-left: -10px; box-sizing: border-box; } .col-3, .col-4, .col-6, .col-8, .col-12, .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-12, .col-xs-3, .col-xs-4, .col-xs-6, .col-xs-8, .col-xs-12 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; box-sizing: border-box; } .col-xs-3, .col-xs-4, .col-xs-6, .col-xs-8, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-8 { width: 66.66666667%; } .col-xs-6 { width: 50%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .text-center { text-align: center; } /* * 03: Typography */ body, button, input, select, textarea { color: #333; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.75; } /* Headings */ h1, h2, h3, h4, h5, h6 { clear: both; margin: 20px 0 10px; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #222; } h1 { font-size: 2em; /* 32px */ font-weight: 400; line-height: 1.25; } h2 { font-size: 1.5em; /* 24px */ line-height: 1.25; } h3 { font-size: 1.25em; /* 20px */ font-weight: 700; line-height: 1.5; } h4 { font-size: 0.875em; /* 14px */ font-weight: 700; text-transform: uppercase; line-height: 1.5; } h5, h6 { margin: 10px 0 5px; font-size: 1em; font-weight: 700; } .entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child, .entry-content h5:first-child, .entry-content h6:first-child, .comment-content h1:first-child, .comment-content h2:first-child, .comment-content h3:first-child, .comment-content h4:first-child, .comment-content h5:first-child, .comment-content h6:first-child { margin-top: 0; } .site-title { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 2em; font-weight: 700; line-height: 1.25; margin: 0; } .site-title a { color: #222; transition: all 0.3s ease-in-out 0s; display: inline-block; } .site-title a:hover { color: #e54e53; text-decoration: none; } .site-title a:focus, .site-title a:active { outline: 0; } .site-description { margin: 10px 0 0; color: #777; font-size: 0.875em; font-weight: 400; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; } .entry-title, .page-header h1 { line-height: 1.25; clear: none; color: #222; } h1.entry-title { margin: 0; } h2.entry-title { margin: 10px 0 0 0; font-size: 24px; font-size: 1.5rem; } .entry-title a { text-decoration: none; color: #222; } .entry-title a:hover { color: #e54e53; } .page-header h1 { font-size: 1.125em; line-height: 1.5; font-weight: 400; } /* * 04: Elements */ p { margin: 0 0 20px 0; } hr { height: 1px; border: 0; background-color: #eee; margin: 30px auto; } ul, ol { margin: 0 0 20px 20px; padding: 0 0 0 20px; } ul { list-style: disc; } ol { list-style: decimal; } ul li, ol li { margin: 0 0 5px 0; } li > ul, li > ol { margin-bottom: 0; } dt { font-weight: bold; } dd { margin: 0 20px 20px; } dfn, cite, em, i { font-style: italic; } blockquote { border-left: 5px solid #e54e53; color: #555; margin: 0 0 20px; padding: 10px 20px; font-style: italic; box-sizing: border-box; } blockquote p { margin: 0 0 10px; } blockquote cite { display: block; color: #999; font-size: 14px; font-size: 0.875rem; } address { margin: 0 0 10px; } pre { max-width: 100%; margin-bottom: 20px; padding: 10px; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 1em; line-height: 1.5; border: 1px solid #ddd; overflow: auto; white-space: pre-wrap; overflow-wrap: break-word; } code, kbd, tt, var { font: 16px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } code { padding: 0.2em; font-size: 14px; font-size: 0.875rem; border: 0; background-color: #f2f2f2; border-radius: 2px; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { text-decoration: none; font-size: 14px; } mark { background: #fff9c0; } small { font-size: 75%; } big { font-size: 125%; } table { border-collapse: collapse; border-spacing: 0; margin: 0 0 20px; width: 100%; } td, th { padding: 10px; border: 1px solid #ddd; } th { font-weight: 700; } button, input[type="button"], input[type="reset"], input[type="submit"] { border: none; border-radius: 2px; background-color: #e54e53; color: #fff; font-size: 1em; line-height: 1.5; padding: 10px 20px; font-weight: 700; cursor: pointer; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { opacity: 0.8; } 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 { opacity: 0.8; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #888; background-color: #fff; border: 1px solid #eee; transition: all 0.3s ease-in-out; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #333; background-color: #eee; border: 1px solid #eee; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { padding: 0.5em; } textarea { vertical-align: top; width: 100%; box-sizing: border-box; } select { padding: 0.25em 0.5em; background-color: #fff; color: #666; border: 1px solid rgba(0, 0, 0, 0.07); } blockquote, input, select { box-sizing: border-box; width: 100%; float: none; } fieldset { margin-bottom: 20px; } /* Links */ a { color: #e54e53; text-decoration: none; } a:hover { text-decoration: underline; } .more-link { display: inline-block; } /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; 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; color: #e54e53; 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 */ } /* Clearing */ .clear:before, .clear:after, .container:before, .container:after, .site-main:before, .site-main:after, .menu:before, .menu:after, .hentry:before, .hentry:after, .product:before, .product:after, .entry-content:before, .entry-content:after, .entry-magazine:before, .entry-magazine:after, .comment-meta:before, .comment-meta:after, .comment-content:before, .comment-content:after, .nav-links:before, .nav-links:after, .gallery:before, .gallery:after, .search-form:before, .search-form:after, .widget_search:before, .widget_search:after { content: ''; display: table; } .clear:after, .container:after, .site-main:after, .menu:after, .hentry:after, .product:after, .entry-content:after, .entry-magazine:after, .comment-meta:after, .comment-content:after, .nav-links:after, .gallery:after, .search-form:after, .widget_search:after { clear: both; } /* * 05: Navigation */ /* Header Navigation */ .header-navigation { display: none; } .top-navigation { margin: 20px 0; text-align: right; padding: 0; order: 1; } .top-navigation ul { margin: 0; padding: 0; list-style: none; font-size: 14px; } .top-navigation ul li { position: relative; } .top-navigation ul a { display: block; text-decoration: none; color: #444; } .top-menu a:hover, .top-menu .current_page_item a, .top-menu .current-menu-item a { color: #e54e53; } .top-navigation > ul > li { display: inline-block; } .top-navigation > ul > li > a { padding: 6px 8px; margin: 0; line-height: 20px; font-weight: 400; } .top-navigation > ul > li:active > a, .top-navigation > ul > li:focus > a { color: #e54e53; } .top-navigation > ul > li.menu-item-has-children > a:after, .top-navigation > ul > li > ul > li.menu-item-has-children > a:after, .top-navigation > ul > li > ul > li > ul > li.menu-item-has-children > a:after { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; content: "\72"; vertical-align: -10%; font-size: 10px; padding: 0 0 0 4px; } .top-navigation > ul > li > a.button { margin: 0.25em; padding: 0 1em; height: 30px; line-height: 30px; background-color: #e54e53; color: #fff; border: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; border-radius: 3px; } .top-navigation > ul > li > a.button:hover { background-color: #c64448; } .top-navigation ul ul { display: none; right: 0; position: absolute; top: 32px; margin: 0; z-index: 99999; border: 1px solid #eee; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-align: left; font-size: 14px; } .top-navigation ul ul a { height: auto; line-height: 1.5; padding: 6px 10px; width: 160px; color: #555; border-top: 1px solid #f4f4f4; } .top-navigation ul ul ul { right: 100%; top: 0; text-align: left; } .top-navigation ul ul li:first-child a { border: 0; } .top-navigation ul li:hover > ul { display: block; } /* Footer Navigation */ .footer-navigation { text-align: center; } .footer-navigation ul { margin: 0; padding: 0; display: inline-block; list-style: none; } .footer-navigation li { display: inline-block; position: relative; } .footer-navigation a { display: inline-block; text-decoration: none; padding: 6px; margin: 0; font-weight: 400; } .footer-navigation a { color: #444; } .footer-navigation a:hover { text-decoration: underline; } /* * 06: Header */ .header-image, .main-navbar, .collapse { display: none; } .site-header { display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; opacity: 1; background-color: #fff; transition: opacity 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s; overflow-wrap: break-word; } .header-top { order: 1 } .header-bottom { width: 100%; } .site-branding { margin: 20px 0; } .header-image img { display: block; max-width: 100%; height: auto; margin: auto; } /* Sticky Header */ .sticky-header { transform: none; transition: all 0.4s ease; } .sticky-header.fixed { position: fixed; top: 0; width: 100%; animation: 0.4s linear slide-down; box-shadow: 0 0 20px rgba(0,0,0,.07); z-index: 999; } @keyframes slide-down { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 0.95; transform: translateY(0); } } /* Header Search Form */ .search-top { margin-top: 20px; order: 2; padding: 0 0 0 6px; } .search-top .search-submit { background: transparent; color: #555; } .search-form { position: relative; } .site-header .search-field { position: relative; height: 32px; width: 160px; margin: 0; padding: 5px 40px 5px 10px; background: #fff; font-size: 14px; line-height: 20px; border: 1px solid #eee; transition: width 400ms ease, background 400ms ease; box-sizing: border-box; border-radius: 48px; outline: 0; } .site-header .search-form label { position: relative; margin: 0; float: right; } .site-header .search-field:focus { background: #f4f4f4; cursor: text; width: 180px; text-indent: 0; } .site-header .search-form .search-submit { width: 24px; height: 24px; margin: 0; padding: 0; cursor: pointer; position: absolute; right: 10px; top: 4px; z-index: 2; } /* Mobile Header */ .mobile-header { display: flex; align-items: center; justify-content: flex-start; position: relative; height: 50px; width: 100%; padding: 0 20px; text-align: center; background-color: #252626; box-sizing: border-box; z-index: 9999; } .mobile-header a { color: #fff; } .mobile-header a:hover { text-decoration: none; } .mobile-header a:active, .mobile-header a:focus { outline: none; } .mobile-header .search-toggle { margin: 0; width: 40px; height: 40px; color: #fff; cursor: pointer; } .mobile-header .search-toggle .icon-magnifier { width: 30px; height: 30px; display: inline-block; padding: 5px; line-height: 30px; } .mobile-header .search-toggle .icon-magnifier:before { font-size: 16px; vertical-align: middle; } .mobile-header .search-toggle.close .icon-magnifier:before { content:"\5d" } .mobile-header .search-container { display: none; position: absolute; right: 0; top: 50px; background-color: #fff; } .mobile-header .search-container.active { display: block; box-shadow: 0 3px 15px rgba(0,0,0,.1); } .mobile-header .search-form { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .mobile-header .search-form .search-submit { width: 40px; height: 40px; right: 0; top: 0; border-radius: 0; } .mobile-header .search-form .search-field { border: 0; height: 40px; width: 200px; } .mobile-title { max-width: 100%; flex: 1 1 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; text-align: left; text-decoration: none; box-sizing: border-box; } .menu-toggle { position: relative; margin: 0; padding: 0; width: 40px; height: 40px; text-decoration: none; line-height: 1; z-index: 5; order: 1; background: transparent; cursor: pointer; } .mobile-sidebar { position: fixed; top: 0; left: 0; height: 50px; width: 100%; overflow: hidden; overflow-y: auto; padding: 20px 10px; background-color: #000; opacity: 0.7; visibility: hidden; transition: opacity 0.35s linear 0s, height 0.35s ease-in; box-sizing: border-box; z-index: 9998; overflow-wrap: break-word; } .mobile-navigation { display: block; float: none; margin: 0; padding: 0; text-align: left; font-size: 16px; } .mobile-navigation ul, .mobile-navigation ul ul { margin: 0; padding: 0; list-style-type: none; background-color: transparent; border: 0; opacity: 1; position: static; } .mobile-navigation ul ul { background-color: rgba(255,255,255,.1); } .mobile-navigation .mobile-menu { padding: 0 20px; display: block; margin: 20px 0; } .mobile-navigation .mobile-menu:first-child { margin-top: 0; } .mobile-navigation li { display: block; position: relative; } .mobile-navigation ul li:before { content: none; } .mobile-navigation ul ul { display: none; } .mobile-navigation ul a, .mobile-navigation ul ul a, .mobile-navigation .woo-cart-link a { display: block; width: auto; padding: 10px 15px; height: auto; line-height: 1.5; color: #fff; text-transform: none; font-weight: 400; } .mobile-navigation ul a, .mobile-navigation ul li { float: none; } .mobile-navigation ul a:hover { text-decoration: none; } .mobile-navigation a { border-bottom: 1px solid rgba(255,255,255,.15); } .mobile-navigation hr { background-color: rgba(255,255,255,0.15); margin: 10px 0; } .mobile-navigation .home-link { float: none; } .mobile-navigation .home-link a { display: block; padding: 10px 15px; } .mobile-navigation .search-form { padding: 0 15px; } .mobile-navigation .search-form label { display: inline-block; width: 65%; } .mobile-navigation input.search-field { line-height: 20px; padding: 6px; width: 100%; font-size: 14px; box-sizing: border-box; } .mobile-navigation input.search-submit { width: 30%; padding: 8px 0; line-height: 20px; font-size: 14px; box-sizing: border-box; } /* Toggled On */ body.mobile-menu-active { overflow: hidden; } body.mobile-menu-active.no-js .mobile-header { position: fixed; top: 0; } body.mobile-menu-active:before { content: ""; position: fixed; top: 50px; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.75; transition: opacity .4s; content: none; z-index: 9; } .mobile-sidebar.toggled-on { top: 50px; height: calc(100% - 50px); opacity: 1; visibility: visible; } .admin-bar .mobile-sidebar.toggled-on { top: 96px; } /* Drop down Button */ .dropdown-toggle { height: 40px; width: 40px; padding: 0; margin: 0; position: absolute; top: 0; right: 5px; text-transform: none; background-color: transparent; color: #fff; border: 0; content: ""; border-radius: 0; } .dropdown-toggle:after { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 14px; content: "\72"; vertical-align: middle; padding: 6px 8px; border-radius: 4px; } .dropdown-toggle:focus { outline: none; } .dropdown-toggle:focus:after { background-color: rgba(255,255,255,.2); } /* Button Toggle */ .button-toggle { display: block; background-color: #fff; content: ""; height: 2px; opacity: 1; position: absolute; transition: opacity 0.3s ease 0s, background 0.3s ease 0s; width: 22px; z-index: 20; left: 10px; top: 20px; } .button-toggle:before { background-color: #fff; content: ""; height: 2px; left: 0; position: absolute; top: -7px; transform-origin: center center 0; transition: transform 0.3s ease 0s, background 0.3s ease 0s; width: 22px; } .button-toggle:after { background-color: #fff; bottom: -7px; content: ""; height: 2px; left: 0; position: absolute; transform-origin: center center 0; transition: transform 0.3s ease 0s, background 0.3s ease 0s; width: 22px; } .mobile-menu-active .button-toggle { background-color: transparent !important; } .mobile-menu-active .button-toggle:before { opacity: 1; transform: translate(0px, 7px) rotate(-45deg); } .mobile-menu-active .button-toggle:after { opacity: 1; transform: translate(0px, -7px) rotate(45deg); } /* Is Open */ .mobile-navigation .mobile-menu li.is-open > ul, .mobile-navigation .mobile-menu li .dropdown-toggle.is-open + .sub-menu { display: block; } .mobile-navigation .mobile-menu li.is-open > .dropdown-toggle:after, .mobile-navigation .mobile-menu li .dropdown-toggle.is-open:after { content: "\73"; } /* * 07: Content */ .hentry { position: relative; margin: 0 0 20px 0; } .entry-header { margin-bottom: 5px; } .entry-summary { color: #555; margin: 0; transition: color 0.3s ease-in-out 0s; } .entry-summary p { margin-bottom: 0; } .entry-thumbnail { float: left; margin: 0 20px 0 0; max-width: 30%; position: relative; overflow: hidden; } .entry-thumbnail img { display: block; max-width: 100%; height: auto; margin: auto; } .entry-meta { color: #999; font-size: 0.875rem; } .entry-meta a { color: #555; } .entry-meta .posted-on a, .entry-meta .byline a { color: #999; } .entry-meta .category a, .featured-image .category a { display: inline-block; background-color: #e54e53; color: #fff; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; border-radius: 2px; } .entry-meta .category a { position: relative; padding: 2px 15px 1px 5px; margin: 0 0.25em 0 0; } .entry-meta .category a:before { background-color: #ffffff; border-radius: 100%; content: ""; display: block; height: 6px; margin-top: -3px; position: absolute; right: 5px; top: 50%; width: 6px; } .entry-meta .category a:hover, .featured-image .category a:hover { text-decoration: none; } .entry-meta [class^="icon-"]:before, .entry-meta [class*=" icon-"]:before { font-size: 12px; } .entry-footer { color: #aaa; font-size: 0.875em; margin: 10px 0 0; } .taxonomy-description p { font-size: 0.875em; color: #999; margin: 5px 0 0; } .updated:not(.published) { display: none; } .sep { padding: 0 0.25em; } /* Single Posts and Pages */ .page .hentry, .single .hentry { margin-bottom: 20px; } .page .hentry .entry-header, .single .hentry .entry-header, .page-header { margin-bottom: 20px; } .page .hentry .hentry h1, .single .hentry .hentry h1, .page-header h1 { margin: 0; overflow-wrap: break-word; } .page-header span { font-weight: 700; } .page .hentry .entry-meta, .single .hentry .entry-meta { margin-top: 10px; } .single .hentry .entry-thumbnail, .page .hentry .entry-thumbnail { margin: 20px 0 0; max-width: 100%; width: inherit; float: none; } .single .hentry .entry-thumbnail:hover img, .page .hentry .entry-thumbnail:hover img { opacity: 1; } .single .hentry .entry-meta, .page .hentry .entry-meta { text-transform: none; } .single .entry-header * + .byline, .single .entry-header * + .comments-link { padding-left: 0.5em; } .single .entry-header * + .byline:before, .single .entry-header * + .comments-link:before { content: "/"; padding-right: 0.5em; } .single .entry-header .last-updated { margin: 10px 0 0; } .single .entry-header .last-updated span { padding-right: 0.25rem; font-weight: 700; } .single .entry-footer > span { padding: 0 20px 0 0; } .page-links { clear: both; margin: 0 0 20px; font-weight: 700; } .page-links > span, .page-links > a { display: inline-block; padding: 0 2px; font-weight: 400; } /* Featured Image */ .featured-image { position: relative; margin: 0 -20px 20px; } .featured-image .cover-bg { background-position: center center; background-size: cover; width: 100%; min-height: 200px; z-index: 1; box-sizing: border-box; } .featured-image .overlay { padding: 0 20px; margin: 0 0 10px 0; border: 0; box-sizing: border-box; } .featured-image .overlay h1 { font-weight: 300; color: #222; margin-bottom: 10px } .featured-image .entry-meta a { color: #999; } .featured-image .category a { font-weight: 400; margin: 0 0 5px 0; padding: 1px 8px; } .featured-image .category a:hover { opacity: .9; } .single .featured-image .entry-meta { color: #999; margin-top: 10px; } /* Post Navigation */ .navigation { margin: 0; overflow: hidden; padding: 0; clear: both; } .nav-previous, .nav-next { position: relative; padding: 0 20px; text-align: center; box-sizing: border-box; } .nav-next { margin-top: 20px; } .nav-previous a, .nav-next a { display: inline-block; font-size: 0.875rem; color: #888; position: relative; } .nav-previous a span, .nav-next a span { display: block; font-size: 0.8125rem; color: #444; text-transform: uppercase; margin-top: 10px; } .nav-previous a:hover, .nav-next a:hover { text-decoration: none; } .post-navigation { margin: 20px 0; padding: 10px 0; background-color: #f6f6f6; border-radius: 2px; } .post-navigation .nav-previous a:hover, .post-navigation .nav-previous a:hover span, .post-navigation .nav-next a:hover, .post-navigation .nav-next a:hover span { color: #e54e53; } .post-navigation .nav-links { position: relative; margin: 0 -20px; } /* Posts Pagination */ .pagination { margin: 20px 0; } .pagination .nav-links { clear: both; list-style-type: none; margin: 0; padding: 0; } .pagination .nav-links a, .pagination .nav-links span { display: block; float: left; height: 40px; margin: 0 5px 5px 0; padding: 0 15px; text-align: center; font-size: 0.875em; line-height: 40px; color: #777; background-color: #fff; box-sizing: border-box; border: 1px solid #ddd; } .pagination .nav-links .current, .pagination .nav-links .current:hover, .pagination .nav-links a:hover { border-color: transparent; text-decoration: none; color: #fff; background-color: #e54e53; } /* Scroll Up Button */ #scroll-up { display: none; position: fixed; width: 40px; height: 40px; bottom: 20px; right: 20px; background-color: #e54e53; color: #fff; line-height: 40px; text-decoration: none; text-align: center; border-radius: 4px; cursor: pointer; } #scroll-up .ion-angle-up:before { font-size: 18px; } /* Author bio */ .author-avatar, .author-description, .author-social { width: 100%; float: none; padding: 0; box-sizing: border-box; } .author-avatar { margin-bottom: 10px; } .author-avatar img { display: block; border-radius: 50%; } .author-description p:last-child { margin-bottom: 0; } .author-social { margin: 0; } .author-info { margin: 20px 0; padding: 0; } .author-bio { font-size: 0.875em; color: #555; } .author-bio p { margin-bottom: 10px; } .author-title { clear: none; margin: 5px 0; font-weight: 700; } /* Footer */ .site-footer { background-color: #f8f8f8; color: #888; text-align: center; } .site-footer a { color: #888; } .site-footer a:hover { color: #444; } .footer-copy { padding: 20px 0; font-size: 0.875em; border-top: 1px solid rgba(0,0,0,0.05); } .site-info { padding: 5px 0; margin-bottom: 20px; text-align: center; } /* Media */ img, video { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } embed, object, iframe { max-width: 100%; } .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Alignments */ .alignleft, .alignright { margin: 0 auto 20px; } .aligncenter { clear: both; margin: 20px auto; } img.aligncenter, .aligncenter img { display: block; } /* Gallery */ .gallery { margin: 0 -10px 20px; } .gallery-item { display: inline-block; padding: 0 10px; margin: 0 0 20px 0; text-align: center; vertical-align: top; width: 100%; box-sizing: border-box; } .gallery-item img { display: block; max-width: 100%; height: auto; border: none; } .gallery-icon img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: none; } .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%; } /* Captions */ .wp-caption { border: 0; max-width: 100%; margin-bottom: 10px; } .wp-caption-text, .gallery-caption { color: #777; display: block; font-size: 14px; font-style: italic; margin: 10px 0 0; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } /* * 08: Post Formats */ .entry-thumbnail .format-icon { display: none; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; text-align: center; background-color: rgba(0,0,0,.7); border-radius: 24px; z-index: 2; transition: all .5s; } .entry-thumbnail:hover .format-icon { opacity: 0; } .entry-thumbnail .format-icon:before { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; color: #fff; line-height: 32px; font-size: 14px; } .format-audio .format-icon, .format-gallery .format-icon, .format-image .format-icon, .format-link .format-icon, .format-quote .format-icon, .format-status .format-icon, .format-video .format-icon { display: block; } .format-audio .format-icon:before { content: "\78"; } .format-gallery .format-icon:before { content: "\6a"; } .format-image .format-icon:before { content: "\62"; } .format-link .format-icon:before { content: "\6e"; } .format-quote .format-icon:before { content: "\23"; } .format-status .format-icon:before { content: "\61"; } .format-video .format-icon:before { content: "\69"; } /* Sticky */ .hentry.sticky h2.entry-title a:before { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 14px; padding-right: 0.5em; display: inline-block; content: "\49"; } /* Infinite Scroll */ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paging-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; } /* * 09: Comments */ .comments-area { padding: 20px 0; } h3.comment-reply-title, h2.comments-title { font-size: 1.125em; font-weight: 700; margin: 0 0 10px; } .comment-content { font-size: 0.875em; color: #555; overflow-wrap: break-word; } .comment-list { list-style-type: none; margin: 20px 0; padding: 20px; background-color: #f6f6f6; border-radius: 2px; } .comment-list > li { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e9e9e9; } .comment-list > li:last-child { border-bottom: 0; margin-bottom: 0; } .comment-list .children { list-style-type: none; margin-left: 0; } .comment-list .children > li { border-bottom: 1px solid #e9e9e9; margin: 20px 0; padding: 0 0 20px; } .comment-list .children > li:last-child { padding-bottom: 0; border-bottom: 0; } .comment-list .avatar { float: left; margin: 0 10px 0 0; border-radius: 128px; max-width: 30px; height: auto; } .comment-list .comment-meta { margin-bottom: 10px; } .comment-list .comment-metadata { font-size: 0.875em; color: #999; } .comment-list .comment-metadata a { color: #999; } .comment-list .comment-content, .comment-list .reply { padding-left: 20px; } .comment-content p { margin-bottom: 10px; } .comment-list .comment-author .fn { display: inline-block; text-align: left; font-size: 1.125rem; font-style: normal; font-weight: 700; color: #333; margin: 0; } .comment-list .comment-author .says { display: none; } .comment-list .reply { clear: both; font-size: 0.8em; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .form-allowed-tags { display: none; } .comment-form label { display: block; } .comment-form .required { color: red; } .bypostauthor {} /* * 10: Blocks */ /* Paragraph */ p.has-drop-cap:not(:focus)::first-letter { font-size: 5em; margin-top: 0.15em; } /* Captions */ [class^="wp-block-"] figcaption { display: block; margin: 10px 0 0; font-size: 14px; font-style: italic; text-align: center; color: #777; line-height: 1.5; box-sizing: border-box; } /* Image */ .wp-block-image { margin-bottom: 20px; } .wp-block-image img { display: block; } .wp-block-image .alignleft, .wp-block-image .alignright { margin: 0 auto 20px; float: none; } .wp-block-image .aligncenter { clear: both; margin: 20px auto; } /* Cover */ .wp-block-cover-image, .wp-block-cover { margin: 20px auto; } /* Gallery */ .wp-block-gallery { margin-left: 0; } .wp-block-gallery li { padding: 0; } /* Quote */ .wp-block-quote.is-style-large, .wp-block-quote.is-large { margin: 0 0 20px; padding: 10px 20px; } /* Audio */ .wp-block-audio audio { display: block; width: 100%; } /* Code */ .wp-block-code { border: 0; background-color: transparent; padding: 0; } /* Pullquote */ .wp-block-pullquote { margin: 20px 0; padding: 20px 0; border: 0; } .wp-block-pullquote blockquote { border-left: 0; margin: auto; padding: 0; } .wp-block-pullquote cite { font-size: 16px; color: #999; margin-top: 10px; } .wp-block-pullquote.is-style-solid-color blockquote { max-width: 75%; } .wp-block-pullquote blockquote p, .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 24px; } .wp-block-pullquote p:last-of-type { margin-bottom: 0; } /* Verse */ pre.wp-block-verse { white-space: pre-wrap; } /* Buttons */ .wp-block-button { margin-bottom: 20px; } .wp-block-button__link, .wp-block-file .wp-block-file__button { padding: 5px 20px; background: #333333; color: #fff; border-radius: 4px; opacity: 1; transition: opacity 0.3s ease-in-out 0s; } .wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover { opacity: .8; text-decoration: none; } .wp-block-button__link { font-size: 16px; } .wp-block-file .wp-block-file__button { font-size: 14px; } .wp-block-button.is-style-outline { color: #222; } .wp-block-button.is-style-outline .wp-block-button__link { background: none; border-color: currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } /* Media & Text */ .wp-block-media-text { margin-bottom: 30px; } .wp-block-media-text *:last-child { margin-bottom: 0; } /* Column */ .wp-block-columns { margin-bottom: 30px; } /* Separator */ .wp-block-separator, .wp-block-separator.is-style-wide { border: 0; } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 80px; height: 2px; background-color: #333; } /* Archives, Categories & Latest Posts */ .wp-block-archives.aligncenter, .wp-block-categories.aligncenter, .wp-block-latest-posts.aligncenter { list-style-position: inside; text-align: center; } /* Latest Comments */ .wp-block-latest-comments__comment-meta { font-size: 16px; font-size: 1rem; } .wp-block-latest-comments__comment-date { font-size: 14px; color: #888; } /* Colors & Font sizes */ .entry-content .has-accent-color { color: #e54e53 } .entry-content .has-dark-gray-color { color: #222; } .entry-content .has-medium-gray-color { color: #333; } .entry-content .has-gray-color { color: #555; } .entry-content .has-light-gray-color { color: #999; } .entry-content .has-white-color { color: #fff; } .entry-content .has-accent-background-color { background-color: #e54e53 } .entry-content .has-dark-gray-background-color { background-color: #222; } .entry-content .has-medium-gray-background-color { background-color: #333; } .entry-content .has-gray-background-color { background-color: #555; } .entry-content .has-light-gray-background-color { background-color: #999; } .entry-content .has-white-background-color { background-color: #fff; } .has-small-font-size { font-size: 14px; } .has-regular-font-size { font-size: 16px; } .has-large-font-size { font-size: 24px; line-height: 1.5; } .has-huge-font-size { font-size: 32px; line-height: 1.25; } /* * 11: Widgets */ .widget { margin: 0 0 20px 0; font-size: 0.9375rem; color: #555; padding: 20px; border-radius: 2px; overflow-wrap: break-word; } .widget h2 a, .widget h3 a, .widget h4 a, .widget h5 a { color: #333; } .widget-title { margin: 0 0 15px; font-size: 18px; font-size: 1.125rem; font-weight: 700; color: #333; } .widget a { color: #777; } .widget a:hover { color: #e54e53; } .widget ul { line-height: 1.5; } .widget > ul { margin: 0; padding: 0; list-style-type: none; } .widget > ul li { padding: 0; margin: 10px 0; } .widget_pages > ul > li > a:before, .widget_categories > ul > li > a:before, .widget_meta > ul > li > a:before, .widget_recent_entries > ul > li > a:before, .widget_recent_comments ul li a.url:before, .widget_nav_menu ul li a:before { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; padding-right: 0.5em; } .widget_pages > ul > li > a:before, .widget_meta > ul > li > a:before, .widget_recent_entries > ul > li > a:before, .widget_nav_menu ul li a:before { vertical-align: middle; font-size: 10px; content: "\70"; } .widget_categories > ul > li > a:before { font-size: 14px; vertical-align: -10%; content: "\6c"; } .widget_recent_comments ul li a.url:before { font-size: 14px; vertical-align: -10%; content: "\41"; } .widget select { max-width: 100%; } .sidebar .widget { background-color: #f6f6f6; } .sidebar .widget-title { border-bottom: 1px solid #e8e8e8; } .sidebar .widget-title span { display: inline-block; padding: 0 0 0.5em 0; position: relative; } .sidebar .widget-title span:before { content: ""; position: absolute; width: 60px; bottom: -1px; border-bottom: 1px solid #e54e53; } .site-footer .widget { margin: 20px 0; padding: 0; background: transparent; } /* Menu Widget */ .widget_nav_menu ul { list-style-type: none; margin: 0; padding: 0; } .widget_nav_menu ul li { padding: 0; margin: 10px 0; } .widget_nav_menu .menu > li:first-child { margin-top: 0; } /* Pages Widget */ .widget_pages ul { list-style-type: none; } .widget_pages ul li { padding: 0; margin: 10px 0; } .widget_pages ul ul { padding: 0; margin-left: 0; } /* Search widget */ .widget_search .search-form .search-submit { float:left; min-height: 36px; width: 15%; padding: 5px; line-height: 1; border-radius: 0; box-sizing: border-box; } .widget_search .search-form .search-submit .sli:before { font-size: 16px; } .widget_search .search-form label { float:left; width: 85%; } .widget_search .search-form input[type="search"] { width: 100%; height: 36px; padding: 5px 10px; border: 1px solid #eee; background-color: #fff; box-sizing: border-box; } /* Comments Widget */ .widget_recent_comments, .widget_recent_comments a { color: #999; } .comment-author-link, .comment-author-link a { color: #333; } /* Calendar Widget */ .widget_calendar caption { font-size: 1.125rem; font-weight: 700; margin: 0 0 1em; } .widget_calendar thead th { text-transform: uppercase; font-size: 0.750rem; } .widget_calendar tbody { color: #999; } .widget_calendar a { color: #e54e53; } /* Ads Widget */ .widget_ads { padding: 0; background-color: transparent; text-align: center; } /* Tag Cloud Widget */ .tagcloud a { font-size: 0.875rem !important; display: inline-block; padding: 0.1em 0.5em; border: 1px solid #eee; margin-bottom: 0.5em; border-radius: 2px; background-color: #fff; } /* Social Links */ .social-links { list-style-type: none; margin: 0 0 1.5em 0; padding: 0 20px; font-size: 0.875em; } .social-links li { display: inline-block; margin: 0 0 0.5em 0.5em; } .social-links li:first-child { margin-left: 0; } .social-links a { display: inline-block; position: relative; width: 32px; height: 32px; line-height: 32px; margin: 0; background-color: #333; color: #fff; text-align: center; border-radius: 32px; } .social-links a:hover { text-decoration: none; color: #fff; opacity: 0.9; } .social-links a:before { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; font-size: 16px; vertical-align: middle; color: #fff; } .social-links li a[href*="dribbble.com"] {background-color: #ea4c89;} .social-links li a[href*="facebook.com"] {background-color: #3B5998;} .social-links li a[href*="flickr.com"] {background-color: #ff0084;} .social-links li a[href*="instagram.com"] {background-color: #517fa4;} .social-links li a[href*="linkedin.com"] {background-color: #007bb6;} .social-links li a[href*="medium.com"] {background-color: #00ab6c;} .social-links li a[href*="pinterest.com"] {background-color: #cb2027;} .social-links li a[href*="plus.google.com"] {background-color: #dd4b39;} .social-links li a[href*="stumbleupon.com"] {background-color: #eb4823;} .social-links li a[href*="tumblr.com"] {background-color: #32506d;} .social-links li a[href*="twitter.com"] {background-color: #00aced;} .social-links li a[href*="youtube.com"] {background-color: #bb0000;} .social-links li a[href*="vk.com"] {background-color: #4a76a8;} .social-links li a[href*="github.com"] {background-color: #24292e;} .social-links li a[href*="wordpress.org"] {background-color: #464646;} .social-links li a[href*="vimeo.com"] {background-color: #1ab7ea;} .social-links li a::before { content: "\47"; } .social-links li a[href*="dribbble.com"]::before {content: "\5a";} .social-links li a[href*="facebook.com"]::before {content: "\57";} .social-links li a[href*="flickr.com"]::before {content: "\37";} .social-links li a[href*="instagram.com"]::before {content: "\59";} .social-links li a[href*="linkedin.com"]::before {content: "\38";} .social-links li a[href*="medium.com"]::before {content: "\21";} .social-links li a[href*="pinterest.com"]::before {content: "\31";} .social-links li a[href*="plus.google.com"]::before {content: "\39";} .social-links li a[href*="stumbleupon.com"]::before {content: "\34";} .social-links li a[href*="tumblr.com"]::before {content: "\36";} .social-links li a[href*="twitter.com"]::before {content: "\56";} .social-links li a[href*="youtube.com"]::before {content: "\58";} .social-links li a[href*="vk.com"]::before {content: "\7d";} .social-links li a[href*="github.com"]::before {content: "\7b";} .social-links li a[href*="wordpress.org"]::before {content: "\60";} .social-links li a[href*="vimeo.com"]::before {content:"\7e";} .author-social .social-links { padding: 0; } .author-social .social-links li { margin-top: 0.5em; } .author-social .social-links li a { height: inherit; width: inherit; background-color: transparent; line-height: inherit; } .author-social .social-links li a:before { color: #555; } .author-social .social-links li a:hover:before { color: #e54e53; } /* * 12: Additional Styles */ /* Boxed Style */ .site-boxed { background-color: #f2f2f2; } .site-boxed #page { background-color: #fff; max-width: 1060px; margin: auto; box-sizing: border-box; } .site-boxed .site-logo, .site-boxed .site-branding, .site-boxed .top-navigation, .site-boxed .search-top { margin: 40px 0; } .site-boxed .header-image .container { max-width: 100%; width: 100%; } .site-boxed .site-footer { background-color: #fff; } /* Fullwidth Page Template */ .page-template-no-sidebar .content-area, .page-template-no-sidebar.site-boxed .content-area { width: 100%; float: none; } .page-template-no-sidebar .hentry, .page-template-no-sidebar .comments-area, .page-template-no-sidebar .breadcrumb { margin-left: auto; margin-right: auto; max-width: 740px; } .page-template-no-sidebar .featured-image .overlay { bottom: 80px; text-align: center; } /* Blog Layout */ /* List Posts */ .list-post .entry-thumbnail { max-width: 100px; margin: 0 15px 5px 0; } .list-post .entry-header { margin-bottom: 0; } .list-post .entry-summary, .list-post .category { display: none; } .list-post h2.entry-title { font-size: 1em; font-weight: 700; } .list-post .byline, .list-post .posted-on { padding-right: 0.25em; } .list-post .posted-on + .byline:before { content: "/"; padding-right: 0.25em; } /* Large Posts */ .large-post { border-bottom: 1px solid #eee; padding-bottom: 20px; } .large-post .entry-header, .large-post .entry-thumbnail { margin: 0 0 20px 0; } .large-post .entry-thumbnail { max-width: 100%; float: none; } .large-post h2.entry-title { margin: 0 0 15px 0; } .large-post h2.entry-title a { display: inline-block; position: relative; padding-bottom: 15px; } .large-post h2.entry-title a:after { content: ""; position: absolute; width: 50px; left: 50%; bottom: 0; margin-left: -25px; border-bottom: 2px solid #222; } .large-post .category { display: block; margin: 0 0 10px 0; font-size: 12px; font-size: 0.750rem; text-transform: uppercase; font-weight: 700; text-align: center; } .large-post .read-more { text-align: center; } .large-post .more-link { margin: 20px 0 0; font-size: 14px; font-size: 0.875rem; } .large-post .byline, .large-post .posted-on { padding-left: 0.25em; padding-right: 0.25em; } .large-post .posted-on + .byline:before { content: "/"; padding-right: 0.25em; } /* Widget Styles */ .widget-white .widget-title { border-bottom-color: #eee; } .widget-white .widget { background-color: #fff; border: 1px solid #eee; box-shadow: 0 1px 1px rgba(0,0,0,.05); } .widget-minimal .widget { padding: 0; background-color: transparent; } .widget-minimal .widget-title { border: 0; font-size: 15px; text-transform: uppercase; } .widget-minimal .widget-title span { padding: 0; } .widget-minimal .widget-title span:before { content: none; } .widget-minimal .social-links { padding: 0; } /* * 13: Responsive */ @media screen and (min-width: 360px) { /* Post Navigation */ .nav-previous, .nav-next { width: 50%; float: left; } .nav-previous a:before, .nav-next a:after { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; position: absolute; font-size: 20px; top: 30%; } .nav-previous a:before { content: "\71"; left: 0; } .nav-next a:after { content: "\70"; right: 0; } .nav-previous a { padding-left: 30px; } .nav-next a { padding-right: 30px; } .nav-previous { text-align: left; } .nav-next { border-left: 1px solid #fff; text-align: right; margin-top: 0; } .post-navigation { padding: 20px; } /* Content */ blockquote, input, select { width: inherit; float: inherit; } .site-info { margin-bottom: 0; } #scroll-up { bottom: 30px; right: 30px; } .page .hentry h1, .single .hentry h1, .page-header h1 { word-wrap: inherit; } /* Comments */ .comment-list .children { margin: 20px 0 20px 20px; } /* Author bio */ .author-avatar { width: 20%; padding: 0 20px; float: left; margin-bottom: 0; } .author-description { width: 80%; float: left; } .author-social { clear: left; width: 80%; margin-left: 20%; } /* Blog Layout */ .list-post .entry-thumbnail { float: left; max-width: 30%; margin: 0 20px 0 0; } .list-post h2.entry-title { font-size: 1.125em; font-weight: 400; } .list-post .entry-header { margin-bottom: 10px; } .list-post .entry-summary { display: block; } .list-post .category { display: inline; } .list-post .category a:hover { opacity: .9; } } @media screen and (min-width: 480px) { /* Alignments */ .alignleft, .wp-block-image .alignleft { float: left; margin: 0 25px 10px 0; } .alignright, .wp-block-image .alignright { float: right; margin: 0 0 10px 25px; } } @media screen and (min-width: 600px) { /* Grid */ .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-12 { float: left; } .col-sm-12 { width: 100%; } .col-sm-8 { width: 66.66666667%; } .col-sm-6 { width: 50%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } /* Mobile Navigation */ .mobile-header { padding: 0 30px; } .mobile-sidebar { width: 340px; position: absolute; } body.mobile-menu-active { overflow: inherit; } body.mobile-menu-active:before { content: none; } .mobile-sidebar.toggled-on { height: auto; } /* Content */ .container { padding: 0 30px; } .site-content { margin: 30px 0; } .site-footer { text-align: left; } .hentry { margin-bottom: 30px; } .page-header { margin-bottom: 30px; } /* Featured Image */ .featured-image .cover-bg { min-height: 320px; } .featured-image { margin-left: -30px; margin-right: -30px; } .featured-image .overlay { padding: 0 30px; } /* Posts Formats */ .entry-thumbnail .format-icon { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .entry-thumbnail .format-icon:before { font-size: 18px; line-height: 48px; } /* Widgets */ .widget_pages ul ul { margin-left: 40px; } /* Blog Layout */ .large-post .entry-summary { padding: 0 20px; } } @media screen and (min-width: 840px) { /* Grid */ .col-3, .col-4, .col-6, .col-8, .col-12 { float: left; } .col-12 { width: 100%; } .col-8 { width: 66.66666667%; } .col-6 { width: 50%; } .col-4 { width: 33.33333333%; } .col-3 { width: 25%; } /* Header */ .site-header, .header-image, .main-navbar, .collapse { display: block; } .header-navigation { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; } /* Mobile Navigation */ .mobile-header, .mobile-sidebar, .mobile-navigation { display: none; } /* Main Navigation */ .main-navbar { background-color: #252626; } .main-menu, .main-menu ul, .main-menu p { margin: 0; padding: 0; } .main-menu { list-style-type: none; } .main-menu a { color: #fff; } .main-menu > li, .home-link { float: left; margin: 0; } .main-menu > li, .home-link a { position: relative; } .main-menu > li > a, .home-link a { display: block; position: relative; padding: 10px 12px; text-decoration: none; font-size: 13px; text-transform: uppercase; font-weight: 700; line-height: 26px; color: #fff; transition: color 0.3s ease-in-out 0s; } .home-link a { padding-left: 15px; padding-right: 15px; } .main-menu > li.menu-item-has-children > a:after, .main-menu > li.page_item_has_children > a:after { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; content: "\72"; vertical-align: -10%; font-size: 10px; padding: 0 0.5em; } .home-link a:hover, .main-menu > li > a:hover, .main-menu > li.current-menu-item > a, .main-menu > li.current_page_item > a { color: rgba(255,255,255,0.7); } .main-menu ul { display: none; width: 100%; min-width: 180px; float: none; position: absolute; background-color: #252626; box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-align: left; font-size: 14px; opacity: 0; list-style-type: none; transition: all 0.3s ease-in-out 0s; box-sizing: border-box; z-index: 998; } .main-menu ul li { position: relative; } .main-menu ul a { display: block; line-height: 1.5; padding: 10px; text-decoration: none; color: #fff; border-top: 1px solid rgba(255,255,255,.05); } .main-menu ul a:hover, .main-menu ul .current-menu-item a, .main-menu ul .current_page_item a { background-color: rgba(255,255,255,0.05); } .main-menu ul li.menu-item-has-children > a:before { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; content: "\70"; font-size: 8px; position: absolute; right: 10px; top: 18px; } .main-menu > li:hover > ul, .main-menu > li.focus > ul { display: block; opacity: 1; left: 0; top: 46px; } .main-menu ul li:hover > ul, .main-menu ul li.focus > ul { display: block; opacity: 1; left: 100%; top: 0; } /* Post Navigation */ .post-navigation, .pagination { margin: 0; } /* Footer Navigation */ .footer-navigation { text-align: right; } .site-info { text-align: left; } /* Content */ h1 { font-size: 36px; font-size: 2.250rem; } .entry-thumbnail { max-width: 220px; } /* Featured Image */ .featured-image { margin: 0 auto 30px; } .featured-image .cover-bg { min-height: 360px; } .featured-image:before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) repeat 0 0; z-index: 3; } .featured-image .overlay { position: absolute; width: 100%; left: 0; bottom: 30px; padding: 0 30px; margin: 0; z-index: 5; } .featured-image .overlay h1 { color: #fff; font-weight: 700; } .featured-image .entry-meta a { color: #fff; } .featured-image .category a { margin-bottom: 10px; } .single .featured-image .entry-meta { color: #fff; margin-top: 20px; } /* Comments */ .comment-list .children { margin-left: 30px; } /* Blog Layout */ .list-post h2.entry-title { font-size: 1.5em; } .layout1 .list-post .entry-thumbnail { max-width: 150px; } .layout2 .list-post .entry-thumbnail { max-width: 220px; } } @media screen and (min-width: 1024px) { /* Layout */ .container { max-width: 980px; padding: 0; } .content-area { float: left; width: 65.3062%; margin: 0; } .sidebar { float: right; width: 30.6123%; } /* Featured Image */ .featured-image .cover-bg { min-height: 450px; } /* Boxed Style */ .site-boxed #page { margin: 30px auto; } .site-boxed .site-content { margin: 40px 0; } .site-boxed .featured-posts, .site-boxed .featured-image { margin-bottom: 40px; } } @media screen and (min-width: 1440px) { /* Layout */ .container { max-width: 1240px; } .content-area { width: 64.9123%; /* 740px */ } .sidebar { width: 29.8246%; /* 340px */ } /* Content */ .page .hentry, .single .hentry { margin-bottom: 30px; } .entry-thumbnail { max-width: 260px; margin-right: 30px; } /* Featured Image */ .featured-image .cover-bg { min-height: 540px; } /* Author Bio */ .author-info { margin: 30px 0; } /* Comments */ .comments-area { padding: 30px 0; } /* Widgets */ .widget { padding: 20px; } /* Blog Layout */ .layout1 .list-post .entry-thumbnail { max-width: 200px; } .layout2 .list-post .entry-thumbnail { max-width: 260px; } /* Boxed Style */ .site-boxed #page { max-width: 1200px; } .site-boxed .container { max-width: 1080px; } .site-boxed .content-area { width: 64.8149%; } .site-boxed .sidebar { width: 29.6297%; } /* Widget Styles */ .widget-minimal .widget { margin-bottom: 30px; } } .header-top { background: #252626; border-bottom: 1px solid #e88b2e; } }