/* Theme Name: Merlin Theme URI: https://themezee.com/themes/merlin/ Author: ThemeZee Author URI: https://themezee.com Description: Merlin is a beautiful designed Magazine WordPress theme with a responsive layout. The theme comes with a gorgeous Post Slider, Magazine Homepage template and a Header Widget area. Settings can be configured easily in the Customizer. Version: 1.1.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: merlin Tags: two-columns, light, blue, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, custom-colors, full-width-template, sticky-post, threaded-comments, translation-ready, theme-options, fluid-layout, responsive-layout, one-column, left-sidebar, right-sidebar, three-columns, black, red, silver, white, green, gray 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. Merlin is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. 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: ---------------------------------------------------------------- 1.0 - Normalize 2.0 - Typography 3.0 - Elements 4.0 - Forms 5.0 - Accessibility 6.0 - Alignments 7.0 - Clearings 8.0 - Layout Structure 9.0 - Header 10.0 - Navigation 10.1 - Top Navigation 10.2 - Main Navigation 10.3 - Social Icon Menu 11.0 - Widgets 11.1 - Default Widgets 11.2 - Category Posts Widgets 12.0 - Posts and pages 11.0 - Comments 12.0 - Footer 13.0 - Media 13.1 - Captions 13.2 - Galleries 14.0 - Media Queries 14.1 - Desktop Large ( < 1120px ) 14.2 - Desktop Medium ( < 1040px ) 14.3 - Desktop Small ( < 960px ) 14.4 - Tablet Large ( < 880px ) 14.5 - Tablet Medium ( < 800px ) 14.6 - Tablet Small ( < 720px ) 14.7 - Mobile Extra Large ( < 640px ) 14.8 - Mobile Large ( < 560px ) 14.9 - Mobile Medium ( < 480px ) 14.10 - Mobile Small ( < 320px ) 15.0 - Theme Option Styles 15.1 - Sidebar Left Layout 15.2 - Sticky Navigation 16.0 - Media Query Fixes --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 1.0 - 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 0; } 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 { line-height: normal; } 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; } 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; } /*-------------------------------------------------------------- # 2.0 - Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #cccccc; font-family: 'Roboto', Tahoma, Arial; font-size: 16px; font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #red; border: 1px solid #ddd; 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 { text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # 3.0 - 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: #eee; /* Fallback for when there is no custom background color defined. */ } blockquote { margin: 0 0 1.5em; border-left: 4px solid #353535; padding-left: 1.25em; font-size: 18px; font-size: 1.125rem; font-style: italic; color: #777; } blockquote cite, blockquote small { margin-top: 1em; display: block; font-size: 16px; font-size: 1rem; line-height: 1.75; color: #404040; } blockquote cite:before, blockquote small:before { content: "\2014\00a0"; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote > :last-child { margin-bottom: 0.5em; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em; padding: 0 0 0 1.25em; } 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 0 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } table { margin: 0 0 1.5em; border: none; table-layout: fixed; width: 100%; } th, td { border: 1px solid #ddd; padding: 0.3em 0.6em; } a { color: #00ff99; text-decoration: none; } a:link, a:visited { color: #00ff99; } a:hover, a:focus, a:active { color: white; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- # 4.0 - Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 0.5em 0.8em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; color: #fff; background: #1c1c1c; border: none; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #444; } 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 { background: #444; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { max-width: 100%; padding: 0.3em 0.6em; color: white; border: 1px solid #ddd; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: white; border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # 5.0 - 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: #1c1c1c; 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. */ } /*-------------------------------------------------------------- # 6.0 - 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; } /*-------------------------------------------------------------- # 7.0 - Clearings --------------------------------------------------------------*/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /*-------------------------------------------------------------- # 8.0 - Layout Structure --------------------------------------------------------------*/ .site { max-width: 1190px; width: 100%; margin: 0 auto; background: rgba(0,0,0,0.8); } .site-content { padding: 1.8em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-area { float: left; width: 74%; padding-right: 1.8em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sidebar { float: right; width: 26%; } /* Fullwidth Template */ .site-content .fullwidth-content-area { float: none; width: 100%; padding: 0; } /*-------------------------------------------------------------- # 9.0 - Header --------------------------------------------------------------*/ .header-main { padding: 0; } .site-branding { float: left; max-width: 100%; margin: 1.5em 0.5em; } .site-branding a:link, .site-branding a:visited, .site-branding a:hover { text-decoration: none; padding: 0; } .site-title { display: inline-block; margin: 0; padding: 0; color: #1c1c1c; font-family: 'Roboto', Tahoma, Arial; font-size: 38px; font-size: 2.375rem; font-weight: bold; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .site-title a:link, .site-title a:visited { color: #1c1c1c; } .site-title a:hover, .site-title a:active { color: #444; } .site-branding .custom-logo { margin: 0 1.5em 0 0; padding: 0; border: none; vertical-align: top; max-width: 100%; height: auto; } /* Header Widgets */ .header-widgets { display: inline; } .header-widget { float: right; margin: 0 0 0.5e; } .header-widget ul { margin: 0; padding: 0; } .header-widget-title { margin: 0 0 0.5e; } /* Custom Header Image */ .header-image { margin: 0; } .header-image img { max-width: 1340px; vertical-align: top; width: 100%; height: auto; border-top: 1px solid #00ff99; } /*-------------------------------------------------------------- # 10.0 - Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 10.1 - Top Navigation --------------------------------------------------------------*/.header-bar-wrap { border-bottom: 0px solid #eee; padding: 0 0; } .top-navigation-toggle { display: none; } .top-navigation-menu { display: inline; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; } .top-navigation-menu li { float: left; position: relative; } .top-navigation-menu a { display: block; font-family: 'Roboto', Tahoma, Arial; font-size: 13px; font-size: 0.8125rem; padding: 0.9em 1em; text-decoration: none; text-transform: uppercase; } .top-navigation-menu ul { position: absolute; display: none; z-index: 99; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; border: 2px solid #eee; background: #1c1c1c; } .top-navigation-menu ul li{ margin: 0; padding: 0; border: none; } .top-navigation-menu ul a { width: 250px; width: 16rem; padding: 0.8em 1em; text-transform: none; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .top-navigation-menu ul a:link, .top-navigation-menu ul a:visited { text-decoration: none; } .top-navigation-menu li ul ul { margin-left: 250px; margin-left: 16rem; margin-top: -2px; } .top-navigation-menu li:hover ul ul, .top-navigation-menu li:hover ul ul ul, .top-navigation-menu li:hover ul ul ul ul { display:none; } .top-navigation-menu li:hover ul, .top-navigation-menu li li:hover ul, .top-navigation-menu li li li:hover ul, .top-navigation-menu li li li li:hover ul { display:block; } .top-navigation-menu li.current-menu-item a, .top-navigation-menu li.current-menu-item ul li a:hover, .top-navigation-menu ul li.current-menu-item a { text-decoration: underline; } .top-navigation-menu li.current-menu-item ul li a, .top-navigation-menu ul li.current-menu-item ul li a { text-decoration: none; } /*-------------------------------------------------------------- ## 10.2 - Main Navigation --------------------------------------------------------------*/ .primary-navigation { background: #1c1c1c; } .main-navigation-toggle, .sidebar-navigation-toggle { display: none; } .main-navigation-menu { float: left; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; } .main-navigation-menu li { float: left; position: relative; } .main-navigation-menu a { display: block; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; padding: 0.8em 1.2em; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .main-navigation-menu a:link, .main-navigation-menu a:visited { color: #00ff99; text-decoration: none; } .main-navigation-menu a:hover { background: #999999;color:white; } .main-navigation-menu ul { position: absolute; display: none; z-index: 99; margin: 0; padding: 0 1em; list-style-type: none; list-style-position: outside; background: #1c1c1c } .main-navigation-menu ul li{ margin: 0; } .main-navigation-menu ul a { width: 250px; width: 16rem; padding: 0.9em 0; float: left; font-size: 14px; font-size: 0.875rem; color: 1c1c1c; border-bottom: 1px solid rgba(255,255,255,0.5); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .main-navigation-menu ul li:last-child a { border-bottom: none; } .main-navigation-menu ul a:link, .main-navigation-menu ul a:visited { color: #00ff99; text-decoration: none; } .main-navigation-menu ul a:hover { text-decoration: underline;color:white;background:#999999; } .main-navigation-menu li ul ul { margin-left: 250px; margin-left: 16rem; } .main-navigation-menu li:hover ul ul, .main-navigation-menu li:hover ul ul ul, .main-navigation-menu li:hover ul ul ul ul { display:none; } .main-navigation-menu li:hover ul, .main-navigation-menu li li:hover ul, .main-navigation-menu li li li:hover ul, .main-navigation-menu li li li li:hover ul { display:block; } .main-navigation-menu li.current-menu-item a { background: #999999; } .main-navigation-menu li.current-menu-item ul li a, .main-navigation-menu ul li.current-menu-item ul li a { text-decoration: none; } .main-navigation-menu ul li.current-menu-item a { text-decoration: underline; } /*-------------------------------------------------------------- ## 10.3 - Social Icons Menu --------------------------------------------------------------*/ .header-bar .social-icons-navigation { float: right; } .social-icons-navigation-toggle { display: none; } .social-icons-menu { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; line-height: 1; } .social-icons-menu li { float: left; margin: 0; padding: 0; } .social-icons-menu li a { position: relative; display: inline-block; padding: 0.6em; text-decoration: none; } .social-icons-menu li a:before { color: #fff; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; vertical-align: top; } /* Add Genericons */ .social-icons-menu li a:before { content: '\f408'; color: #333; } /* Default Icon */ .social-icons-menu li a[href*="codepen.io"]:before { content: '\f216'; color: #222; } .social-icons-menu li a[href*="digg.com"]:before { content: '\f221'; color: #151515; } .social-icons-menu li a[href*="dribbble.com"]:before { content: '\f201'; color: #1c1c1c; } .social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; color: #3b5998; } .social-icons-menu li a[href*="flickr.com"]:before { content: '\f211'; color: #ff0084; } .social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; color: #dd4b39; } .social-icons-menu li a[href*="github.com"]:before { content: '\f200'; color: #171515; } .social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; color: #3f729b; } .social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; color: #007bb6; } .social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; color: #cb2027; } .social-icons-menu li a[href*="polldaddy.com"]:before { content: '\f217'; color: #bc0b0b; } .social-icons-menu li a[href*="getpocket.com"]:before { content: '\f224'; color: #ee4056; } .social-icons-menu li a[href*="reddit.com"]:before { content: '\f222'; color: #ff4500; } .social-icons-menu li a[href*="spotify.com"]:before { content: '\f515'; color: #81b71a; } .social-icons-menu li a[href*="skype.com"]:before, .social-icons-menu li a[href*="skype:"]:before { content: '\f220'; color: #00aff0; } .social-icons-menu li a[href*="stumbleupon.com"]:before { content: '\f223'; color: #f74425; } .social-icons-menu li a[href*="tumblr.com"]:before { content: '\f214'; color: #32506d; } .social-icons-menu li a[href*="twitch.tv"]:before { content: '\f516'; color: #6441A5; } .social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; color: #00aced; } .social-icons-menu li a[href*="vimeo.com"]:before { content: '\f212'; color: #aad450; } .social-icons-menu li a[href*="wordpress.org"]:before { content: '\f205'; color: #21759b; } .social-icons-menu li a[href*="wordpress.com"]:before { content: '\f205'; color: #1e8cbe; } .social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; color: #c4302b; } .social-icons-menu li a[href*="newsletter"]:before, .social-icons-menu li a[href*="mailto"]:before { content: '\f410'; color: #dd4444; } .social-icons-menu li a[href*="/feed"]:before, .social-icons-menu li a[href*="/feed/"]:before, .social-icons-menu li a[href*="?feed=rss2"]:before, .social-icons-menu li a[href*="feedburner.google.com"]:before, .social-icons-menu li a[href*="feedburner.com"]:before { content: '\f413'; color: #ee802f; } .social-icons-menu li a:hover:before { text-decoration: none; color: #222; } .social-icons-menu li a .screen-reader-text { display: none; } /*-------------------------------------------------------------- ## Post Navigation Menu --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 11.0 - Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.8em 0; color: #cccccc; -ms-word-wrap: break-word; word-wrap: break-word; } .widget-header { margin: 0 0 1em 0; background: #1c1c1c; } .widget-title { display: inline-block; margin: 0; padding: 0.5em 1em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: normal; text-transform: uppercase; color: #fff; background: #1c1c1c; } .widget ul { margin: 0; padding: 0 0.3em; list-style: circle inside; } .widget ul .children, .widget ul .sub-menu { padding: 0; margin: 0.5em 0 0.5em 1em; } .widget-title a:link, .widget-title a:visited { color: #fff; } .widget-title a:hover, .widget-title a:active { text-decoration: underline; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } /*-------------------------------------------------------------- ## 11.1 - Default Widgets --------------------------------------------------------------*/ /* Default Archive & Category Wigdets */ .widget_archive ul, .widget_categories ul { list-style: none; } .widget_archive ul li:before, .widget_categories ul li:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 18px 'Genericons'; vertical-align: middle; color: #555; margin: 0 0.3em 0 0; } .widget_archive ul li:before { content: '\f307'; } .widget_categories ul li:before { content: '\f301'; } /* Default Recent Posts & Comments Wigdets */ .widget_recent_entries ul, .widget_recent_comments ul { list-style: none; } .widget_recent_entries ul li .post-date { color: #888; font-size: 12px; font-size: 0.75rem; font-style: italic; } .widget_recent_entries ul li:before, .widget_recent_comments ul li:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px 'Genericons'; vertical-align: middle; color: #555; margin: 0 0.2em 0 0; } .widget_recent_entries ul li:before { content: '\f303'; } .widget_recent_comments ul li:before { content: '\f300'; } /* Default Meta & Pages Wigdets */ .widget_meta ul, .widget_pages ul, .widget_nav_menu ul { list-style: none; } .widget_meta ul li a:before, .widget_pages ul li a:before , .widget_nav_menu ul li a:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 18px 'Genericons'; vertical-align: middle; color: #555; margin: 0 0.1em 0 0; content: '\f432'; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } /* Tagcloud Widget */ .widget_tag_cloud .tagcloud { font-size: 14px; font-size: 0.875rem; } .widget_tag_cloud .tagcloud:before, .widget_tag_cloud .tagcloud:after { content: ""; display: table; } .widget_tag_cloud .tagcloud:after { clear: both; } .widget_tag_cloud .tagcloud a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.3em 0.6em; text-decoration: none; font-size: 1.0em !important; border: 1px solid #1c1c1c; } .widget_tag_cloud .tagcloud a:link, .widget_tag_cloud .tagcloud a:visited { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .widget_tag_cloud .tagcloud a:hover, .widget_tag_cloud .tagcloud a:active { color: #fff; background-color: red; } /* Theme Search Widget */ .search-form { display: block; position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; } .search-form .screen-reader-text { display: none; } .search-form .search-field { display: inline-block; margin: 0; width: 100%; padding: 0.5em 1.5em 0.5em 0.7em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; } .search-form .search-submit { position: absolute; top: 0; right: 0; border: none; background: #1c1c1c; padding: 0.6em 0.6em 0 0; cursor: pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .search-form .search-submit .genericon-search { display: inline-block; padding: 0.05em 0 0.55em 0.45em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; font-weight: normal; font-style: normal; vertical-align: middle; color: #fff; content: '\f400'; } .search-form .search-submit:hover { background: #444; } /*-------------------------------------------------------------- ## 11.2 - Category Posts Widgets --------------------------------------------------------------*/ .widget-category-posts { margin-bottom: -1.1em; } .widget-category-posts .widget-header .category-archive-link .category-archive-icon { float: right; display: inline-block; margin: 0; padding: 0.22em 0.4em; color: #1c1c1c; } .widget-category-posts .widget-header .category-archive-link .category-archive-icon:after { display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; font-size: 28px; font-family: 'Genericons'; text-decoration: inherit; vertical-align: middle; content: '\f100'; margin: 0; } .widget-category-posts .widget-header .category-archive-link .widget-title, .widget-category-posts .widget-header .category-archive-link .category-archive-icon { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .widget-category-posts .widget-header .category-archive-link:hover .category-archive-icon { background: #ddd; } .widget-category-posts .widget-header .category-archive-link:hover .widget-title { background: #444; } .widget-category-posts .type-post { margin: 0 0 1.2em 0; padding: 0; border: none; background: none; } .widget-category-posts .type-post .wp-post-image { margin: 0; max-width: 100%; } .widget-category-posts .type-post .entry-meta .meta-author { margin-left: 0.8em; } .widget-category-posts .type-post .entry-meta span:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px 'Genericons'; vertical-align: middle; color: #555; } .widget-category-posts .type-post .entry-meta .meta-date:before{ content: '\f303'; } .widget-category-posts .type-post .entry-meta .meta-author:before{ content: '\f411'; } .widget-category-posts .type-post .entry-content p { margin: 1em 0 0; } .widget-category-posts .type-post .more-link { margin: 1em 0 0; } .widget-category-posts .type-post .more-link:link, .widget-category-posts .type-post .more-link:visited { color: #fff; } .widget-category-posts .large-post .entry-title { font-size: 24px; font-size: 1.5rem; } .widget-category-posts .large-post .wp-post-image { margin: 0 0 0.4em 0; } .widget-category-posts .medium-post { float: left; display: block; width: 33.33333333%; padding-right: 1.2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts .medium-post .wp-post-image { margin: 0 0 0.2em 0; } .widget-category-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; border-width: 2px; } .widget-category-posts .small-post { float: left; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts .small-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 40%; } .widget-category-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; border-width: 2px; } .widget-category-posts .small-post .entry-meta { font-size: 12px; font-size: 0.75rem; } /* Category Posts Boxed Widget Horizontal Style */ .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .wp-post-image { float: left; width: 50%; margin: 0; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content { float: right; width: 50%; padding-left: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-boxed .category-posts-boxed-horizontal .medium-posts { margin-right: -1em; } /* Category Posts Boxed Widget Vertical Style */ .widget-category-posts-boxed .category-posts-boxed-vertical .large-post { float: left; width: 50%; margin-bottom: 1em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-boxed .category-posts-boxed-vertical .small-posts { width: 50%; margin-left: 50%; padding-left: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Category Posts Grid Widget */ .widget-category-posts-grid .category-posts-grid-row { margin-right: -1.2em; } .widget-category-posts-grid .category-posts-grid-row .large-post { float: left; width: 50%; padding-right: 1.2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Front Page Category Area Thre (two columns) */ .merlin_category_posts_columns { padding: 0; } .widget-category-posts-columns .category-posts-columns .category-posts-columns-content .category-posts-columns-post-list { float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-columns .category-posts-columns .category-posts-columns-content { float: left; width: 100%; } .widget-category-posts-columns .category-posts-column-left { float: left; width: 50%; padding-right: 0.6em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-columns .category-posts-column-right { margin-left: 50%; width: 50%; padding-left: 0.6em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-category-posts-columns .medium-post { width: 100%; padding-right: 0; } /*-------------------------------------------------------------- # 12.0 - Posts and pages --------------------------------------------------------------*/ .type-post, .type-page, .type-attachment { margin: 0 0 1.8em 0; max-width: 100%; } .page-title, .entry-title { display: inline; font-family: 'Roboto', Tahoma, Arial; font-size: 28px; font-size: 1.75rem; padding: 0 0 0.1em; margin: 0; color: #00ff99; -ms-word-wrap: break-word; word-wrap: break-word; } .page-title { color: #444; border-bottom: 3px solid #444; } .entry-title { border-bottom: 0px solid #00ff99; } .entry-title a:link, .entry-title a:visited { color: #00ff99; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .entry-title a:hover, .entry-title a:active{ color: #444; } .type-post .wp-post-image { margin: 0 0 0.5em; } .type-post .post-thumbnail-small .wp-post-image { float: left; max-width: 40%; margin: -0.3em 1.8em 0.5em 0; padding: 0.3em 0 0; } .type-post .post-thumbnail-small + .entry-header .entry-title { font-size: 24px; font-size: 1.5rem; } /* Page Links | wp_link_pages() */ .page-links { margin: 0; word-spacing: 1em; font-weight: bold; } /* Entry Meta */ .entry-meta { color: #777; font-size: 14px; font-size: 0.875rem; margin: 0.7em 0.2em 0; } /* Entry Tags */ .entry-tags { clear: both; margin: 0.5em 0 1.5em; } .entry-tags .meta-tags { display: block; margin: 0; font-size: 14px; font-size: 0.875rem; } .entry-tags .meta-tags a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.3em 0.6em; text-decoration: none; border: 1px solid #1c1c1c; } .entry-tags .meta-tags a:link, .entry-tags .meta-tags a:visited { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active { color: #fff; background-color: red; } /* Entry Footer Meta */ .entry-footer-meta { margin: 0.5em 0 0; padding: 0.5em 0.8em; color: #222; font-size: 14px; font-size: 0.875rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .entry-footer-meta span:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px 'Genericons'; vertical-align: top; color: #333; } .entry-footer-meta .meta-comments { float: right; } .entry-footer-meta .meta-category:before{ content: '\f301'; } .entry-footer-meta .meta-comments:before{ content: '\f300'; } /* Post Navigation */ .post-navigation { margin-top: 1.5em; } .post-navigation .nav-links:before, .post-navigation .nav-links:after { content: ""; display: table; } .post-navigation .nav-links:after { clear: both; } .post-navigation .nav-links .nav-previous { float: left; } .post-navigation .nav-links .nav-next { float: right; } /* Read more Link */ .more-link { display: inline-block; margin: 0 0 1em; padding: 0.5em 0.8em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; color: #00ff99; background: #1c1c1c; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .more-link:link, .more-link:visited { color: #00ff99; } .more-link:hover, .more-link:active { background: #999999;color:white; text-decoration: none; } /* Archives and Search Heading */ .page-header { margin: 0 0 1em 0; background: #1c1c1c; } .page-header .archive-title { display: inline-block; margin: 0; padding: 0.5em 1em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: normal; text-transform: uppercase; color: white; background: #1c1c1c; } .archive-description { color: #1c1c1c; } .entry-tags .meta-tags a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.3em 0.6em; text-decoration: none; border: 1px solid #1c1c1c; } .entry-tags .meta-tags a:link, .entry-tags .meta-tags a:visited { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active { color: #fff; background-color: green; } /* Theme Pagination */ .post-pagination a, .post-pagination .current { display: inline-block; margin: 0 2px 2px 0; padding: 0.4em 0.9em; text-align: center; text-decoration: none; border: 1px solid #1c1c1c; } .post-pagination a:link, .post-pagination a:visited { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .post-pagination a:hover, .post-pagination .current { color: #fff; background-color: yellow; } /* Infinite Scroll Pagination */ .infinite-scroll .post-pagination { display: none; } .infinite-scroll #infinite-handle span { display: inline-block; margin: 0; padding: 0.5em 0.8em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; color: #1c1c1ct; background: #999999; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .infinite-scroll #infinite-handle span:hover { background-color: #444; } /* Breadcrumbs */ .breadcrumbs { margin: 0 0 1.5em; padding: 0.4em 0.6em; color: #222; font-size: 14px; font-size: 0.875rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .breadcrumbs .trail-browse, .breadcrumbs .trail-items, .breadcrumbs .trail-items li { display: inline; margin: 0; padding: 0; } .breadcrumbs .trail-browse { margin-right: 0.5em; font-size: 14px; font-size: 0.875rem; font-weight: normal; } .breadcrumbs .trail-items { list-style: none; } .breadcrumbs .trail-items li::after { content: "\00bb"; /* Raquo */ padding: 0 0.5em; } .trail-separator-slash .trail-items li::after { content: "\002F"; } .trail-separator-dash .trail-items li::after { content: "\2013"; } .trail-separator-bull .trail-items li::after { content: "\2022"; } .trail-separator-arrow-bracket .trail-items li::after { content: "\003e"; } .trail-separator-raquo .trail-items li::after { content: "\00bb"; } .trail-separator-single-arrow .trail-items li::after { content: "\2192"; } .trail-separator-double-arrow .trail-items li::after { content: "\21D2"; } .breadcrumbs .trail-items li:last-of-type::after { display: none; } /*-------------------------------------------------------------- # 11.0 - Comments --------------------------------------------------------------*/ /* Comment Header */ .comments-header, .comment-reply-title { margin: 0 0 1em 0; background: #eee; } .comments-header .comments-title, .comment-reply-title span { display: inline-block; margin: 0; padding: 0.5em 1em; font-family: 'Hammersmith One', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: normal; text-transform: uppercase; color: #fff; background: #1c1c1c; } /* Comment List */ .comment-list { margin: 0; padding: 0; list-style: none; } .comment { padding: 0.8em 0; border-top: 1px solid #ccc; -ms-word-wrap: break-word; word-wrap: break-word; } .comment-meta { float: left; width: 100%; padding: 0.2em 0 0.6em; border-bottom: 2px solid #eee; } .comment-meta .comment-author img { float: left; margin-right: 1em; } .bypostauthor { display: block; } .comment-meta .comment-metadata { margin-top: 0.3em; font-size: 14px; font-size: 0.875rem; } .comment-meta .comment-metadata a { margin-right: 1em; } .comment-content { clear: left; padding: 0.3em 0 0; } .comment-content a { word-wrap: break-word; } .comment .reply { margin-bottom: 1em; } .comment ol.children { list-style: none; } /* Comment Pagination */ .comment-navigation { margin: 0 0 1.8em; color: #222; font-size: 14px; font-size: 0.875rem; } .comment-navigation a { display: inline-block; padding: 0.3em 0.6em; border: 1px solid #1c1c1c; } .comment-navigation a:link, .comment-navigation a:visited { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .comment-navigation a:hover, .comment-navigation a:active { color: #fff; background-color: #1c1c1c; } .comment-navigation .nav-previous { float: left; } .comment-navigation .nav-next { float: right; } /* Comment Form */ .comment-form { padding: 0 0.5em; } .comment-form label { display: inline-block; min-width: 150px; font-weight: bold; } .comment-form textarea { margin-top: 0.4em; } .comment-form .submit { padding: 1em 1.6em; } .comment-reply-title small a { margin-left: 1em; text-decoration: underline; font-size: 14px; font-size: 0.875rem; font-weight: normal; } /*-------------------------------------------------------------- # 12.0 - Footer --------------------------------------------------------------*/ .site-footer { border-top: 1px solid #00ff99; padding: 0.9em 1.5em; font-size: 14px; font-size: 0.875rem; } .site-footer .site-info { float: left; } /* Footer Navigation Menu */ .footer-navigation { float: right; } .footer-navigation-toggle { display: none; } .footer-navigation-menu { display: inline; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; } .footer-navigation-menu li { float: left; position: relative; } .footer-navigation-menu a { display: block; padding: 0.15em 1em; font-size: 13px; font-size: 0.8125rem; text-transform: uppercase; } /*-------------------------------------------------------------- # 13.0 - 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%; } /*-------------------------------------------------------------- ## 13.1 - 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 { margin: 0.8075em 0; } /*-------------------------------------------------------------- ## 13.2 - 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; } /*-------------------------------------------------------------- # 14.0 - Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 14.1 - Desktop Large ( < 1120px ) --------------------------------------------------------------*/ @media only screen and (max-width: 70em) { .top-navigation-menu a { font-size: 12px; font-size: 0.75rem; } .social-icons-menu li a:before { font-size: 21px; } .page-title, .entry-title { font-size: 26px; font-size: 1.625rem; } .type-post .post-thumbnail-small + .entry-header .entry-title, .widget-category-posts .large-post .entry-title { font-size: 22px; font-size: 1.375rem; } .widget-category-posts .medium-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-category-posts .small-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .more-link { display: none; } } /*-------------------------------------------------------------- ## 14.2 - Desktop Medium ( < 1040px ) --------------------------------------------------------------*/ @media only screen and (max-width: 65em) { .content-area { width: 70%; } .sidebar { width: 30%; } .type-post .post-thumbnail-small + .entry-header .entry-title, .widget-category-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } /* Magazine Homepage: Category Post Widgets Boxed */ .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .wp-post-image { width: 55%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content { width: 45%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .entry-meta .meta-author { display: none; } } /*-------------------------------------------------------------- ## 14.3 - Desktop Small ( < 960px ) --------------------------------------------------------------*/ @media only screen and (max-width: 60em) { .site-branding { float: none; text-align: center; margin: 1em 0; } .header-widget { float: none; margin: 0.5em 0 0; text-align: center; } .site-content { padding: 1.5em; } .content-area, .site-content .fullwidth-content-area { padding-right: 1.5em; } .header-bar-wrap { padding: 0; } .header-bar .social-icons-navigation { padding-right: 0.5em; } /*** Mobile Top Navigation ***/ /* Reset */ .top-navigation-menu li { float: none; position: static; } .top-navigation-menu ul { position: static; display: block; } .top-navigation-menu ul a { width: auto; float: none; } .top-navigation-menu li ul ul { margin-left: 0; } .top-navigation-menu li:hover ul ul, .top-navigation-menu li:hover ul ul ul, .top-navigation-menu li:hover ul ul ul ul, .top-navigation-menu li:hover ul, .top-navigation-menu li li:hover ul, .top-navigation-menu li li li:hover ul, .top-navigation-menu li li li li:hover ul { display: inline; } /* Top Navigation Toggle */ #top-navigation-toggle-tablet { display: inline-block; } #top-navigation-toggle-phone { display: none; } .top-navigation-toggle { display: inline-block; padding: 0.8em 1.2em; background: none; } .top-navigation-toggle:hover, .top-navigation-toggle:active, .top-navigation-toggle:focus { cursor: pointer; background: none; } .top-navigation-toggle:after { float: left; display: inline-block; font-family: 'Genericons'; font-size: 18px; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f419'; color: red; } .top-navigation-toggle:hover:after { color: red; } /* Top Navigation Menu */ .top-navigation-menu { float: left; width: 100%; display: none; border-top: 2px solid #eee; } .top-navigation-menu a { display: block; clear: left; font-size: 13px; font-size: 0.8125rem; padding: 0.9em 1.2em; } .top-navigation-menu ul { width: 100%; border-width: 1px; border-left: none; border-right: none; padding-left: 1em; } .top-navigation-menu ul a { display: block; width: 100%; } .top-navigation-menu ul ul { border: none; padding-left: 2em; } /* Mobile Submenu Dropdowns */ .top-navigation-menu .submenu-dropdown-toggle { float: right; display: block; margin: 0; padding: 0.5em 1.2em; } .top-navigation-menu .submenu-dropdown-toggle:hover { cursor: pointer; } .top-navigation-menu .submenu-dropdown-toggle:before { font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f431'; color: #1c1c1c; } .top-navigation-menu .submenu-dropdown-toggle:hover:before { color: #333; } .top-navigation-menu .submenu-dropdown-toggle.active:before { content: '\f432'; } .top-navigation-menu ul .submenu-dropdown-toggle { padding: 0.4em 1em; } /*** Mobile Main Navigation ***/ /* Reset */ .main-navigation-menu li { float: none; position: static; } .main-navigation-menu ul { position: static; display: block; } .main-navigation-menu ul a { width: auto; float: none; } .main-navigation-menu li ul ul { margin-left: 0; } .main-navigation-menu li:hover ul ul, .main-navigation-menu li:hover ul ul ul, .main-navigation-menu li:hover ul ul ul ul, .main-navigation-menu li:hover ul, .main-navigation-menu li li:hover ul, .main-navigation-menu li li li:hover ul, .main-navigation-menu li li li li:hover ul { display: inline; background:yellow; } /* Main Navigation Toggle */ .main-navigation-toggle { float: left; display: inline-block; padding: 0.8em 1.2em; background: #1c1c1c; } .main-navigation-toggle:hover, .main-navigation-toggle:active { cursor: pointer; background: #444; } .main-navigation-toggle:after { float: left; display: inline-block; font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f419'; background:1c1c1c; } /* Main Navigation Menu */ .main-navigation-menu { float: left; width: 100%; display: none; border-top: 1px solid #fff; } .main-navigation-menu a { display: block; clear: left; } .main-navigation-menu ul { width: 100%; } .main-navigation-menu ul a { display: block; width: 100%; } .main-navigation-menu a:hover, .main-navigation-menu li.current-menu-item a { background: none; text-decoration: underline; } /* Mobile Submenu Dropdowns */ .main-navigation-menu .submenu-dropdown-toggle { float: right; display: block; margin: 0; padding: 0.6em 1.2em; } .main-navigation-menu .submenu-dropdown-toggle:hover { cursor: pointer; } .main-navigation-menu .submenu-dropdown-toggle:before { font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f431'; color: #fff; } .main-navigation-menu .submenu-dropdown-toggle:hover:before { color: green; } .main-navigation-menu .submenu-dropdown-toggle.active:before { content: '\f432'; } .main-navigation-menu ul .submenu-dropdown-toggle:before { font-size: 20px; } } /*-------------------------------------------------------------- ## 14.4 - Tablet Large ( < 880px ) --------------------------------------------------------------*/ @media only screen and (max-width: 55em) { .site-content { position: relative; padding: 0; } .content-area, .site-content .fullwidth-content-area { float: none; width: 100%; padding: 1.5em; } .sidebar { float: none; display: none; position: absolute; top: 0; right: 0; padding: 1.8em; background: black; box-shadow: 0 0 5px #aaa; width: 80%; height: 100%; overflow: auto; z-index: 200; } /* Sidebar Toggle */ .sidebar-navigation-toggle { float: right; display: inline-block; padding: 0.8em 1.2em; background: #1c1c1c; } .sidebar-navigation-toggle:hover, .sidebar-navigation-toggle:active { cursor: pointer; background: #444; } .sidebar-navigation-toggle:after { float: left; display: inline-block; font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f510'; color: #fff; } /* Magazine Homepage: Category Post Widgets Boxed */ .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .wp-post-image { width: 50%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content { width: 50%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .more-link, .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .entry-meta .meta-author { display: inline-block; } } /*-------------------------------------------------------------- ## 14.5 - Tablet Medium ( < 800px ) --------------------------------------------------------------*/ @media only screen and (max-width: 50em) { /*** Mobile Footer Navigation ***/ .site-footer { padding: 0; } .site-footer .site-info { padding: 0.9em 1.5em; } .footer-navigation { display: block; width: 100%; } /* Footer Navigation Toggle */ .footer-navigation-toggle { float: right; display: inline-block; background: none; padding: 0.9em 1.5em; margin-top: -3.2em; } .footer-navigation-toggle:hover, .footer-navigation-toggle:active, .footer-navigation-toggle:focus { cursor: pointer; background: none; } .footer-navigation-toggle:after { float: left; display: inline-block; font-family: 'Genericons'; font-size: 18px; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f419'; color: red; } .footer-navigation-toggle:hover:after { color: aqua; } /* Footer Navigation Menu */ .footer-navigation-menu { float: left; width: 100%; display: none; border-top: 2px solid #eee; } .footer-navigation-menu a { font-size: 13px; font-size: 0.8125rem; padding: 0.9em; } /* Magazine Homepage: Category Post Widgets */ .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .more-link, .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .entry-meta .meta-author { display: none; } } /*-------------------------------------------------------------- ## 14.6 - Tablet Small ( < 720px ) --------------------------------------------------------------*/ @media only screen and (max-width: 45em) { .type-post .post-thumbnail-small .wp-post-image { float: none; max-width: 100%; margin: 0 0 0.5em; padding: 0; } .type-post .post-thumbnail-small + .entry-header .entry-title { font-size: 26px; font-size: 1.625rem; } } /*-------------------------------------------------------------- ## 14.7 - Mobile Extra Large ( < 640px ) --------------------------------------------------------------*/ @media only screen and (max-width: 40em) { .page-title, .entry-title, .type-post .post-thumbnail-small + .entry-header .entry-title { font-size: 24px; font-size: 1.5rem; } /* Magazine Homepage: Category Post Widgets */ .widget-category-posts-grid .category-posts-grid-row { margin-right: 0; } .widget-category-posts-grid .medium-post-row { margin-right: -1.2em; } .widget-category-posts-grid .category-posts-grid-row .large-post, .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .wp-post-image, .widget-category-posts-boxed .category-posts-boxed-vertical .large-post, .widget-category-posts-columns .category-posts-column-left { float: none; width: 100%; padding: 0; } .widget-category-posts-boxed .category-posts-boxed-vertical .small-posts, .widget-category-posts-columns .category-posts-column-right { width: 100%; padding-top: 0.5em; margin-left: 0; padding-left: 0; } .widget-category-posts .large-post .wp-post-image { float: left; margin: 0 1.5em 0 0; max-width: 50%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content { float: right; width: 50%; padding-left: 1.5em; } .widget-category-posts-grid .category-posts-grid-row .large-post { clear: left; } .widget-category-posts-grid .category-posts-grid-row .large-post .wp-post-image { margin-bottom: 1em; } .widget-category-posts .large-post .entry-content { display: none; } .widget-category-posts .large-post .entry-meta .meta-author, .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .entry-meta .meta-author { display: block; margin: 0; } } /*-------------------------------------------------------------- ## 14.8 - Mobile Large ( < 560px ) --------------------------------------------------------------*/ @media only screen and (max-width: 35em) { .widget-category-posts-grid .medium-post-row { margin-right: 0; } .widget-category-posts .medium-post { float: none; width: 100%; padding-right: 0; } .widget-category-posts .medium-post .wp-post-image { float: left; margin: 0 1.2em 0 0; max-width: 40%; } .widget-category-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-category-posts .large-post .entry-title { font-size: 18px; font-size: 1.125rem; } } /*-------------------------------------------------------------- ## 14.9 - Mobile Medium ( < 480px ) --------------------------------------------------------------*/ @media only screen and (max-width: 30em) { .content-area, .site-content .fullwidth-content-area { padding: 1.2em; } .main-navigation-toggle:after, .sidebar-navigation-toggle:after { font-size: 22px; } .page-title, .entry-title, .type-post .post-thumbnail-small + .entry-header .entry-title { font-size: 22px; font-size: 1.375rem; } .alignright, .alignleft { float: none; margin: 1em 0; } .entry-footer-meta .meta-comments { display: block; float: none; } /* Mobile Main Navigation */ #top-navigation-toggle-tablet { display: none; } #top-navigation-toggle-phone { display: inline-block; } /* Social Menu Dropdown */ .social-icons-navigation-toggle { float: right; display: inline-block; padding: 0.8em 1.2em; background: none; } .social-icons-navigation-toggle:hover, .social-icons-navigation-toggle:active, .social-icons-navigation-toggle:focus { cursor: pointer; background: none; } .social-icons-navigation-toggle:after { float: left; display: inline-block; font-family: 'Genericons'; font-size: 18px; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f510'; color: #1c1c1c; } .social-icons-navigation-toggle:hover:after { color: #333; } .header-bar .social-icons-navigation { display: none; border-top: 2px solid #eee; width: 100%; } .header-bar .social-icons-menu { float: right; width: 100%; } /* Magazine Homepage: Category Post Widgets */ .widget-category-posts .medium-post .wp-post-image, .widget-category-posts .small-post .wp-post-image { max-width: 30%; } .widget-category-posts .medium-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-category-posts .large-post .wp-post-image, .widget-category-posts-grid .category-posts-grid-row .large-post .wp-post-image { float: none; margin: 0 0 0.2em 0; max-width: 100%; } .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content { float: none; width: 100%; padding: 0; } .widget-category-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } .widget-category-posts .large-post .entry-content, .widget-category-posts .large-post .entry-content .more-link { display: inline-block; } .widget-category-posts .large-post .entry-meta .meta-author, .widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .entry-meta .meta-author { display: inline-block; margin-left: 0.8em; } } /*-------------------------------------------------------------- ## 14.10 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 20em) { .header-main { padding: 1em 1.2em; } .site-branding .site-title { font-size: 28px; font-size: 1.75rem; } .page-title, .entry-title, .type-post .post-thumbnail-small + .entry-header .entry-title { font-size: 20px; font-size: 1.25rem; } .entry-meta span, .postinfo span { display: block; } } /*-------------------------------------------------------------- # 15.0 - Theme Option Styles --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 15.1 - Sidebar Left Layout --------------------------------------------------------------*/ .sidebar-left .content-area { float: right; padding-right: 0; padding-left: 1.8em; } .sidebar-left .sidebar { float: left; } @media only screen and (max-width: 55em) { .sidebar-left .content-area { float: none; width: 100%; padding: 1.5em; } .sidebar-left .sidebar { float: none; left: 0; right: auto; width: 80%; } } /*-------------------------------------------------------------- ## 15.2 - Sticky Navigation --------------------------------------------------------------*/ @media only screen and (min-width: 60em) { .sticky-navigation .sticky-nav-menu { position: fixed; z-index: 100; top: 0; width: 100%; max-width: 1190px; border-bottom: 1px solid #fff; } .sticky-navigation.admin-bar .sticky-nav-menu { top: 32px; } } /*-------------------------------------------------------------- # 16.0 - Media Query Fixes --------------------------------------------------------------*/ /* Ensure navigation is visible on desktop view */ @media only screen and (min-width: 60.001em) { .main-navigation-menu, .top-navigation-menu { display: block !important; } .main-navigation-menu li.menu-item:hover a { background: #1c1c1c; } } /* Ensure sidebar is visible on desktop view */ @media only screen and (min-width: 55em) { .sidebar { display: block; width: 30%; position: static; } } @media only screen and (min-width: 65em) { .sidebar { width: 26%; } } /* Ensure .footer-navigation-menu is visible on desktop view */ @media only screen and (min-width: 50.001em) { .footer-navigation-menu { display: block !important; } } /* Ensure social icons are visible on desktop view */ @media only screen and (min-width: 30.001em) { .header-bar .social-icons-navigation { display: block !important; } }