/** * Theme Name: AthlonX * Text Domain: athlonx * Version: 1.0.4 * Requires at least: 4.7 * Tested up to: 5.5 * Requires PHP: 7.2 * Description: AthlonX is your #1 athlete-specific WordPress theme. Perfect for runners, cyclist, or any other athletic individuals and companies. Lots of features easy to customize and extend. Very well structred and documented. Created with attention to detail and cross-browser compatibilty. Use it out of the box or develop and extend without any hassle and additional overhead. * Tags: blog, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, left-sidebar, one-column, right-sidebar, sticky-post, theme-options, threaded-comments * Author: Krasen Slavov @ Developry * Author URI: https://developry.com/author/krasen * Theme URI: https://athlonxtheme.com/ * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * * 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) * * This theme, like WordPress, is licensed under the GPL. * Use it to make something cool, have fun, and share what you've learned * with others. */ /****************************************************************************** * Utility ******************************************************************************/ .mt-0 { margin-top: 0 !important; } .mr-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-bottom: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-bottom: 0 !important; margin-top: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-bottom: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-bottom: 0 !important; padding-top: 0 !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-small { font-size: 0.875rem !important; } .text-large { font-size: 1.25rem !important; } /***************************************************************************** * Selection / Placeholers *****************************************************************************/ ::selection { background-color: #34454d; color: #b1c2ca; } ::-moz-selection { background-color: #34454d; color: #b1c2ca; } ::placeholder { color: rgba(196, 196, 196, 0.48); } :-ms-input-placeholder { color: rgba(196, 196, 196, 0.48); } :-moz-placeholder { color: rgba(196, 196, 196, 0.48); } ::-webkit-input-placeholder { color: rgba(196, 196, 196, 0.48); } /****************************************************************************** * Reset / Globals ******************************************************************************/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break: break-word; word-wrap: break-word; } html, body { margin: 0; padding: 0; } html { font-family: Montserrat, Droid Sans, Helvetica Neue, Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.8; scroll-behavior: smooth; } body { background-color: #f1f1f1; color: #000000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body.body-fixed { position: fixed; } a { color: #34454d; -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; -ms-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; } a:hover, a:focus, a:active { color: #72909f; opacity: 1; } a strong { color: inherit; } img, .img-fluid { display: block; height: auto; margin: 0 auto; max-width: 100%; } figure { margin-left: 0; margin-right: 0; } figure figcaption { background-color: #e2e2e2; font-size: 0.875rem; padding: 0.5rem; text-align: center; } iframe, embed { max-width: 100%; } table { border: 1px solid #b4b4b4; border-collapse: collapse; font-size: 85%; margin-bottom: 1rem; width: 100%; } td, th { border: 1px solid #b4b4b4; padding: 0.25rem 0.5rem; } th { text-align: left; } tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #f1f1f1; } legend { font-size: 1.25rem; padding: 0.5rem; } fieldset { border: 1px solid rgba(0, 0, 0, 0.24); } input, textarea, select { border: 1px solid rgba(0, 0, 0, 0.24); border-radius: 0.125rem; font-family: Montserrat, Droid Sans, Helvetica Neue, Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.4; padding: 0.725rem; -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; -ms-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; } input:hover, input:focus, input:active, textarea:hover, textarea:focus, textarea:active, select:hover, select:focus, select:active { border: 1px solid #72909f; border-color: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: 0 0 0 0.25rem #b1c2ca; color: #000000; outline: none; } button, input[type="button"], input[type="submit"] { border-radius: 0.25rem; } /****************************************************************************** * Globals Mobile ******************************************************************************/ @media (max-width: 800px) { html { font-size: 20px; } } /****************************************************************************** * Buttons ******************************************************************************/ .button { border: 0; border-radius: 0.25rem; cursor: pointer; display: inline-block; min-width: 10rem; padding: 1rem; text-align: center; text-decoration: none; } .button.button-small { font-size: 0.875rem; min-width: auto; padding: 0.5rem 1rem; } .button.button-rounded { border-radius: 0.125rem; } .button.button-block { display: block; } .button.button-primary { background-color: #34454d; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.12); color: #9cb1bc; } .button.button-primary:hover, .button.button-primary:focus, .button.button-primary:active { background-color: #435863; color: #b1c2ca; } /****************************************************************************** * Pages ******************************************************************************/ .search .cover-content, .archive .cover-content, .error404 .cover-content, .page-template-template-sitemap .cover-content { text-align: center; } .page-template-template-frontpage .front-page { opacity: 0; position: fixed; -webkit-transition: all ease-in-out 1200ms; -moz-transition: all ease-in-out 1200ms; -ms-transition: all ease-in-out 1200ms; -o-transition: all ease-in-out 1200ms; transition: all ease-in-out 1200ms; } .page-template-template-frontpage::before { -webkit-animation: loading-rotate-3d 2400ms ease-in-out infinite alternate-reverse; -moz-animation: loading-rotate-3d 2400ms ease-in-out infinite alternate-reverse; -ms-animation: loading-rotate-3d 2400ms ease-in-out infinite alternate-reverse; -o-animation: loading-rotate-3d 2400ms ease-in-out infinite alternate-reverse; animation: loading-rotate-3d 2400ms ease-in-out infinite alternate-reverse; box-shadow: 0 0 0 100rem rgba(38, 50, 56, 0.24); color: #34454d; content: '\25d6'; font-size: 6rem; left: 50%; line-height: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) rotate(); z-index: 1000; } .page-template-template-frontpage.loaded::before { content: ''; z-index: -1; } /****************************************************************************** * Container ******************************************************************************/ .container { margin: 0 auto; max-width: 1200px; padding: 0 2rem; position: relative; } .container.container-full { max-width: 100vw; } /****************************************************************************** * Body ******************************************************************************/ .body { background-color: #ffffff; overflow: hidden; } .body-overlay { background-color: rgba(0, 0, 0, 0.72); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 30; } .body-overlay::after { align-items: center; color: #ffffff; content: ''; cursor: pointer; display: flex; font-size: 0.875rem; font-weight: 700; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; z-index: 40; } /****************************************************************************** * Content ******************************************************************************/ .content .container-flex { align-items: stretch; display: flex; grid-gap: 2rem; justify-content: stretch; } .content .container-flex .grid-outer { flex: 1 0 70%; } /****************************************************************************** * Sidebar ******************************************************************************/ .sidebar { flex: 0 0 25%; margin-top: 2rem; } .sidebar.sidebar-right { border-left: 1px solid rgba(0, 0, 0, 0.03); padding-left: 2rem; } .sidebar.sidebar-left { border-right: 1px solid rgba(0, 0, 0, 0.03); padding-right: 2rem; } .sidebar .widgets .widgets-container { margin-bottom: 2rem; } .sidebar .widgets .widgets-container .search-form { position: relative; } .sidebar .widgets .widgets-container .search-form:after { align-items: center; color: #516b78; content: '\f002'; display: flex; font-family: 'FontAwesome'; height: 100%; justify-content: center; position: absolute; right: 3rem; top: 0; } .sidebar .widgets .widgets-container .search-form input { padding-right: 2rem; } .sidebar .widgets .widgets-container .tagcloud a { background-color: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.03); border-radius: 0.25rem; display: inline-block; font-size: 12px !important; font-weight: 700; letter-spacing: 1px; margin: 0.25rem; padding: 0.5rem; text-decoration: none; text-transform: uppercase; } .sidebar .widgets .widgets-container .tagcloud a:before { color: rgba(0, 0, 0, 0.24); content: '\f02b'; font-family: 'FontAwesome'; margin-right: 0.25rem; } .sidebar .widgets .widgets-container .tagcloud a:hover, .sidebar .widgets .widgets-container .tagcloud a:focus, .sidebar .widgets .widgets-container .tagcloud a:active { background-color: #b1c2ca; color: #263238; } .sidebar .widgets .widgets-container .gallery { align-items: stretch; display: flex; flex-wrap: wrap; justify-content: stretch; } .sidebar .widgets .widgets-container .gallery figure { align-items: center; background-color: #ffffff; cursor: pointer; display: flex; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); flex: 0 0 50%; justify-content: center; margin: 0; min-height: 8rem; outline: 1px solid rgba(0, 0, 0, 0.03); padding: 1rem; -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; -ms-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; } .sidebar .widgets .widgets-container .gallery figure:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); } .sidebar .widgets .widgets-container p, .sidebar .widgets .widgets-container ul, .sidebar .widgets .widgets-container ol { margin: 0; padding: 0; } .sidebar .widgets .widgets-container ul li { align-items: stretch; color: #34454d; display: block; font-weight: 700; list-style-type: none; margin-bottom: 0.25rem; } .sidebar .widgets .widgets-container ul li::first-letter { font-weight: 700; text-transform: uppercase; } .sidebar .widgets .widgets-container ul li a { font-weight: 400; text-decoration: none; } .sidebar .widgets .widgets-container label { display: none; } .sidebar .widgets .widgets-container select { width: 100%; } .sidebar .widgets .widgets-container form { margin-bottom: 1rem; } .sidebar .widgets .widgets-container form input { width: calc(100% - 2rem); } @-webkit-keyframes loading-rotate-3d { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes loading-rotate-3d { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes loading-rotate-3d { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-rotate-3d { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /****************************************************************************** * Container Mobile ******************************************************************************/ @media (max-width: 1200px) { .content .container-flex { flex-direction: column; } .sidebar { background-color: #e2e2e2; margin-top: 0; } .sidebar.sidebar-right, .sidebar.sidebar-left { border: 0; padding: 2rem 2rem 0 2rem; } .sidebar.sidebar-left { margin-bottom: 2rem; } } /****************************************************************************** * Headings ******************************************************************************/ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; margin-bottom: 1rem; margin-top: 0; text-rendering: optimizeLegibility; } h1 { font-size: 2.5rem; font-weight: 900; letter-spacing: -1px; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4, h5 { font-size: 1rem; } h6 { font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /****************************************************************************** * Elements ******************************************************************************/ p { margin-bottom: 1rem; } pre { overflow-x: auto; } ul, ol, dl { margin-bottom: 1rem; } ul li, ol li, dl li { list-style-type: circle; } dl { margin-bottom: 1rem; } dl dt { font-weight: 700; } dl dd { margin-bottom: 0.5rem; } abbr { color: #b4b4b4; font-size: 85%; font-weight: 700; text-transform: uppercase; } abbr[title] { border-bottom: 1px dotted #b4b4b4; cursor: help; } hr { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.48); border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 1rem 0; position: relative; } b, strong { font-weight: 700; } blockquote { border-left: 0.25rem solid #b4b4b4; color: #969696; margin: 1rem 0; padding: 0.5rem 1rem; } blockquote p:last-child { margin-bottom: 0; } /****************************************************************************** * Other Elements & Classes ******************************************************************************/ a[href^="#fn:"], a[href^="#fnref:"] { display: inline-block; font-weight: 700; margin-left: 1rem; } .footnotes { font-size: 85%; margin-top: 2rem; } .lead { font-size: 1.25rem; font-weight: 300; } /****************************************************************************** * Elements Mobile ******************************************************************************/ @media (max-width: 800px) { blockquote { padding-left: 1.25rem; padding-right: 5rem; } } /****************************************************************************** * Breadcrumbs ******************************************************************************/ .breadcrumbs { align-items: center; background-color: #e2e2e2; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06); display: flex; font-size: 0.875rem; font-weight: 700; justify-content: flex-start; letter-spacing: 1px; min-height: 60px; padding: 1rem 0; text-transform: uppercase; } .breadcrumbs .container { flex: 1 1; text-align: right; } .breadcrumbs a { color: #34454d; text-decoration: none; } .breadcrumbs a:hover, .breadcrumbs a:focus, .breadcrumbs a:active { color: #72909f; } .breadcrumbs a::after { color: #000000; font-size: inherit; margin: 0 0.25rem 0 0.25rem; opacity: 0.8; position: relative; text-decoration: none; top: -1px; } .breadcrumbs a::before { margin-right: 0.25rem; } .breadcrumbs strong { color: #000000; font-weight: 400; letter-spacing: 0; } .breadcrumbs strong::after { font-size: inherit; margin: 0 0.25rem 0 0.5rem; opacity: 0.8; position: relative; text-decoration: none; top: -1px; } .breadcrumbs a.fa-icon-angle-double-right::after, .breadcrumbs strong.fa-icon-angle-double-right::after { content: '\f101'; } .breadcrumbs span { font-weight: 400; letter-spacing: 0; } /****************************************************************************** * Breadcrumbs Mobile ******************************************************************************/ @media (max-width: 800px) { .breadcrumbs { margin-top: 80px; padding: 1rem 0; } .breadcrumbs .container { text-align: left; } } /****************************************************************************** * Comments ******************************************************************************/ .page-template-template-full-width .post-comments { margin-left: -2rem; } .post-comments { background-color: #e2e2e2; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06); margin-left: calc((1200px - 64px - 100vw) / 2); overflow: hidden; padding: 0; width: 100vw; } .post-comments .container { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; } .post-comments h3.comments-closed { margin-bottom: 0; padding: 3rem 0; } .page .post-comments { margin-top: 2rem; } /****************************************************************************** * Comment Form ******************************************************************************/ .post-comments-form { flex: 0 0 50%; margin-top: 3rem; padding-bottom: 3rem; position: sticky; top: 0; } .post-comments-form h3 { margin-bottom: 1rem; } .post-comments-form h3#reply-title { margin-bottom: 1.5rem; } /****************************************************************************** * Comments List ******************************************************************************/ .post-comments-list { flex: 0 1 auto; margin: 3rem 2rem 2rem 0; width: calc(50% - 2rem); } .post-comments-list h3 { margin-bottom: 1.5rem; } .post-comments-list .comments-pagination { align-items: center; } .post-comments-list .comments-pagination .nav-links { display: flex; justify-content: space-between; } .post-comments-list .comments-pagination .nav-links .nav-previous a .fa { margin-right: 0.5rem; } .post-comments-list .comments-pagination .nav-links .nav-next a .fa { margin-left: 0.5rem; } .post-comments-list .comments-pagination a { background-color: #34454d; border: 0; border-radius: 0.25rem; color: #b1c2ca; cursor: pointer; display: inline-block; font-size: inherit; font-size: 0.875rem; padding: 0.5rem 1rem; text-align: center; text-decoration: none; } .post-comments-list .comments-pagination a:hover { background-color: #435863; color: #9cb1bc; } .post-comments-list ol { margin: 0; padding: 0; } .post-comments-list ol .trackback, .post-comments-list ol .pingback { background-color: #ffffff; border-radius: 0.25rem; padding: 1rem; } .post-comments-list ol .comment-content { background-color: #ffffff; border-radius: 0.25rem; cursor: pointer; margin-bottom: 1rem; max-height: 240px; overflow-y: hidden; padding: 0 1rem 2.5rem 1rem; position: relative; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; } .post-comments-list ol .comment-content::after { align-items: center; background-color: lightgray; bottom: 0; content: 'Continue reading...'; cursor: pointer; display: flex; font-size: 0.875rem; justify-content: center; left: 0; padding: 0.5rem 0; position: absolute; right: 0; } .post-comments-list ol p:last-child, .post-comments-list ol li:last-child { margin-bottom: 0; padding-bottom: 1rem; } .post-comments-list ol .comment-content-open { background-color: #f1f1f1; } .post-comments-list ol .comment-content-open::after { content: 'Close comment...'; } .post-comments-list ol .comment-metadata { font-size: 0.875rem; margin: 0 0 1rem 0; } .post-comments-list ol .comment-reply-link { font-size: 0.875rem; } .post-comments-list ol .comment-edit-link { margin-left: 0.5rem; } .post-comments-list ol .comment-author, .post-comments-list ol .bypostauthor, .post-comments-list ol .by-post-author { align-items: center; display: flex; margin: 0 0 0.5rem 0; } .post-comments-list ol .comment-author img, .post-comments-list ol .bypostauthor img, .post-comments-list ol .by-post-author img { border-radius: 10rem; margin-right: 1rem; } .post-comments-list ol .comment-author .says, .post-comments-list ol .bypostauthor .says, .post-comments-list ol .by-post-author .says { flex: 1 1; margin-left: 0.25rem; } .post-comments-list > ol ol { background-color: #f1f1f1; margin: 2rem 0 0 2rem; padding: 1rem 1rem 0 1rem; } .post-comments-list > ol li { list-style-type: none; margin-bottom: 1rem; padding-bottom: 1rem; } /****************************************************************************** * Comments List ******************************************************************************/ @media (max-width: 1200px) { .post-comments { margin-left: -2rem; } .post-comments .container { flex-direction: column; } .post-content { flex: 1 1; flex-direction: column; } .post-content .widgets { order: 1; } .page-template-template-aside .post-content .post-content-inner { margin: 0; order: 0; } .post-comments-form { flex: 1 1; margin-right: 0; width: 100%; } .post-comments-list { flex: 1 1; margin: 2rem 0 0 0; width: 100%; } } /****************************************************************************** * Comment Form ******************************************************************************/ .comment-form p { align-items: center; background-color: lightgray; border-radius: 0.25rem; display: flex; justify-content: space-between; margin-bottom: 1px; margin-top: 0; padding: 1rem 1rem 1rem 1rem; } .comment-form label { cursor: pointer; font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .comment-form .comment-form-cookies-consent label { font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; } .comment-form .comment-notes, .comment-form .logged-in-as { background-color: transparent; display: block; padding: 0 0 1rem 0; } .comment-form .comment-notes a:first-child, .comment-form .logged-in-as a:first-child { font-weight: 700; } .comment-form .comment-form-cookies-consent, .comment-form .form-submit { background-color: transparent; display: block; padding: 1rem 0 0 0; text-align: right; } .comment-form input[type="checkbox"] { position: relative; top: 1px; } .comment-form input[type="submit"] { background-color: #34454d; border: 0; box-shadow: 0 0 1rem 0 #e2e2e2; color: #ffffff; cursor: pointer; display: inline-block; min-width: 14rem; padding: 1rem; text-align: center; text-decoration: none; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; } .comment-form input[type="submit"]:hover, .comment-form input[type="submit"]:focus, .comment-form input[type="submit"]:active { background-color: #516b78; } .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0; flex: 0 0 66%; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; } .comment-form textarea:focus, .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form input[type="url"]:focus { border: 1px solid #516b78; } /****************************************************************************** * Comment Form Mobile ******************************************************************************/ @media (max-width: 1200px) { .comment-form p { flex-direction: column; padding-bottom: 1.5rem; } .comment-form label { padding: 0 0 1rem 1rem; width: 100%; } .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { flex: 1 1; width: calc(100% - 1rem); } } /****************************************************************************** * Footer ******************************************************************************/ .footer ul { margin-left: 0; padding-left: 0; } .footer ul li { list-style-type: none; } .footer .container { align-items: center; display: flex; justify-content: flex-start; } /****************************************************************************** * Footer Widgets ******************************************************************************/ .footer-widgets { background-color: #263238; padding: 4rem 0 3rem 0; } .footer-widgets p, .footer-widgets h6 { color: #ffffff; } .footer-widgets ul { list-style-type: none; margin: 0; padding: 0; } .footer-widgets ul li { margin-bottom: 1rem; } .footer-widgets a { border-bottom: 1px dotted rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.48); padding-bottom: 0.125rem; text-decoration: none; } .footer-widgets a:hover, .footer-widgets a:focus, .footer-widgets a:active { color: #9cb1bc; } .footer-widgets .container { display: block; } .footer-widgets .widgets { align-items: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; grid-gap: 2rem; justify-content: space-between; margin-bottom: 3rem; padding-bottom: 2rem; } .footer-widgets .widgets:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .footer-widgets .widgets .widgets-container { flex: 1 1; } /****************************************************************************** * Footer Gallery ******************************************************************************/ .footer-gallery { background-color: #ffffff; padding: 3rem 0; } .footer-gallery .container { max-width: 100vw; } .footer-gallery .container .widgets { margin: 0 auto; overflow: hidden; position: relative; width: 1136px; } .footer-gallery .gallery-outer::before { bottom: 1rem; box-shadow: 0 0 1rem 1px #b4b4b4; content: ''; height: 65%; left: -1rem; position: absolute; width: 1rem; z-index: 10; } .footer-gallery .gallery-outer::after { bottom: 1rem; box-shadow: 0 0 1rem -1px #b4b4b4; content: ''; height: 65%; position: absolute; right: -1rem; width: 1rem; z-index: 10; } .footer-gallery .gallery-outer .gallery { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; min-height: 10rem; width: 9999px; } .footer-gallery .gallery-outer .gallery figure { cursor: pointer; margin: 0 4rem; } /****************************************************************************** * Footer Menu ******************************************************************************/ .footer-menu { background-color: #34454d; } .footer-menu ul.footer-menu { align-items: center; background-color: transparent; display: flex; height: 60px; justify-content: flex-start; margin: 0; /*border-left: 1px solid rgba($black, 0.12);*/ padding: 0; } .footer-menu ul.footer-menu li { border-right: 1px solid rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.06); position: relative; } .footer-menu ul.footer-menu a { align-items: center; color: #9cb1bc; display: flex; height: 60px; justify-content: center; padding: 1rem; text-decoration: none; } .footer-menu ul.footer-menu a:hover, .footer-menu ul.footer-menu a:active { background-color: rgba(0, 0, 0, 0.24); color: #9cb1bc; } .footer-menu ul.footer-menu li.menu-item-has-children a, .footer-menu ul.footer-menu li.page_item_has_children a { padding-right: 2rem; } .footer-menu ul.footer-menu li.menu-item-has-children > a:after, .footer-menu ul.footer-menu li.page_item_has_children > a:after { align-items: center; color: #72909f; content: '\f107'; display: flex; font-family: 'FontAwesome'; height: 60px; position: absolute; right: 1rem; top: 0; } .footer-menu ul.footer-menu li.menu-item-has-children a.current-menu-item, .footer-menu ul.footer-menu li.page_item_has_children a.current-menu-item { background-color: rgba(0, 0, 0, 0.24); color: #b1c2ca; } .footer-menu ul.footer-menu li.menu-item-has-children a.current-menu-item::after, .footer-menu ul.footer-menu li.page_item_has_children a.current-menu-item::after { content: '\f106'; } .footer-menu ul.sub-menu, .footer-menu ul.children { align-items: flex-start; background-color: #34454d; bottom: 60px; display: none; flex-direction: column; justify-content: flex-start; margin: 0; min-width: 15rem; padding: 0; position: absolute; } .footer-menu ul.sub-menu li, .footer-menu ul.children li { flex: 1 1; white-space: nowrap; } .footer-menu ul.sub-menu a, .footer-menu ul.children a { background-color: rgba(0, 0, 0, 0.12); color: #87a1ad; justify-content: flex-start; } .footer-menu ul.sub-menu a:hover, .footer-menu ul.sub-menu a:focus, .footer-menu ul.sub-menu a:active, .footer-menu ul.children a:hover, .footer-menu ul.children a:focus, .footer-menu ul.children a:active { background-color: rgba(0, 0, 0, 0.06); } .footer-menu ul.sub-menu ul.sub-menu, .footer-menu ul.sub-menu ul.children, .footer-menu ul.children ul.sub-menu, .footer-menu ul.children ul.children { bottom: 100%; left: 0; /* Horizontal Version */ /*border-left: 0;*/ /*left: calc(100% + 1px);*/ } /****************************************************************************** * Footer Brand ******************************************************************************/ .footer-brand { font-size: 2rem; font-weight: 700; } .footer-brand .brand-name { display: none; } .footer-brand .brand-name-first-letter { line-height: 0; } .footer-brand .site-brand a { align-items: center; background-color: rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 0; color: #9cb1bc; display: flex; height: 60px; justify-content: center; padding: 0; text-decoration: none; text-shadow: 2px 2px rgba(0, 0, 0, 0.24); width: 60px; } /****************************************************************************** * Footer Copyright ******************************************************************************/ .footer-copyright { background-color: #f1f1f1; border-top: 1px solid rgba(0, 0, 0, 0.06); color: #000000; padding: 2rem 0; } .footer-copyright .site-credits { align-items: center; display: flex; justify-content: space-between; width: 100%; } .footer-copyright p { line-height: 2; margin: 0; } .footer-copyright a { color: #34454d; text-decoration: none; white-space: nowrap; } .footer-copyright a:hover, .footer-copyright a:focus, .footer-copyright a:active { color: #516b78; } .footer-copyright .back-top-short { display: none; } /****************************************************************************** * Footer Mobile ******************************************************************************/ @media (max-width: 800px) { .footer .container { flex-direction: column; max-width: 100vw; padding: 0; } .footer .menu { width: 100%; } .footer-widgets { padding: 2rem 0 1rem 0; } .footer-widgets .container { padding: 0 2rem; } .footer-widgets .widgets { flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 2rem; /* flex-direction: column; Uncomment if you want to have 1 column Widgets */ } .footer-widgets .widgets:last-of-type { margin-bottom: 0; } .footer-widgets .widgets .widgets-container { flex: 1 0 calc(50% - 2rem) !important; /* Overwrite index.js calculated column width */ } .footer-widgets .widgets .widgets-container ul, .footer-widgets .widgets .widgets-container p { margin-bottom: 0; } .footer-gallery .container .widgets { max-width: auto; width: calc(100% - 4rem); } .footer-menu { flex-direction: column; position: relative; } .footer-menu ul.footer-menu { height: auto; } .footer-menu ul.footer-menu li { border-right: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); width: 100%; } .footer-menu ul.footer-menu li a { justify-content: flex-start; padding: 2rem; } .footer-menu ul.footer-menu li.menu-item-has-children > a:after, .footer-menu ul.footer-menu li.page_item_has_children > a:after { right: 2rem; top: 0.3rem; } .footer-menu ul.sub-menu, .footer-menu ul.children { position: static; } .footer-brand { background-color: rgba(0, 0, 0, 0.12); border-bottom: 0.125rem solid rgba(0, 0, 0, 0.24); border-top: 0.125rem solid rgba(0, 0, 0, 0.24); font-size: 1.5rem; width: 100%; } .footer-brand .brand-name { display: block; } .footer-brand .brand-name-first-letter { display: none; } .footer-brand .site-brand a { background-color: transparent; border: 0; margin: 0 auto; padding: 2rem; width: 100%; } .footer-copyright { padding: 2rem 2rem 1.5rem 2rem; } .footer-copyright .back-top-long { display: none; } .footer-copyright .back-top-short { display: inline-block; } } @media (max-width: 540px) { .widgets { flex-direction: column; } .site-credits { flex-direction: column; text-align: center; } } /****************************************************************************** * Grid ******************************************************************************/ .grid-loading { color: #34454d; font-size: 3.5rem; padding-top: 6rem; text-align: center; } .grid { display: grid; grid-auto-rows: 0; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 2rem; max-height: 0; opacity: 0; } .grid .grid-item { position: relative; } .grid .grid-item .grid-item-body { box-shadow: 0 0 1rem 0 #c4c4c4; } .grid .grid-item .grid-item-image { position: relative; } .grid .grid-item .grid-item-image img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; width: 100%; } .grid .grid-item .grid-item-image img::before { content: ''; display: block; padding-top: calc(100% * 2 / 3); } .grid .grid-item .grid-item-image img::after { align-items: center; background-color: rgba(0, 0, 0, 0.24); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; color: rgba(0, 0, 0, 0.12); content: '\f03e'; display: flex; font-family: 'FontAwesome'; font-size: 5rem; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; } .grid .grid-item .grid-item-content { background-color: rgba(0, 0, 0, 0.06); cursor: pointer; padding: 1rem 1rem 1px 1rem; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; } .grid .grid-item .grid-item-content a { border-bottom: 1px dotted #c4c4c4; text-decoration: none; } .grid .grid-item .grid-item-content a:hover, .grid .grid-item .grid-item-content a:focus, .grid .grid-item .grid-item-content a:active { border-bottom: 1px solid #e2e2e2; color: #516b78; } .grid .grid-item .grid-item-content h3 { align-items: center; display: flex; justify-content: flex-start; } .grid .grid-item .grid-item-content .grid-item-type { background-color: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10rem; color: #9cb1bc; line-height: 0; margin-right: 1rem; padding: 0.75rem; } .grid .grid-item .grid-item-meta { align-items: center; background-color: #34454d; border-right: 1px solid rgba(0, 0, 0, 0.12); display: flex; justify-content: center; text-transform: uppercase; } .grid .grid-item .grid-item-meta a { color: #9cb1bc; justify-content: center; text-decoration: none; } .grid .grid-item .grid-item-meta a em { font-style: normal; text-align: center; width: 100%; } .grid .grid-item .grid-item-meta a:hover, .grid .grid-item .grid-item-meta a:focus, .grid .grid-item .grid-item-meta a:active { color: #b1c2ca; } .grid .grid-item .grid-item-meta span { align-items: center; border: 1px solid rgba(0, 0, 0, 0.06); border-right: 0; color: #9cb1bc; display: flex; flex: 0 0 50%; font-size: 0.725rem; } .grid .grid-item .grid-item-meta span a { align-items: center; display: flex; flex: 1 1; } .grid .grid-item .grid-item-meta span a.fa-icon-folder::before { content: '\f07c'; } .grid .grid-item .grid-item-meta span a::before { align-items: center; background-color: rgba(0, 0, 0, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.06); color: #9cb1bc; display: flex; justify-content: center; padding: 0.75rem 1rem; } /****************************************************************************** * Grid Mobile ******************************************************************************/ @media (max-width: 800px) { .grid { grid-gap: 1.5rem; } } /****************************************************************************** * Header ******************************************************************************/ .header ul { margin-left: 0; padding-left: 0; } .header ul li { list-style-type: none; } /****************************************************************************** * Header Widgets ******************************************************************************/ .header-widgets { background-color: #f1f1f1; border-bottom: 1px solid rgba(0, 0, 0, 0.12); color: #263238; max-height: 60px; } .header-widgets .container { align-items: center; display: flex; justify-content: space-between; } .header-widgets .menu { align-items: center; display: flex; float: right; justify-content: space-between; min-width: 12rem; } .header-widgets .menu li { line-height: 1.3; padding-left: 1.5rem; } .header-widgets a { color: #263238; font-size: 0; opacity: 0.8; position: relative; text-decoration: none; } .header-widgets a::before { color: #263238; font-size: 24px; } .header-widgets a:hover, .header-widgets a:focus, .header-widgets a:active { color: inherit; } .header-widgets a:hover::before, .header-widgets a:focus::before, .header-widgets a:active::before { color: #516b78; } .header-widgets p { line-height: 1.3; margin: 0; } /****************************************************************************** * Header Menu ******************************************************************************/ ul.mobile-menu { background-color: #435863; display: none; height: 100vh; margin-top: 0; opacity: 1; position: fixed; right: 0; top: 0; width: 20rem; z-index: 40; } ul.mobile-menu li { border-right: 1px solid rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.12); flex: 1 1; position: relative; white-space: nowrap; } ul.mobile-menu li.site-brand { font-size: 20px; font-weight: 700; text-align: center; } ul.mobile-menu li.site-brand a { align-items: center; background-color: #34454d; border: 0.25rem solid #263238; color: #9cb1bc; display: flex; justify-content: center; padding: 0; } ul.mobile-menu li .fa-icon { padding-left: 1.5rem; } ul.mobile-menu li a { align-items: flex-start; background-color: rgba(0, 0, 0, 0.12); color: #9cb1bc; display: flex; height: 60px; justify-content: flex-start; min-width: 4rem; padding: 1rem; text-decoration: none; } ul.mobile-menu li a:hover, ul.mobile-menu li a:focus, ul.mobile-menu li a:active { background-color: rgba(0, 0, 0, 0.06); } ul.mobile-menu li ul.sub-menu, ul.mobile-menu li ul.children { background-color: #435863; border-left: 0; border-left: 1px solid rgba(0, 0, 0, 0.24); display: none; left: 100%; margin-bottom: 0; position: static; top: -1px; /* Vertical Version */ /*bottom: 100%;*/ /*left: 0;*/ } ul.mobile-menu li .header-search-bar { bottom: 0; left: 60px; right: 0; top: auto; width: calc(100% - 60px); } ul.mobile-menu li.menu-item-type-search { position: relative; } ul.mobile-menu li.menu-item-has-children a, ul.mobile-menu li.page_item_has_children a { padding-right: 2rem; } ul.mobile-menu li.menu-item-has-children > a:after, ul.mobile-menu li.page_item_has_children > a:after { align-items: center; color: #72909f; content: '\f105'; display: flex; font-family: 'FontAwesome'; height: 60px; position: absolute; right: 1rem; top: 0; } ul.mobile-menu li.menu-item-has-children a.current-menu-item, ul.mobile-menu li.page_item_has_children a.current-menu-item { background-color: rgba(0, 0, 0, 0.24); color: #b1c2ca; } ul.mobile-menu li.menu-item-has-children a.current-menu-item::after, ul.mobile-menu li.page_item_has_children a.current-menu-item::after { content: '\f107'; } ul.mobile-menu li.menu-item-type-expanded > a, ul.mobile-menu li.menu-item-type-expanded > a.current-menu-item { padding-right: 1rem; } ul.mobile-menu li.menu-item-type-expanded > a::after, ul.mobile-menu li.menu-item-type-expanded > a.current-menu-item::after { content: ''; } .header-menu { background-color: #435863; box-shadow: 0 1.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.06); left: 0; max-height: 120px; min-height: 60px; position: sticky; top: 0; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; width: 100%; z-index: 20; } .header-menu.header-menu-fixed { position: fixed; top: 0 !important; } .header-menu a { align-items: center; color: #9cb1bc; display: flex; height: 60px; justify-content: center; padding: 1rem; text-decoration: none; } .header-menu a:hover, .header-menu a:active { background-color: rgba(0, 0, 0, 0.24); color: #9cb1bc; } .header-menu ul.primary-menu { align-items: center; background-color: transparent; display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0 0 0 120px; } .header-menu ul.primary-menu li { border-right: 1px solid rgba(0, 0, 0, 0.12); min-width: 4rem; position: relative; } .header-menu ul.primary-menu li.menu-item-type-search { position: static; } .header-menu ul.primary-menu li.menu-item-has-children a, .header-menu ul.primary-menu li.page_item_has_children a { padding-right: 2rem; } .header-menu ul.primary-menu li.menu-item-has-children > a:after, .header-menu ul.primary-menu li.page_item_has_children > a:after { align-items: center; color: #72909f; content: '\f105'; display: flex; font-family: 'FontAwesome'; height: 60px; position: absolute; right: 1rem; top: 0; } .header-menu ul.primary-menu li.menu-item-has-children a.current-menu-item, .header-menu ul.primary-menu li.page_item_has_children a.current-menu-item { background-color: rgba(0, 0, 0, 0.24); color: #b1c2ca; } .header-menu ul.primary-menu li.menu-item-has-children a.current-menu-item::after, .header-menu ul.primary-menu li.page_item_has_children a.current-menu-item::after { content: '\f107'; } .header-menu ul.primary-menu li.menu-item-type-expanded > a, .header-menu ul.primary-menu li.menu-item-type-expanded > a.current-menu-item { padding-right: 1rem; } .header-menu ul.primary-menu li.menu-item-type-expanded > a::after, .header-menu ul.primary-menu li.menu-item-type-expanded > a.current-menu-item::after { content: ''; } .header-menu ul.sub-menu, .header-menu ul.expanded-menu, .header-menu ul.children { align-items: flex-start; background-color: #435863; display: none; flex-direction: column; justify-content: flex-start; margin: 0; min-width: 15rem; padding: 0; position: absolute; top: 60px; z-index: 30; } .header-menu ul.sub-menu li, .header-menu ul.expanded-menu li, .header-menu ul.children li { border-top: 1px solid rgba(0, 0, 0, 0.24); flex: 1 1; white-space: nowrap; } .header-menu ul.sub-menu a, .header-menu ul.expanded-menu a, .header-menu ul.children a { background-color: rgba(0, 0, 0, 0.12); color: #87a1ad; justify-content: flex-start; } .header-menu ul.sub-menu a:hover, .header-menu ul.sub-menu a:focus, .header-menu ul.sub-menu a:active, .header-menu ul.expanded-menu a:hover, .header-menu ul.expanded-menu a:focus, .header-menu ul.expanded-menu a:active, .header-menu ul.children a:hover, .header-menu ul.children a:focus, .header-menu ul.children a:active { background-color: rgba(0, 0, 0, 0.06); } .header-menu ul.sub-menu ul.sub-menu, .header-menu ul.sub-menu ul.children, .header-menu ul.expanded-menu ul.sub-menu, .header-menu ul.expanded-menu ul.children, .header-menu ul.children ul.sub-menu, .header-menu ul.children ul.children { background-color: #435863; border-left: 0; border-left: 1px solid rgba(0, 0, 0, 0.24); left: 100%; top: -1px; /* Vertical Version */ /*bottom: 100%;*/ /*left: 0;*/ } .header-search-bar { align-items: stretch; display: none; height: 100%; position: absolute; right: 96px; top: 0; -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; -ms-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; width: calc(100% - 248px); z-index: 40; } .header-search-bar form { align-items: center; background-color: #34454d; display: flex; flex: 1 1; justify-content: center; } .header-search-bar .search-bar-input { background-color: #34454d; border: 0; border-right: 1px solid rgba(0, 0, 0, 0.24); color: #ffffff; height: 60px; padding: 0 1rem; width: 100%; } .header-search-bar .search-bar-input:hover, .header-search-bar .search-bar-input:focus, .header-search-bar .search-bar-input:active { box-shadow: none; } .header-menu-toggle a.primary-menu-toggle { display: none; left: 0; position: absolute; } .header-menu-toggle a.mobile-menu-toggle { background-color: #435863; border-left: 1px solid rgba(0, 0, 0, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.12); display: block; min-width: 4rem; position: absolute; right: calc(-2rem + 1px); text-align: center; width: auto; z-index: 20; } .header-menu-toggle a small { margin-left: 0.5rem; text-transform: uppercase; } /****************************************************************************** * Header Brand ******************************************************************************/ .header-brand { left: 2rem; position: absolute; top: 0; z-index: 20; } .header-brand .site-brand { font-size: 4.8rem; font-weight: 700; line-height: 0; overflow: hidden; } .header-brand .site-brand a { align-items: center; background-color: #34454d; border: 0.25rem solid #263238; color: #9cb1bc; display: flex; height: 120px; justify-content: center; padding: 0; text-decoration: none; text-shadow: 2px 2px rgba(0, 0, 0, 0.24); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; width: 120px; } .header-brand .brand-name { display: none; } .header-brand-small .site-brand { font-size: 20px; } .header-brand-small .site-brand a { height: 61px; padding: 1rem; width: auto; } .header-brand-small .brand-name { display: block; } .header-brand-small .brand-name-first-letter { display: none; } .header-brand-full { left: 0; position: relative; } .header-brand-full .site-brand { font-size: 20px; } .header-brand-full .site-brand a { height: 60px; width: 100%; } .header-brand-full .brand-name { display: block; } .header-brand-full .brand-name-first-letter { display: none; } /****************************************************************************** * Header Cover ******************************************************************************/ .header-cover { background-color: #32424a; max-height: 100vh; position: relative; } .header-cover .cover-feature-image { min-height: 60px; } .header-cover .cover-feature-image img { min-width: 100vw; position: relative; z-index: 1; } .header-cover .cover-overlay { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQUlEQVQoU2NkYGAwZmBgOMuAHxgzQuXxKQbLwRSC1GNTDBdDVoiuGEUjukKYYhCN4m6yFSJbh9NqojxDVPAQFeAA+14QcYoNEtMAAAAASUVORK5CYII=") repeat, rgba(0, 0, 0, 0.24); background-color: rgba(0, 0, 0, 0.24); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } .header-cover .cover-content { align-items: stretch; display: flex; justify-content: flex-start; left: 50%; position: absolute; text-align: center; top: calc(50% + 30px); transform: translate(-50%, -50%); width: 50%; z-index: 3; } .header-cover .cover-content .container { flex: 1 1; } .header-cover .cover-content .cover-content-inner { background-color: rgba(0, 0, 0, 0.24); border-radius: 0.25rem; color: #ffffff; padding: 2rem 2rem 1rem 2rem; } .header-cover .cover-content h6 { align-items: center; background-color: #435863; color: #9cb1bc; display: inline-flex; justify-content: center; margin: 4rem 0; outline: 100rem solid rgba(0, 0, 0, 0.24); padding: 1rem 2rem; } .header-cover .cover-content .fa { margin-right: 0.5rem; } .header-cover .cover { max-height: 540px; overflow: hidden; } .header-cover .cover.cover-sm { max-height: 180px; overflow: hidden; } .header-cover .cover.cover-sm .cover-overlay { background: #435863; } .header-cover .cover.cover-sm .cover-content { position: relative; top: 90px; } .header-cover .cover.cover-md { max-height: 720px; } .header-cover .cover.cover-md .cover-overlay { background: transparent; } /****************************************************************************** * Header Mobile ******************************************************************************/ @media (max-width: 800px) { .header-widgets .container { flex-direction: column; min-height: 60px; text-align: center; } .header-widgets .widgets, .header-widgets .textwidget { align-items: center; display: flex; min-height: 60px; } .header-widgets .menu { position: absolute; right: 2rem; top: 68px; z-index: 30; } .header-widgets a:after { color: #ffffff; } .mobile-menu li a { height: auto; } .mobile-menu li.site-brand { font-size: 30px; } .mobile-menu li.site-brand a { height: 80px; } .header-menu { height: 80px; position: relative; } .header-menu .header-menu-inner { background-color: #435863; left: 0; padding: 0; position: absolute; top: 80px; width: 100%; z-index: 0; } .header-menu ul.primary-menu { display: none; flex-direction: column; height: auto; padding: 0; } .header-menu ul.primary-menu li { background-color: #435863; border-bottom: 1px solid rgba(0, 0, 0, 0.12); width: 100%; } .header-menu ul.primary-menu li a { display: flex; justify-content: flex-start; padding: 2rem; } .header-menu ul.primary-menu li.menu-item-type-search { position: relative; } .header-menu ul.primary-menu li.menu-item-has-children > a:after, .header-menu ul.primary-menu li.page_item_has_children > a:after { right: 2rem; top: 0.5rem; } .header-menu ul.sub-menu, .header-menu ul.expanded-menu, .header-menu ul.children { border: 0; padding: 0; position: static; } .header-menu ul.sub-menu li, .header-menu ul.expanded-menu li, .header-menu ul.children li { border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.24); } .header-menu ul.sub-menu li:last-of-type, .header-menu ul.expanded-menu li:last-of-type, .header-menu ul.children li:last-of-type { border-bottom: 0; } .header-menu ul.sub-menu a, .header-menu ul.expanded-menu a, .header-menu ul.children a { display: block; } .header-menu ul.sub-menu ul.sub-menu a, .header-menu ul.sub-menu ul.children a, .header-menu ul.expanded-menu ul.sub-menu a, .header-menu ul.expanded-menu ul.children a, .header-menu ul.children ul.sub-menu a, .header-menu ul.children ul.children a { background-color: rgba(0, 0, 0, 0.06); } .header-menu .header-search-bar { bottom: 0; height: 100%; left: 90px; right: 0; top: 0; width: calc(100% - 90px); } .header-menu .header-search-bar .search-bar-input { border: 0.125rem solid rgba(0, 0, 0, 0.12); height: 80px; } .header-brand-full .site-brand a { border-left: 0; border-right: 0; font-size: 1.625rem; height: auto; padding: 1.875rem; } .header-menu-toggle a { height: 80px; } .header-menu-toggle a.primary-menu-toggle { display: flex; justify-content: flex-start; padding: 0 2rem; width: 100%; } .header-menu-toggle a.mobile-menu-toggle { left: 0; right: auto; } .header-cover .cover-feature-image { height: 100%; min-height: 80px; overflow: hidden; position: absolute; top: 0; width: 100%; } .header-cover .cover-feature-image img { height: 100%; max-width: unset; min-width: unset; width: unset; } .header-cover .cover-overlay { background: transparent; } .header-cover .cover-content { background: transparent; height: 100%; left: -2rem; position: relative; transform: translate(0, 0); width: calc(100vw + 4rem); } .header-cover .cover-content .cover-content-inner { height: 100%; max-width: 100%; padding-top: 120px; } .header-cover .cover.cover-sm { min-height: 265px; padding-top: 3rem; } .header-cover .cover.cover-sm .cover-overlay { background: #435863; } .header-cover .cover.cover-sm .cover-content { position: relative; top: 0; } } /****************************************************************************** * Font Awesome Icons ******************************************************************************/ .fa-icon { height: auto; width: auto; } .fa-icon::before, .fa-icon::after, .fa-icon a::before, .fa-icon a::after { font-family: 'FontAwesome'; font-size: 16px; -webkit-transition: all ease-in-out 600ms; -moz-transition: all ease-in-out 600ms; -ms-transition: all ease-in-out 600ms; -o-transition: all ease-in-out 600ms; transition: all ease-in-out 600ms; } .fa-icon.fa-icon-instagram a::before { content: '\f16d'; } .fa-icon.fa-icon-youtube a::before { content: '\f16a'; } .fa-icon.fa-icon-facebook a::before { content: '\f09a'; } .fa-icon.fa-icon-twitter a::before { content: '\f099'; } .fa-icon.fa-icon-github a::before { content: '\f09b'; } .fa-icon.fa-icon-linkedin a::before { content: '\f0e1'; } .fa-icon.fa-icon-angle-double-left a::before { content: '\f100'; } .fa-icon.fa-icon-angle-double-right a::after { content: '\f101'; } .fa-icon.fa-icon-tag a::before { content: '\f02b'; } .fa-icon.fa-icon-folder a::before { content: '\f07c'; } .fa-icon.fa-icon-edit a::before { content: '\f044'; } .fa-icon.fa-icon-bars::before { content: '\f0c9'; } .fa-icon.fa-icon-search::before { content: '\f002'; } .fa-icon.fa-icon-close::before { content: '\f00d'; } .fa-icon.fa-icon-ellipsis-h::before { content: '\f141'; } .fa-icon.fa-icon-angle-left::before { content: '\f104'; } .fa-icon.fa-icon-angle-right::after { content: '\f105'; } .fa-icon.fa-icon-angle-up::after { content: '\f106'; } .fa-icon.fa-icon-angle-down::before { content: '\f107'; } .fa-icon.fa-icon-user-circle::before { content: '\f2bd'; } .fa-icon.fa-icon-comment::before { content: '\f075'; } .fa-icon.fa-icon-home::before { content: '\f015'; } .fa-icon.fa-icon-calendar:before { content: '\f073'; } /****************************************************************************** * Font Awesome Mobile ******************************************************************************/ @media (max-width: 800px) { .fa-icon::before, .fa-icon::after, .fa-icon a::before, .fa-icon a::after { font-size: 24px; } } /****************************************************************************** * Pagination *****************************************************************************/ .pagination { min-height: 1rem; } .pagination .pagination-nav { align-items: center; display: flex; font-size: 0.875rem; font-weight: 700; justify-content: center; letter-spacing: 1px; padding: 4rem 0; text-transform: uppercase; } .pagination .pagination-button a { background-color: #34454d; border: 0; color: #b1c2ca; cursor: pointer; display: inline-block; font-size: inherit; min-width: 12rem; padding: 1rem; text-align: center; text-decoration: none; } .pagination .pagination-button a:hover { background-color: #435863; color: #9cb1bc; } .pagination .pagination-button.pagination-button-prev a { border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 2rem; } .pagination .pagination-button.pagination-button-prev a::before { margin: 0 1rem; position: relative; top: -1px; } .pagination .pagination-button.pagination-button-next a { border-left: 1px solid rgba(0, 0, 0, 0.12); padding-left: 2rem; } .pagination .pagination-button.pagination-button-next a::after { margin: 0 1rem; position: relative; top: -1px; } .paginated { flex: 1 1; } .paginated p { align-items: center; display: flex; justify-content: center; } .paginated p a, .paginated p span { background-color: rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10rem; display: inline-block; height: 3rem; line-height: 3; margin: 0 0.25rem; text-align: center; width: 3rem; } .paginated p a { background-color: #516b78; color: #9cb1bc; text-decoration: none; } /****************************************************************************** * Pagination Mobile ******************************************************************************/ @media (max-width: 800px) { .paginated p { justify-content: flex-start; } .pagination { min-height: auto; } .pagination .pagination-button { flex-direction: column; } .pagination .pagination-button a { display: block; min-width: auto; padding: 1rem; white-space: nowrap; } } /****************************************************************************** * Post/Page ******************************************************************************/ .page .post-header, .error404 .post-header { margin-top: 2rem; } div.post .post-header h1 { margin-top: 1rem; } div.post .post-title { align-items: center; display: flex; justify-content: space-between; } div.post .post-title .post-share-links { display: flex; grid-gap: 1rem; } div.post .post-title .post-share-links a { align-items: center; background-color: #e2e2e2; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10rem; display: flex; font-size: 0; font-weight: 700; height: 3rem; justify-content: center; letter-spacing: 1px; line-height: 1; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; top: 0.125rem; width: 3rem; } div.post .post-title .post-share-links a:hover, div.post .post-title .post-share-links a:focus, div.post .post-title .post-share-links a:active { background-color: #b1c2ca; color: #34454d; } div.post .post-title .post-share-links a::before { display: block; text-align: center; } div.post .post-content { align-items: stretch; display: flex; flex-wrap: wrap; grid-gap: 2rem; justify-content: stretch; } div.post .post-content::after { clear: both; content: ""; display: block; } div.post .post-content .post-content-inner { flex: 1 1; margin-top: 2rem; min-width: 100%; } div.post .post-content .post-content-inner .post-title { margin-bottom: 1rem; } div.post .post-content .post-content-inner:first-child > :not(p) { margin-top: 1rem; } div.post .post-content .gallery { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; } div.post .post-content .gallery figure { padding: 1px; } div.post .post-content .gallery figcaption, div.post .post-content .gallery .gallery-caption, div.post .post-content .gallery .wp-caption, div.post .post-content .gallery .wp-caption-text { cursor: pointer; min-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } div.post .post-content .gallery.gallery-columns-1 figure { margin: 0; width: 100%; } div.post .post-content .gallery.gallery-columns-2 figure { margin: 0; width: 50%; } div.post .post-content .gallery.gallery-columns-3 figure { margin: 0; width: 33.3333%; } div.post .post-content .gallery.gallery-columns-4 figure { margin: 0; width: 25%; } div.post .post-content .gallery.gallery-columns-5 figure { margin: 0; width: 20%; } div.post .post-content .gallery.gallery-columns-6 figure { margin: 0; width: 16.6667%; } div.post .post-content .gallery.gallery-columns-7 figure { margin: 0; width: 14.2857%; } div.post .post-content .gallery.gallery-columns-8 figure { margin: 0; width: 12.5%; } div.post .post-content .gallery.gallery-columns-9 figure { margin: 0; width: 11.1111%; } div.post .post-related { border-radius: 0.25rem; margin-left: calc((1200px - 64px - 100vw) / 2); width: 100vw; } div.post .post-related .container { align-items: stretch; display: flex; grid-gap: 2rem; justify-content: space-between; } div.post .post-related .post-related-item { flex: 0 0 calc(33.3333% - 2rem); padding: 2rem 0 5rem 0; position: relative; } div.post .post-related .post-related-item a { text-decoration: none; } div.post .post-related .post-related-item a:hover, div.post .post-related .post-related-item a:focus, div.post .post-related .post-related-item a:active { color: #9cb1bc; } div.post .post-related .post-related-item .post-related-meta { bottom: 1rem; left: 0; position: absolute; right: 0; } div.post .post-meta { background-color: #f1f1f1; border-bottom: 1px solid rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.03); margin-left: calc((1200px - 4rem - 100vw) / 2); min-height: 60px; padding: 1rem 0; width: 100vw; } div.post .post-meta .container { align-items: center; display: flex; flex-wrap: wrap; grid-gap: 2rem; justify-content: space-between; } div.post .post-meta .container .post-meta-item { flex: 0 0 calc(50% - 2rem); font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } div.post .post-meta .container .post-meta-item:last-of-type { text-align: right; } div.post .post-meta .container .post-meta-item a, div.post .post-meta .container .post-meta-item strong { font-size: inherit; } div.post .post-meta .container .post-meta-item a::before, div.post .post-meta .container .post-meta-item strong::before { color: rgba(0, 0, 0, 0.24); display: inline-block; flex: 0 0; text-align: left; width: 1.5rem; } div.post .post-meta .container .post-meta-item .post-meta-categories ul { margin: 0; padding: 0; } div.post .post-meta .container .post-meta-item .post-meta-categories ul li { display: inline-block; list-style-type: none; margin-left: 1rem; } div.post .post-meta .container a { margin-right: 1rem; text-decoration: none; } div.post .post-meta .container a:hover, div.post .post-meta .container a:focus, div.post .post-meta .container a:active { color: #72909f; } div.post .post-meta .container a:last-of-type { margin-right: 0; } div.post .post-meta .container strong { margin-right: 1rem; } div.post .post-pagination { align-items: center; display: flex; font-size: 1.25rem; font-weight: 700; grid-gap: 2rem; justify-content: space-between; letter-spacing: 1px; padding: 1rem 0 0 0; } div.post .post-pagination a { flex: 0 0 calc(50% - 2rem); padding: 0 1rem; position: relative; text-decoration: none; } div.post .post-pagination a::before, div.post .post-pagination a::after { align-items: center; color: #34454d; display: flex; height: 100%; justify-content: center; position: absolute; top: -1px; } div.post .post-pagination a::before { left: 0; } div.post .post-pagination a::after { right: 0; } div.post .post-pagination a:first-child { align-self: flex-start; display: flex; } div.post .post-pagination a:last-child { text-align: right; } .page-template-template-sidebar .sidebar { margin-top: 0; } .page-template-template-sidebar div.post .post-title { align-items: flex-start; flex-direction: column; } .page-template-template-sidebar div.post .post-title h1 { order: 2; } .page-template-template-sidebar div.post .post-title .post-share-links { margin: 0 0 1rem 0; order: 1; } .page-template-template-sidebar div.post .post-content .post-content-inner { min-width: auto; } /****************************************************************************** * Post/Page Mobile ******************************************************************************/ @media (max-width: 1200px) { div.post .post-header h1 { font-size: 3rem; line-height: 1.25; } div.post .post-meta { margin-left: -2rem; padding-right: 1rem; width: 100vw; } div.post .post-meta .container { align-items: flex-start; flex-direction: column; grid-gap: 0; } div.post .post-meta .container .post-meta-item a, div.post .post-meta .container .post-meta-item strong { display: block; } div.post .post-meta .container .post-meta-item a::before, div.post .post-meta .container .post-meta-item strong::before { width: 2rem; } div.post .post-meta .container .post-meta-item .post-meta-categories ul li { display: flex; margin-left: 0; } div.post .post-related { margin-left: -2rem; padding-right: 1rem; width: 100vw; } div.post .post-related .container { align-items: flex-start; flex-direction: column; grid-gap: 0; } div.post .post-related .post-related-item { padding: 2rem 0 0 0; } div.post .post-related .post-related-item .post-related-meta { position: static; } div.post .post-title { align-items: flex-start; flex-direction: column; } div.post .post-title h1 { order: 2; } div.post .post-title .post-share-links { margin-top: 1rem; order: 1; } div.post .post-content { align-items: unset; flex-direction: column; grid-gap: 0; } div.post .post-content .widgets { flex: 1 1; width: 100%; } div.post .post-pagination { align-items: center; flex-direction: column; grid-gap: 0; height: auto; } div.post .post-pagination a:first-child { align-self: center; margin: 0.25rem 0; padding-right: 0; } div.post .post-pagination a:last-child { margin: 0.25rem 0; padding-left: 0; text-align: center; } } /****************************************************************************** * Widgets ******************************************************************************/ .widgets-static-container { align-items: flex-start; display: flex; flex-wrap: wrap; grid-gap: 2rem; justify-content: space-between; } .widgets-static-container .widget { flex: 0 0 100%; } .widgets-static-container .widget .tagcloud { text-align: center; } .widgets-static-container .widget .tagcloud a { font-size: 1rem !important; padding: 0.25rem; } .widgets-static-container .widget label { display: none; } .widgets-static-container .widget select, .widgets-static-container .widget input { width: 100%; } .widgets-static-container .widget ul { display: inline-block; margin: 0; padding: 0 0 1rem 0; text-align: center; } .widgets-static-container .widget ul ul { padding: 0; } .widgets-static-container .widget ul li { display: inline-block; list-style-type: none; margin: 0; padding: 0.25rem; } /****************************************************************************** * WordPress ******************************************************************************/ .post-content-inner::after { clear: both; content: ''; display: block; } .alignfull { align-items: center; display: flex; margin-left: calc((1200px - 64px - 100vw) / 2); overflow: hidden; width: 100vw; } .alignfull img { width: 100%; } .alignwide { margin-left: calc((1200px - 64px - 1440px) / 2); width: 1440px; } .alignleft { float: left; margin: 0 2rem 2rem 0; } .alignright { float: right; margin: 0 0 2rem 2rem; } .aligncenter { float: none; text-align: center; } .sticky .post-sticky { color: inherit; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); } .screen-reader-text:focus { background-color: #e2e2e2; border-radius: 0.25rem; } /****************************************************************************** * WordPress Mobile ******************************************************************************/ @media (max-width: 1200px) { .alignfull, .alignwide { margin: 0 auto; width: auto; } } /***************************************************************************** * Extending AnimateCSS ******************************************************************************/ .animate__animated.animate__delay-200ms { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .animate__animated.animate__delay-400ms { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .animate__animated.animate__delay-600ms { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .animate__animated.animate__delay-800ms { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } /***************************************************************************** * Frontpage Demo ******************************************************************************/ .front-page { overflow: hidden; } .front-page .button { align-items: center; border: 0.125rem solid rgba(255, 255, 255, 0.12); border-radius: 0.25rem; color: #ffffff; display: inline-block; font-size: 0.875rem; font-weight: 700; overflow: hidden; padding: 0.75rem 1.5rem; position: relative; text-decoration: none; text-transform: uppercase; } .front-page .button::before { bottom: 0.5rem; content: ''; height: 200%; position: absolute; right: 0; -moz-transform: translateY(100%) rotate(-10.5deg); -webkit-transform: translateY(100%) rotate(-10.5deg); -o-transform: translateY(100%) rotate(-10.5deg); -ms-transform: translateY(100%) rotate(-10.5deg); transform: translateY(100%) rotate(-10.5deg); -moz-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 150%; z-index: 1; } .front-page .button .fa { font-size: 1.5rem; line-height: 0; margin-left: 0.5rem; position: relative; top: 2px; } .front-page .button.button-secondary { background-color: #000000; } .front-page .button.button-secondary::before { background-color: #1a1a1a; } .front-page .button.button-secondary:hover::before { background-color: rgba(255, 255, 255, 0.12); bottom: 6rem; } .front-page .button.primary-button { background-color: #34454d; } .front-page .button.primary-button::before { background-color: #435863; } .front-page .button.primary-button:hover::before { background-color: rgba(255, 255, 255, 0.12); bottom: 6rem; } .front-page .content-block-parallax-full-width { overflow: hidden; position: relative; width: 100vw; } .front-page .content-block-parallax-full-width .header, .front-page .content-block-parallax-full-width .img-fluid, .front-page .content-block-parallax-full-width .parallax-foreground-layer { min-width: 100vw; } .front-page .content-block-parallax-full-width img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .front-page .content-block-parallax-full-width .gradient-layer { background: url("/wp-content/themes/athlonx/assets/img/demo/default/cover-white-gradient.png") repeat-x bottom left; bottom: 0; height: 298px; left: 0; position: absolute; width: 100%; z-index: 10; } .front-page .content-block-parallax-full-width .brand-name svg { height: 240px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 640px; } .front-page .content-block-parallax-full-width .brand-name svg path { animation: draw 4s linear forwards; box-shadow: 2rem 2rem rgba(0, 0, 0, 0.06); fill: #ffffff; fill-opacity: 0.96; stroke: rgba(0, 0, 0, 0.24); stroke-dasharray: 150; stroke-dashoffset: 150; stroke-linecap: round; stroke-width: 7; } .front-page .content-block-parallax-full-width .brand-name svg path:last-child { fill: rgba(0, 0, 0, 0.96); stroke: rgba(255, 255, 255, 0.48); } .front-page .content-block-parallax-full-width .menu .mobile-menu-toggle { border: 0; position: absolute; right: 8rem; text-decoration: none; top: 8rem; z-index: 20; } .front-page .content-block-parallax-full-width .menu .mobile-menu-toggle::before { color: inherit; font-size: 3rem; line-height: 0; text-shadow: 0.125rem 0.125rem rgba(255, 255, 255, 0.24); } .front-page .content-block-parallax-full-width .menu .mobile-menu-toggle:hover::before { color: #34454d; } .front-page .content-block-parallax-full-width .menu .mobile-menu { display: none; margin: 0; padding: 0; } .front-page .content-block-parallax-full-width .menu .mobile-menu li { list-style-type: none; } .front-page .content-block-parallax-full-width .menu .mobile-menu li .sub-menu { margin: 0; padding: 0; } .front-page .content-block-mosaic-grid { margin: 2rem auto; max-width: 1024px; } .front-page .content-block-mosaic-grid .grid-mosaic { align-items: flex-start; display: flex; flex-wrap: wrap; grid-gap: 2rem; justify-content: space-between; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column { align-items: stretch; display: flex; flex: 0 0 calc(34.3% - 2rem); flex-direction: column; grid-gap: 2rem; justify-content: stretch; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column.grid-mosaic-column:last-child { flex: 0 0 100%; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body { box-shadow: none; cursor: pointer; overflow: hidden; position: relative; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body img { min-width: 100%; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body:hover .grid-item-mosaic-overlay { -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body .grid-item-mosaic-overlay { align-items: center; background-color: rgba(52, 69, 77, 0.72); bottom: 0; cursor: pointer; display: flex; height: 100%; justify-content: center; padding: 0 4rem; position: absolute; right: 0; -webkit-transform: translateX(180%) skewX(45deg); -moz-transform: translateX(180%) skewX(45deg); -ms-transform: translateX(180%) skewX(45deg); -o-transform: translateX(180%) skewX(45deg); transform: translateX(180%) skewX(45deg); -webkit-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms; -moz-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms; -ms-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms; -o-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms; transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms; width: 100%; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body .grid-item-mosaic-overlay h3 { color: #ffffff; text-align: center; text-transform: uppercase; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body.grid-item-mosaic-body-mosaic { align-items: center; background-color: #516b78; display: flex; flex-direction: column; height: 626px; justify-content: center; padding: 2rem; text-align: center; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body.grid-item-mosaic-body-mosaic h2 { font-size: 2rem; font-style: italic; margin-top: 1rem; text-transform: uppercase; } .front-page .content-block-video .video-preview { background-color: rgba(0, 0, 0, 0.48); box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.48); display: none; left: 25vw; position: absolute; top: 25vh; -webkit-transform: translate(-12.5vw, -12.5vh); -moz-transform: translate(-12.5vw, -12.5vh); -ms-transform: translate(-12.5vw, -12.5vh); -o-transform: translate(-12.5vw, -12.5vh); transform: translate(-12.5vw, -12.5vh); z-index: 100; } .front-page .content-block-video .video-preview #ytplayer { display: none; height: 75vh; width: 75vw; } .front-page .content-block-video .video-static { overflow: hidden; position: relative; } .front-page .content-block-video .video-static img { width: 100%; } .front-page .content-block-video .video-static .video-play-button { align-items: center; border: 0.5rem solid #ffffff; border-radius: 10rem; color: #ffffff; display: flex; font-size: 2rem; height: 5rem; justify-content: center; left: 50%; position: absolute; text-decoration: none; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 5rem; } .front-page .content-block-video .video-static .video-play-button:hover, .front-page .content-block-video .video-static .video-play-button:focus, .front-page .content-block-video .video-static .video-play-button:active { box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.48); color: #516b78; } .front-page .content-block-2-column-presentation { margin: 6rem 0; } .front-page .content-block-2-column-presentation .container { max-width: 1024px; } .front-page .content-block-2-column-presentation .presentation { align-items: center; display: flex; grid-gap: 2rem; justify-content: space-between; position: relative; } .front-page .content-block-2-column-presentation .presentation .presentation-phone { flex: 0 0 47%; } .front-page .content-block-2-column-presentation .presentation .presentation-phone .presentation-phone-screenshot { max-width: 320px; position: absolute; right: 0; top: 0; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .front-page .content-block-2-column-presentation .presentation .presentation-phone .presentation-phone-frame { -webkit-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse; -moz-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse; -o-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse; animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse; } .front-page .content-block-2-column-presentation .presentation h1 { color: #777777; font-weight: 700; text-transform: uppercase; } .front-page .content-block-2-column-presentation .presentation h3 { text-transform: uppercase; } .front-page .content-block-2-column-presentation .presentation ol { align-items: center; display: flex; flex-wrap: wrap; font-size: 1.15rem; grid-gap: 1rem; justify-content: space-between; margin: 0 0 2rem 0; padding: 1rem 1rem 0 0; } .front-page .content-block-2-column-presentation .presentation ol li { align-items: center; display: flex; flex: 0 0 46%; justify-content: flex-start; line-height: 1.4; list-style-type: none; position: relative; text-transform: uppercase; white-space: nowrap; } .front-page .content-block-2-column-presentation .presentation ol li::before { align-items: center; border-radius: 10rem; content: ''; display: flex; font-weight: 700; height: 3rem; justify-content: center; margin-right: 1rem; width: 3rem; } .front-page .content-block-2-column-presentation .presentation ol li:nth-child(1)::before { background-image: linear-gradient(0deg, transparent 50%, #ffffff 50%), linear-gradient(90deg, #72909f 50%, #ffffff 50%); content: '1'; } .front-page .content-block-2-column-presentation .presentation ol li:nth-child(2)::before { background-image: linear-gradient(180deg, transparent 50%, #72909f 50%), linear-gradient(180deg, transparent 50%, #72909f 50%); content: '2'; } .front-page .content-block-2-column-presentation .presentation ol li:nth-child(3)::before { background-image: linear-gradient(180deg, transparent 50%, #72909f 50%), linear-gradient(90deg, transparent 50%, #72909f 50%); content: '3'; } .front-page .content-block-2-column-presentation .presentation ol li:nth-child(4)::before { background-image: linear-gradient(0deg, #72909f 50%, #72909f 50%); content: '4'; } .front-page .content-block-2-column-presentation .presentation ol li:after { background-color: rgba(0, 0, 0, 0.12); border-radius: 10rem; bottom: 0.25rem; content: ''; height: 2.5rem; left: 0.25rem; position: absolute; top: 0.25rem; width: 2.5rem; z-index: 2; } .front-page .content-block-2-column-presentation .presentation nav { display: flex; } .front-page .content-block-2-column-presentation .presentation nav > a { margin-right: 1rem; } .front-page .content-block-slideshow { margin: 10rem 0 3rem 0; } .front-page .content-block-slideshow .slideshow-nav-container { align-items: center; display: flex; font-size: 10rem; font-weight: 900; justify-content: center; line-height: 0; position: relative; text-align: center; z-index: 10; } .front-page .content-block-slideshow .slideshow-nav-container::before { color: rgba(0, 0, 0, 0.03); content: 'Slide'; font-size: 3.25rem; font-weight: 700; position: relative; top: -2rem; } .front-page .content-block-slideshow .slideshow-nav-container a { margin: 0 0.5rem; text-decoration: none; } .front-page .content-block-slideshow .slideshow-nav-container a:nth-child(1) { color: #b1c2ca; } .front-page .content-block-slideshow .slideshow-nav-container a:nth-child(2) { color: #9cb1bc; } .front-page .content-block-slideshow .slideshow-nav-container a:nth-child(3) { color: #87a1ad; } .front-page .content-block-slideshow .slideshow-nav-container a:nth-child(4) { color: #72909f; } .front-page .content-block-slideshow .slideshow-nav-container a:hover, .front-page .content-block-slideshow .slideshow-nav-container a:focus, .front-page .content-block-slideshow .slideshow-nav-container a:active, .front-page .content-block-slideshow .slideshow-nav-container a.active-slide { color: #263238; } .front-page .content-block-slideshow .slideshow { overflow: hidden; position: relative; width: 100%; } .front-page .content-block-slideshow .slideshow .slideshow-button { align-items: center; border: 0.5rem solid #ffffff; border-radius: 10rem; color: #ffffff; display: flex; font-size: 3rem; height: 5rem; justify-content: center; position: absolute; text-decoration: none; top: 40%; width: 5rem; } .front-page .content-block-slideshow .slideshow .slideshow-button:hover, .front-page .content-block-slideshow .slideshow .slideshow-button:focus, .front-page .content-block-slideshow .slideshow .slideshow-button:active { box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.24); color: #516b78; } .front-page .content-block-slideshow .slideshow .slideshow-button.slideshow-button-prev { left: 5%; } .front-page .content-block-slideshow .slideshow .slideshow-button.slideshow-button-next { right: 5%; } .front-page .content-block-slideshow .slideshow .slideshow-container { align-items: flex-start; display: flex; justify-content: flex-start; width: 9999px; } .front-page .content-block-slideshow .slideshow .slideshow-container img { margin: 0; opacity: 0; -webkit-transition: opacity ease-in-out 600ms; -moz-transition: opacity ease-in-out 600ms; -o-transition: opacity ease-in-out 600ms; transition: opacity ease-in-out 600ms; width: 1200px; } .front-page .content-block-slideshow .slideshow .slideshow-container img.active-slide { opacity: 1; } .front-page .content-block-slideshow .slideshow-content { margin: 0 auto; overflow: hidden; position: relative; top: -8rem; width: 960px; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container { align-items: stretch; display: flex; padding-bottom: 2rem; width: 9999px; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide { align-items: stretch; display: flex; flex-wrap: nowrap; justify-content: space-between; opacity: 0.5; text-align: center; -webkit-transition: opacity ease-in-out 600ms; -moz-transition: opacity ease-in-out 600ms; -o-transition: opacity ease-in-out 600ms; transition: opacity ease-in-out 600ms; width: 960px; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide.active-slide { opacity: 1; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box { align-items: center; box-shadow: 1rem 1rem rgba(0, 0, 0, 0.06); display: flex; flex: 0 0 30%; flex-direction: column; height: 100%; justify-content: center; margin-right: 2rem; padding: 2rem; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box h3 { flex: 0 0 calc(50% - 1rem); text-transform: uppercase; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box:nth-child(1) { background-color: #435863; color: #87a1ad; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box:nth-child(2) { background-color: #34454d; color: #9cb1bc; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box:nth-child(3) { background-color: #263238; color: #b1c2ca; } .front-page .content-block-parallax-centered { padding: 0 0 30rem 0; position: relative; top: -8rem; } .front-page .content-block-parallax-centered .parallax-background-layer { margin: 0 auto; } .front-page .content-block-parallax-centered .parallax-background-layer h1 { -webkit-background-clip: text; -moz-background-clip: text; -ms-background-clip: text; -o-background-clip: text; background-image: linear-gradient(to left, #2c3a41, #394a53, #455b66, #72909f, #516b78, #72909f, #6e8d9d, #819ca9, #93aab6); background-size: cover; display: block; font-size: 12rem; font-weight: 900; letter-spacing: -0.5rem; line-height: 1; text-align: center; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -ms-text-fill-color: transparent; -o-text-fill-color: transparent; text-fill-color: transparent; text-transform: uppercase; } .front-page .content-block-parallax-centered .parallax-foreground-layer { margin: 10rem 0; width: 100%; } .front-page .content-block-cover-background { align-items: center; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #ffffff; display: flex; justify-content: flex-end; margin: 2rem auto; max-width: 1680px; min-height: 600px; overflow: hidden; } .front-page .content-block-cover-background .content-text { background-color: rgba(0, 0, 0, 0.24); box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.24); flex: 0 1 45%; padding-right: 5%; } .front-page .content-block-cover-background .content-text p:last-of-type { margin-bottom: 0; } .front-page .content-block-cover-background-mobile { display: none; } .front-page .content-block-woocommerce-products { padding: 4rem 0; text-align: center; } .front-page .content-block-woocommerce-products .products-grid { align-items: center; display: flex; grid-gap: 2rem; justify-content: center; } .front-page .content-block-woocommerce-products .products-grid .product { overflow: hidden; position: relative; width: 380px; } .front-page .content-block-woocommerce-products .products-grid .product ul { display: flex; margin: 4rem 0 0 0; padding: 0; } .front-page .content-block-woocommerce-products .products-grid .product ul li { flex: 0 0 380px; list-style-type: none; opacity: 0; -webkit-transition: opacity ease-in-out 600ms; -moz-transition: opacity ease-in-out 600ms; -o-transition: opacity ease-in-out 600ms; transition: opacity ease-in-out 600ms; } .front-page .content-block-woocommerce-products .products-grid .product ul li.active-product { opacity: 1; } .front-page .content-block-woocommerce-products .products-grid .product h3 { letter-spacing: -1px; margin: 1rem auto 1.5rem auto; text-transform: uppercase; width: 50%; } .front-page .content-block-woocommerce-products .products-grid .product h1 { background-color: #c4c4c4; line-height: 1; padding: 0.5rem; position: absolute; right: 0; top: 0; z-index: 0; } .front-page .content-block-woocommerce-products .products-grid .product nav { display: inline-flex; margin-top: 2rem; } .front-page .content-block-woocommerce-products .products-grid .product nav a { border-radius: 10rem; display: flex; height: 2rem; margin: 0 0.25rem; position: relative; width: 2rem; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-900 { background-color: #263238; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-800 { background-color: #34454d; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-700 { background-color: #435863; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-600 { background-color: #516b78; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-500 { background-color: #607e8d; } .front-page .content-block-woocommerce-products .products-grid .product nav a.product-400 { background-color: #72909f; } .front-page .content-block-woocommerce-products .products-grid .product nav a.active-product::before { align-items: center; color: #ffffff; content: '\f00c'; display: flex; font-family: 'FontAwesome'; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; } .front-page .content-block-social-networking { margin: 2rem 0; text-align: center; } .front-page .content-block-social-networking h3 { text-transform: uppercase; } .front-page .content-block-social-networking h3 small { display: block; font-weight: 400; } .front-page .content-block-social-networking nav { align-items: center; display: inline-flex; grid-gap: 1rem; } .front-page .content-block-social-networking nav a { align-items: center; background-color: #34454d; border: 1px solid rgba(0, 0, 0, 0.24); border-radius: 10rem; color: #f1f1f1; display: flex; font-size: 0; font-weight: 700; height: 3rem; justify-content: center; letter-spacing: 1px; line-height: 1; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; top: 0.125rem; width: 3rem; } .front-page .content-block-social-networking nav a:hover, .front-page .content-block-social-networking nav a:focus, .front-page .content-block-social-networking nav a:active { background-color: #b1c2ca; border: 1.25rem solid rgba(255, 255, 255, 0.12); color: #34454d; } .front-page .content-block-social-networking nav a::before { display: block; text-align: center; } .front-page .content-block-static-full-width { position: relative; } .front-page .content-block-static-full-width .gradient-layer { background: url("/wp-content/themes/athlonx/assets/img/demo/default/cover-white-gradient.png") repeat-x bottom left; height: 298px; left: 0; position: absolute; top: 0; transform: rotate(180deg); width: 100%; z-index: 10; } .front-page .content-block-static-full-width .copyright-text { background-color: rgba(0, 0, 0, 0.48); bottom: 2rem; color: #ffffff; left: 50%; padding: 1rem 2rem; position: absolute; text-align: center; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } .front-page .content-block-static-full-width .copyright-text a { color: #b1c2ca; font-weight: 700; text-decoration: none; } .front-page .content-block-static-full-width .copyright-text a:hover, .front-page .content-block-static-full-width .copyright-text a:active, .front-page .content-block-static-full-width .copyright-text a:focus { color: #9cb1bc; text-decoration: underline; } /***************************************************************************** * Frontpage Demo Mobile ******************************************************************************/ @media (max-width: 1200px) { .front-page .alignfull { margin-left: -2rem; width: 100vw; } .front-page .content-block-parallax-full-width .menu .mobile-menu-toggle { right: 4rem; top: 4rem; } .front-page .content-block-parallax-centered .parallax-background-layer h1 { font-size: 6rem; letter-spacing: -0.25rem; word-break: keep-all; } .front-page .content-block-cover-background .content-text { display: none; } .front-page .content-block-cover-background-mobile { display: block; padding: 0 0 1rem 0; } .front-page .content-block-woocommerce-products .products-grid { flex-direction: column; } .front-page .content-block-woocommerce-products .products-grid .product h1 { background-color: transparent; margin-bottom: 0; position: static; } } @media (max-width: 800px) { .front-page .content-block-parallax-full-width { height: 75vh; overflow: hidden; width: 9999px; } .front-page .content-block-parallax-full-width .menu .mobile-menu-toggle { left: 4rem; right: auto; top: 4rem; } .front-page .content-block-parallax-full-width .menu .mobile-menu li a { height: auto; } .front-page .content-block-parallax-full-width .menu .mobile-menu li.site-brand { font-size: 30px; } .front-page .content-block-parallax-full-width .menu .mobile-menu li.site-brand a { height: 80px; } .front-page .content-block-parallax-full-width .brand-name svg { bottom: 4rem; left: 50vw; top: auto; width: 75vw; } .front-page .content-block-parallax-full-width .parallax-background-layer img, .front-page .content-block-parallax-full-width .parallax-foreground-layer img { height: 75vh; margin: 0; } .front-page .content-block-mosaic-grid .grid-mosaic { display: block; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column { margin-bottom: 2rem; } .front-page .content-block-mosaic-grid .grid-mosaic .grid-mosaic-column .grid-item-mosaic .grid-item-mosaic-body.grid-item-mosaic-body-mosaic { height: auto; } .front-page .content-block-video .video-static { height: 50vh; margin-left: -2rem; overflow: hidden; width: 9999px; } .front-page .content-block-video .video-static img { height: 50vh; margin: 0; width: auto; } .front-page .content-block-video .video-static .video-play-button { left: 50vw; } .front-page .content-block-2-column-presentation { margin: 2rem 0 0 0; } .front-page .content-block-2-column-presentation .presentation { flex-direction: column; } .front-page .content-block-2-column-presentation .presentation .presentation-phone { margin-top: 4rem; } .front-page .content-block-2-column-presentation .presentation ol { align-items: flex-start; flex-direction: column; } .front-page .content-block-slideshow .slideshow-nav-container { font-size: 3.5rem; font-weight: 700; } .front-page .content-block-slideshow .slideshow-nav-container::before { display: none; } .front-page .content-block-slideshow .slideshow .slideshow-button { border-width: 0.25rem; font-size: 1.25rem; height: 3rem; width: 3rem; } .front-page .content-block-slideshow .slideshow .slideshow-container img { max-width: auto; width: 100vw; } .front-page .content-block-slideshow .slideshow-content { overflow: none; top: auto; width: 100%; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container { display: block; padding-bottom: 0; width: 100%; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide { display: block; max-width: auto; opacity: 1; width: 100%; } .front-page .content-block-slideshow .slideshow-content .slideshow-content-container .slide .slide-box { box-shadow: none; flex: 0 0 100%; margin: 0; } .front-page .content-block-parallax-centered { padding: 0 0 20rem 0; top: 0; } .front-page .content-block-static-full-width { height: 50vh; overflow: hidden; width: 9999px; } .front-page .content-block-static-full-width .copyright-text { bottom: 0; left: 0; text-align: left; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); width: 100%; } .front-page .content-block-static-full-width .container { margin: 0; } .front-page .content-block-static-full-width .container .alignfull { width: 9999px; } .front-page .content-block-static-full-width .container .alignfull img { height: 50vh; margin: 0; width: auto; } } /***************************************************************************** * Frontpage Demo Animations ******************************************************************************/ @-webkit-keyframes smartphone-visual-keyframe { 0% { -webkit-transform: scale(1.4) translate3d(0, 0, 0); -moz-transform: scale(1.4) translate3d(0, 0, 0); -ms-transform: scale(1.4) translate3d(0, 0, 0); -o-transform: scale(1.4) translate3d(0, 0, 0); transform: scale(1.4) translate3d(0, 0, 0); } 100% { -webkit-transform: scale(1.4) translate3d(0, 15px, 0); -moz-transform: scale(1.4) translate3d(0, 15px, 0); -ms-transform: scale(1.4) translate3d(0, 15px, 0); -o-transform: scale(1.4) translate3d(0, 15px, 0); transform: scale(1.4) translate3d(0, 15px, 0); } } @-moz-keyframes smartphone-visual-keyframe { 0% { -webkit-transform: scale(1.4) translate3d(0, 0, 0); -moz-transform: scale(1.4) translate3d(0, 0, 0); -ms-transform: scale(1.4) translate3d(0, 0, 0); -o-transform: scale(1.4) translate3d(0, 0, 0); transform: scale(1.4) translate3d(0, 0, 0); } 100% { -webkit-transform: scale(1.4) translate3d(0, 15px, 0); -moz-transform: scale(1.4) translate3d(0, 15px, 0); -ms-transform: scale(1.4) translate3d(0, 15px, 0); -o-transform: scale(1.4) translate3d(0, 15px, 0); transform: scale(1.4) translate3d(0, 15px, 0); } } @-o-keyframes smartphone-visual-keyframe { 0% { -webkit-transform: scale(1.4) translate3d(0, 0, 0); -moz-transform: scale(1.4) translate3d(0, 0, 0); -ms-transform: scale(1.4) translate3d(0, 0, 0); -o-transform: scale(1.4) translate3d(0, 0, 0); transform: scale(1.4) translate3d(0, 0, 0); } 100% { -webkit-transform: scale(1.4) translate3d(0, 15px, 0); -moz-transform: scale(1.4) translate3d(0, 15px, 0); -ms-transform: scale(1.4) translate3d(0, 15px, 0); -o-transform: scale(1.4) translate3d(0, 15px, 0); transform: scale(1.4) translate3d(0, 15px, 0); } } @keyframes smartphone-visual-keyframe { 0% { -webkit-transform: scale(1.4) translate3d(0, 0, 0); -moz-transform: scale(1.4) translate3d(0, 0, 0); -ms-transform: scale(1.4) translate3d(0, 0, 0); -o-transform: scale(1.4) translate3d(0, 0, 0); transform: scale(1.4) translate3d(0, 0, 0); } 100% { -webkit-transform: scale(1.4) translate3d(0, 15px, 0); -moz-transform: scale(1.4) translate3d(0, 15px, 0); -ms-transform: scale(1.4) translate3d(0, 15px, 0); -o-transform: scale(1.4) translate3d(0, 15px, 0); transform: scale(1.4) translate3d(0, 15px, 0); } } @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @-moz-keyframes draw { to { stroke-dashoffset: 0; } } @-o-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } /*# sourceMappingURL=style.css.map */