/* Theme Name: Arba Theme URI: https://demo.xstreamthemes.com/arba/ Author: xstreamthemes Author URI: https://www.xstreamthemes.com Description: arba is a free blog wordpress theme, minimal designed and simple layout. Ideal for design, architecture, lifestyle, tech, marketing, fashion, entertainment, music, health, sport, food, science sites. Fully responsive, gorgeous typography for a much better user experience. Version: 1.0.0 Tags: two-columns, blog, photography, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready License: GNU General Public License version 2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: arba All files, unless otherwise stated, are released under the GNU General Public License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)Use it to make something cool, have fun, and share what you've learned with others. */ /*-----------------------------------------------------------------------------------*/ /* * 1.0. HTML5 Reset * 2.0. Global * 3.0. Header * 4.0. Main * 5.0. Footer * 6.0. Single Post * 7.0. Comments * 8.0. Sidebar * 9.0. Pages * 10.0. Archive * 11.0. No Results * 12.0. Pagination * 13.0. Breadcrumbs * 14.0. Search Overlay * 15.0. Menu Slide * 16.0. Responsive * 17.0. Print * /* /*-----------------------------------------------------------------------------------*/ /* 1.0. HTML5 Reset /*-----------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 20px; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; } body { background-color: #ffffff; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } a:hover, a:active, a:focus { outline: 0; text-decoration: none; opacity: 0.8; } a img { border: 0; } /*-----------------------------------------------------------------------------------*/ /* 2.0. Global /*-----------------------------------------------------------------------------------*/ /*-------------------------------------------*/ /* Typography /*-------------------------------------------*/ body { font-family: 'Poppins', serif; letter-spacing: 0.5px; font-size: 14px; font-weight: 400; line-height: 24px; color: #444444; } input, select, textarea { font-family: 'Poppins',serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button { font-family: 'Poppins',serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins',serif; font-weight: 700; line-height: 1.33333333; color: #222222; } h1 { font-size: 28px; font-size: 1.600rem; margin: 45px 0 15px; margin: 0 0 0.750rem; } h2 { font-size: 24px; font-size: 1.500rem; margin: 45px 0 15px; margin: 0 0 0.750rem; } h3 { font-size: 22px; font-size: 1.300rem; margin: 45px 0 15px; margin: 0 0 0.750rem; } h4 { font-size: 18px; margin: 30px 0 15px; margin: 0 0 0.750rem; } h5, h6 { font-size: 100%; margin: 30px 0 15px; margin: 0 0 0.750rem; } p { margin-bottom: 24px; margin-bottom: 1.200rem; } b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } blockquote { font-family: 'Merriweather', serif; font-size: 100%; padding: 30px; margin: 0 0 20px 0; background: #FCFCFC; letter-spacing: 1px; clear: both; overflow: hidden; } blockquote p { margin-bottom: 24px; margin-bottom: 1.200rem; } blockquote>p:last-child { margin-bottom: 0; } blockquote cite, blockquote small { font-size: 80%; color: #999999; display: block; } blockquote strong, blockquote b { font-weight: 700; } address { font-style: italic; margin: 0 0 30px; margin: 0 0 1.500rem; } code, kbd, tt, var, samp, pre { font-family: Inconsolata, monospace; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre { background: #fdf9eb; font-size: 88.88888888%; line-height: 1.33333333; color: #988b70; max-width: 100%; padding: 24px 36px; padding: 1.200rem 1.800rem; margin: 24px 0; margin: 1.200rem 0; border: 1px solid #f1ead4; -webkit-border-radius: 2px; border-radius: 2px; overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } abbr[title] { border-bottom: 1px dotted #d9d9d9; cursor: help; } mark, ins { background-color: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------*/ /* Elements /*-------------------------------------------*/ hr { background-color: #d9d9d9; border: 0; height: 1px; margin: 45px 0; margin: 2.250rem 0; } ul, ol { margin: 0 0 24px 30px; margin: 0 0 1.200rem 1.500rem; } ul { list-style: square; } ol { list-style: decimal; } ul li, ol li { margin-bottom: 5px; } li>ul, li>ol { margin-top: 5px; margin-bottom: 0; } dl { margin-bottom: 24px; margin-bottom: 1.200rem; } dt { font-weight: bold; } dd { margin-bottom: 24px; margin-bottom: 1.200rem; } table { width: 100%; padding: 0; margin: 24px 0; margin: 1.200rem 0; } table th { font-weight: bold; padding: 10px 0; padding: 0.500rem 0; border-bottom: 1px solid #d9d9d9; } table td { padding: 10px 0; padding: 0.500rem 0; border-bottom: 1px dotted #d9d9d9; } img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; } figure { margin: 0; } del { opacity: 0.8; } /* Hightlight */ .highlight { background-color: #fff9c0; } /* Hide */ .hide { display: none ! important; } /*-------------------------------------------*/ /* Forms /*-------------------------------------------*/ input, textarea, select { display: block; background: none; font-size: 15px; font-weight: 400; line-height: 20px; color: #999999; width: 100%; padding: 12px; margin: 0 0 15px; margin: 0 0 0.750rem; border: 1px solid #d9d9d9; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: baseline; outline: none; } input:hover, textarea:hover, select:hover { border: 1px solid #d9d9d9; outline: none; } input[type=checkbox], input[type=radio] { display: inline-block; background: none; line-height: 0; color: #999999; width: 16px !important; min-width: 16px !important; height: 16px !important; padding: 0 !important; margin: -4px 4px 0 0 !important; text-align: center; border: 1px solid #d9d9d9; vertical-align: middle; cursor: pointer; clear: none; outline: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; background: #999999; font-size: 16px; font-weight: 700; line-height: 20px; color: #ffffff; width: auto; max-width: 100%; padding: 12px 24px; margin: 0 0 15px; margin: 0 0 0.750rem; border: 1px solid transparent; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: baseline; cursor: pointer; outline: 0; } button[disabled], input[disabled], select[disabled], textarea[disabled] { cursor: default; opacity: .5; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #000000; color: #ffffff; } input[type="search"] { -webkit-appearance: none; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { font-size: 100%; font-weight: 400; line-height: 1.4; color: #222222; padding: 15px; padding: 0.750rem; height: 200px; height: 10.000rem; vertical-align: top; overflow: auto; } input[type="checkbox"], input[type="radio"] { padding: 0; margin: 0 5px 5px 0; margin: 0 0.250rem 0.250rem 0; } /*-------------------------------------------*/ /* Links /*-------------------------------------------*/ a { color: #000; text-decoration: none; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a:hover { outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn { display: inline-block; background: #999999; font-size: 16px; font-weight: 700; line-height: 20px; color: #ffffff; width: auto; max-width: 100%; padding: 12px 24px; margin: 0 0 15px; margin: 0 0 0.750rem; text-decoration: none; border: 1px solid transparent; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: baseline; cursor: pointer; outline: 0; } .btn:hover { color: #ffffff; text-decoration: none; } /*-------------------------------------------*/ /* Media /*-------------------------------------------*/ .featured-image img { display: block; width: 100%; } .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-top: 0; margin-bottom: 0; padding: 0; } audio, canvas { display: inline-block; } embed, iframe, object, video { margin-bottom: 24px; margin-bottom: 1.200rem; max-width: 100%; vertical-align: middle; } p>embed, p>iframe, p>object, p>video { margin-bottom: 0; } .fluid-width-video-wrapper { margin-bottom: 24px; margin-bottom: 1.200rem; } .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist { font-size: 88.88888888%; margin-top: 0; margin-bottom: 24px; margin-bottom: 1.200rem; } .wp-playlist.wp-playlist { padding-bottom: 0; } .wp-playlist .wp-playlist-tracks { margin-top: 0; } .wp-playlist-item .wp-playlist-caption { border-bottom: 0; padding: 10px 0; padding: 0.500rem 0; } .wp-playlist-item .wp-playlist-item-length { top: 10px; top: 0.500rem; } /*-------------------------------------------*/ /* Caption /*-------------------------------------------*/ .wp-caption { margin-bottom: 24px; margin-bottom: 1.200rem; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0; } .wp-caption-text { color: #999999; font-size: 88.88888888%; padding: 10px 0 0; padding: 0.500rem 0 0; } /*-------------------------------------------*/ /* Galleries /*-------------------------------------------*/ .gallery { margin-bottom: 1.500rem; } .gallery-item { display: inline-block; padding: 0; 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-icon img { padding: 1px !important; margin: 0 !important; } .gallery-caption { color: #999999; display: block; font-size: 16px; font-size: 0.800rem; line-height: 1.5; padding: 10px 0; padding: 0.500rem 0; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*-------------------------------------------*/ /* Alignments /*-------------------------------------------*/ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } blockquote.alignleft, .wp-caption.alignleft, img.alignleft { margin: 0.5% 4% 2% 0; max-width: 50%; } blockquote.alignright, .wp-caption.alignright, img.alignright { margin: 0.5% 0 2% 4%; max-width: 50%; } blockquote.aligncenter, .wp-caption.aligncenter, img.aligncenter { clear: both; margin-top: 10px; margin-top: 0.500rem; margin-bottom: 24px; margin-bottom: 1.200rem; } .wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter { margin-bottom: 24px; margin-bottom: 1.200rem; } .gallery-caption {} .tiled-gallery { margin-bottom: 24px ! important; margin-bottom: 1.200rem ! important; } .sticky {} .mejs-container { margin-bottom: 24px; margin-bottom: 1.200rem; } .screen-reader-text {} /*-------------------------------------------*/ /* Clearing /*-------------------------------------------*/ .clearfix { clear: both; overflow: hidden; } .clearfix:before, .site-wrap:before, .site-row:before, .site-header:before, .site-main:before, .site-footer:before, .widget:before, .pagination:before, .hentry:before, .post:before { content: " "; display: table; } .clearfix:after, .site-wrap:after, .site-row:after, .site-header:after, .site-main:after, .site-footer:after, .widget:after, .pagination:after, .hentry:after, .post:after { clear: both; content: ''; display: table; } .site-wrap { width: 100%; padding: 0 40px; padding: 0 2.000rem; margin: 0 auto; } .site-row { width: 100%; max-width: 1180px; padding: 0; margin: 0 auto; } /*-------------------------------------------*/ /* Position /*-------------------------------------------*/ .relative { position: relative; } .absolute { position: absolute; } /*-------------------------------------------*/ /* Short columns /*-------------------------------------------*/ .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-right: 2.564102564102564%; } .one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; } .one-third, .two-sixths { width: 31.623931623931625%; } .four-sixths, .two-thirds { width: 65.81196581196582%; } .one-fourth { width: 23.076923076923077%; } .three-fourths { width: 74.35897435897436%; } .one-sixth { width: 14.52991452991453%; } .five-sixths { width: 82.90598290598291%; } .last { clear: right; margin-right: 0 ! important; } /*-----------------------------------------------------------------------------------*/ /* 3.0. Header /*-----------------------------------------------------------------------------------*/ .site-header { position: relative; border-bottom: 1px solid #e9e9e9; } /*-------------------------------------------*/ /* Logo + Header icons /*-------------------------------------------*/ .logo-wrapper { padding: 20px 0; margin: 0; line-height: 40px; } /*-------------------------------------------*/ /* Logo /*-------------------------------------------*/ .logo { float: left; font-size: 0; line-height: 1; } .logo h1, .logo p { margin: 0px; } .logo a { display: inline-block; font-family: 'Poppins',serif; font-size: 32px; font-weight: 700; line-height: 40px; text-decoration: none; } .logo a:hover { text-decoration: none; } .logo a img { display: block; } .logo a img.tablets-phones { display: none; } /*-------------------------------------------*/ /* Header icons /*-------------------------------------------*/ .header-icons { float: right; text-align: right; margin-left: 30px; } .header-icons ul { display: inline-block; width: 100%; list-style: none; margin: 0; } .header-icons ul li { display: inline-block; padding: 0; margin: 0 10px 0 0; } .header-icons ul li:last-child { margin-right: 0; } .header-icons ul li a { display: inline-block; font-size: 16px; line-height: 30px; color: #999; text-decoration: none; } .header-icons ul li a:hover { color: #222; text-decoration: none; } /*-------------------------------------------*/ /* Mobile search and Mobile menu icons /*-------------------------------------------*/ .mobile-search__menu-slide { display: none; float: right; } .mobile-search__button { display: inline-block; font-size: 20px; font-size: 1.000rem; line-height: 1; color: #222222; margin: 0 16px 0 0; margin: 0 0.800rem 0 0; text-decoration: none; } .mobile-search__button:hover { color: #777777; text-decoration: none; } .menu-slide__button { display: none; font-size: 20px; font-size: 1.000rem; line-height: 1; color: #222222; margin: 0; text-decoration: none; } .menu-slide__button:hover { color: #222222; text-decoration: none; } /*-------------------------------------------*/ /* Primary navigation /*-------------------------------------------*/ .primary-nav { float: right; font-size: 14px; line-height: 42px; margin: 0; text-align: right; display: block; } .primary-nav ul { list-style: none; margin: 0; } .primary-nav div>ul>li { float: left; padding: 0; margin: 0; position: relative; padding-right: 30px; } .primary-nav div>ul>li:last-of-type { padding-right: 0px; } .primary-nav ul li a { display: inline-block; margin: 0; color: #222222; text-decoration: none; font-weight: 600; } .primary-nav ul li a:hover { text-decoration: none; } .primary-nav ul li:first-child a { padding-left: 0; } .primary-nav ul li:last-child a { padding-right: 0; } /* Sub Links #1 */ .primary-nav ul li.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul { display: none; background: #fff; font-size: 93.75%; min-width: 200px; padding: 0; margin: -1px 0 0 0; text-align: left; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); position: absolute; top: 100%; z-index: 3; } .primary-nav ul li.menu-item-has-children ul li, .primary-nav ul li.page_item_has_children ul li { display: block; width: 100%; padding: 0; margin: 0; border-bottom: 1px solid #e5e5e5; position: relative; } .primary-nav ul li.menu-item-has-children ul li:last-child, .primary-nav ul li.page_item_has_children ul li:last-child { border: none; } .primary-nav ul li.menu-item-has-children ul li a, .primary-nav ul li.page_item_has_children ul li a { display: inline-block; color: #222222; padding: 10px; text-decoration: none; line-height: 1.2; } .primary-nav ul li.menu-item-has-children ul li a:hover, .primary-nav ul li.page_item_has_children ul li a:hover { text-decoration: none; border: none; } /* Sub Links #2 */ .primary-nav ul li.menu-item-has-children ul li.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul li.page_item_has_children ul { display: none; margin: 0; top: 0; left: 100%; } /* Main ad /*-------------------------------------------*/ .main-ad { margin: 0px 0 50px; text-align: center; } .main-ad .widget, .main-ad p { margin: 0px!important; } /*-----------------------------------------------------------------------------------*/ /* 4.0. Main /*-----------------------------------------------------------------------------------*/ .site-main { margin: 50px 0; margin: 2.500rem 0; } .content__sidebar { margin: 0; } .content { float: left; width: 73%; padding: 0 40px 0 0; margin: 0; } .sidebar { float: right; width: 27%; padding: 0; margin: 0; } .content__full-width { width: 100%; padding: 0; margin: 0; } /*-----------------------------------------------------------------------------------*/ /* 5.0. Footer /*-----------------------------------------------------------------------------------*/ .site-footer { font-size: 14px; background: #fcfcfc; padding: 60px 0 30px; margin: 0; } .footer-copyright { padding: 20px 0; text-align: center; background: #f6f6f6; font-size: 12px; } .site-footer .widget-area{ margin-bottom: 30px; } /*-----------------------------------------------------------------------------------*/ /* 7.0. Single Post /*-----------------------------------------------------------------------------------*/ .hentry { width: 100%; padding: 0; margin: 0; position: relative; } .hentry p.entry-category { font-size: 12px; font-weight: 700; color: #999999; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 5px; } .single p.entry-category { text-align: center; } .single .entry-header { margin-bottom: 30px; } .hentry h2.entry-title a { color: #222222; font-size: 18px; display: block; } .hentry h1.entry-title { font-size: 36px; line-height: 1.250; margin: 30px 0 10px; position: relative; text-align: center; } .hentry h1.entry-title:before { position: relative; display: block; width: 60px; height: 2px; top: -30px; content: ""; margin: 0 auto; } .hentry p.entry-meta { display: inline-block; font-size: 14px; font-size: 0.700rem; font-weight: 400; color: #999999; margin: 0; } .hentry p.entry-meta a, .hentry p.entry-meta a:hover { color: #999999; text-decoration: none; } .hentry p.entry-meta img { vertical-align: top; -webkit-border-radius: 50%; border-radius: 50%; } .hentry .featured-image { width: 100%; max-width: 340px; position: relative; display: inline-block; float: left; } .single .featured-image { max-width: 100%; margin-bottom: 30px; float: none; } .hentry .featured-image img { display: block; } .front-posts .hentry { position: relative; margin-bottom: 40px; } .front-posts .hentry .entry-content { margin: 0px; display: inline-block; width: 100%; position: static; background: #fff; padding: 20px 30px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-left: 0px; } .front-posts .hentry:hover .entry-content { margin-left: -30px; } .front-posts .hentry.has-post-thumbnail .entry-content { max-width: 479px; max-width: calc(100% - 340px); position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .hentry .entry-content h2.entry-title { font-size: 18px; line-height: 30px; margin-bottom: 5px; } .entry-excerpt { margin-bottom: 10px; } .entry-excerpt p { color: #999; margin-bottom: 0px; font-size: 14px; } .hentry .read-more { color: #000; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 600; float: right; border-bottom: 1px solid #000; padding-bottom: 5px; } .single .entry-blocks { margin-bottom: 30px; } .single .has-meta .entry-meta { width: 18%; float: left; text-align: center; } .single .entry-meta span { font-size: 12px; line-height: 1; } .single .has-meta .entry-content { float: right; width: 80%; } .author-image, .entry-author, .entry-time { display: block; text-align: center; } .single .entry-meta span.entry-author a { color: #000; padding: 8px 0; display: block; } /*-------------------------------------------*/ /* Page links /*-------------------------------------------*/ .page-links { margin: 0 0 24px; margin: 0 0 1.200rem; } .page-links>.page-links-title { border: 0; color: #222222; height: auto; margin: 0; padding-right: 0.6153846154em; width: auto; } .page-links a, .page-links>span { display: inline-block; font-size: 14px; font-size: 0.700rem; font-weight: 700; line-height: 24px; line-height: 1.200rem; color: #222222; width: 26px; width: 1.300rem; height: 26px; height: 1.300rem; text-align: center; text-decoration: none; border: 1px solid #d9d9d9; -webkit-border-radius: 2px; border-radius: 2px; } .page-links a { background-color: #222222; border-color: #222222; color: #ffffff; text-decoration: none; } .page-links a:hover { background: #999999; border-color: #999999; text-decoration: none; } /*-------------------------------------------*/ /* Entry footer /*-------------------------------------------*/ .entry-footer { font-size: 88.88888888%; font-weight: 400; color: #222222; margin: 0 0 24px; margin: 0 0 1.200rem; } .entry-footer a { display: inline-block; padding: 2px 10px; margin: 0 6px 10px 0; color: #999999; text-decoration: none; border: 1px solid #d9d9d9; } .entry-footer a:hover { color: #cccccc; text-decoration: none; } .entry-footer span { display: block; } /*-------------------------------------------*/ /* Entry blocks /*-------------------------------------------*/ .entry-blocks { margin: 0; } h3.block-title { font-size: 20px; } /*-------------------------------------------*/ /* Author box /*-------------------------------------------*/ .author-box { padding: 0; margin: 0 0 30px; border:1px solid #e9e9e9; padding:30px; } .author-box h2.author-title { font-size: 20px; margin: 0 0 15px; margin: 0 0 0.750rem; } .author-box h2.author-title a, .author-box h2.author-title a:hover { color: #222222; text-decoration: none; } .author-box__left { float: left; width: 80px; margin: 0 30px 0 0; } .author-description { font-size: 88.88888888%; margin: 0 0 15px; margin: 0 0 0.750rem; } /*-------------------------------------------*/ /* Entry navigation /*-------------------------------------------*/ .entry-navigation { padding: 30px ; margin: 0 0 45px; background-color: #FCFCFC; } .entry-navigation h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #222222; margin: 0 0 10px; } .entry-navigation a { font-size: 16px; font-weight: 700; line-height: 1.33333333; color: #222222; text-decoration: none; } .entry-navigation a:hover { color: #777777; text-decoration: none; } .entry-navigation__prev { float: left; width: 50%; } .entry-navigation__next { float: right; width: 50%; text-align: right; } /*-------------------------------------------*/ /* Recent posts /*-------------------------------------------*/ .entry-recent-posts { margin: 40px 0 0; } .entry-recent-posts h3.block-title { font-size: 24px; font-size: 1.200rem; padding: 0 0 10px; padding: 0 0 0.500rem; margin: 0 0 30px; margin: 0 0 1.500rem; } .entry-recent-posts h3.block-title span { float: right; font-size: 14px; margin-top: 10px; margin-top: 0.500rem; } .entry-recent-posts .hentry{ width: 31.623931623931625%; float: left; margin-right: 2.564102564102564%; } .entry-recent-posts .hentry:last-child { margin-right: 0; } .entry-recent-posts .hentry p.entry-category { padding: 0; border: none; } .entry-recent-posts .front-posts .hentry .entry-header { padding: 0; margin: 0; border: none; } .entry-recent-posts .front-posts .hentry:last-child { padding-bottom: 0; border-bottom: none; } .entry-recent-posts h2.entry-title a{ font-size: 16px; } /*-----------------------------------------------------------------------------------*/ /* 6.0. Home Sticky Post /*-----------------------------------------------------------------------------------*/ .home-sticky-post { position: relative; margin-top: 30px; margin-bottom: 80px; } .home-sticky-post .featured-image { width: 100%; max-width: 680px; display: inline-block; margin: 0px; } .home-sticky-post .sticky-content { width: 100%; max-width: 620px; display: inline-block; background: #fff; position: absolute; padding: 80px 100px; right: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .home-sticky-post h2.entry-title { position: relative; } .home-sticky-post h2.entry-title a { font-size: 34px; } .home-sticky-post h2.entry-title:before { position: absolute; left: -40px; width: 80px; height: 2px; top: -15px; content: ""; } .home-sticky-post .entry-description a { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 600; color: #000; padding-bottom: 5px; border-bottom: 1px solid #000 } /*-----------------------------------------------------------------------------------*/ /* 7.0. Comments /*-----------------------------------------------------------------------------------*/ .entry-comments { font-size: 88.88888888%; margin: 0; } .comments__toggle { display: inline-block; background: none; font-size: 18px; font-size: 0.900rem; font-weight: 700; line-height: 30px; line-height: 1.500rem; color: #999999; width: 100%; padding: 12px; margin: 0 0 20px; margin: 0 0 1.000rem; text-align: center; border: 1px solid #d9d9d9; } .comments__toggle:hover { background: #f5f5f5; color: #000000; border: 1px solid #d9d9d9; } .comment-title a, .comment-title a:hover { color: #222222; text-decoration: none; } .comments__container { display: none; } .comment-list { list-style: none; margin: 0; } .comment-list>li { margin: 0; } .comment-list article, .comment-list .pingback, .comment-list .trackback { padding: 24px 0 0; padding: 1.200rem 0 0; margin: 0; } .comment-list .children { list-style: none; margin: 0; } .comment-list .children { padding-left: 70px; padding-left: 3.500rem; } .comment-meta { font-family: 'Poppins',serif; } .bypostauthor .comment-author a, .bypostauthor ..comment-author a:hover {} .comment-metadata { font-size: 88.88888888%; margin-bottom: 15px; margin-bottom: 0.750rem; } .comment-metadata a, .comment-metadata a:hover { color: #999999; text-decoration: none; } .comment-author .avatar { float: left; width: 50px; width: 2.500rem; height: 50px; height: 2.500rem; margin: 0 20px 0 0; margin: 0 1.000rem 0 0; position: relative; } .pingback .edit-link { font-size: 88.88888888%; color: #999999; } .comment-metadata .edit-link, .pingback .edit-link { display: inline-block; } .comment-content p { margin: 0 0 15px; margin: 0 0 0.750rem; } .comment-body .comment-content, .comment-body .reply { margin-left: 70px; margin-left: 3.500rem; } .comment-content ul, .comment-content ol { margin: 0 0 24px 30px; margin: 0 0 1.200rem 1.500rem; } .comment-content li>ul, .comment-content li>ol { margin-bottom: 0; } .comment-reply-link { font-family: 'Poppins',serif; font-size: 88.88888888%; } a.comment-reply-link { color: #999999; text-decoration: underline; } a:hover.comment-reply-link { color: #999999; text-decoration: none; } .comment-form { font-size: 100%; } h3.comment-reply-title { font-size: 20px; } .comment-form p label { display: block; font-family: 'Poppins',serif; font-size: 100%; font-weight: 700; margin-bottom: 5px; margin-bottom: 0.250rem; } .comment-form p label .required { color: #f35959; } .comment-form p.comment-subscription-form { margin-bottom: 5px; margin-bottom: 0.250rem; } .comment-list .comment-form { padding-bottom: 30px; padding-bottom: 1.500rem; } .comment-notes, .comment-awaiting-moderation, .logged-in-as, .form-allowed-tags { color: #999999; } .no-comments { border-top: 1px solid #d9d9d9; font-weight: 700; margin: 0; padding-top: 30px; padding-top: 1.500rem; } .comment-navigation+.no-comments { border-top: 0; padding-top: 0; } .form-allowed-tags code { font-family: Inconsolata, monospace; } .form-submit { margin-bottom: 0; } .comment-reply-title small { float: right; } .comment-respond{ margin-top: 30px; } /*-----------------------------------------------------------------------------------*/ /* 8.0. Sidebar /*-----------------------------------------------------------------------------------*/ #sidebar { font-size: 88.88888888%; } #sidebar .widget { margin: 0 0 20px; padding: 20px 30px; border: 1px solid #e9e9e9; } #sidebar .widget:last-child { margin: 0; } .widget h4.widget-title { font-size: 18px; padding: 0 0 5px; margin: 0 0 20px; position: relative; } #sidebar .widget h4.widget-title::after { position: absolute; left: -20px; width: 40px; height: 2px; bottom: -5px; content: ""; } .widget h4.widget-title a { color: #222222; text-decoration: none; } .widget h4.widget-title a:hover { color: #777777; text-decoration: none; } .widget p, .widget address, .widget hr, .widget ul, .widget ol, .widget dl, .widget dd, .widget table { margin-bottom: 20px; margin-bottom: 1.000rem; } .widget li { padding: 0 0 2px; margin: 0 0 2px; } .widget li:last-child { padding: 0; margin: 0; border: none; } .widget ul { list-style: none; margin-left: 0; } .widget ul:last-child { margin-bottom: 0; } .widget li>ul, .widget li>ol { margin-bottom: 0; } .widget blockquote { padding: 15px; padding: 0.750rem; } .widget pre { padding: 15px; padding: 0.750rem; } .widget h1 { font-size: 125%; margin: 0 0 10px; margin: 0 0 0.500rem; } .widget h2 { font-size: 125%; margin: 0 0 10px; margin: 0 0 0.500rem; } .widget h3 { font-size: 125%; margin: 0 0 10px; margin: 0 0 0.500rem; } .widget h4 { font-size: 112.5%; margin: 0 0 10px; margin: 0 0 0.500rem; } .widget h5, .widget h6 { font-size: 100%; margin: 0 0 10px; margin: 0 0 0.500rem; } .widget_calendar caption { font-weight: 700; margin: 0 0 0.500rem; } .widget_calendar td, .widget_calendar th { line-height: 2.6923076923; padding: 0; text-align: center; } .widget_rss .rssSummary:last-child { margin-bottom: 1.500rem; } .tagcloud a { margin: 0 0.2307692308em 0.5384615385em 0; padding: 0.5384615385em 0.4615384615em 0.4615384615em; } ul.instagram-pics { overflow: hidden; } ul.instagram-pics li { float: left; width: 16.66666666%; padding: 0; margin: 0; border: none; } .null-instagram-feed p { margin: 0; } /*-------------------------------------------*/ /* Search /*-------------------------------------------*/ form.search-form { margin: 0; position: relative; } form.search-form input { background: none; margin: 0; } form.search-form button { background: none; color: #999999; color: rgba(0, 0, 0, 0.4); margin: 0; border: 1px solid transparent; -webkit-border-radius: 0; border-radius: 0; position: absolute; top: 0; right: 0; } form.search-form button:hover { color: #222222; } /*-----------------------------------------------------------------------------------*/ /* 9.0. Pages /*-----------------------------------------------------------------------------------*/ .hentry.page .entry-header { padding: 0; margin: 0; border: none; } .hentry.page h1.entry-title { font-size: 44px; font-size: 2.200rem; margin: 0 0 20px; margin: 0 0 1.000rem; } .content_full-width .hentry.page h1.entry-title { display: none; text-align: center; } /*-----------------------------------------------------------------------------------*/ /* 10.0. Archive /*-----------------------------------------------------------------------------------*/ .page-header { padding: 0; margin: 0; border: none; border-bottom: 1px solid #e9e9e9; margin-bottom: 30px; } h1.page-title { font-size: 24px; } .taxonomy-description { color: #999999; margin-bottom: 20px; } /*-----------------------------------------------------------------------------------*/ /* 11.0. No Results or Not Found /*-----------------------------------------------------------------------------------*/ .hentry.page.no-results { margin: 0; } .page-content form.search-form { margin: 0 0 45px; margin: 0 0 2.250rem; position: relative; } .page-content form.search-form input { margin: 0; } .page-content form.search-form button { background: none; color: #999999; border: 1px solid transparent; -webkit-border-radius: 0; border-radius: 0; position: absolute; top: 0; right: 0; } .page-content__archives { margin: 0; } .page-content__archives ul { list-style: none; padding: 0 0 24px; padding: 0 0 1.200rem; margin: 0 0 24px; margin: 0 0 1.200rem; border-bottom: 1px dotted rgba(0, 0, 0, 0.1); } .page-content__archives ul:last-child { border: none; } /*-----------------------------------------------------------------------------------*/ /* 12.0. Pagination /*-----------------------------------------------------------------------------------*/ .pagination { font-size: 12px; font-weight: 600; margin: 10px 0 0; text-align: center; } .pagination span.current { display: inline-block; color: #222222; line-height: 36px; height: 38px; padding: 0 12px; margin-right: 2px; text-align: center; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d9d9d9; text-align: center; } .pagination a { display: inline-block; color: #999999; line-height: 36px; height: 38px; padding: 0 12px; margin-right: 2px; text-align: center; text-decoration: none; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d9d9d9; text-align: center; } .pagination a:hover { color: #222222; text-decoration: none; -webkit-border-radius: 2px; border-radius: 2px; } .pagination a.next { float: right; letter-spacing: 3px; } .pagination a.prev { float: left; letter-spacing: 3px; } /*-----------------------------------------------------------------------------------*/ /* 12.0. Breadcrumbs /*-----------------------------------------------------------------------------------*/ .breadcrumbs { font-size: 14px; font-size: 0.700rem; color: #999999; margin: 0 0 10px; margin: 0 0 0.500rem; } .breadcrumbs a { color: #999999; text-decoration: none; } .breadcrumbs a:hover { color: #999999; text-decoration: none; } .breadcrumbs span.sep { margin: 0 5px; } /*-----------------------------------------------------------------------------------*/ /* 14.0. Search Overlay /*-----------------------------------------------------------------------------------*/ .search-overlay { display: none; background: #222; width: 100%; padding: 15px 0; padding: 0.750rem 0; margin: 0; position: absolute; top: 100%; left: 0; right: 0; z-index: 999; } html.search-overlay__active .search-overlay { display: block; } .search-overlay form.search-form input[type="text"] { font-size: 40px; font-size: 2.000rem; font-weight: 700; line-height: 40px; line-height: 2.000rem; color: #ffffff; padding: 0; margin: 0; border: none; -webkit-box-shadow: none; box-shadow: none; } .search-overlay form.search-form button { display: none; } .search-overlay .search-overlay__close { display: inline-block; font-size: 24px; font-weight: 700; line-height: 24px; color: #fff; width: 24px; height: 24px; padding: 0; margin: 0; text-align: center; text-decoration: none; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 12px; top: 0.600rem; right: 0; } .search-overlay .search-overlay__close:hover { color: #666666; text-decoration: none; } /*-----------------------------------------------------------------------------------*/ @media only screen and (max-width: 1100px) { .primary-nav div>ul>li { padding-right: 15px; } } /* 16.0. Responsive /*-----------------------------------------------------------------------------------*/ /* Desktop > 1024 /*-------------------------------------------*/ @media only screen and (min-width: 1024px) { .primary-nav ul li:hover.menu-item-has-children ul, .primary-nav ul li:hover.page_item_has_children ul { display: block; } .primary-nav ul li.menu-item-has-children ul li:hover.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul li:hover.page_item_has_children ul { display: block; } } /*-------------------------------------------*/ /* Tablet < 1024 /*-------------------------------------------*/ @media (max-width: 1023px) { /*-----------------------------------------------------------------------------------*/ /* Header /*-----------------------------------------------------------------------------------*/ .logo h1.site-logo, .logo p.site-logo { font-size: 36px; line-height: 60px; } .logo h1.site-logo img, .logo p.site-logo img { display: block; max-height: 60px; } .header-icons { display: none; } .site-header .site-row { position: relative; } .primary-nav { display: none; float: none; margin: 0; text-align: left; position: absolute; top: 149%; width: 100%; z-index: 99; } .primary-nav div>ul>li { float: none; padding: 0; margin: 0; position: relative; display: block; background: #fff; border-bottom: 1px solid #e9e9e9; } .primary-nav ul li a { display: block; position: relative; } .primary-nav ul li.menu-item-has-children .sub-toggle { position: absolute; top: 11px; right: 15px; background-color: #ccc; height: 20px; width: 20px; text-align: center; line-height: 20px; color: #fff; cursor: pointer; display: block; } .primary-nav ul li.menu-item-has-children ul, .primary-nav ul li.page_item_has_children ul { position: static; -webkit-box-shadow: none; box-shadow: none; } .mobile-search__menu-slide { display: block; } .menu-slide__button { display: inline-block; } #content { width: 100%; padding: 0; border: none; float: none; } #sidebar { float: none; width: 100%; margin-top: 60px; margin-top: 3.000rem; } .content__right { margin: 0; } .home-sticky-post .sticky-content { padding: 40px 80px; } } /*-------------------------------------------*/ /* Tablet < 800 /*-------------------------------------------*/ @media (max-width: 799px) { /*-----------------------------------------------------------------------------------*/ /* Global /*-----------------------------------------------------------------------------------*/ .site-row { max-width: 680px; } /*-----------------------------------------------------------------------------------*/ /* Main /*-----------------------------------------------------------------------------------*/ .content__sidebar { margin: 0; } .hentry .featured-image img { width: 100%; } .comment-list .children .children .children { padding-left: 0; } } /*-------------------------------------------*/ /* Smartphone < 768 /*-------------------------------------------*/ @media (max-width: 767px) { /*-----------------------------------------------------------------------------------*/ /* Global /*-----------------------------------------------------------------------------------*/ html { font-size: 16px; } body { font-size: 16px; } .site-wrap { padding: 0 20px; } .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: none; margin-right: 0; width: 100%; } /*-----------------------------------------------------------------------------------*/ /* Header /*-----------------------------------------------------------------------------------*/ .site-header { } .logo-wrapper { padding: 10px 0 !important; line-height: 40px !important; } .logo a { font-size: 26px; line-height: 40px !important; } .logo a img { max-height: 40px !important; } /*-----------------------------------------------------------------------------------*/ /* Main /*-----------------------------------------------------------------------------------*/ .hentry h1.entry-title { font-size: 24px; } blockquote.alignleft { max-width: 100%; margin: 24px 0; margin: 1.200rem 0; } blockquote.alignright { max-width: 100%; margin: 24px 0; margin: 1.200rem 0; } .site-main { margin: 2.000rem 0; } .entry-navigation__prev { width: 100%; } .entry-navigation__next { float: left; width: 100%; margin: 20px 0 0; padding-top:20px; border-top:1px solid #e9e9e9; text-align: left; } .hentry .featured-image { width: 100%; max-width: 100%; position: relative; display: block; float: none; } .front-posts .hentry.has-post-thumbnail .entry-content { max-width: 100%; max-width: 100%; position: static; top: initial; -webkit-transform: none; -ms-transform: none; transform: none; } .front-posts .hentry:hover .entry-content { margin-left: 0px; } .home-sticky-post .featured-image { float: none; } .home-sticky-post .sticky-content { width: 94%; display: inline-block; background: #fff; position: relative; right: initial; top: initial; -webkit-transform: none; -ms-transform: none; transform: none; margin: -10% auto 0; display: block; z-index: 99; } .single .has-meta .entry-meta { width: 100%; float: none; text-align: left; margin-bottom: 30px; } .single .has-meta .entry-content { float: none; width: 100%; } .author-image, .entry-author, .entry-time { display: inline-block; text-align: left; vertical-align: bottom; } .single .entry-meta span.entry-author a { padding: 0; } .hentry p.entry-meta img { max-width: 30px; margin-right: 15px; } .footer-widgets .widget-area{ margin-bottom:30px; } .footer-widgets .widget-area:last-child{ margin-bottom:0px; } } @media only screen and (max-width: 600px) { .home-sticky-post .sticky-content { padding: 30px; } .home-sticky-post h2.entry-title:before { left: -15px; width: 30px; } .home-sticky-post h2.entry-title a { font-size: 18px; } .front-posts .hentry .entry-content{ padding: 20px 10px; } .search-overlay form.search-form input[type="text"]{ font-size: 1.000rem; font-weight: 500; } .search-overlay .search-overlay__close{ top: 6px; } .entry-recent-posts h2.entry-title a { font-size: 12px; line-height: 16px; } .single .featured-image { margin-bottom: 20px; } } /*-----------------------------------------------------------------------------------*/ /* 17.0. Print /*-----------------------------------------------------------------------------------*/ @media print { body { background: none !important; } form, button, input, select, textarea, #menu-slide, #search-overlay, #header, #sidebar, #footer, .pagination, .entry-share, .entry-footer, .related-posts, .author-box, .entry-navigation, .entry-recent-posts, .page-links, .edit-link, .comment-respond, .comment-edit-link, .comment-reply-link, .comment-metadata .edit-link, .pingback .edit-link { display: none !important; } .site-wrap { padding: 0; } .site-row { max-width: none; } #content { float: none; width: 100%; padding: 0; margin: 0; border: none; } .content__right { margin: 0; } .hentry { width: 100%; padding: 0; margin: 0; } hr { background-color: rgba(0, 0, 0, 0.1) !important; /* Make sure color schemes don't affect to print */ border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* Make sure color schemes don't affect to print */ } a { color: #000000 !important; /* Make sure color schemes don't affect to print */ border-bottom: 1px solid #000000 !important; /* Make sure color schemes don't affect to print */ } pre, abbr, acronym, table, th, td { border-color: rgba(0, 0, 0, 0.1) !important; /* Make sure color schemes don't affect to print */ } }