/*! Theme Name: Blog Writer Theme URI: https://www.bloggingthemestyles.com/free-wordpress-themes/blog-writer/ Author: Blogging Theme Styles Author URI: https://www.bloggingthemestyles.com Description: Blog Writer is a clean and minimal blog theme that is built for writers who need to create a personal blog site with simplicity and suttle effects to make readers feel the pleasure of reading your articles. The design concept for Blog Writer includes modern, classic, and minimal styles to give you a simple and clean blog. For bloggers, this is truely a perfect choice for you if you want to only focus on creating amazing stories. It’s super simple and easy to setup while giving you a well crafted blog right out of the box. Enjoy several blog styled layouts that includes a grid layout option, theme customizer, page templates, styled WP Gallery, unlimited colours and more...Be sure to read more About Blog Writer under the Appearance admin menu. Version: 1.0.4 License: GPLv3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.en.html Text Domain: blog-writer Tags: blog, news, grid-layout, theme-options, custom-background, custom-logo, custom-menu, featured-images, sticky-post, right-sidebar, left-sidebar, footer-widgets, custom-colors, translation-ready Blog Writer (C) 2018 www.bloggingthemestyles.com Blog Writer is distributed under the terms of the GNU GPL v3 or later. Use it to make something cool, have fun, and share what you've learned with others. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none} /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: #afbfbf; background: #414347; color: #424242; font-family: Arial, sans-serif; font-size: 100%; line-height: 1.6; -ms-word-wrap: break-word; word-wrap: break-word; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #000; clear: both; font-family: "Times New Roman", Georgia,serif; font-weight: 400; letter-spacing: -0.5px; line-height: 90%; margin: 0 0 2.5%; } h1 { font-size:210%; } h2 { font-size: 190%; } h3 { font-size: 175%; margin-bottom: 2%; } h4 { font-size: 150%; margin-bottom: 1.75%; } h5 { font-size: 130%; margin-bottom: 1.688%; } h6 { font-size: 125%; margin-bottom: 1.5%; } h1.entry-title { font-size: 230%; } .entry-title { font-weight: 600; } .widget-title { font-size: 150%; font-weight: 700; margin-bottom: 1rem; } #footer-sidebar .widget-title:after { border-bottom: none; margin: inherit; } p { margin: 0 0 1.6rem; } .lead { font-size: 120%; color: #9b9b9b; letter-spacing: 0.25px; line-height: 1.4; margin: auto; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: #e4a14f; text-decoration: none; } a:visited { color: #b57732; } a:hover, a:focus, a:active { color: #b57732; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* make links in main content bold */ .entry-content p a { font-weight: 700; } #left-sidebar .widget li a, #left-sidebar .widget li a:visited, #right-sidebar .widget li a, #right-sidebar .widget li a:visited { color: inherit; } #left-sidebar .widget li a:focus, #left-sidebar .widget li a:hover, #right-sidebar .widget li a:focus, #right-sidebar .widget li a:hover { color: #b57732; } /* edit link */ ul.entry-footer { list-style: none; margin-left: 0; } .page .edit-link a { padding: 2px 12px !important; color: #fff; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ hr { background-color: #dedede; border: 0; height: 1px; margin-bottom: 1.5em; } hr.spacer { background: transparent; height: 2.5rem; margin: 0; } ul, ol { margin: 0 0 1.75em 1.25em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; margin-left: 1.5em; } li > ul, li > ol { margin-bottom: 0; } dl { margin: 0 0 1.75em; } dt { font-weight: 700; } dd { margin: 0 1rem 1.75em; } /* blockquotes */ blockquote { border-radius: 20px; color: #808080; display: block; background: #f5f5f5; padding: 15px 20px 15px 55px; margin: 0 0 30px; position: relative; font-family: Georgia, serif; font-size: 105%; font-style: italic; line-height: 1.2; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 3.750rem; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:3px; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote p { margin-bottom: 1rem; } blockquote p:last-child { margin-bottom: 0; } blockquote a{ text-decoration: none; cursor: pointer; padding: 0 3px; } blockquote a:hover{ opacity: 0.8; } blockquote cite { font-size: 0.813rem; opacity: 0.7; } blockquote cite:before { content: "\2014"; font-family: Arial,sans-serif; } blockquote.alignleft, blockquote.alignright { margin-bottom: 0; } figure { /* Extra wide images within figure tags don't overflow the content area. */ margin: 1em 0; position: relative; } table { border-collapse: collapse; border-spacing: 0; border-bottom: 1px solid #efefef; border-color: #ebebeb; margin: 1rem 0 2rem; text-align: left; width: 100%; } table caption { color: #989898; padding: 0 0 5px 0; width: auto; font-style: italic; text-align: right; font-size: 12px; } thead th { background-color: #dcdcdc; color: #222; } th, td { padding: 6px } th { font-size: 0.75rem; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; padding: 9px 12px; border: 1px solid #ebebeb; border-left: none; border-top: none; } tr:nth-child(odd) { background: #f8f8f8; } tr th:first-child, tr td:first-child { border-color: #ebebeb; border-left-style: solid; border-left-width: 1px; } tr:first-child th, tr:first-child td { border-color: #ebebeb; border-top-style: solid; border-top-width: 1px; } td { padding: 9px 12px; border: 1px solid #ebebeb; border-left: none; border-top: none; } tr th:first-child, tr td:first-child { border-color: #ebebeb; border-left-style: solid; border-left-width: 1px; } /* code */ code { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 1rem; font-size: 0.9375rem; padding: 0 0.5rem; } code { background-color: #eeeeee; color: #b74747; } pre { position: relative; max-width: 800px; padding: 30px 15px; background: #f7f7f7; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; font-size: 0.938rem; color: #656565; border-left: 10px solid #ccc; } pre code { padding: 0; color: #3f3b36; background-color: transparent; font-size: 1rem; } /* Media element - bootstrap */ .media, .media-body { zoom: 1; overflow: hidden; } .media-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 10000px; display: table-cell; vertical-align: top; } .media-heading { margin-top: 0; margin-bottom: 5px; } .media-list { padding-left: 0; list-style: none; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #masthead { max-width: 1200px; margin: auto; padding: 0 20px; } #site-branding { margin: 0 auto 0 0; max-width: 100%; min-width: 0; overflow: hidden; } #site-title { font-size: 250%; font-weight: 600; margin: 0; line-height: 1; } #site-title a { text-decoration: none; color: #000; } #site-description { margin: 0; font-size: 0.875rem; font-style: italic; color: #9b9b9b; } .site-header-main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #site-branding { margin: 0 auto 0 0; /* Avoid overflowing wide custom logo in small screens in Firefox and IEs */ max-width: 100%; min-width: 0; overflow: hidden; } .custom-logo-link { display: block; } .custom-logo { max-width: 120px; } .wp-custom-logo .site-title { margin-top: 0.608695652em; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ #page { background-color: #fff; margin: auto; padding-top: 2.5%; -webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.20); } #main {} #content { margin: 20px auto 3rem; } .blog #content, .archive #content, .search #content { margin-top: 40px; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #site-footer { background-color: #000; font-size: 80%; letter-spacing: 0.5px; line-height: 1; padding: 20px 0; } #site-footer, #site-footer a, #site-footer a:visited { color: #bbb; } #site-footer a:hover { opacity: 0.8; } .copyright, .footer-social { padding: 5px 0; text-align: center; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .blog #page-header, .archive #page-header { text-align: left; margin-bottom: 2.5rem; } .blog .page-title, .archive .page-title { margin-bottom: 1rem; } .page-title { font-weight: 700; } .sticky { display: block; } .sticky-post { border-radius: 0 12px 12px 0; position: absolute; background-color: #cea26d; color: #fff; z-index: 5; padding: 0 25px 0 20px; top: 20px; letter-spacing: 1px; font-style: italic; } .hentry { margin: 0 auto 3rem; } .hentry:last-child, .search .hentry { margin-bottom: 1rem; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { font-size: 107%; line-height: 150%; margin: 1.5rem 0 0; } .search .entry-summary { margin-top: 1rem; } .page-links { clear: both; margin: 0 0 1.5rem; } /* entry titles */ .blog .entry-title, .archive .entry-title, .search .entry-title { font-size: 190%; margin-bottom: 0.5rem; } .entry-title a, .entry-title a:visited { color: inherit; } .entry-title a:hover { opacity: 0.7; } /* featured images */ .featured-image { display: block; overflow: hidden; position: relative; } .page .featured-image { margin-top: 5px; margin-bottom: 2rem; } /* meta info */ .entry-meta { font-size: 80%; list-style: none; margin-left: 0; } .entry-meta li { display: inline; margin-right: 0.688rem; } .entry-meta li::last-child { margin-right: 0; } .entry-meta, .entry-meta a, .entry-meta a:visited { color: #9b9b9b; letter-spacing: 0.25px; } .entry-meta a:focus, .entry-meta a:hover { color: #cc8c45; } .entry-meta li:after { content: "\2013"; position: relative; left: 6px; } .entry-meta li:last-child::after { content: ""; } /* read more link */ .more-link-wrapper { margin: 0; } .readmore, .readmore:visited { background-color: transparent; border: 1px solid #d1d1d1; padding: 1% 2%; border-radius: 30px; font-size: 0.75rem; letter-spacing: 1px; line-height: 1; } .readmore:focus, .readmore:hover { background-color: #0f0f0f; border: 1px solid #0f0f0f; color: #fff; } .excerpt-readmore { font-size: 0.875rem; font-style: italic; } /* image overlay for photowall */ .image-wrapper { display: inline-block; overflow: hidden; position: relative; cursor: default; } .image-wrapper img { display: block; position: relative; } .image-overlay { background-color: rgba(0,0,0,0.3); background-attachment: fixed; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; padding: 1.25rem; height: 100%; } .image-overlay .caption { color: #fff; position: relative; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .image-wrapper:hover .image-overlay { cursor: pointer; opacity: 1; } .image-overlay-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* blog 6 - 8 Grid */ #grid { list-style: none; } #grid li { margin-bottom: 2rem; } #grid .featured-image { margin-bottom: 2rem; } /* blog 9-11 Masonry */ #masonry-layout { margin:0 -20px 1.25rem; } #masonry-layout .hentry, #masonry-layout .grid-sizer { width:100%; } #masonry-layout .hentry { margin-bottom: 2rem; padding: 0 20px 0; text-align: left; } #masonry-layout .featured-image { margin-bottom: 1.75rem; } #masonry-layout .entry-title { font-size: 160%; } /* blog 12 - Centered */ .blog12 #page-header { text-align: center; } .blog12 .hentry { text-align: center; } .blog12 .featured-image { display: inline-block; } .blog12 .entry-content { max-width: 800px; margin-left: auto; margin-right: auto; } /* blog 13 - Photowall */ #blog-photowall { list-style: none; } #blog-photowall li { margin-bottom: 30px; } #blog-photowall .entry-title { color: #fff; font-size: 150%; } #blog-photowall .entry-meta { font-size: 90%; } #blog-photowall .entry-meta, #blog-photowall .entry-meta a, #blog-photowall .entry-meta a:visited { color: #d1d1d1; } #blog-photowall .entry-meta a:focus, #blog-photowall .entry-meta a:hover {} /* blog 14 - Alternating */ .blog14 .featured-image { display: inline-block; } .blog14 .featured-image, .blog14 .entry-content { float: none; max-width: 100%; margin-bottom: 1.5rem; } .blog14 .entry-title { font-size: 170%; } .blog14 .entry-meta { margin-bottom: 1rem; } .blog14 .entry-content { margin-bottom: 0; text-align: left; } .blog14 .hentry.odd .entry-content, .blog14 .hentry.even .entry-content, .blog14 .hentry.odd .featured-image, .blog14 .hentry.even .featured-image { padding: 0; } .blog14 .hentry { background-color: #f5f5f5; display: table; margin-bottom: 2.5rem; padding: 0; } /* Single - full post */ .single .entry-title { margin-bottom: 0.5rem; } .single .featured-image { margin-bottom: 2.5rem; } .single .hentry { margin-bottom: 2rem; } /* post footer info */ #entry-footer { border-top: 1px solid #dedede; padding-top: 2rem; margin-top: 1rem; } #entry-footer li { display: inline-block; font-size: 0.875rem; margin-right: 0.5rem; } #entry-footer ul { margin: 0 0 6px 6px; padding: 0; display: inline; } #entry-footer p { display: inline; margin-bottom: 5px; font-size: 0.75rem; text-transform: uppercase; } .tag-list { list-style: none; } .tag-list a, .tag-list a:visited { background-color: transparent; border: 1px solid #dedede; padding: 2px 10px; border-radius: 10px; } .tag-list a:hover { background-color: #cea26d; border-color: #cea26d; color: #fff; } /* Author Info */ #author-info { border-top: 1px solid #dedede; display: table; margin-bottom: 1.75rem; padding: 1.75rem 0 0; } #author-avatar { float: left; margin-right: 1.5rem; } #author-info .avatar { border-radius: 50%; border: 5px solid #dedede; } #author-description { overflow: hidden; } #author-title { font-family: inherit; font-size: 1rem; margin-bottom: 0.5rem; color: #000; } #author-title::after { border: none; margin: 0; } #author-bio { font-size: 0.938rem; margin-bottom: 0; } #author-bio #author-link { margin-top: 5px; display: block; font-style: italic; } /* Related Posts */ #related-posts { list-style: none; } #related-posts-thumbnail { margin-bottom: 1rem; } #related-posts-title { font-family: inherit; font-size: 90%; line-height: 1.2; } #related-posts-heading { border-top: 1px solid #dedede; font-family: inherit; font-size: 110%; padding-top: 2rem; } #related-posts-thumbnail img:hover { opacity: 0.8; } /*-------------------------------------------------------------- ## Full Width Short - template --------------------------------------------------------------*/ .full-width-short .hentry { max-width: 980px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------------- # Error Page -------------------------------------------------------------------------------- */ #error-box { width: 100%; margin: 3rem auto; text-align: center; } #error-text { font-size: 1.5rem; margin-bottom: 1.25rem; } #error-text:after { margin: 20px auto 12px; } #error-type { color: #cea26d; font-family: "Times New Roman",Georgia,serif; font-size: 5rem; font-weight: 700; line-height: 1; margin-bottom: 15px; } #error-content { font-size: 0.938rem; width: 90%; margin: auto; line-height: 1.35; opacity: 0.6; } /* -------------------------------------------------------------------------------- # Attachments Page -------------------------------------------------------------------------------- */ #attachment-view { margin: auto; text-align: center; } .attachment .post-header { margin-bottom: 2rem; } .attachment .hentry { text-align: center; } #attachment-wrapper { background-color: #000; margin-bottom: 1.75rem; } #attachment-wrapper img { display:block; margin: auto; } #attachment-description { margin: 0 auto; } .attachment .entry-title { font-weight: 700; margin-bottom: 0; text-align: center; } .attachment .gallery-post-caption { font-family: inherit; color: #000; } .attachment .gallery-post-caption p { font-size: 2rem; font-weight: 400; margin-bottom: 1rem; } .post-caption .more-link { display: none; } .attachment #comments, .attachment #respond { margin: auto; max-width: 960px; } #image-navigation { height: 40px; display: table; margin: 2rem auto; } .prev-image, .next-image { display: inline-block; margin: 0 2px; } .attachment .form-submit { text-align: center; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .full-width-short .hentry { max-width: 980px; margin-left: auto; margin-right: auto; } .bypostauthor {} #comments { margin-top: 2rem; } .comments-list { margin: 0 0 2rem 0; } .comments-list ul.children { margin-left: 2rem; } .post_comments_box { border-top: 1px solid #e7e7e7; margin-top: -1px; } .post_comments_box h4.page-header { margin-top:0; margin-bottom: 16px; } .commenter { float: left; } .commenter_name { font-size: 1.125rem; font-weight: 700; font-style: normal; margin-top: 0; margin-bottom: 2px; } .commenter_name a { color: inherit; } .comment_info { color: #9b9b9b; font-size: 0.813rem; line-height: 1; } .comment_info a.comment_time { color: #9b9b9b; } .commenter .avatar { border: 3px solid #dedede; border-radius: 50%; margin-right: 1rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .comments-list .children .avatar { width: 48px; border-width: 2px; } .logged_in_name { color: #3d3d3d; } h3.comment-reply-title { margin-bottom: 1px; } h3.comment-reply-title > a { color: #3d3d3d; font-weight: bold; } h3.comment-reply-title small { } .media.the_comment { border-bottom: 1px dotted #ddd; padding-bottom: 11px; display: inline-block; } .media.the_comment:last-child { } .media.the_comment .children { padding: 0; margin-top: 32px; } .comment_content_wrapper { border-left: 1px solid #ececec; padding-left: 20px; } .children .comment_content_wrapper { border-left: 0; padding-left: 0; } .children .media.the_comment > .commenter { padding-right: 10px; } .children .media.the_comment { margin-bottom: 0px; margin-top: 20px; border-bottom: 0; padding-bottom: 0; display: inline-block; } .show_no_avatars .comment_content_wrapper { border-left: none; padding-left: 0; } .show_no_avatars .media.the_comment .children { padding-left: 25px; } header.comment-meta { margin-bottom: 1rem; } .comments-list .media { margin-top: 0; } .comment_body .media-heading { margin: 0 0 3px; } .comment_body p { line-height: 1.5; } .comment_body p a { color: inherit; border-bottom: 1px dotted #000; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .comment_body p a:hover { color: #f47e00; border-bottom-color: #f47e00; } .comments-list .media a, .post.pingback a { color: inherit; } .post.pingback a:hover { border-bottom: 1px dotted #333; } .post.pingback .edit-link a:hover { border-bottom: none; } /* Comments Form */ .comment-form-column-wrapper { margin: 0 -10px 10px; } .comment-form-column { width: 33.3333%; float: left; padding: 0 10px; } .comment-form p { margin-bottom: 10px; } p.logged-in-as a { color: inherit; } .comment-notes { font-size: 0.75rem; font-style: italic; } .comment-awaiting-moderation { font-style: italic; background-color: #7dafd2; color: #fff; border-radius: 6px; position: relative; top: 20px; padding: 0 12px; } .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { width: 100%; } /*-------------------------------------------------------------- # Transitions --------------------------------------------------------------*/ body a { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .widget ul li, .widget_recent_entries a, .search-toggle.active .metal, .search-toggle.active .handle, a.more-link, a img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } button, input[type=button], input[type=reset], input[type=submit] { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .image-wrapper:hover .image-overlay, .featured-image img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .featured-image:hover img { -webkit-transform: scale(1.025); -moz-transform: scale(1.025); -ms-transform: scale(1.025); -o-transform: scale(1.025); transform: scale(1.025); } .single .featured-image:hover img { transform: none; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .menu-toggle { background-color: #d4b48f; border: 1px solid #d4b48f; color: #fff; font-size: 13px; font-size: 0.85rem; margin: 1.063rem 0; padding: 0.75rem 1rem; } .no-js .menu-toggle { display: none; } .menu-toggle:hover, .menu-toggle:focus { background-color: #0f0f0f; border-color: #0f0f0f; color: #fff; } .menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus { background-color: #0f0f0f; border-color: #0f0f0f; color: #fff; } .menu-toggle:focus { outline: 0; } .menu-toggle.toggled-on:focus { outline: thin dotted; } .site-header-menu { display: none; -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; } .site-header-menu.toggled-on, .no-js .site-header-menu { display: block; margin-top: 1rem; } .site-footer .main-navigation { margin-bottom: 1.75rem; } .main-navigation .primary-menu { /* border-bottom: 1px solid #d1d1d1; */ font-size: 1.125rem; text-transform: lowercase; } .main-navigation ul { list-style: none; margin: 0; padding:0; } .main-navigation li { /* border-top: 1px solid #d1d1d1; */ position: relative; } .toggled-on .main-navigation li { border-top: 1px solid #d1d1d1; } .main-navigation a { border-bottom: 2px solid transparent; color: #1a1a1a; display: block; line-height: 1.313; outline-offset: -1px; padding: 0.875rem 0 0.75rem; } .main-navigation a:hover, .main-navigation a:focus { color: #d6b895; border-bottom: 2px solid #d6b895; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; border-bottom: 2px solid #d6b895; } .main-navigation li li > a:hover { /* border-bottom: 2px solid transparent; */ border-bottom: 2px solid #d6b895; } .toggled-on .main-navigation a { border-color:transparent !important; } .main-navigation ul ul { display: none; font-size: 0.938rem; margin-left: 0.875rem; padding-left: 0; /* prepare submenu for animated on hover */ opacity:0; transition:visibility 0s linear 0.4s, opacity 0.4s linear; } .no-js .main-navigation ul ul { display: block; } .main-navigation ul .toggled-on { display: block; opacity: 1; text-align: left; } .main-navigation .menu-item-has-children > a { margin-right: 56px; } .dropdown-toggle { background-color: transparent; border: 0; border-radius: 0; color: #1a1a1a; content: ""; height: 49px; padding: 0; position: absolute; right: 0; text-transform: none; top: -1px; width: 56px; } .dropdown-toggle:after { cursor: pointer; display: block; border: 0 solid #d1d1d1; border-left-width: 1px; content: "\21E9"; font-size: 26px; left: 1px; position: relative; padding-left: 0; text-align: center; } .dropdown-toggle:hover, .dropdown-toggle:focus { background-color: transparent; color: #d6b895; } .dropdown-toggle:focus { outline: thin dotted; outline-offset: -1px; } .dropdown-toggle:focus:after { border-color: transparent; } .dropdown-toggle.toggled-on:after { content: "\21E7"; } /*-------------------------------------------------------------- # Navigation - Social Menu --------------------------------------------------------------*/ .site-header .main-navigation + .social-navigation { margin-top: 1.75em; } .site-header .social-navigation ul { list-style: none; margin: 0 0 -0.4375em; } .site-header .social-navigation li { float: left; margin: 0 0.4375em 0.4375em 0; } .social-menu { list-style: none; margin: 0; padding: 0; } .social-menu li { display: inline-block; margin: 0 5px; } /*-------------------------------------------------------------- # Navigation - Blog Pagination --------------------------------------------------------------*/ .pagination { margin-top: 2rem; } .nav-links { border-top: 1px solid #dedede; padding: 12px 0 0; font-size: 0.875rem; letter-spacing: 0.25px; line-height: 1; text-align: center; text-transform: uppercase; } .nav-links a, .nav-links a:visited { color: inherit; } .nav-links .nav-arrow { bottom: 1px; position: relative; margin: 0 4px; } .prev.page-numbers { float: left; } .next.page-numbers { float: right; } .page-numbers { display: inline-block; font-weight: 700; margin: 0 8px; } .prev.page-numbers, .next.page-numbers { margin: 0; } .page-numbers.current, .page-numbers:hover, .page-numbers:visited:hover { color: #cc8c45; } /* full post nav */ .single .nav-links { background-color: #f7f7f7; padding: 12px 12px 7px; border: none; } .single .nav-links p { margin-bottom: 7px; } .single .nav-previous, .single .nav-next { max-width: 48%; } .single .nav-previous { float: left; text-align: left; } .single .nav-next { float: right; text-align: right; } .single .meta-nav { font-weight: 700; } .post-title { text-transform: initial; } .nav-arrow-prev, .nav-arrow-next { position: relative; bottom: 2px; } .nav-arrow-next { margin-left: 4px; } .nav-arrow-prev { margin-right: 4px; } /*-------------------------------------------------------------- # Footer Menu --------------------------------------------------------------*/ #footer-nav { margin-bottom: 8px; } #footer-menu { list-style: none; margin: 0; padding:0; } #footer-menu li { display: inline; margin: 0; } #footer-menu li:after { content: "\2013"; margin-left: 4px; font-size: 0.5rem; display: inline-block; vertical-align: middle; } #footer-menu li:last-child:after { display: none; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .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; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin: 0 1.5rem 1rem 0; } .alignright { display: inline; float: right; margin-left: 1.5em; margin: 0 0 1rem 1.5rem; } .aligncenter { clear: both; display: block; margin: 0 auto 2rem; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .entry-summary:before, .entry-summary:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after, .primary-menu:before, .primary-menu:after, .social-menu:before, .social-menu:after, .nav-links:before, .nav-links:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .entry-summary:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after, .primary-menu:after, .social-menu:after, .nav-links:after { clear: both; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ vertical-align: middle; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { padding: 8px 0 0; text-align: center; } /* For small thumbnails that leaves very little caption space */ .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin: 3rem -20px 0; } .entry-content .gallery { margin: 3rem -20px 2rem; } .gallery-item { display: inline-block; margin: 5px 0 2rem; padding: 0 20px; text-align: center; vertical-align: top; width: 100%; } .gallery-icon { text-align: center; } .gallery-icon img { display: block; margin: auto; } .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item { max-width: 100%; } .gallery-caption { letter-spacing: 1px; display: inline; font-size: 0.875rem; font-weight: 700; padding: 0.75rem 0; margin-bottom: 1rem; position: relative; top: 10px; width: 90%; } /*-------------------------------------------------------------- # Sidebars --------------------------------------------------------------*/ /* breadcrumbs */ #breadcrumbs-sidebar { border-radius: 0 20px 20px 0; font-size: 0.813rem; font-style: italic; max-width: 1160px; padding: 13px 20px; line-height: 1; margin: 20px; background-color: #ececec; text-align: right; } #breadcrumbs-sidebar, #breadcrumbs-sidebar a, #breadcrumbs-sidebar a:visited { color: #8e8e8e; text-decoration: none; } #breadcrumbs-sidebar a:hover { opacity: 0.7; } /* banner */ #banner { margin: 25px auto 3rem; } #banner figure { margin: 0 auto; } /* left and right sidebar */ #left-sidebar, #right-sidebar { padding-top: 5px; } /* inset top sidebar */ #inset-top { padding-top: 5px; } /* bottom sidebar */ #bottom-sidebar { background-color: #232323; } #bottom-sidebar, #bottom-sidebar a, #bottom-sidebar a:visited { color: #bbb; } #bottom-sidebar a:focus, #bottom-sidebar a:hover { color: #d4b48f; } /* footer sidebar */ #footer-sidebar { line-height: 1.5; } #footer-sidebar, #footer-sidebar a, #footer-sidebar a:visited { color: inherit; } #footer-sidebar a:hover { text-decoration: underline; } #footer-sidebar .widget { margin-bottom: 1rem; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5rem; } .widget select { max-width: 100%; } .widget-area { font-size: 90%; } #breadcrumbs-sidebar .widget, #banner .widget, .widget p:last-child { margin-bottom: 0; } #inset-top .widget { margin-bottom: 2rem; } #inset-bottom .widget { margin-top: 1rem; margin-bottom: 0; } .blog #inset-bottom .widget, .archive #inset-bottom .widget { margin-top: 3rem; } #bottom-sidebar .widget { margin: 3rem 0; } #bottom-sidebar .widget-title { font-size: 150%; } #bottom-sidebar .widget-title, #footer-sidebar .widget-title { color: inherit; } .widget ul { list-style: none; margin-left: 0; } .widget li { border-bottom: 1px solid rgba(0, 0, 0, 0.05); line-height: 1.3; padding: 8px 0; } .widget li:last-child { border: none; } #bottom-sidebar .widget li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); line-height: 1.3; padding: 8px 0; } #bottom-sidebar .widget li:last-child { border: none; } /* WordPress image widget - for the banner sidebar. * Adds the image caption with basic html as an overlay and is only available when used in the #banner sidebar. */ #banner figcaption.wp-caption-text span { display: block; padding: 0 1rem; line-height: 1; color: #fff; text-align: right; } #banner figure figcaption.wp-caption-text { background-color: rgba(0,0,0,0.5); position: absolute; bottom: 5px; right: 0; padding: 5px; } #banner figcaption.wp-caption-text span:first-of-type { font-family: "Times New Roman", Georgia, serif; font-size: 1.25rem; } #banner figcaption.wp-caption-text span:last-of-type { font-size: 0.75rem; } /* recent posts with thumbnail */ .blog-writer-recent-posts { margin: 0; padding-top: 5px; } .recent-post.media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 0.5rem; } .recent-post_image { margin-right: 12px; } .recent-post_image img:hover { opacity: 0.8; } .recent-post_title { font-size: 0.938rem; font-family: inherit; line-height: 1.2; margin-top: 5px; } .recent-post_title a { color: inherit; } .recent-post .post-date { color: #9b9b9b; font-size: 0.75rem; } .blog-writer-recent-posts li, #bottom-sidebar .blog-writer-recent-posts li { border: none; padding: inherit; } /* tag cloud */ .tagcloud a { font-size: 0.875rem !important; background-color: transparent; border: 1px solid #dbdbdb; border-radius: 10px; display: inline-block; padding: 0 15px; margin-bottom: 4px; } .tagcloud a:hover { background-color: #cea26d; border-color: #cea26d; color: #fff; } #bottom-sidebar .tagcloud a { border: 1px solid rgba(255, 255, 255, 0.3); } #bottom-sidebar .tagcloud a:hover { background-color: #cea26d; border-color: #cea26d; color: #fff; opacity: 1; } /* WP Widget Gallery */ .widget .gallery-item { padding: 0 10px; margin-bottom: 15px; } .widget .gallery { margin: 1rem -10px; } .widget .gallery .gallery-caption { display: none; } /* about widget */ .about-name { font-weight: 700; } .about-image { margin-bottom: 2rem; } .about-icon, .about-icon:visited { display: inline-block; background-color: #cea26d; color: #fff; padding: 0 6px; border-radius: 3px; } .about-icon:hover { background-color: #0f0f0f; color: #fff; } /* calendar widget */ #wp-calendar a { color:#000; } #wp-calendar { width: 100%; } #wp-calendar caption { text-align: right; color: #333; font-size: 12px; padding-top:0px; margin-bottom: 15px; } #wp-calendar thead { font-size: 10px; margin-bottom:10px; } #wp-calendar thead th { padding: 10px; } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { background-color: #f8f8f8; border: 1px solid #fff; text-align: center; padding:8px; } #wp-calendar tbody td:hover { background-color: #fff; } #wp-calendar tbody .pad { background-color: #f8f8f8; } #wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; } #wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; } #wp-calendar thead th { background-color:#ededed; text-align:center; border: 1px solid #fff; font-weight: normal; } #wp-calendar caption { color:#000; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ /* placeholder text color */ ::-webkit-input-placeholder { opacity: 0.8; font-size: 0.688rem; font-style: italic; text-transform: uppercase; } :-moz-placeholder { opacity: 0.8; font-size: 0.688rem; font-style: italic; text-transform: uppercase; } ::-moz-placeholder { opacity: 0.8; font-size: 0.688rem; font-style: italic; text-transform: uppercase; } :-ms-input-placeholder { opacity: 0.8; font-size: 0.688rem; font-style: italic; text-transform: uppercase; } form p { margin-bottom: 10px; } label { font-size: 0.938rem; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; display: block; } input { line-height: normal; } .button, .image-navigation a, .image-navigation a:visited, .page .edit-link a, .page .edit-link a:visited, button, button:visited, input[type=button], input[type=button]:visited, input[type=reset], input[type=reset]:visited, input[type=submit], input[type=submit]:visited { background-color: #cea26d; border: 1px solid #cea26d; border-radius: 20px; color: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 400; letter-spacing: 0.5px; line-height: 1; padding: 9px 20px; text-transform: uppercase; } .button:hover, .button:focus, .image-navigation a:hover, .image-navigation a:focus, .page .edit-link a:focus, .page .edit-link a:hover, button:hover, button:focus, input[type=button]:hover, input[type=button]:focus, input[type=reset]:hover, input[type=reset]:focus, input[type=submit]:hover, input[type=submit]:focus { background-color: #0f0f0f; border-color: #0f0f0f; color: #fff; } .button:focus, .image-navigation a:focus button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus { outline: thin dotted; outline-offset: -4px; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea { background: #f7f7f7; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #d1d1d1; border-radius: 2px; color: #686868; font-weight: 400; margin-bottom: 0.5rem; padding: 0.625em 1.25rem; width: 100%; } input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="month"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus { background-color: #fff; border-color: #d1d1d1; color: #1a1a1a; outline: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .post-password-form { margin-bottom: 1.75em; } .post-password-form label { color: #686868; display: block; font-family: Montserrat, "Helvetica Neue", sans-serif; font-size: 13px; font-size: 0.8125rem; letter-spacing: 0.076923077em; line-height: 1.6153846154; margin-bottom: 1.75em; text-transform: uppercase; } .post-password-form input[type="password"] { margin-top: 0.4375em; } .post-password-form > :last-child { margin-bottom: 0; } .search-form { position: relative; } input[type="search"].search-field { border-radius: 20px; height:39px; padding: 9px 60px 10px 20px; } #left-sidebar input[type="search"].search-field { padding: 9px 20px 9px 60px; } /* search icon */ .search-circle { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 100px; left: 10px; position: relative; bottom: 2px; } .search-rectangle { position: absolute; right: 20px; bottom: 10px; width: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: 3px solid #fff; border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .search-submit { border-radius: 0 20px 20px 0; bottom: 0; cursor: pointer; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; height: 39px; width: 52px; } #left-sidebar .search-submit { border-radius: 20px 0 0 20px; left: 0; } /*-------------------------------------------------------------- # Bootstrap 4 Grid and Layout --------------------------------------------------------------*/ /*! * Bootstrap v4.0.0-beta (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ .container, .container-fluid { margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; width: 100% } @-ms-viewport { width: device-width } html { box-sizing: border-box; -ms-overflow-style: scrollbar } *, ::after, ::before { box-sizing: inherit } @media (min-width:576px) { .container { max-width: 540px } } @media (min-width:768px) { .container { max-width: 720px } } @media (min-width:992px) { .container { max-width: 960px } } @media (min-width:1200px) { .container { max-width: 1200px } } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -20px; margin-left: -20px } .no-gutters { margin-right: 0; margin-left: 0 } .no-gutters>.col, .no-gutters>[class*=col-] { padding-right: 0; padding-left: 0 } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 20px; padding-left: 20px } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-1 { -ms-flex-order: 1; order: 1 } .order-2 { -ms-flex-order: 2; order: 2 } .order-3 { -ms-flex-order: 3; order: 3 } .order-4 { -ms-flex-order: 4; order: 4 } .order-5 { -ms-flex-order: 5; order: 5 } .order-6 { -ms-flex-order: 6; order: 6 } .order-7 { -ms-flex-order: 7; order: 7 } .order-8 { -ms-flex-order: 8; order: 8 } .order-9 { -ms-flex-order: 9; order: 9 } .order-10 { -ms-flex-order: 10; order: 10 } .order-11 { -ms-flex-order: 11; order: 11 } .order-12 { -ms-flex-order: 12; order: 12 } @media (min-width:576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-sm-1 { -ms-flex-order: 1; order: 1 } .order-sm-2 { -ms-flex-order: 2; order: 2 } .order-sm-3 { -ms-flex-order: 3; order: 3 } .order-sm-4 { -ms-flex-order: 4; order: 4 } .order-sm-5 { -ms-flex-order: 5; order: 5 } .order-sm-6 { -ms-flex-order: 6; order: 6 } .order-sm-7 { -ms-flex-order: 7; order: 7 } .order-sm-8 { -ms-flex-order: 8; order: 8 } .order-sm-9 { -ms-flex-order: 9; order: 9 } .order-sm-10 { -ms-flex-order: 10; order: 10 } .order-sm-11 { -ms-flex-order: 11; order: 11 } .order-sm-12 { -ms-flex-order: 12; order: 12 } } @media (min-width:768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none } .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-md-1 { -ms-flex-order: 1; order: 1 } .order-md-2 { -ms-flex-order: 2; order: 2 } .order-md-3 { -ms-flex-order: 3; order: 3 } .order-md-4 { -ms-flex-order: 4; order: 4 } .order-md-5 { -ms-flex-order: 5; order: 5 } .order-md-6 { -ms-flex-order: 6; order: 6 } .order-md-7 { -ms-flex-order: 7; order: 7 } .order-md-8 { -ms-flex-order: 8; order: 8 } .order-md-9 { -ms-flex-order: 9; order: 9 } .order-md-10 { -ms-flex-order: 10; order: 10 } .order-md-11 { -ms-flex-order: 11; order: 11 } .order-md-12 { -ms-flex-order: 12; order: 12 } } @media (min-width:992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none } .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-lg-1 { -ms-flex-order: 1; order: 1 } .order-lg-2 { -ms-flex-order: 2; order: 2 } .order-lg-3 { -ms-flex-order: 3; order: 3 } .order-lg-4 { -ms-flex-order: 4; order: 4 } .order-lg-5 { -ms-flex-order: 5; order: 5 } .order-lg-6 { -ms-flex-order: 6; order: 6 } .order-lg-7 { -ms-flex-order: 7; order: 7 } .order-lg-8 { -ms-flex-order: 8; order: 8 } .order-lg-9 { -ms-flex-order: 9; order: 9 } .order-lg-10 { -ms-flex-order: 10; order: 10 } .order-lg-11 { -ms-flex-order: 11; order: 11 } .order-lg-12 { -ms-flex-order: 12; order: 12 } } @media (min-width:1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none } .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-xl-1 { -ms-flex-order: 1; order: 1 } .order-xl-2 { -ms-flex-order: 2; order: 2 } .order-xl-3 { -ms-flex-order: 3; order: 3 } .order-xl-4 { -ms-flex-order: 4; order: 4 } .order-xl-5 { -ms-flex-order: 5; order: 5 } .order-xl-6 { -ms-flex-order: 6; order: 6 } .order-xl-7 { -ms-flex-order: 7; order: 7 } .order-xl-8 { -ms-flex-order: 8; order: 8 } .order-xl-9 { -ms-flex-order: 9; order: 9 } .order-xl-10 { -ms-flex-order: 10; order: 10 } .order-xl-11 { -ms-flex-order: 11; order: 11 } .order-xl-12 { -ms-flex-order: 12; order: 12 } } /* vertical-align elements */ .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } /* boxes layout for equal height columns */ .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /*-------------------------------------------------------------- # Media Queries --------------------------------------------------------------*/ /* Extra small devices (portrait phones, 480px and up) */ @media (min-width: 480px) { html, body { font-size: 94%; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { html, body { font-size: 95%; } #attachment-description { max-width: 90%; } #banner figcaption.wp-caption-text span { padding: 0 1.25rem; } #banner figure figcaption.wp-caption-text { bottom: 10px; padding: 10px; } #banner figcaption.wp-caption-text span:first-of-type { font-size: 1.5rem; } #banner figcaption.wp-caption-text span:last-of-type { font-size: 0.875rem; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { html, body { font-size: 97%; } .site-header { padding: 3.938rem 7.6923%; } .custom-logo { max-width: 220px; } .menu-toggle { font-size: 1rem; margin: 1.313rem 0; padding: 0.75em 0.875rem 0.688rem; } #error-box { max-width: 80%; } #error-type { font-size: 10rem; } #error-text { font-size: 2rem; } #error-content { font-size: 1.25rem; max-width: 70%; } #banner figcaption.wp-caption-text span { padding: 0 1.5rem; } #banner figure figcaption.wp-caption-text { bottom: 15px; padding: 12px; } #banner figcaption.wp-caption-text span:first-of-type { font-size: 1.75rem; } #banner figcaption.wp-caption-text span:last-of-type { font-size: 0.938rem; } .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%; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { html, body { font-size: 100%; } #breadcrumbs-sidebar { margin: 20px auto; } #banner figcaption.wp-caption-text span { padding: 0 2rem; } #banner figure figcaption.wp-caption-text { bottom: 30px; padding: 15px; } #banner figcaption.wp-caption-text span:first-of-type { font-size: 2.125rem; } #banner figcaption.wp-caption-text span:last-of-type { font-size: 1.125rem; } .copyright { text-align: left; } .footer-social { text-align: right; } .site-header { padding-right: 4.5455%; padding-left: 4.5455%; } .site-header-main { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .wp-custom-logo .site-header-main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .site-header-menu { display: block; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .main-navigation { margin: 0 -10px; } .main-navigation .primary-menu, .main-navigation .primary-menu > li { border: 0; } .main-navigation .primary-menu > li { float: left; padding:0.688rem 0.875rem; } .main-navigation a { outline-offset: -8px; padding: 0.25rem 0 0.125rem; white-space: nowrap; } .main-navigation li:hover > a, .main-navigation li.focus > a { color: #d6b895; } .main-navigation ul ul { border: 1px solid #eee; display: block; left: -999em; margin: 0; position: absolute; z-index: 99999; } .main-navigation ul .toggled-on { text-align: right; } .main-navigation ul ul ul { top: -1px; } .main-navigation ul ul li { background-color: #fff; /* border: 1px solid #d1d1d1; */ border-bottom-width: 0; } .main-navigation ul ul a { white-space: normal; width: 12.688rem; padding: 0.563rem 0.5rem 0.438rem; } .main-navigation li:hover > ul, .main-navigation li.focus > ul { left: auto; right: 0; /* show the animated submenu on hover */ opacity:1; transition-delay:0s; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: auto; right: 100%; } .main-navigation .menu-item-has-children > a { margin: 0; } .main-navigation ul ul .menu-item-has-children > a { padding-right: 0.875rem; } .dropdown-toggle, .main-navigation ul .dropdown-toggle.toggled-on, .menu-toggle, .site-header .social-navigation, .site-footer .main-navigation { display: none; } .blog9 #masonry-layout .hentry, .blog9 #masonry-layout .grid-sizer { width: 33.3333%; } .blog10 #masonry-layout .hentry, .blog10 #masonry-layout .grid-sizer, .blog11 #masonry-layout .hentry, .blog11 #masonry-layout .grid-sizer { width: 50%; } /* Alternating blog style */ .blog14 .featured-image { float: left; max-width: 50%; margin-bottom: 0; } .blog14 .entry-content { max-width: 50%; float: left; } .blog14 .odd .featured-image, .blog14 .odd .entry-content { float: left; } .blog14 .even .featured-image, .blog14 .even .entry-content { float: right; } .blog14 .hentry.odd .featured-image, .blog14 .hentry.even .entry-content { padding-right: 1.875rem; } .blog14 .hentry.odd .entry-content, .blog14 .hentry.even .featured-image { padding-left: 1.875rem; } #error-box { max-width: 60%; } #error-type { font-size: 10rem; } #left-sidebar .widget, #right-sidebar .widget { margin: 0 0 2.5rem; } #attachment-description { max-width: 80%; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .site-header { padding: 5.25em 4.5455%; } .custom-logo { max-width: 320px; } #attachment-description { max-width: 60%; } }