/* Theme Name: Apex Theme URI: https://competethemes.com/apex/ Author: Compete Themes Author URI: https://competethemes.com/ Description: Apex is a sophisticated, minimalist theme. It looks great and performs wonderfully on phones, tablets, laptops, and everything in between. As a fast, responsive, accessibility-ready, and translation-ready theme, Apex is a theme you can trust to present your content to the world. See our fully setup demo here: https://www.competethemes.com/apex-live-demo/ Version: 1.06 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: gray, silver, white, light, fluid-layout, responsive-layout, two-columns, right-sidebar, accessibility-ready, custom-menu, featured-images, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: apex Apex WordPress Theme, Copyright 2015 Compete Themes Apex is distributed under the terms of the GNU GPL */ /*===== Variables =====*/ /* Theme Colors */ /* Media Query widths */ /* Social Media Brand Colors */ /*===== Mixins =====*/ /***** Silent Classes *****/ h1 { font-size: 2.3125em; /* 37px / 16px */ line-height: 1.297; /* 48px */ } h2, .site-title { font-size: 1.75em; /* 28px / 16px */ line-height: 1.321; /* 37px */ } h3, .post-title { font-size: 1.3125em; /* 21px / 16px */ line-height: 1.143; /* 24px */ } .wp-caption-text, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]), textarea, input[type="submit"], .comment-respond label, #cancel-comment-reply-link, .comment-footer a, .comment-footer span, .site-footer .design-credit span, .tagline, .more-link, .comments-link, .sticky-status, .post-date, .post-tags a, .further-reading span, .widget > * { font-size: 0.75em; /* 12px / 16px */ line-height: 1.5; /* 18px */ } /*===== Basic Styles =====*/ /* apply a natural box layout model to all elements */ *, *:before, *:after { box-sizing: border-box; } html { height: 100%; } body { height: 100%; font-size: 100%; margin: 0; padding: 0; font-family: "Open Sans", sans-serif; line-height: 1.5; background: white; color: #6b6b6b; -webkit-font-smoothing: subpixel-antialiased; word-wrap: break-word; -ms-word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .overflow-container { position: relative; overflow: hidden; height: auto; min-height: 100%; } .main { margin: 0 auto; } p { margin: 1.5em 0; } a { color: #333333; text-decoration: none; -webkit-transition: color 0.1s ease-in-out, background 0.1s ease-in-out; transition: color 0.1s ease-in-out, background 0.1s ease-in-out; } a:link, a:visited { color: #333333; } a:hover, a:active, a:focus { color: #6b6b6b; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; color: #333333; margin: 0; padding: 0; font-weight: 700; } h4, h5, h6 { font-size: 1em; } ul, ol { font-size: 1em; padding: 0; margin: 1.5em; } ul ul, ul ol, ol ul, ol ol { margin: 0 1.5em; } ul ul, ol ol, ul ol, ol ul, li li { font-size: 1em; } /* Markup styles */ pre { word-wrap: break-word; white-space: pre-wrap; background: #f2f2f2; padding: 0.75em; border: solid 1px #e8e8e8; } code { background: #f2f2f2; padding: 0 0.375em; } blockquote { margin: 1.5em 1.5em 1.5em 0; padding-left: 1.5em; border-left: solid 3px #333333; } blockquote cite { display: block; text-align: right; } hr { margin: 1.5em 0; } /* Table styles */ table { border-spacing: 0; border-collapse: collapse; margin: 1.5em 0; } td { padding: 0.5em 0.75em; border: solid 1px black; } th { padding: 0.5em 0.75em; border: solid 1px black; } /* Images */ .alignleft { float: left; margin: 0 1.5em 1.5em 0; } .alignright { float: right; margin: 0 0 1.5em 1.5em; } .aligncenter { text-align: center; margin: 1.5em auto; display: block; } .alignnone { margin: 1.5em 0; } img, .alignright, .alignleft, .aligncenter, .alignnone, .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .wp-caption-text { margin: 0 0 1.5em; } /* Form styles */ input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]), textarea { width: 100%; font-family: "Open Sans", sans-serif; padding: 10px 12px; max-width: 27.75em; border: solid 1px #e8e8e8; background: #f2f2f2; border-radius: 0; -webkit-appearance: none; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]):focus, textarea:focus { outline: none; background: white; } textarea { max-width: 41.625em; overflow: auto; /* to hide scrollbar in IE */ } input[type="submit"] { font-family: "Open Sans", sans-serif; padding: 10px 12px; color: white; background: #333333; border: none; border-radius: 0; -webkit-appearance: none; -webkit-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } input[type="submit"]:hover { cursor: pointer; } input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus { background: #6b6b6b; } input[type="search"] { padding-right: 0.375em; /* so safari 'x' doesn't get cut off */ } ::-webkit-input-placeholder { color: #6b6b6b; } :-moz-placeholder { color: #6b6b6b; } ::-moz-placeholder { color: #6b6b6b; } :-ms-input-placeholder { color: #6b6b6b; } /* ie image border fix */ a img { border: none; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) { html { -webkit-text-size-adjust: none; /* none for no scaling */ } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { html { -webkit-text-size-adjust: none; /* none for no scaling */ } } .screen-reader-text { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; } .skip-content { position: absolute; top: -100%; width: 100%; left: 0; display: block; text-align: center; color: white !important; z-index: 99; padding: 1.5em; background: #333333; -webkit-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; } .skip-content:focus { top: 0; outline: none; } .admin-bar .skip-content:focus { top: 32px; } .max-width { max-width: 1280px; margin: 0 auto; } .archive-header { margin: 3em 0 1.5em; padding: 0 6.25%; } .archive-header h2 { font-size: 1em; line-height: 1.5; font-weight: 400; color: #6b6b6b; } .archive-header span { font-weight: 700; color: #333333; } @media all and (min-width: 56.25em) { .archive-header { padding: 0; margin: 0 0 3em; } } .comment-respond { margin-top: 3em; } .comment-respond label { display: block; margin-bottom: 6px; } #cancel-comment-reply-link { margin-left: 12px; } .comments { padding: 0 6.25%; margin: 3em 0; } .comment-list { list-style: none; margin: 3em 0; } .comment-list ul, .comment-list ol { list-style: none; } .comment-list .children { margin: 0; padding: 0 0 0 1.5em; border-left: solid 1px #d8d8d8; } .comment-author img { width: 48px; height: 48px; border-radius: 50%; float: left; margin-right: 0.75em; } .comment-author span { line-height: 48px; } .comment-author a { font-weight: 700; } li.comment, li.pingback { margin: 3em 0; } .comment-footer a { color: #6b6b6b; } .comment-footer a:link, .comment-footer a:visited { color: #6b6b6b; } .comment-footer a:link:hover, .comment-footer a:link:active, .comment-footer a:link:focus, .comment-footer a:visited:hover, .comment-footer a:visited:active, .comment-footer a:visited:focus { color: #333333; text-decoration: underline; } .comment-reply-link, .comment-edit-link { position: relative; margin-left: 18px; } .comment-reply-link:after, .comment-edit-link:after { position: absolute; content: ''; top: 0; left: -12px; height: 100%; width: 1px; background: #d8d8d8; } .comment-pagination { margin: 3em 0; } .comment-pagination a { font-weight: 700; } .comment-pagination p { display: inline-block; width: 50%; vertical-align: top; margin: 0; } .comment-pagination .next-comment { text-align: right; } @media all and (min-width: 37.5em) { .comments { padding: 0; } } .site-footer { padding: 3em 6.25% 0.75em; } .site-footer .design-credit { text-align: center; margin-top: 3em; } .site-footer .design-credit a { font-weight: 700; } @media all and (min-width: 56.25em) { .site-footer { padding: 3em 0 0.75em; clear: both; } } /* gallery styles copied from Hybrid Core */ /** * Cleaner Gallery Stylesheet * @version 20130526 */ .gallery { display: block; clear: both; overflow: hidden; margin: 0 auto; } .gallery-row { display: block; clear: both; overflow: hidden; margin: 0; } .gallery-item { overflow: hidden; float: left; margin: 0; padding: 0; text-align: center; list-style: none; border: none; background: transparent; } .gallery-icon img { width: auto; max-width: 89%; height: auto; margin: 0 auto; padding: 1%; } .gallery-caption { margin-left: 0; } /* Gallery item sizes depending on the number of columns */ .gallery-col-0 .gallery-item { width: 100%; } .gallery-col-1 .gallery-item { width: 100%; } .gallery-col-2 .gallery-item { width: 50%; } .gallery-col-3 .gallery-item { width: 33.33%; } .gallery-col-4 .gallery-item { width: 25%; } .gallery-col-5 .gallery-item { width: 20%; } .gallery-col-6 .gallery-item { width: 16.66%; } .gallery-col-7 .gallery-item { width: 14.28%; } .gallery-col-8 .gallery-item { width: 12.5%; } .gallery-col-9 .gallery-item { width: 11.11%; } .gallery-col-10 .gallery-item { width: 10%; } .gallery-col-11 .gallery-item { width: 9.09%; } .gallery-col-12 .gallery-item { width: 8.33%; } .gallery-col-13 .gallery-item { width: 7.69%; } .gallery-col-14 .gallery-item { width: 7.14%; } .gallery-col-15 .gallery-item { width: 6.66%; } .gallery-col-16 .gallery-item { width: 6.25%; } .gallery-col-17 .gallery-item { width: 5.88%; } .gallery-col-18 .gallery-item { width: 5.55%; } .gallery-col-19 .gallery-item { width: 5.26%; } .gallery-col-20 .gallery-item { width: 5%; } .gallery-col-21 .gallery-item { width: 4.76%; } .gallery-col-22 .gallery-item { width: 4.54%; } .gallery-col-23 .gallery-item { width: 4.34%; } .gallery-col-24 .gallery-item { width: 4.16%; } .gallery-col-25 .gallery-item { width: 4%; } .gallery-col-26 .gallery-item { width: 3.84%; } .gallery-col-27 .gallery-item { width: 3.7%; } .gallery-col-28 .gallery-item { width: 3.57%; } .gallery-col-29 .gallery-item { width: 3.44%; } .gallery-col-30 .gallery-item { width: 3.33%; } .site-header { padding: 0 6.25%; text-align: center; } .toggle-navigation { font-size: 1em; display: block; background: none; margin: 2.25em auto 3em; padding: 0; border: none; } .toggle-navigation:hover { cursor: pointer; } .title-container { margin: 3em 0; } .site-title { font-family: 'Satisfy', 'Open Sans', 'sans-serif'; margin: 0; } .tagline { margin: 0; } .social-media-icons { list-style: none; margin: 2.25em 0; } .social-media-icons li { display: inline-block; } .social-media-icons a { color: #6b6b6b; margin: 0 8px; -webkit-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } .social-media-icons a:link, .social-media-icons a:visited { color: #6b6b6b; } .social-media-icons a:hover, .social-media-icons a:active, .social-media-icons a:focus { color: #333333; } @media all and (min-width: 50em) { .toggle-navigation { display: none; } .title-container { margin: 4.5em 0 6em; } .site-title { font-size: 2.3125em; /* 37px / 16px */ line-height: 1.297; /* 48px */ } .social-media-icons { display: inline-block; margin: 0; } .social-media-icons li:last-child a { margin-right: 0; } } @media all and (min-width: 56.25em) { .site-header { padding: 0; } } @media all and (min-width: 62.5em) { .site-title { font-size: 3.1875em; /* 51px / 16px */ line-height: 1.176; /* 60px */ } .tagline { margin-top: 1em; } } .loop-pagination { margin: 3em 0; padding: 0 6.25%; text-align: center; color: #6b6b6b; } .loop-pagination a, .loop-pagination span { margin: 0 0.75em; } .loop-pagination a { color: #6b6b6b; } .loop-pagination a:link, .loop-pagination a:visited { color: #6b6b6b; } .loop-pagination a:hover, .loop-pagination a:active, .loop-pagination a:focus { color: #333333; text-decoration: underline; } .loop-pagination .current { color: #333333; font-weight: 700; } @media all and (min-width: 56.25em) { .loop-pagination { text-align: left; padding: 0; } } @media all and (min-width: 56.25em) { .overflow-container { padding: 0 4.6875%; } .overflow-container:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .main { width: 68.9375%; float: left; } } .menu-primary-container { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.2s ease-in-out; transition: max-height 0.2s ease-in-out; } .menu-primary-container.open { max-height: 999px; } .menu-primary { margin: 2.25em 0; } .menu-primary ul { list-style: none; margin: 0 auto; } .menu-primary li { margin-bottom: 1.5em; } .menu-primary li.current-menu-item { font-weight: 700; } .menu-primary li.current-menu-item a { color: #333333; } .menu-primary li.current-menu-item a:link, .menu-primary li.current-menu-item a:visited, .menu-primary li.current-menu-item a:hover, .menu-primary li.current-menu-item a:active, .menu-primary li.current-menu-item a:focus { color: #333333; } .menu-primary li.current-menu-item li { font-weight: 400; } .menu-primary a { color: #6b6b6b; } .menu-primary a:link, .menu-primary a:visited, .menu-primary a:hover, .menu-primary a:active, .menu-primary a:focus { color: #6b6b6b; } .toggle-dropdown { margin: 0 -16px 0 6px; padding: 0; font-size: 1em; line-height: 1; background: none; border: none; color: #6b6b6b; -webkit-transition: -webkit-transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; } .toggle-dropdown:hover { cursor: pointer; } .toggle-dropdown:focus { outline: none; } .toggle-dropdown:after { content: '\f107'; font-family: 'FontAwesome'; } .menu-primary-items ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.2s ease-in-out; transition: max-height 0.2s ease-in-out; } .menu-primary-items ul li { margin: 1.5em 0; } .menu-primary-items ul li:last-child { margin-bottom: 0; } .menu-primary-items li.open > ul { max-height: 999px; } .menu-primary-items li.open > button { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media all and (min-width: 50em) { .menu-primary-container { max-height: none; text-align: right; margin: 2.25em 0; overflow: visible; } .menu-primary-container:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .menu-primary { display: inline-block; margin: 0; float: left; text-align: left; } .menu-primary li { display: inline-block; margin: 0 20px 0 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .menu-primary a { font-size: 0.75em; /* 12px / 16px */ line-height: 1.5; /* 18px */ display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .menu-primary a:hover, .menu-primary a:active, .menu-primary a:focus { color: #333333; } .menu-primary a:focus { text-decoration: underline; } .menu-primary-items ul { max-height: none; position: absolute; z-index: 29; visibility: hidden; overflow: visible; opacity: 0; top: 100%; top: calc(100% + 6px); left: -1.5em; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: white; padding: 0 1.5em 0.75em; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .menu-primary-items ul:hover, .menu-primary-items ul.focused { visibility: visible; opacity: 1; top: 100%; } .menu-primary-items ul li { display: block; margin: 0.75em 0; } .menu-primary-items ul li:hover > button { -webkit-transform: translate(2px, 0); -ms-transform: translate(2px, 0); transform: translate(2px, 0); } .menu-primary-items ul .toggle-dropdown:after { content: '\f105'; } .menu-primary-items ul a:hover + button, .menu-primary-items ul a:active + button, .menu-primary-items ul a:focus + button { -webkit-transform: translate(2px, 0); -ms-transform: translate(2px, 0); transform: translate(2px, 0); } .menu-primary-items ul a:hover ~ ul, .menu-primary-items ul a:active ~ ul, .menu-primary-items ul a:focus ~ ul { top: -12px; left: calc(100% - 24px); } .menu-primary-items ul a:hover:after, .menu-primary-items ul a:active:after { top: 0; height: 36px; width: 72px; left: 100%; } .menu-primary-items ul ul { left: 100%; left: calc(100% - 18px); top: -12px; } .menu-primary-items ul ul:hover, .menu-primary-items ul ul.focused { top: -12px; left: calc(100% - 24px); } .menu-primary-items li { position: relative; z-index: 9; white-space: nowrap; } .menu-primary-items li:hover > button { -webkit-transform: translate(0, 2px); -ms-transform: translate(0, 2px); transform: translate(0, 2px); } .menu-primary-items a { position: relative; z-index: 19; } .menu-primary-items a:hover + button, .menu-primary-items a:active + button, .menu-primary-items a:focus + button { -webkit-transform: translate(0, 2px); -ms-transform: translate(0, 2px); transform: translate(0, 2px); } .menu-primary-items a:hover ~ ul, .menu-primary-items a:active ~ ul, .menu-primary-items a:focus ~ ul { visibility: visible; opacity: 1; top: 100%; } .menu-primary-items a:hover:after, .menu-primary-items a:active:after { content: ''; position: absolute; top: 100%; height: 36px; width: 100%; left: 0; } .toggle-dropdown { font-size: 0.75em; /* 12px / 16px */ line-height: 1.5; /* 18px */ margin: 0 0 0 4px; } .toggle-dropdown:focus { color: orange; } } .entry { margin: 3em 0 4.5em; } .more-link { display: inline-block; padding: 8px 20px; margin-right: 18px; border: solid 1px #333333; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .more-link:hover, .more-link:active, .more-link:focus { background: #333333; color: white; } .comments-link { color: #333333; -webkit-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } .comments-link i { margin-right: 3px; } .comments-link a:hover, .comments-link a:active, .comments-link a:focus { text-decoration: underline; color: #333333; } .full-post .comments-link { display: block; margin: 3em 0; } .blog .post-content p:last-of-type, .archive .post-content p:last-of-type, .search .post-content p:last-of-type { display: inline-block; margin: 0.75em 0 0; } .sticky-status { display: inline-block; background: #333333; color: white; padding: 9px 1.5em; margin-bottom: 2.25em; } .has-post-thumbnail article { position: relative; } .has-post-thumbnail .sticky-status { position: absolute; top: 0; left: 0; } .featured-image { position: relative; height: 0; padding-bottom: 50%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .featured-image > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; } .post-container { padding: 0 6.25%; } .post-header { margin: 1.5em 0; } .post-content { margin: 1.5em 0; } .post-meta { margin: 3em 0 1.5em; } .post-categories a { font-weight: 700; } .post-tags ul { list-style: none; margin: 0; } .post-tags li { display: inline-block; } .post-tags a { display: inline-block; padding: 2px 12px; background: #e8e8e8; margin: 0 8px 12px 0; color: #6b6b6b; } .post-tags a:link, .post-tags a:visited { color: #6b6b6b; } .post-tags a:hover, .post-tags a:active, .post-tags a:focus { color: white; background: #333333; } .further-reading { margin: 2.25em 0 0; padding: 2.25em 0; border-top: solid 1px #d8d8d8; border-bottom: solid 1px #d8d8d8; } .further-reading .previous { margin-bottom: 1.5em; } .further-reading span { display: block; } .further-reading a { font-weight: 700; } .further-reading a:hover, .further-reading a:active, .further-reading a:focus { color: #6b6b6b; } @media all and (min-width: 37.5em) { .post-container { padding: 0; } .entry { padding: 0 6.25%; } .further-reading div { display: inline-block; vertical-align: top; width: 49.5%; } .further-reading .previous { margin-bottom: 0; } .further-reading .next { text-align: right; } } @media all and (min-width: 50em) { .post-title { font-size: 1.75em; /* 28px / 16px */ line-height: 1.321; /* 37px */ } } @media all and (min-width: 56.25em) { .post-container { padding: 0; } .entry { padding: 0; } .entry:first-child { margin-top: 0; } .post-title { font-size: 2.3125em; /* 37px / 16px */ line-height: 1.297; /* 48px */ } .singular .post-header, .error-404 .post-header { margin: 0 0 2.25em; } .singular .featured-image, .singular .featured-video, .error-404 .featured-image, .error-404 .featured-video { margin-bottom: 2.25em; } } .search-form input[type="submit"] { min-width: 100px; } .search-form input[type="search"] { margin-bottom: 6px; } .search-box { margin: 3em 0 1.5em; padding: 0 6.25%; } .search-box h1 { margin-bottom: 12px; } @media all and (min-width: 56.25em) { .search-box { margin: 0 0 3em; padding: 0; } .search-box .search-form-container { margin-top: 1.5em; } } .sidebar-primary { margin: 3em 0; padding: 3em 6.25%; border-top: solid 1px #d8d8d8; } @media all and (min-width: 56.25em) { .sidebar-primary { border: none; width: 25.85156%; float: left; padding: 0; margin: 0 0 0 5.17031%; } } .widget { margin-bottom: 2.25em; } .widget .widget-title { margin-bottom: 2em; } .widget ul { list-style: none; margin: 1.5em 0; } .widget ul ul { margin: 1em 1.5em; } .widget li { margin-bottom: 1em; } .widget a:hover, .widget a:active, .widget a:focus { text-decoration: underline; } .widget .post-date { display: block; } .widget_calendar caption { margin-bottom: 12px; } .widget_calendar tbody a { background: #e8e8e8; margin: -9px; padding: 6px 10px 7px; } .widget_calendar tbody a:hover, .widget_calendar tbody a:active, .widget_calendar tbody a:focus { background: #d8d8d8; text-decoration: none; } .widget_calendar #today { background: #333333; color: white; } .widget_calendar #prev, .widget_calendar #next { text-align: center; padding: 0; } .widget_calendar #prev a, .widget_calendar #next a { display: inline-block; background: #e8e8e8; color: #333333; padding: 0.75em 3em; } .widget_calendar #prev a:hover, .widget_calendar #prev a:active, .widget_calendar #prev a:focus, .widget_calendar #next a:hover, .widget_calendar #next a:active, .widget_calendar #next a:focus { background: #d8d8d8; text-decoration: none; } .widget_recent_comments a { text-decoration: underline; } .widget_rss .widget-title a { border-color: transparent; } .widget_rss .widget-title img { margin-right: 4px; } .widget_rss .rssSummary { margin: 0.75em 1.5em; } .widget_rss .rssSummary + cite { display: block; margin: 0 0 1.5em 1.5em; } .widget_rss .rss-date { font-style: italic; } .widget_rss li { display: block; } .widget_rss cite, .widget_rss span { margin-bottom: 1.5em; display: block; } .widget_rss span + cite { margin-top: -1.5em; } .widget_nav_menu ul ul ul ul { margin-left: 0; } @media all and (min-width: 56.25em) { .widget { margin-bottom: 3em; } }