whoami7 - Manager
:
/
home
/
analuakl
/
somethingsmushy.com
/
wp-content
/
themes
/
hitchcock
/
Upload File:
files >> /home/analuakl/somethingsmushy.com/wp-content/themes/hitchcock/style.css
@charset "UTF-8"; /*--------------------------------------------------------------------------------- Theme Name: Hitchcock Text Domain: hitchcock Version: 2.2.1 Author: Anders Norén Author URI: https://andersnoren.se Theme URI: https://andersnoren.se/teman/hitchcock-wordpress-theme/ Description: Hitchcock is a minimal portfolio theme for designers, photographers and other creatives. It features a beautiful responsive design, Block Editor support, a social icon menu, JetPack infinite scroll, custom accent color, custom header image, support for the gallery post format, the option to always show post preview titles, editor styles, and much more. Demo: https://andersnoren.se/themes/hitchcock/ Tags: blog, three-columns, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, grid-layout, portfolio, photography, block-styles, wide-blocks License: GNU General Public License version 2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Theme URI: https://andersnoren.se/teman/hitchcock-wordpress-theme/ Requires PHP: 5.4 Tested up to: 6.0 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) ----------------------------------------------------------------------------------- 0. CSS Reset 1. Document Setup 2. Element Base 3. Structure 4. Navigation 5. Header 6. Blog 7. Single Post 8. Blocks 9. Entry Content 10. Comments 11. Respond 12. Pagination 13. Page & Page Templates 14. Widgets 15. Credits 16. No JS Fixes 17. Responsive ----------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- */ /* 0. CSS Reset /* -------------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; text-align: inherit; } table { border-collapse: collapse; border-spacing: 0; } blockquote:before, blockquote:after { content: ""; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* -------------------------------------------------------------------------------- */ /* 1. Document Setup /* -------------------------------------------------------------------------------- */ html { font-size: 16px; } body { background: #1d1d1d; border: none; color: #1d1d1d; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; -webkit-text-size-adjust: 100%; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; height: auto; max-width: 100%; } .hidden { display: none; } .fleft { float: left; } .fright { float: right; } ::selection { background: #444; color: #FFF; } ::-webkit-input-placeholder { color: #757575; } :-ms-input-placeholder { color: #757575; } ::placeholder { color: #757575; opacity: 1; line-height: normal; } /* Screen Reader Text ------------------------ */ .screen-reader-text { clip: rect( .1rem, .1rem, .1rem, .1rem ); height: .1rem; overflow: hidden; position: absolute !important; left: -999999rem; width: .1rem; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: .3rem; box-shadow: 0 0 .2rem .2rem rgba( 0, 0, 0, 0.6 ); clip: auto !important; display: block; font-size: 1.4rem; font-weight: 700; height: auto; left: .5rem; line-height: normal; padding: 1.5rem 2.3rem 1.4rem 2.3rem; text-decoration: none; top: .5rem; width: auto; z-index: 100000; } /* Skip Link --------------------------------- */ .skip-link { position: absolute; left: -9999rem; top: 2.5rem; z-index: 999999999; } .skip-link:focus { left: 2.5rem; text-decoration: none; } /* Clearfix ---------------------------------- */ .clear:after, .group:after, .entry-content:after, [class*="__inner-container"]:after { content: ""; clear: both; display: block; } /* Contain Margins --------------------------- */ :root .contain-margins > *:first-child, :root .entry-content > *:first-child, :root .widget-content > *:first-child, :root .wp-site-blocks > *:first-child, :root .wp-site-blocks > .skip-link + *, :root .comment-content > *:first-child, :root *[class*="_inner-container"] > *:first-child, :root *[class*="_inner-container"] > .wp-block-image:first-child > [class*="align"], :root fieldset > *:first-child, :root form > *:first-child, :root .wp-block-column > *:first-child, :root .wp-block-media-text__content > *:first-child { margin-top: 0; } :root .contain-margins > *:last-child, :root .wp-site-blocks > *:last-child, :root .entry-content > *:last-child, :root .widget-content > *:last-child, :root .comment-content > *:last-child, :root *[class*="_inner-container"] > *:last-child, :root *[class*="_inner-container"] > .wp-block-image:last-child > [class*="align"], :root fieldset > *:last-child, :root form > *:last-child, :root .wp-block-column > *:last-child, :root .wp-block-media-text__content > *:last-child { margin-bottom: 0; } /* Accessibility Settings -------------------- */ @media ( prefers-reduced-motion: reduce ) { * { animation-duration: 0s !important; transition-duration: 0s !important; } } /* -------------------------------------------------------------------------------- */ /* 2. Element Base /* -------------------------------------------------------------------------------- */ p, blockquote, ul, ol, address, dl, .wp-caption, pre { line-height: 1.5; margin-bottom: 1.25em; } a { color: #3bc492; text-decoration: underline; } a:hover { text-decoration: none; } /* Headings ---------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 50px 0 25px; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 700; text-transform: uppercase; } h1 { font-size: 2.25em; } h2 { font-size: 1.875em; } h3 { font-size: 1.5em; font-weight: 600; } h4 { font-size: 1.25em; font-weight: 600; } h5 { font-size: 1em; font-weight: 500; } h6 { font-size: 0.8em; font-weight: 500; } /* Block Quotes ------------------------------ */ blockquote { background: #f1f1f1; color: #666; font-style: italic; margin: 30px 0; padding: 30px; position: relative; } blockquote p { font-style: italic; } cite { display: block; font-style: normal; margin-top: 25px; } blockquote cite { display: block; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 0.825em; font-weight: 600; letter-spacing: 0.025em; line-height: 1.2; text-transform: uppercase; } blockquote cite:before { content: "— " } p.pull { max-width: 45%; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 1.6em; line-height: 120%; font-weight: 300; text-transform: uppercase; color: #3bc492; } p.pull.left { float: left; margin: 0 1.5em 1.5em -100px; } p.pull.right { text-align: right; float: right; margin: 0 -100px 1.5em 1.5em; } code, kbd, pre { font-size: 0.85em; background: #EEE; font-family: Menlo, Monaco, monospace; } .highlight { background: #fcf8a5; display: inline; padding: 2px 3px; } kbd, code { padding: 5px; border-radius: 3px; } dl { line-height: 160%; } dl dt { font-weight: 700; } /* Separator --------------------------------- */ hr { background: #ddd; border: none; height: 2px; margin: 3em auto; width: 50%; } /* Lists ------------------------------------- */ ul, ol { margin: .5em 0 .5em 1.5em; } li { margin: .5em 0; } address { padding: 20px; background: #f1f1f1; } pre { background: #3d3d3d; color: #FFF; font-size: 0.8em; line-height: 140%; padding: 20px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } /* Post Media -------------------------------- */ figure { display: block; margin: 0; } .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption-text, .gallery-caption, :root figcaption { color: #666; font-size: 14px; font-style: italic; line-height: 120%; margin: 0; padding-top: 12px; } .gallery-caption { font-size: 16px; line-height: 1.5; } /* Tables ------------------------------------ */ table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 0.85em; margin: 3em 0; max-width: 100%; overflow: hidden; width: 100%; } th, td { line-height: 1.5; margin: 0; overflow: visible; padding: 2.5%; } caption { border-bottom: 1px solid #ddd; font-size: 13px; font-weight: 600; padding-bottom: 2.5%; text-align: center; text-transform: uppercase; } thead { vertical-align: bottom; white-space: nowrap; } th { border-bottom: 1px solid #ddd; font-weight: 600; } td { font-weight: 400; } tbody > tr:nth-child(odd) { background-color: #f6f6f6; } /* Forms ------------------------------------- */ fieldset { padding: 25px; border: 1px solid #ddd; margin-bottom: 1em; } fieldset legend { padding: 10px 11px; background: #ddd; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 13px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; } label { font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 14px; font-weight: 600; color: #757575; text-transform: uppercase; } input, textarea { font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="number"], input[type="search"], input[type="tel"], input[type="color"], textarea { -webkit-appearance: none; -moz-appearance: none; color: #333; padding: 17px 20px; background: #fff; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; line-height: 1; margin: 0; width: 100%; } input[type="file"] { padding: 10px; border-radius: 3px; background: none; } textarea { min-height: 220px; line-height: 150%; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, textarea:focus { border-color: #3bc492; } button, input[type="submit"], input[type="reset"], input[type="button"], :root .wp-block-file__button, :root .wp-block-button__link, :root .wp-block-search__button, .button { background-color: #3bc492; border: none; border-radius: 3px; color: #fff; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; margin: 0; padding: 16px 20px; text-shadow: 0 1px 0 rgba(0,0,0,0.1); text-transform: uppercase; -webkit-appearance: none; -moz-appearance: none; } :root .is-style-outline .wp-block-button__link, :root .wp-block-button__link.is-style-outline { background-color: transparent; border: 2px solid currentColor; color: #3bc492; padding: 14px 18px; text-shadow: none; } input[type="submit"] + input[type="reset"], input[type="submit"] + input[type="button"], input[type="reset"] + input[type="submit"], input[type="reset"] + input[type="button"], input[type="button"] + input[type="reset"], input[type="submit"] + input[type="submit"] { margin-left: 5px; } button, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, :root .wp-block-file__button:hover, :root .wp-block-button__link:hover, .button:hover { cursor: pointer; } /* -------------------------------------------------------------------------------- */ /* 3. Structure /* -------------------------------------------------------------------------------- */ main { display: block; } .section-inner { width: 1040px; max-width: 90%; margin: 0 auto; } .content { position: relative; z-index: 2; } /* Transitions ------------------------------- */ body a { transition: all 0.1s ease-in-out; } .blog-logo, .blog-title a, .social-menu a, .main-menu .menu-item-has-children > a:before, .main-menu ul .menu-item-has-children > a:after, .main-menu .page_item_has_children > a:before, .main-menu ul .page_item_has_children > a:after, .archive-post-title, .flex-control-nav, .flex-direction-nav a, .post-navigation a, .nav-toggle .bar, input[type="submit"], input[type="reset"], input[type="button"], .button, #infinite-handle, #infinite-handle span, #infinite-handle span:before, #infinite-handle span:after, .post-navigation a span { transition: all 0.2s ease-in-out; } .post .post-overlay, .has-post-thumbnail .archive-post-header { transition: all 0.3s ease-in-out; } /* -------------------------------------------------------------------------------- */ /* 4. Navigation /* -------------------------------------------------------------------------------- */ .mobile-navigation, .nav-toggle { display: none; } .navigation { background: #1d1d1d; } .main-menu { display: flex; flex-wrap: wrap; list-style: none; justify-content: center; margin: 0; text-align: center; } .main-menu li { margin: 0; position: relative; } .main-menu > li + li { margin-left: 40px; } .main-menu > li + li:before { content: "/"; font-size: 14px; color: #3d3d3d; position: absolute; left: -25px; top: 50%; margin-top: 1px; transform: translateY( -50% ); } .main-menu a { color: #999; display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; padding: 23px 0; position: relative; text-decoration: none; text-transform: uppercase; } .main-menu li:hover > a, .main-menu li.current-menu-item > a { color: #fff; } .main-menu > li.menu-item-has-children > a, .main-menu > li.page_item_has_children > a { padding-right: 15px; } .main-menu .menu-item-has-children > a:after, .main-menu .page_item_has_children > a:after { content: ""; display: block; border: 4px solid transparent; border-top-color: #757575; position: absolute; top: 50%; margin-top: -2px; right: 0; } .main-menu > .menu-item-has-children > a:before, .main-menu > .page_item_has_children > a:before { content: ""; display: block; border: 6px solid transparent; border-top-color: #1d1d1d; position: absolute; z-index: 10001; left: 50%; margin-left: -6px; bottom: 0; } .main-menu > .menu-item-has-children:hover > a:before, .main-menu > .page_item_has_children:hover > a:before { bottom: -12px; } .main-menu > .menu-item-has-children:hover > a:after, .main-menu > .page_item_has_children:hover > a:after { border-top-color: #fff; } /* Sub Menus --------------------------------- */ .main-menu ul { display: block; list-style: none; margin: 0; opacity: 0; position: absolute; left: -9999px; top: calc( 100% + 5px ); transition: opacity .3s ease-in-out, top .3s ease-in-out; z-index: 999; } .main-menu ul li { width: 200px; background: #2d2d2d; } .main-menu ul li + li { border-top: 1px solid rgba(255,255,255,0.075); } .main-menu ul a { display: block; padding: 16px; font-size: 14px; line-height: 130%; text-align: center; text-transform: none; } .main-menu ul .menu-item-has-children > a:after, .main-menu ul .page_item_has_children > a:after { margin-top: -3px; border-top-color: transparent; border-left-color: #757575; right: 10px; } .main-menu ul .menu-item-has-children:hover > a:after, .main-menu ul .page_item_has_children:hover > a:after { border-width: 5px; border-top-color: transparent; border-left-color: #2d2d2d; margin-top: -4px; right: -10px; } .main-menu > li:hover > ul { opacity: 1; left: 50%; margin-left: -100px; top: 100%; } /* Deep Down --------------------------------- */ .main-menu ul ul { padding-top: 0; top: 5px; } .main-menu li > ul > li:hover > ul { opacity: 1; left: 200px; top: 0; } .main-menu ul ul li { background: #3d3d3d; } .main-menu ul ul .menu-item-has-children:hover > a:after, .main-menu ul ul .page_item_has_children:hover > a:after { border-left-color: #3d3d3d; } .main-menu ul ul ul li { background: #4d4d4d; } .main-menu ul ul ul .menu-item-has-children:hover > a:after, .main-menu ul ul ul .page_item_has_children:hover > a:after { border-left-color: #4d4d4d; } .main-menu ul ul ul ul li { background: #5d5d5d; } .main-menu ul ul ul ul .menu-item-has-children:hover > a:after, .main-menu ul ul ul ul .page_item_has_children:hover > a:after { border-left-color: #5d5d5d; } .main-menu ul ul ul ul ul li { background: #6d6d6d; } .main-menu ul ul ul ul ul .menu-item-has-children:hover > a:after, .main-menu ul ul ul ul ul .page_item_has_children:hover > a:after { border-left-color: #6d6d6d; } /* Header Search ---------------------------- */ .header-search .search-form { align-items: center; display: flex; position: absolute; bottom: 0; left: 0; top: 0; width: 166px; } .header-search-container.active .search-form { display: block; } .main-menu .search-field { display: block; width: 0; margin: 0; padding: 0; background: none; border: none; border-radius: 0; font-size: 14px; color: #fff; text-indent: -9999px; transition: width 200ms linear; } .header-search .search-button { background: #1d1d1d; color: #757575; display: block; font-size: 18px; text-align: center; width: 20px; } .header-search .search-button:hover { cursor: pointer; color: #fff; } .header-search form:hover .search-field, .header-search .search-field:focus { width: 150px; padding: 8px 32px 7px 0; border-bottom: 1px solid #3d3d3d; text-indent: 0; outline: none; } .header-search form:hover .search-button, .header-search .search-field:focus + .search-button { width: 32px; } /* -------------------------------------------------------------------------------- */ /* 5. Header /* -------------------------------------------------------------------------------- */ .header { padding: 70px 0; } .header.section-inner { width: 325px; position: relative; z-index: 2; } .blog-title { font-size: 1.75em; font-weight: 500; letter-spacing: 0.025em; margin: 0; text-transform: uppercase; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } .blog-title a { color: #fff; text-decoration: none; } .custom-logo-link, .custom-logo-link img { display: block; } .custom-logo-link img { margin: 0 auto; } .blog-logo:hover { opacity: 0.6; } .blog-description { color: #fff; font-family: 'Droid Serif', Georgia, serif; line-height: 145%; margin-top: 25px; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,0.2); } /* Social Menu ------------------------------- */ .social-menu { display: flex; flex-wrap: wrap; justify-content: center; margin: 19px 0 0; } .social-menu li { display: block; line-height: 1; position: relative; margin: 6px 3px 0 3px; } .social-menu li:first-child { margin-left: 0; } .social-menu a { display: block; width: 36px; height: 36px; background: #2d2d2d; border-radius: 99px; color: #fff; position: relative; -webkit-font-smoothing: antialiased; } .social-menu a:hover { background: #3bc492; color: #fff; } .social-menu li a::before { content: '\f0c1'; display: inline-block; font-family: 'Font Awesome 5'; font-size: 16px; text-align: center; position: absolute; top: 50%; margin-top: -8px; left: 0; right: 0; } .wp-is-mobile .social-menu li a::before { margin-top: -7px; } /* NON-BRAND ICONS */ .social-menu a[href*="mailto"]::before { content: '\f0e0'; } .social-menu a[href*="/feed/"]::before, .social-menu a[href*="rss"]::before { content: '\f09e'; } /* BRAND ICONS */ .social-menu a[href*="500px.com"]::before { content: '\f26e'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="amazon.com"]::before { content: '\f270'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="angel.co"]::before { content: '\f209'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="audible.com"]::before { content: '\f373'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="behance.net"]::before { content: '\f1b4'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="blogger.com"]::before { content: '\f37d'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="codepen.io"]::before { content: '\f1cb'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="creativecommons.com"]::before { content: '\f25e'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="deviantart.com"]::before { content: '\f1bd'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="digg.com"]::before { content: '\f1a6'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="discordapp.com"]::before { content: '\f392'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="dribbble.com"]::before { content: '\f17d'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="ebay"]::before { content: '\f4f4'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="etsy.com"]::before { content: '\f2d7'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="facebook.com"]::before { content: '\f39e'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="flickr.com"]::before { content: '\f16e'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="github.com"]::before { content: '\f113'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="gitlab.com"]::before { content: '\f296'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="goodreads.com"]::before { content: '\f3a9'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="houzz"]::before { content: '\f27c'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="imdb.com"]::before { content: '\f2d8'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="instagram.com"]::before { content: '\f16d'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="kickstarter.com"]::before { content: '\f3bc'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="jsfiddle.net"]::before { content: '\f1cc'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="linkedin.com"]::before { content: '\f0e1'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="last.fm"]::before { content: '\f202'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="medium.com"]::before { content: '\f3c7'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="meetup.com"]::before { content: '\f2e0'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="mixcloud.com"]::before { content: '\f289'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="patreon.com"]::before { content: '\f3d9'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="pscp.tv"]::before { content: '\f3da'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="pinterest"]::before { content: '\f231'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="play.google.com"]::before { content: '\f3ab'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="plus.google.com"]::before { content: '\f0d5'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="producthunt.com"]::before { content: '\f288'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="quora.com"]::before { content: '\f2c4'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="reddit.com"]::before { content: '\f281'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="slack.com"]::before { content: '\f198'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="snapchat"]::before { content: '\f2ac'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="soundcloud.com"]::before { content: '\f1be'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="spotify.com"]::before { content: '\f1bc'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="tumblr.com"]::before { content: '\f173'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="twitch"]::before { content: '\f1e8'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="twitter.com"]::before { content: '\f099'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="vimeo.com"]::before { content: '\f27d'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="wordpress.org"]::before, .social-menu a[href*="wordpress.com"]::before { content: '\f411'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="youtube.com"]::before { content: '\f167'; font-family: 'Font Awesome 5 Brands'; } .social-menu a[href*="unsplash.com"]::before { content: '\f030'; font-family: 'Font Awesome 5'; } .social-menu a[href*="xing"]::before { content: '\f168'; font-family: 'Font Awesome 5 Brands'; } /* Header Background Image ------------------- */ .header-image, .header-image:after { height: 900px; height: 100vh; position: absolute; z-index: 1; right: 0; left: 0; } .header-image { background-image: url(assets/images/bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; } .header-image:after { content: ""; display: block; z-index: 2; top: 0; background: #1d1d1d; background: linear-gradient(to bottom, rgba(29,29,29,0.2) 0%,rgba(29,29,29,1) 100%); } /* -------------------------------------------------------------------------------- */ /* 6. Blog /* -------------------------------------------------------------------------------- */ .posts { display: flex; flex-wrap: wrap; margin-top: -3.95%; } .posts .post { color: #fff; display: block; width: 30.7%; margin-top: 3.95%; padding-bottom: 30.7%; position: relative; background-size: cover; background-position: center; } .posts .post + .post { margin-left: 3.95%; } .posts .post:nth-child(3n+1) { margin-left: 0; } .post-overlay { background: #fff; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .sticky .post-overlay > p { color: #757575; font-size: 0.875em; font-weight: 500; letter-spacing: 0.075em; position: absolute; left: 30px; top: 30px; text-transform: uppercase; } .sticky .post-overlay > p span { margin-right: 9px; font-size: 18px; position: relative; bottom: -1px; } .archive-post-header { position: absolute; right: 30px; bottom: 30px; left: 30px; } .archive-post-title { color: #222; font-size: 1.375em; font-weight: 700; line-height: 120%; margin: 0; text-transform: uppercase; -ms-word-break: break-word; word-break: break-word; } .archive-post-date { color: #757575; font-size: 0.875em; font-weight: 600; letter-spacing: .015em; margin-bottom: 5px; text-transform: uppercase; } .has-post-thumbnail .archive-post-date { color: rgba( 255, 255, 255, 0.5 ); } .post:hover > .post-overlay, .show-preview-titles .post > .post-overlay { opacity: 1; } .post.has-post-thumbnail:hover .archive-post-title, .show-preview-titles .post.has-post-thumbnail .archive-post-title { color: #fff; } /* With Background Image */ .has-post-thumbnail .post-overlay { background: rgba( 0, 0, 0, 0.75 ); opacity: 0; } .show-preview-titles .has-post-thumbnail .post-overlay { background: rgba( 0, 0, 0, 0.6 ); } .has-post-thumbnail .archive-post-header { bottom: 35px; } .has-post-thumbnail:hover .archive-post-header, .show-preview-titles .has-post-thumbnail .archive-post-header { bottom: 30px; } .posts a.post.has-post-thumbnail { color: #fff; } /* -------------------------------------------------------------------------------- */ /* 7. Single Post /* -------------------------------------------------------------------------------- */ .post-container { background: #fff; } /* Featured Media ---------------------------- */ .featured-media a, .featured-media img { display: block; } .featured-media img { margin: 0 auto; width: 100%; } /* Post Header ------------------------------- */ .post-header { width: 90%; margin: 0 auto; padding: 80px 0; } .post-date { color: #757575; font-size: 0.875em; font-weight: 500; margin-bottom: 10px; text-align: center; text-transform: uppercase; } .post-title { font-size: 2.5em; font-weight: 700; line-height: 120%; margin: 0; text-align: center; text-transform: uppercase; } /* Post Inner -------------------------------- */ .post-inner { width: 520px; max-width: 85%; margin: 0 auto; padding: 80px 0 90px; } .post-header + .post-inner { padding-top: 0; } /* Page Links -------------------------------- */ .page-links { display: inline-block; margin-top: 40px; background: #eee; border-radius: 3px; overflow: hidden; font-size: 0.9em; font-weight: 600; text-transform: uppercase; color: #757575; } .page-links a, .page-links > span { color: #666; display: block; float: left; padding: 10px 12px; text-decoration: none; } .page-links a:first-child, .page-links span:first-child { margin-left: 0; } .page-links a:hover { background: #3bc492; color: #fff; } .page-links > span:nth-of-type(2) { background: #ddd; color: #666; } /* Post Meta --------------------------------- */ .post-meta { color: #757575; font-size: 14px; margin-top: 40px; } .post-meta p { font-weight: 500; margin: 0; } .post-meta a { color: #757575; text-decoration: none; } .post-meta a:hover { text-decoration: underline; } .tags a { margin-right: 5px; } .tags a:before { content: "#"; } .post-edit:before { content: ""; display: block; width: 32px; height: 1px; background: #ddd; margin: 10px 0 8px; } /* Post Navigation --------------------------- */ @media ( min-width: 900px ) { .post-navigation a { display: block; height: 200px; width: 45px; background: #2d2d2d; color: #fff; position: fixed; top: 50%; margin-top: -100px; } .post-navigation .fa { display: block; width: 100%; font-size: 36px; text-align: center; position: absolute; top: 50%; margin-top: -18px; left: 0; } .post-navigation p { text-indent: -9999px; } .post-nav-prev { right: 0; } .post-nav-prev .fa { padding-left: 4px; } .post-nav-next { left: 0; } .post-nav-next .fa { padding-right: 4px; } .post-navigation a:hover { width: 50px; color: #fff; } } /* Gallery ----------------------------------- */ .flexslider { position: relative; overflow: hidden; } .flexslider ul, .flexslider ol, .flexslider li { list-style: none; margin: 0; } /* Direction Nav */ .wp-is-mobile .flex-direction-nav { display: none; } .flex-direction-nav a { display: block; width: 80px; font-size: 32px; color: #fff; opacity: 0; position: absolute; z-index: 1001; top: 0; bottom: 0; } .flex-direction-nav li:nth-child(1) a { left: 0; background: linear-gradient( to right, rgba( 0, 0, 0, 0.25 ) 0%,rgba( 0, 0, 0, 0 ) 100% ); } .flex-direction-nav li:nth-child(2) a { right: 0; background: linear-gradient( to right, rgba( 0, 0, 0, 0 ) 0%,rgba( 0, 0, 0, 0.25 ) 100% ); } .flex-direction-nav span { display: block; width: 100%; text-align: center; position: absolute; top: 50%; margin-top: -16px; left: 0; } .flexslider:hover .flex-direction-nav a { opacity: 1; } .flex-direction-nav a:hover { color: #fff; } /* Control Nav */ .flex-control-nav { text-align: center; position: absolute; bottom: -32px; left: 0; right: 0; } .flexslider:hover .flex-control-nav { bottom: 16px; } .flex-control-nav li { display: inline-block; margin: 0 4px; text-indent: -9999px; } .flex-control-nav a { display: block; width: 16px; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.5); } .flex-control-nav .flex-active { background: #fff; } .flex-control-nav a:hover { cursor: pointer; } /* Related Posts ----------------------------- */ .related-posts { margin: 0 auto; } /* -------------------------------------------------------------------------------- */ /* 8. Blocks /* -------------------------------------------------------------------------------- */ /* Block Typography Classes ------------------ */ .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .has-text-align-justify { text-align: justify; } /* Block: Base Margins ----------------------- */ :root *[class*="_inner-container"] > *:first-child { margin-top: 0; } :root *[class*="_inner-container"] > *:last-child { margin-bottom: 0; } .wp-block-archives, .wp-block-button, .wp-block-buttons, .wp-block-calendar, .wp-block-categories, .wp-block-code, .wp-block-columns, .wp-block-cover, .wp-block-cover-image, .wp-block-embed, .wp-block-file, .wp-block-gallery, .wp-block-group, .wp-block-image, .wp-block-latest-comments, .wp-block-latest-posts, .wp-block-media-text, .wp-block-preformatted, .wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-search, .wp-block-social, .wp-block-tag-cloud, .wp-block-verse, .wp-block-video { margin-bottom: 30px; margin-top: 30px; } /* Block Colors ------------------------------ */ :root .has-accent-color { color: #3bc492; } :root .has-black-color { color: #1d1d1d; } :root .has-dark-gray-color { color: #555; } :root .has-medium-gray-color, :root .has-light-gray-color { color: #757575; } :root .has-white-color { color: #fff; } :root .has-accent-background-color { background-color: #3bc492; } :root .has-black-background-color { background-color: #1d1d1d; } :root .has-dark-gray-background-color { background-color: #555; } :root .has-medium-gray-background-color, :root .has-light-gray-background-color { background-color: #757575; } :root .has-white-background-color { background-color: #fff; } /* Block Font Sizes -------------------------- */ :root .has-small-font-size { font-size: .842em; } :root .has-regular-font-size, :root .has-normal-font-size { font-size: 1em; } :root .has-large-font-size, :root .has-larger-font-size { line-height: 1.5; } :root .has-large-font-size { font-size: 1.3125em; } :root .has-larger-font-size { font-size: 1.625em; } /* Block: Audio ------------------------------ */ .wp-block-audio audio { width: 100%; } /* Block: Button ----------------------------- */ /* Block: Calendar --------------------------- */ .wp-block-calendar table { margin: 0; } .wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 15px; } /* Block: Column ----------------------------- */ .wp-block-column { padding: 0 5px; } /* Block: Cover ------------------------------ */ .wp-block-cover, .wp-block-cover-image { color: #fff; } .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, section.wp-block-cover-image > h2 { font-size: 1.25em; } .wp-block-cover-image p { font-weight: 400; } /* Block: File ------------------------------- */ .wp-block-file { align-items: center; background: rgba( 0, 0, 0, 0.05 ); border-radius: 4px; display: flex; font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif; justify-content: space-between; margin: 30px 0; padding: 20px; } .wp-block-file a:not(.wp-block-file__button) { font-weight: 500; text-decoration: none; } .wp-block-file a:not(.wp-block-file__button):hover { text-decoration: underline; } .wp-block-file__button { flex-shrink: 0; } /* Block: Gallery ---------------------------- */ .blocks-gallery-grid { margin: 0; } :root .blocks-gallery-caption { padding-top: 0; } /* Block: Media and Text --------------------- */ .wp-block-media-text__content > *:first-child { margin-top: 0; } .wp-block-media-text__content > *:last-child { margin-bottom: 0; } /* Block: Pullquote -------------------------- */ .wp-block-pullquote, .wp-block-pullquote blockquote { background: none; border: none; padding: 0; } .wp-block-pullquote blockquote { margin: 0; } .wp-block-pullquote blockquote:before { content: none; } .wp-block-pullquote blockquote p, .wp-block-pullquote.alignleft blockquote p, .wp-block-pullquote.alignright blockquote p { font-size: 1.25em; margin-bottom: 1em; } .wp-block-pullquote.alignleft blockquote p, .wp-block-pullquote.alignright blockquote p { line-height: 1.45; } /* STYLE: SOLID */ .wp-block-pullquote.is-style-solid-color.has-background { padding: 30px; } .wp-block-pullquote.is-style-solid-color blockquote cite { text-transform: uppercase; } /* Block: Recent Posts ----------------------- */ .wp-block-latest-posts__list:not(*[class^="align"]) { margin-left: 0; } /* Block: Quote ------------------------------ */ .wp-block-quote.is-large, .wp-block-quote.is-style-large { margin: 2.5em 0; padding: 30px; } blockquote p:last-child { margin-bottom: 0; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 1.25em; line-height: 1.5; } .wp-block-quote.is-large cite, .wp-block-quote.is-style-large cite { display: block; font-size: .8em; text-align: left; } /* Block: Search ----------------------------- */ :root .wp-block-search__label { display: block; margin: 0 0 5px; } :root .wp-block-search__button { margin-left: .625em; padding: .375em 1em; } /* Block: Separator -------------------------- */ hr.is-style-wide, hr.is-style-dots { max-width: 100%; width: 100%; } /* Block: Social ----------------------------- */ .wp-social-link { margin: 0 8px 0 0; } /* -------------------------------------------------------------------------------- */ /* 9. Entry Content /* -------------------------------------------------------------------------------- */ .post-content { font-family: 'Droid Serif', Georgia, serif; color: #333; position: relative; } /* Alignment Classes ------------------------- */ .alignnone, .aligncenter, .alignwide, .alignfull { margin: 2.5em auto; } .alignwide, .alignfull { margin: 50px 0; } .post-content > .alignwide, .post-content > .alignfull { max-width: 1040px; margin-left: -260px; width: 1040px; } .alignfull > figcaption { padding-left: 7.5%; padding-right: 7.5%; } .alignwide { padding: 0 3.75%; } .alignleft, .alignright { max-width: 45%; } .wp-caption .alignleft, .wp-caption .alignright { margin-bottom: 0; } :root .alignleft { float: left; margin: 0 2em 1.5em -100px; } :root .alignright { float: right; margin: 0 -100px 1.5em 2em; } .aligncenter { margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------------- */ /* 10. Comments /* -------------------------------------------------------------------------------- */ /* Comments Container ------------------------ */ .comments-container { background: #f1f1f1; border-top: 1px solid #ddd; margin-top: 20px; } .comments-inner, .comment-respond form { width: 520px; max-width: 85%; padding-bottom: 80px; margin: 0 auto; } .comments-inner { padding-bottom: 100px; } .comments-inner + .comment-respond { border-top: 1px solid #ddd; } /* Comments Title ---------------------------- */ .comments-title, .comment-reply-title { display: block; margin: 0 auto 54px auto; text-align: center; position: relative; top: -24px; } .comments-title .inner, .comment-reply-title .inner { display: inline-block; padding: 13px 15px; background: #ddd; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #666; position: relative; } /* Comment ----------------------------------- */ .commentlist, .commentlist ul, .commentlist li { list-style: none; margin: 0; } .commentlist div.comment { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 40px; position: relative; } .commentlist > li.comment:first-child > div.comment:first-child { margin-top: 0; border-top: none; padding-top: 0; } .commentlist .children { padding-left: 7.7%; } .comment-title { margin: 0 0 21px; position: relative; font-size: 1.125em; font-weight: 700; color: #333; text-transform: uppercase; } .comment-title a { color: inherit; text-decoration: none; } .comment-title .url:hover { color: #3bc492; } .comment-title span { margin-left: 10px; font-size: 0.875rem; font-weight: 500; color: #757575; } .comment-date-link { color: #757575; } .comment-date-link:hover { color: #666; } .bypostauthor {} /* Comment Actions --------------------------- */ .comment-actions { font-size: 0.875em; font-weight: 600; margin-top: 21px; text-transform: uppercase; } .comment-actions a { text-decoration: none; } .comment-actions a:hover { text-decoration: underline; } .comment-actions a + a { margin-left: 10px; } .comment-awaiting-moderation { color: #757575; } /* Pingbacks --------------------------------- */ .comments .pingbacks { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 40px; } .pingbacks-title { margin-bottom: 15px; font-size: 0.875em; font-weight: 700; color: #333; text-transform: uppercase; } .comments .pingbacks li { padding: 12px 0; border-bottom: 1px dotted #ddd; } .comments .pingbacks li:first-child { border-top: 1px dotted #ddd; } .comments .pingbacks li .url { line-height: 140%; color: #666; } .comments .pingbacks li .comment-edit-link { margin-left: 4px; font-size: 0.7em; font-weight: 700; text-transform: uppercase; color: #757575; } .comments .pingbacks li a:hover { color: #3bc492; } /* Comment Navigation ------------------------ */ .comments-nav { border-top: 1px solid #ddd; color: #757575; font-size: 14px; font-weight: 600; margin-top: 40px; padding-top: 40px; text-transform: uppercase; } .comments-nav a { color: inherit; text-decoration: none; } .comments-nav a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------------- */ /* 11. Respond /* -------------------------------------------------------------------------------- */ .comment-form p { margin-top: 20px; } .comment-form p:first-child { margin-top: 0; } .logged-in-as { margin-bottom: 40px; font-family: 'Droid Serif', Georgia, serif; font-size: 0.925em; text-align: center; font-style: italic; color: #666; } .logged-in-as a { color: inherit; text-decoration: none; } .logged-in-as a:hover { text-decoration: underline; } .comment-form-comment + .comment-form-author, .comment-form-comment + .comment-form-author + .comment-form-email { margin-top: 20px; } p.comment-form-author, p.comment-form-email { width: 47.5%; float: left; margin: 0 0 20px; } p.comment-form-author { margin-right: 5%; } .comment-form label { display: block; margin-bottom: 6px; } .comment-form input[type="checkbox"] + label { display: inline; margin: 0 0 0 5px; text-transform: none; } .comment-form .required { color: red; margin-left: 2px; } .comment-subscription-form + .comment-subscription-form { margin-top: 12px; } /* Comment Reply ----------------------------- */ .commentlist .comment-respond { max-width: 100%; margin: 40px 0 0; padding: 0; } .commentlist .comment-respond form { max-width: 100%; padding-bottom: 0; } .commentlist .comment-reply-title { top: 0; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-align: left; } #cancel-comment-reply-link { margin-left: 10px; font-size: 15px; text-transform: uppercase; color: #757575; } #cancel-comment-reply-link:hover { color: #666; } .commentlist form p { text-align: left; } /* -------------------------------------------------------------------------------- */ /* 12. Pagination /* -------------------------------------------------------------------------------- */ /* Archive Header ---------------------------- */ .archive-header { text-shadow: 0 1px 0 rgba( 0, 0, 0, .1 ); color: #fff; margin-bottom: 70px; text-align: center; } .archive-title-prefix { margin-bottom: 10px; font-size: 0.875em; font-weight: 500; text-transform: uppercase; } .archive-title { font-size: 1.375em; font-weight: 600; margin: 0; text-transform: uppercase; } .archive-description { margin-top: 20px; } .archive-description p:last-child { margin-bottom: 0; } /* Archive Navigation ------------------------ */ .archive-nav { color: #2d2d2d; margin-top: 60px; text-align: center; } .archive-nav span { font-size: 32px; } .archive-nav a { color: #fff; display: inline-block; } .archive-nav a:hover { color: #3bc492; } .archive-nav .sep { margin: 0 20px; font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight: 300; font-stretch: normal; font-size: 40px; position: relative; bottom: -4px; -webkit-font-smoothing: antialiased; } /* JetPack Infinite Scroll ------------------- */ .infinite-scroll .archive-nav { display: none; } #infinite-handle { width: 100%; height: 80px; padding: 20px 0; margin-top: 3.95%; background: #2d2d2d; } #infinite-handle span { display: block; width: 40px; height: 40px; padding: 0; margin: 0 auto; border-radius: 99px; border: 2px solid #757575; background: none; text-indent: -9999px; position: relative; } #infinite-handle span:before, #infinite-handle span:after { content: ""; display: block; background: #757575; position: absolute; top: 50%; left: 50%; } #infinite-handle span:before { width: 2px; height: 20px; margin-left: -1px; margin-top: -10px; } #infinite-handle span:after { width: 20px; height: 2px; margin-left: -10px; margin-top: -1px; } #infinite-handle button { display: none !important; } #infinite-handle:hover { cursor: pointer; background: #3bc492; } #infinite-handle:hover span { border-color: #fff; } #infinite-handle:hover span:before, #infinite-handle:hover span:after { background: #fff; } .infinite-loader { width: 100%; height: 80px; margin-top: 3.95%; text-align: center; } .infinite-loader .spinner { display: inline-block; position: absolute !important; top: auto !important; bottom: 30px !important; left: 50% !important; margin-left: 0; } /* -------------------------------------------------------------------------------- */ /* 13. Page & Page Templates /* -------------------------------------------------------------------------------- */ /* Search Form ------------------------------- */ .search-form { position: relative; } .search-field { display: block; padding: 20px 60px 20px 20px; width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 3px; font-size: 0.875rem; color: #666; } .search-field:focus { border-color: #3bc492; outline: none; } .search-button { -moz-appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; padding: 0; transition: color .15s linear; } .post-content .search-button { border: none !important; color: #757575; display: block; font-size: 20px; position: absolute; bottom: 1px; right: 1px; top: 1px; text-align: center; width: 60px; } .post-content .search-button:hover { color: #666; } /* -------------------------------------------------------------------------------- */ /* 14. Widgets /* -------------------------------------------------------------------------------- */ /* Widgets Structure ------------------------- */ .footer-widgets { color: #fff; display: flex; flex-wrap: wrap; margin-top: 60px; } .footer-widgets-col:only-child { margin: 0; width: 100%; } .footer-widgets-col { width: 47.5%; } .footer-widgets-col:not(:first-child) { margin-left: 5%; } /* Widget Base ------------------------------- */ .widget:not(:first-child) { margin-top: 40px; } .widget-content { font-family: 'Droid Serif', Georgia, serif; } /* -------------------------------------------------------------------------------- */ /* 15. Credits /* -------------------------------------------------------------------------------- */ .credits { padding: 60px 0; position: relative; z-index: 2; } .credits a { text-decoration: none; } .credits p { text-align: center; text-transform: uppercase; } .credits p:first-child { color: #fff; font-size: 1.175em; font-weight: 600; letter-spacing: 0.025em; } .credits p:first-child a { color: #fff; } .credits p:first-child a:hover { color: #3bc492; } .credits p + p { color: #666; font-size: 0.825em; font-weight: 500; margin-top: 12px; } .credits p + p a { color: #666; } .credits p + p a:hover { opacity: 0.5; } img#wpstats { display: none; } /* -------------------------------------------------------------------------------- */ /* 16. No JS Fixes /* -------------------------------------------------------------------------------- */ .no-js .format-gallery .slides li { display: none; } .no-js .format-gallery .slides li:first-child { display: block; } .no-js .archive-nav { display: block; } /* -------------------------------------------------------------------------------- */ /* 17. Responsive /* -------------------------------------------------------------------------------- */ @media ( max-width: 1154px ) { /* Entry Content -------------------------- */ .post-content > .alignwide, .post-content > .alignfull { margin-left: calc( 50% - 45vw ); max-width: 90vw; width: 90vw; } } @media ( max-width: 900px ) { /* Nav Toggle ---------------------------- */ .nav-toggle { -moz-appearance: none; -webkit-appearance: none; color: #fff; display: block; padding: 16px 0; background: rgba(0,0,0,0.1); width: 100%; } .nav-toggle .bars { margin: 0 auto; height: 12px; width: 20px; position: relative; } .nav-toggle .bar { height: 2px; background: #fff; border-radius: 2px; position: absolute; left: 0; right: 0; transition: opacity 0.2s linear 0.2s, top 0.2s linear 0.2s, transform 0.2s linear 0s; } .nav-toggle .bar:nth-child(1) { top: 0px; } .nav-toggle .bar:nth-child(2) { top: 5px; } .nav-toggle .bar:nth-child(3) { top: 10px; } .nav-toggle:hover { cursor: pointer; } .nav-toggle.active .bar { background: #3bc492; transition: opacity 0.2s linear 0s, top 0.2s linear 0s, transform 0.2s linear 0.2s; } .nav-toggle.active .bar:nth-child(1), .nav-toggle.active .bar:nth-child(3) { top: 5px; } .nav-toggle.active .bar:nth-child(1) { transform: rotate( -45deg ); } .nav-toggle.active .bar:nth-child(2) { opacity: 0; } .nav-toggle.active .bar:nth-child(3) { transform: rotate( 45deg ); } /* Navigation ---------------------------- */ .main-menu { display: none; } .mobile-menu, .mobile-menu ul, .mobile-menu li { list-style: none; margin: 0; } .mobile-menu { border-top: 1px solid #2d2d2d; padding: 20px 0; } .mobile-menu a { color: #fff; display: block; font-weight: 500; letter-spacing: 0.025em; padding: 20px 5%; text-decoration: none; text-transform: uppercase; } .mobile-menu ul a { padding-left: 10%; } .mobile-menu ul ul a { padding-left: 15%; } .mobile-menu ul ul ul a { padding-left: 20%; } .mobile-menu ul ul ul ul a { padding-left: 25%; } /* Mobile Search */ .mobile-navigation .search-field { background: none; border: none; border-radius: 0; padding: 25px 60px 25px 5%; border-top: 1px solid #2d2d2d; font-size: 1rem; } .mobile-navigation .search-field:focus { border-color: #2d2d2d; color: #fff; } .mobile-navigation .search-button { width: 60px; padding: 0 20px 0 0; font-size: 20px; text-align: center; color: #757575; position: absolute; top: 0; right: 0; bottom: 0; } .mobile-navigation .search-button:hover { cursor: pointer; color: #fff; } /* Blog ---------------------------------- */ .posts .post { width: 48.025%; padding-bottom: 48.025%; } .posts .post:nth-child(3n+1) { margin-left: 3.95%; } .posts .post:nth-child(2n+1) { margin-left: 0; } /* Single Post --------------------------- */ .post-navigation { padding-top: 10px; border-top: 1px solid #ddd; margin-top: 30px; } .post-navigation a { color: #757575; text-decoration: none; text-transform: uppercase; } .post-navigation a:hover { text-decoration: underline; } .post-nav-prev { float: right; } .post-nav-next { float: left; } .post-navigation p { font-size: 0.875em; font-weight: 700; display: inline; } .post-nav-prev p { margin-right: 5px; } .post-nav-next p { margin-left: 5px; } .post-navigation .fa { font-size: 18px; position: relative; bottom: -1px; } .post-navigation a:hover { color: #666; } /* Related Posts */ .related-posts .post:nth-child(3) { display: none; } /* Entry Content -------------------------- */ .alignnone { max-width: 100%; margin-left: 0; } p.pull.left, :root .alignleft { margin-left: 0; } p.pull.right, :root .alignright { margin-right: 0; } } @media ( max-width: 677px ) { /* Entry Content -------------------------- */ .post-content > .alignwide, .post-content > .alignfull { margin-left: calc( ( 90vw * 0.075 ) * -1 ); } } @media ( max-width: 600px ) { /* Structure ----------------------------- */ .header, .credits { padding: 40px 0; } .single .content { max-width: 100%; } /* Navigation ---------------------------- */ .mobile-menu { padding: 10px 0; font-size: 0.875em; } .mobile-navigation .search-field { font-size: 0.875em; } /* Blog ---------------------------------- */ .posts { margin-top: 0; } .posts .post { padding-bottom: 100%; width: 100%; margin-left: 0 !important; margin-top: 5%; } .posts .post:first-child { margin-top: 0; } /* Single Post --------------------------- */ .post-header { padding: 40px 0; max-width: 85%; } .post-title { font-size: 2em; } .post-inner { padding: 40px 0 50px; } /* Related Posts */ .related-posts { max-width: 85%; margin: 7.5% auto 0; } .related-posts .post:nth-child(3) { display: block; } /* Element Base -------------------------- */ p.pull.left, p.pull.right { max-width: 100%; float: none; margin: 25px 0; } /* Entry Content ------------------------- */ .alignnone { margin: 25px auto; } .post-content > .alignwide, .post-content > .alignfull { margin-left: calc( 50% - 50vw ); max-width: 100vw; width: 100vw; } /* Comments ------------------------------ */ .comments-inner, .comment-respond form { padding-bottom: 50px; } .comments-title, .comment-reply-title { margin-bottom: 20px; } /* Respond ------------------------------- */ p.comment-form-author, p.comment-form-email { width: 100%; float: none; margin-right: 0; } /* Pagination ---------------------------- */ .archive-nav { margin-top: 40px; } .archive-header { margin-bottom: 40px; } #infinite-handle, .infinite-loader { margin-top: 5%; } /* Widgets ------------------------------- */ .footer-widgets { margin-top: 40px; } .footer-widgets-col { width: 100%; } .footer-widgets-col:not(:first-child) { margin: 40px 0 0; } } @media ( max-width: 400px ) { /* Element Base -------------------------- */ input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="number"], input[type="search"], input[type="tel"], input[type="color"], textarea { padding: 13px 15px; } textarea { min-height: 180px; } /* Header -------------------------------- */ .header { padding: 30px 0; } .blog-title { font-size: 1.5em; } .blog-description { font-size: 0.875em; margin-top: 15px; } .social-menu { margin-top: 15px; } /* Blog ---------------------------------- */ .sticky .post-overlay > p { top: 20px; left: 20px; } .archive-post-header { right: 20px; bottom: 20px; left: 20px; } .has-post-thumbnail .archive-post-header { bottom: 25px; } .has-post-thumbnail:hover .archive-post-header { bottom: 20px; } /* Single Post --------------------------- */ .post-navigation a .hide { display: none; } /* Entry Content -------------------------- */ /* Comments ------------------------------ */ .comment-title { font-size: 1em; } .comment-title span { margin-left: 5px; font-size: 0.75rem; } /* Pagination ---------------------------- */ .archive-title { font-size: 1.25em; } /* Infinite Scroll */ #infinite-handle { height: 60px; padding: 15px 0; } #infinite-handle span { width: 30px; height: 30px; } #infinite-handle span:before { height: 14px; margin-top: -7px; } #infinite-handle span:after { width: 14px; margin-left: -7px; } }
Copyright ©2021 || Defacer Indonesia