/* -------------------------------------------------------------------------------- */ /* 0. CSS Reset /* -------------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; height: 100%; min-height: 100%; } 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-weight:normal; font-style:normal; font-size:100%; line-height:1; text-align:left; } table { border-collapse:collapse; border-spacing:0; } ol, ul { list-style:none; } blockquote:before, blockquote:after { content:""; } a { outline:none; } 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; } /* Screen Reader Text */ .screen-reader-text { clip: rect( 1px, 1px, 1px, 1px ); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* -------------------------------------------------------------------------------- */ /* 1. Document Setup /* -------------------------------------------------------------------------------- */ body { background: #fff; border: none; color: #000; font-family: 'Roboto', 'Helvetica Neue', sans-serif; font-size: 20px; } body.customizer-preview { transition: color .2s ease-in-out, background .2s ease-in-out; } body.dark-mode { background: #1d1d1d; color: #fff; } body.lock-screen { height: 100%; position: fixed; width: 100%; } body * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; } body a { color: #000; text-decoration: none; } .dark-mode a { color: #fff; } body a:hover { text-decoration: none; } img { display: block; height: auto; max-width: 100%; } .group:after, .pagination:after, .gallery:after { clear: both; content: ""; display: block; } ::selection { background: #000; color: #FFF; } input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { color: #999; } input::-moz-placeholder { color: #999; } /* -------------------------------------------------------------------------------- */ /* 2. Structure /* -------------------------------------------------------------------------------- */ .section-inner { margin: 0 auto; max-width: 1400px; width: 90%; } .section-inner.footer-widget { max-width: 1200px; } .section-listing, .section-single { margin-top: 2em; } .hide-pagetitle .section-single .single-header { display: none; } .posts-holder { max-width: 1024px; margin: 0 auto; } .blog-3cols .posts-holder, .blog-2cols .posts-holder { max-width: 100%; } .blog-3cols .classic-preview { display: inline-block; width: calc(33.3% - 10px); vertical-align: top; margin-bottom: 3em; } .blog-2cols .classic-preview { display: inline-block; width: calc(50% - 10px); vertical-align: top; margin-bottom: 3em; } .single.wide-featured-image .section-inner.hentry, .single.wide-featured-image .section-inner.page-header { max-width: 1920px; } .single.vertical-featured-image .section-inner { padding-top: 50px; } .single.vertical-featured-image .single-header { max-width: 1200px; margin: 0 auto } .single.vertical-featured-image .page-header { width: 45%; display: inline-block; vertical-align: bottom; margin-bottom: 160px; text-align: left; } .single.vertical-featured-image .featured-image { max-width: calc(55% - 60px); margin-left: 50px; display: inline-block; vertical-align: bottom; } .section-inner.large { max-width: 1024px; } .section-inner.medium { max-width: 840px; } .section-inner.thin { max-width: 560px; } .section-inner .section-inner { width: 100%; } .header-topbar { position: relative; padding: 10px 20px; min-height: 52px; } .header-topbar .inner-topbar { max-width: 90%; margin: 0 auto; position: relative; } .header-topbar ul { margin: 0; padding: 0; list-style: none; } .header-topbar li { display: inline-block;} .header-topbar .topbar-social { float: left; } .header-topbar .topbar-social li { font-size: 12px; text-transform: lowercase; padding: 10px 15px; } .header-topbar .topbar-social li.social-followus { background: #000; color: #fff; text-transform: uppercase; font-size: 11px; } .header-topbar .topbar-search { float: right; } .header-topbar .topbar-search .search-submit { display: none; } .header-topbar .topbar-search .search-field { color: #000; border: 0; text-decoration: none; border-bottom: 1px solid currentcolor; padding: 5px 15px; } .header-topbar .topbar-search .search-field:focus { box-shadow: 0 2px 0 currentcolor; outline: none; border-bottom: 0; } /* Base Transitions ----------------------------- */ a { transition: all .2s ease-in-out; } /* Base Typography ----------------------------- */ .title { font-size: 52px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.35; } .dark-mode .title { font-weight: 400; } /* -------------------------------------------------------------------------------- */ /* 3. Header /* -------------------------------------------------------------------------------- */ .site-header { margin: 0 auto 0 auto; max-width: 1240px; max-width: 90%; padding: 40px 0; position: relative; width: 90%; z-index: 10000; } .wp-custom-logo .site-header { padding: 40px 0; } .sticky-menu.wp-custom-logo .site-header { padding: 20px 0; } .site-header .site-title { font-size: 24px; font-weight: 500; } .site-header .site-title a:hover { color: rgba( 0, 0, 0, .35 ); text-decoration: none; } .dark-mode .site-header .site-title a:hover { color: rgba( 255, 255, 255, .45 ); } .site-header .custom-logo { background: no-repeat top left; background-size: contain; display: block; max-height: 100px; max-width: calc( 100% - 80px ); overflow: hidden; } .site-header.header-wide .custom-logo { width: 100%; clear: both; } .site-header.header-wide .custom-logo img { visibility: visible; margin: 0 auto; } .site-header.header-wide .custom-logo { background-image: none !important; } .show-alt-nav .site-header.header-wide .custom-logo { margin-bottom: 3em; margin-top: 1em; } .sticky-effect .site-header.header-wide .custom-logo { margin-bottom: 0; margin-top: 0; } .show-alt-nav .header-wide .alt-nav, .no-js .header-wide .alt-nav { position: relative; float: none; margin: 0 auto; text-align: center; } .site-header .custom-logo img { display: block; visibility: hidden; width: auto; } .nav-toggle { cursor: pointer; height: 30px; position: absolute; right: 0; top: calc( 50% - 15px ); width: 50px; } .nav-toggle:before { content: ""; display: block; position: absolute; bottom: -20px; left: -20px; right: 0; top: -20px; } .nav-toggle .bar { background-color: rgba( 33, 42, 52, 1 ); display: block; height: 2px; margin-top: 0; opacity: 1; position: absolute; right: 0; top: calc( 50% - 1px ); transform: rotate( 0deg ); transition: transform .2s ease-in 0s, margin 0.2s ease-in 0.2s, opacity 0s ease-in 0.25s; width: 22px; z-index: 1; } .customizer-preview .nav-toggle .bar { transition: background-color .2s ease-in-out; } .dark-mode .nav-toggle .bar { background-color: rgba( 255, 255, 255, 1 ); } .nav-toggle .bar:nth-child(1) { margin-top: -7px; } .nav-toggle .bar:nth-child(2) { margin-top: -1px; } .nav-toggle .bar:nth-child(3) { margin-top: 5px; } .nav-toggle.active .bar { transition: margin 0.2s ease-in, opacity 0s ease-in 0.2s, transform 0.2s ease-out 0.25s; } .nav-toggle.active .bar:nth-child(1) { margin-top: -1px; transform: rotate( 45deg ); } .nav-toggle.active .bar:nth-child(2) { opacity: 0; } .nav-toggle.active .bar:nth-child(3) { margin-top: -1px; transform: rotate( -45deg ); } /* -------------------------------------------------------------------------------- */ /* X. Site Navigation /* -------------------------------------------------------------------------------- */ .sticky-menu .sticky-navigation.sticky-effect { top: 0; z-index: 99999; width: 100%; left: 0; position: fixed; background: #fff; transition: all .2s ease-in-out; } .sticky-menu .sticky-navigation.nav-up { top: -10em !important; z-index: 99999; width: 100%; left: 0; position: fixed; } .sticky-menu .sticky-navigation.sticky-effect { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.07); -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.07); } .sticky-menu .sticky-navigation.sticky-effect .site-header { padding: 20px 0; } .sticky-menu .sticky-navigation.sticky-effect .alt-nav { display: none; } .sticky-menu .sticky-navigation.sticky-effect .nav-toggle { display: block; } .dark-mode.sticky-menu .sticky-navigation { background: #1d1d1d; } .sticky-menu.admin-bar .sticky-navigation { top: 32px; } .site-nav { background: #fff; opacity: 0; padding: 222px 0 120px; position: fixed; bottom: 0; left: -99999px; right: 99999px; top: 0; transform: translateY( 1rem ); transition: opacity .3s ease-in-out, transform .3s ease-in-out, left 0s .3s, right 0s .3s; z-index: 9999; } .dark-mode .site-nav { background: #1d1d1d; } .site-nav.active { left: 0; right: 0; opacity: 1; transform: translateY( 0 ); transition: opacity .3s ease-in-out, transform .3s ease-in-out; } .site-nav .menus { overflow: auto; max-height: 100%; } .site-nav .menus > ul { float: left; width: calc( 50% - 10px ); } .site-nav ul ul { margin: 20px 0 0 40px; } .site-nav ul + ul { margin-left: 20px; } .site-nav li { display: block; font-size: 40px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; width: 100%; } .dark-mode .site-nav li { font-weight: 400; } .site-nav li + li { margin-top: 20px; } .site-nav ul a { border-bottom: .1rem solid transparent; } .site-nav ul + ul a { color: rgba( 0, 0, 0, .35 ); } .dark-mode .site-nav ul + ul a { color: rgba( 255, 255, 255, .45 ); } .site-nav ul a:hover { text-decoration: none; } .site-nav ul:first-child a:hover, .site-nav ul:first-child .current-menu-item > a { border-bottom-color: transparent; } .dark-mode .site-nav ul:first-child a:hover, .dark-mode .site-nav ul:first-child .current-menu-item > a { border-bottom-color: transparent; } .site-nav ul:last-child a:hover, .site-nav ul:last-child .current-menu-item > a { border-bottom-color: transparent; } .dark-mode .site-nav ul:last-child a:hover, .dark-mode .site-nav ul:last-child .current-menu-item > a { border-bottom-color: transparent; } .site-nav footer { background: #fff; padding: 50px 0; position: absolute; bottom: 0; left: 0; right: 0; } .dark-mode .site-nav footer { background: #1d1d1d; } .site-nav footer a { color: inherit; text-decoration: none; } .site-nav footer p:first-child { float: left; } .site-nav footer p:last-child { color: rgba( 0, 0, 0, .35 ); float: right; } .dark-mode .site-nav footer p:last-child { color: rgba( 255, 255, 255, .45 ); } /* Alt Nav / No JS Nav ----------------------------- */ .show-alt-nav .site-header { display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .show-alt-nav .site-header.header-wide { display: block; text-align: center; } .alt-nav { display: none; margin-top: 5px; position: relative; z-index: 1; } .show-alt-nav .nav-toggle, .no-js .nav-toggle { display: none; } .show-alt-nav .site-title, .show-alt-nav .site-logo, .no-js .site-title, .no-js .site-logo { float: left; width: 100%; } .show-alt-nav .alt-nav, .no-js .alt-nav { display: block; -ms-flex-negative: 0; flex-shrink: 0; float: right; margin: 0 0 0 20px; position: absolute; right: 0; } .alt-nav li { display: block; float: left; margin: 0 0 0 0; position: relative; font-size: 13px; text-transform: uppercase; } .header-wide .alt-nav li { display: inline-block; float: none; } .alt-nav > li + li { margin-left: 40px; } .header-wide .alt-nav > li + li { margin-left: 20px; margin-right: 20px; } .alt-nav > li.menu-item-has-children { padding-right: 0px; /* 16 -> 0 */ } .alt-nav > li.menu-item-has-children-yes:after { border: 5px solid transparent; border-left-width: 4px; border-right-width: 4px; border-top-color: #000; content: ""; display: block; position: absolute; right: 0; top: calc( 50% - 2px ); transition: all .2s ease-in-out; } .dark-mode .alt-nav > li.menu-item-has-children:after { border-top-color: #fff; } .alt-nav > li.menu-item-has-children:hover { text-decoration: none; } .alt-nav li a { display: block; } .alt-nav ul { background: #000; border-radius: 3px; font-size: 16px; opacity: 0; margin: 0 0 0 0; padding: 8px 0; position: absolute; left: -9999px; top: calc( 100% + 15px ); transform: translateY( 10px ); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, left 0s .3s, top 0s .3s; width: 200px; } .alt-nav ul:before, .alt-nav ul:after { content: ""; display: block; position: absolute; } .alt-nav ul:before { bottom: 100%; height: 15px; left: 0; right: 0; } .alt-nav ul:after { border: 5px solid transparent; border-bottom-color: #000; bottom: 100%; left: 20px; } .dark-mode .alt-nav ul:after { border-bottom-color: #fff; } .dark-mode .alt-nav ul { background: #fff; } .alt-nav ul li { width: 100%; } .alt-nav ul a { color: #fff; display: block; padding: 12px 20px; } .dark-mode .alt-nav ul a { color: #000; } .alt-nav ul a:hover { text-decoration: none; } .alt-nav ul li:hover { background: rgba( 255, 255, 255, 0.2 ); } .dark-mode .alt-nav ul li:hover { background: rgba( 0, 0, 0, 0.2 ); } .alt-nav li:hover > ul { left: 0; opacity: 1; transform: translateY( 0 ); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .alt-nav ul ul:before { bottom: 0; height: 100%; left: auto; right: 100%; top: 0; width: 15px; } .alt-nav ul ul:after { border-color: transparent; border-right-color: #000; left: -10px; top: 22px; } .dark-mode .alt-nav ul ul:after { border-color: transparent; border-right-color: #fff; } .alt-nav ul li:hover > ul { left: calc( 100% + 15px ); top: -8px; } /* -------------------------------------------------------------------------------- */ /* 4. Archive /* -------------------------------------------------------------------------------- */ .posts { margin: 0; } .classic-preview .essb-subscribe-form-inline, .post-preview .essb-subscribe-form-inline { max-width: 800px; margin: 0 auto; } .glow-effect .classic-preview, .glow-effect .post-preview { box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1); margin: 10px; width: calc(50% - 20px); } .classic-preview { display: block; padding: 20px; position: relative; transition: none; width: 100%; } .classic-preview .post-excerpt, .classic-preview .post-excerpt p { font-size: 1em; line-height: 1.6em; margin-top: 10px; } .blog-3cols .classic-preview .post-excerpt, .blog-3cols .classic-preview .post-excerpt p, .blog-2cols .classic-preview .post-excerpt, .blog-2cols .classic-preview .post-excerpt p { font-size: 14px; } .related-posts .post-excerpt { display: none; } .related-posts .post-meta-details { font-size: 0.8em; } .related-posts .classic-preview .post-featured-image { margin: 1em 0; } .related-posts .classic-preview { margin-bottom: 0; } .related-posts .classic-preview h2.title { font-size: 24px; } .post-preview { display: block; padding: 10px; position: relative; transition: none; width: 50%; } .no-js .posts .post-preview { max-height: 100vh; overflow: hidden; width: 100% !important; } .post-preview.will-spot, .classic-preview.will-spot { opacity: 0; transform: translateY( 40px ); transition: opacity .5s ease-in-out, transform .5s ease-in-out; } .post-preview.spotted, .classic-preview.spotted { opacity: 1; transform: translateY( 0px ); } .post-preview.jetpack-fade-in { animation: jetpackFadeIn .5s 0s 1; } @keyframes jetpackFadeIn { from { opacity: 0; transform: translateY( 40px ); } to { opacity: 1; transform: translateY( 0 ); } } .preview-image { background: rgba( 0, 0, 0, 0.1 ) no-repeat center; background-size: cover; position: relative; } .dark-mode .preview-image { background-color: rgba( 255, 255, 255, 0.1 ); } .post-preview.fallback-image .preview-image:before { content: ""; display: block; padding-bottom: 75%; width: 100%; } .post-preview.fallback-image .preview-image img { display: none; } .preview-image:after { background: rgba( 0, 0, 0, 0.5 ); content: ""; opacity: 0; position: absolute; bottom: 0; left: 0; right: 0; top: 0; transition: opacity .3s ease-in-out, background .3s ease-in-out; } .preview-image img { visibility: hidden; width: 100%; } .post-preview header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; overflow: hidden; position: absolute; bottom: 40px; left: 40px; right: 40px; top: 40px; text-align: center; transition: all .3s ease-in-out; transform: translateY( 10px ); } .post-preview.sticky .sticky-post { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase; width: 100%; } .post-preview h2 { color: #fff; line-height: 1.25; text-align: center; width: 100%; word-break: break-word; } .classic-preview h2 { line-height: 1.25; text-align: left; width: 100%; word-break: break-word; font-size: 42px; } .blog-sidebar-left.three-columns-grid .classic-preview .read-more, .blog-sidebar-right.three-columns-grid .classic-preview .read-more, .four-columns-grid .classic-preview .read-more { display: none; } .post-preview .read-more { display: none; font-size: 13px; font-weight: bold; text-transform: uppercase; margin-top: 15px; position: absolute; bottom: 10px; right: 10px; } .post-preview:hover .read-more { display: block; } .post-preview h2.title { font-size: 32px; font-weight: 700; } .classic-preview h2.title { font-size: 36px; font-weight: 700; } .blog-3cols .classic-preview h2.title, .blog-2cols .classic-preview h2.title { font-size: 24px; } .blog-3cols .post-meta-details, .blog-2cols .post-meta-details { font-size: 14px; } .classic-preview .post-preview-header, .classic-preview .post-preview-footer { max-width: 800px; margin: 0 auto; } .classic-preview .read-more-button { margin-top: 2.5em; text-align: center; } .classic-preview .read-more-button a { border-radius: 4px; border-width: 2px; border-style: solid; box-sizing: border-box; padding: .5rem 2rem; transition: ease all .3s; -webkit-transition: ease all .3s; font-size: 0.9em; } .classic-preview .read-more-button a:hover { background: #000; color: #fff; } .classic-preview .post-featured-image { margin: 2em 0; } .blog-3cols .classic-preview .post-featured-image, .blog-2cols .classic-preview .post-featured-image { margin-top: 0; } .classic-preview .post-featured-image img { margin: 0 auto; } .classic-preview { margin-bottom: 6em; } .post-preview .post-meta-details { color: #fff; text-align: center; word-break: break-word; width: 100%; line-height: 1.25; margin-top: 20px; font-size: 15px; } .post-preview .post-meta-details .bull, .classic-preview .post-meta-details .bull { margin: 0 5px; } .post-preview:hover .preview-image:after, .show-preview-titles .post-preview .preview-image:after { opacity: 1; } .show-preview-titles .post-preview:hover .preview-image:after { background: rgba( 0, 0, 0, 0.6 ); } .post-preview:hover header, .show-preview-titles .post-preview header { opacity: 1; transform: translateY( 0 ); } /* THREE COLUMNS */ @media ( min-width: 1001px ) { .one-column-grid .post-preview, .one-column-grid .classic-preview { width: 100%; } .one-column-grid .post-preview header { bottom: 30px; left: 30px; right: 30px; top: 30px; } .three-columns-grid .post-preview, .three-columns-grid .classic-preview { width: 33.3%; } .glow-effect.three-columns-grid .post-preview, .glow-effect.three-columns-grid .classic-preview { width: calc(33.3% - 20px); } .four-columns-grid .post-preview, .four-columns-grid .classic-preview { width: 25%; } .glow-effect.four-columns-grid .post-preview, .glow-effect.four-columns-grid .classic-preview { width: calc(25% - 20px); } .three-columns-grid .post-preview header { bottom: 30px; left: 30px; right: 30px; top: 30px; } .three-columns-grid .post-preview h2 { font-size: 28px; } .three-columns-grid .classic-preview h2 { font-size: 21px; } .four-columns-grid .post-preview header { bottom: 15px; left: 15px; right: 15px; top: 15px; } .four-columns-grid .post-preview h2 { font-size: 21px; } .four-columns-grid .classic-preview h2 { font-size: 19px; } } /* -------------------------------------------------------------------------------- */ /* 5. Singular /* -------------------------------------------------------------------------------- */ /* Page Header ----------------------------- */ .page-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto 100px auto; max-width: 100%; min-height: 250px; text-align: center; width: 560px; } .page-header.large { width: 100%; max-width: 1024px; } .wide-template .page-header.large, .wide-template .section-inner.large { max-width: 1400px; } .large-template .page-header.large, .large-template .section-inner.large { max-width: 1200px; } .page-header > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .page-header div, .page-header .title, .page-header p { text-align: inherit; } .page-header p { font-size: 22px; line-height: 1.5; margin-top: 25px; } /* Meta ----------------------------- */ .meta { color: rgba( 0, 0, 0, .35 ); font-size: 18px; margin-top: 30px; } .post-meta-details { color: rgba( 0, 0, 0, .35 ); margin-top: 1rem; } .post-meta-details a { color: inherit; } .dark-mode .meta { color: rgba( 255, 255, 255, .45 ); } .meta span { margin: 0 5px; } .meta a { border-bottom: .1rem solid transparent; color: inherit; } .meta a:hover { text-decoration: none; } .dark-mode .meta a:hover { border-bottom-color: rgba( 255, 255, 255, .45 ); } /* Page Image ----------------------------- */ .featured-image { margin-bottom: 50px; position: relative; } .featured-image img { width: 100%; } /* Linked Pages ----------------------------- */ .linked-pages { margin-top: 50px; } /* Meta Bottom ----------------------------- */ .meta.bottom { margin-top: 50px; } .meta.bottom p { float: left; line-height: 1.5; max-width: 40%; } .meta.bottom p.tags { max-width: 60%; } .meta.bottom p.tags a { margin-right: 20px; } .meta.bottom p.tags a:last-child { margin-right: 0; } .meta.bottom p + p { float: right; } /* Related Posts ----------------------------- */ .related-posts-wrapper { margin-top: 100px; } .related-posts { margin: -10px; } .related-posts .post-preview, .related-posts .classic-preview { float: left; } .related-posts .post-preview:nth-child(3), .related-posts .classic-preview:nth-child(3) { display: none; } .related-posts .post-preview .preview-image img { display: none; } .related-posts .classic-preview .preview-image2 img { display: none; } .related-posts .post-preview .preview-image:before { content: ""; display: block; padding-bottom: 150%; width: 100%; } .related-posts .classic-preview .preview-image2:before { content: ""; display: block; padding-bottom: 100%; width: 100%; } .related-posts .classic-preview .preview-image2 { background: rgba( 0, 0, 0, 0.1 ) no-repeat center; background-size: cover; position: relative; } @media ( min-width: 1001px ) { .related-posts .post-preview { width: 33.3%; } .related-posts .classic-preview { width: 33.3%; } .related-posts .post-preview h2 { font-size: 28px; } .related-posts .post-preview:nth-child(3) { display: block; } .related-posts .classic-preview:nth-child(3) { display: block; } } /* -------------------------------------------------------------------------------- */ /* 6. Entry Content /* -------------------------------------------------------------------------------- */ .entry-content { position: relative; } .entry-content a, .meta a, .post-meta-details a { box-shadow: inset 0 -1px 0 currentcolor; text-decoration: none; } .entry-content a:hover, .meta a:hover, .post-meta-details a:hover { box-shadow: inset 0 0 0 currentcolor,0 3px 0 currentcolor; text-decoration: none; } .dark-mode .entry-content a { border-bottom-color: rgba( 255, 255, 255, 1 ); } .dark-mode .entry-content a:hover { border-bottom-color: rgba( 255, 255, 255, .5 ); color: rgba( 255, 255, 255, .5 ); } em { font-style: italic; } hr { border: none; border-top: 1px solid rgba( 0, 0, 0, 0.13 ); margin: 50px 0; } .dark-mode hr { border-top-color: rgba( 255, 255, 255, 0.13 ); } .entry-content > *:first-child { margin-top: 0; } .entry-content > *:last-child { margin-bottom: 0; } .entry-content p { line-height: 1.5; margin-bottom: 35px; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { line-height: 1.2; margin: 60px 0 30px; } .entry-content h1 + h1, .entry-content h1 + h2, .entry-content h1 + h3, .entry-content h1 + h4, .entry-content h1 + h5, .entry-content h1 + h6, .entry-content h2 + h1, .entry-content h2 + h2, .entry-content h2 + h3, .entry-content h2 + h4, .entry-content h2 + h5, .entry-content h2 + h6, .entry-content h3 + h1, .entry-content h3 + h2, .entry-content h3 + h3, .entry-content h3 + h4, .entry-content h3 + h5, .entry-content h3 + h6, .entry-content h4 + h1, .entry-content h4 + h2, .entry-content h4 + h3, .entry-content h4 + h4, .entry-content h4 + h5, .entry-content h4 + h6, .entry-content h5 + h1, .entry-content h5 + h2, .entry-content h5 + h3, .entry-content h5 + h4, .entry-content h5 + h5, .entry-content h5 + h6, .entry-content h6 + h1, .entry-content h6 + h2, .entry-content h6 + h3, .entry-content h6 + h4, .entry-content h6 + h5, .entry-content h6 + h6 { margin-top: 30px; } .entry-content h1, .entry-content h2 { font-weight: 300; } .entry-content h1 { font-size: 40px; } .entry-content h2 { font-size: 32px; } .entry-content h3 { font-size: 28px; } .entry-content h4 { font-size: 24px; } .entry-content h5 { font-size: 20px; font-weight: 500; } .entry-content h6 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; } .entry-content > ol, .entry-content > ul { margin-bottom: 30px; } .entry-content ol, .entry-content ul { margin-left: 40px; } .entry-content ul { list-style: disc; } .entry-content ul ul { list-style: circle; } .entry-content ul ul ul { list-style: square; } .entry-content ol { list-style: decimal; } .entry-content ol ol { list-style: lower-alpha; } .entry-content ol ol ol { list-style: lower-roman; } .entry-content li { line-height: 1.5; margin-top: 15px; } dd, dt { line-height: 1.5; } dt { font-weight: 700; } dd + dt { margin-top: 15px; } code { background: rgba( 0, 0, 0, 0.1 ); padding: 0 1px; } .dark-mode code { background: rgba( 255, 255, 255, 0.2 ); } /* Quotes ----------------------------- */ blockquote { margin: 0 0 30px 0; padding: 0 0 0 30px; } blockquote p { font-weight: 700; hanging-punctuation: first; } blockquote cite:before { content: "— "; } /* Pull Quotes ----------------------------- */ .entry-content .pull { font-size: 29px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; position: absolute; width: 280px; } .entry-content .pull.left { hanging-punctuation: first; right: calc( 100% + 40px ); } .entry-content .pull.right { hanging-punctuation: last; left: calc( 100% + 40px ); text-align: right; } /* Page Media ------------------------------ */ .wp-caption { display: block; max-width: 100%; } .gallery-caption, .wp-caption-text { font-size: 0.8em; margin: 10px 0 0; } .entry-content .gallery-caption, .entry-content .wp-caption-text { margin-bottom: 0; } .wp-caption-text { color: rgba( 0, 0, 0, .5 ); } .dark-mode .wp-caption-text { color: rgba( 255, 255, 255, .5 ); } .wp-caption-text a { color: inherit; } .alignleft, .alignright { margin-bottom: 20px; max-width: 40%; } .alignleft { float: left; margin: 5px 40px 30px -80px; } .alignright { float: right; margin: 5px -80px 30px 40px; } .aligncenter, .alignnone { margin: 50px auto; } .alignnone { margin-left: -80px; margin-right: -80px; max-width: calc( 100% + 160px ); } .has-sidebar-right .alignnone { margin-right: 0; max-width: calc( 100% + 80px ); } .has-sidebar-right .alignright { margin-right: 0; } .has-sidebar-left .alignnone { margin-left: 0; max-width: calc( 100% + 80px ); } .has-sidebar-left .alignleft { margin-left: 0; } .alignnone img { width: 100%; } /* VANILLA GALLERIES */ .gallery { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 50px 0 30px; padding: 0; position: relative; left: calc( 50% - 630px ); width: 1260px; } .gallery + .gallery { margin-top: -30px; } .gallery .gallery-item { display: block; float: left; margin: 0 0 20px; padding: 0 10px; position: relative; width: 100%; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.3%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.6%; } .gallery-columns-7 .gallery-item { width: 14.28%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.1%; } .gallery .gallery-item a { border: none; display: block; line-height: 0; text-align: center; } .gallery img { width: 100%; } .gallery-caption { background: #fff; color: #000; font-size: 12px; line-height: 1.35; margin: 0; max-width: calc( 100% - 40px ); max-height: 50%; overflow: hidden; padding: 12px 14px; position: absolute; bottom: 10px; left: 20px; } .dark-mode .gallery-caption { background: #1d1d1d; color: #fff; } .gallery-columns-1 .gallery-caption, .gallery-columns-2 .gallery-caption, .gallery-columns-3 .gallery-caption { bottom: 40px; font-size: 14px; left: 50px; max-width: calc( 100% - 100px ); } .gallery-columns-3 .gallery-caption { bottom: 30px; left: 40px; max-width: calc( 100% - 80px ); } /* TILED GALLERIES */ .entry-content .tiled-gallery { margin: 50px auto 50px auto; } /* Inputs ----------------------------- */ fieldset { border: 1px solid rgba( 0, 0, 0, .2 ); padding: 25px; } .dark-mode fieldset { border-color: rgba( 255, 255, 255, .3 ); } fieldset legend { font-size: 14px; font-weight: 700; padding: 0 15px; } .dark-mode fieldset legend { color: rgba( 255, 255, 255, .7 ); } label { font-size: 0.9em; margin-bottom: 8px; } textarea, input[type="email"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] { background: transparent; border-radius: none; border: 1px solid rgba( 0, 0, 0, 0.2 ); box-shadow: none; color: #000; display: block; font-size: 0.9em; margin: 0 0 15px 0; padding: 15px; transition: border-color .2s ease-in-out; width: 100%; } textarea { line-height: 1.5; height: 200px; } textarea:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus { outline: none; } .dark-mode textarea, .dark-mode input[type="email"], .dark-mode input[type="password"], .dark-mode input[type="tel"], .dark-mode input[type="text"], .dark-mode input[type="url"] { border-color: rgba( 255, 255, 255, 0.3 ); color: #fff; } button, .button, input[type="button"], input[type="submit"] { background: #000; border: none; border-radius: 0; color: #fff; display: inline-block; font-family: inherit; font-size: 16px; font-weight: 700; min-width: 120px; padding: 16px 24px 18px; text-align: center; -moz-appearance: none; -webkit-appearance: none; } button, .button, input[type="button"]:hover, input[type="submit"]:hover { cursor: pointer; } .dark-mode button, .dark-mode .button, .dark-mode input[type="button"], .dark-mode input[type="submit"] { background: rgba( 255, 255, 255, .25 ); transition: background .2s ease-in-out; } .dark-mode button:hover, .dark-mode .button:hover, .dark-mode input[type="button"]:hover, .dark-mode input[type="submit"]:hover { background: rgba( 255, 255, 255, .3 ); } /* Tables ----------------------------- */ table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 0.9em; margin-bottom: 30px; max-width: 100%; overflow: hidden; width: 100%; } th, td { line-height: 1.4; margin: 0; overflow: visible; padding: 2.5%; } caption { font-size: 13px; font-weight: 700; padding-bottom: 2.5%; text-align: center; text-transform: uppercase; } thead { vertical-align: bottom; white-space: nowrap; } th { font-weight: 700; } tbody > tr:nth-child(odd) { background: rgba( 0, 0, 0, 0.05 ); } .dark-mode tbody > tr:nth-child(odd) { background: rgba( 255, 255, 255, 0.1 ); } /* -------------------------------------------------------------------------------- */ /* 7. Comments /* -------------------------------------------------------------------------------- */ .comments, .comment-respond { padding-top: 100px; } .comment-reply-title { font-size: 28px; margin: 0 0 50px 0; } .comment-reply-title small { font-size: 20px; margin-left: 10px; } .comment { font-size: 18px; margin-top: 50px; } .comment a { color: inherit; } .commentlist > .comment:first-child { margin-top: 0; } .comment .comment { margin-left: 50px; } .comment-author, .comment-meta { line-height: 1.66; } .comment-author { position: relative; } .comment-author cite { font-weight: 700; } .comment-author .says { display: none; } .comment-author .avatar { display: block; position: absolute; right: calc( 100% + 20px ); top: 0; width: 55px; } .bypostauthor .comment-author { text-transform: uppercase; } .comment-meta { margin-bottom: 20px; } .comment-metadata { color: rgba( 0, 0, 0, .35 ); line-height: 1.25; } .dark-mode .comment-metadata { color: rgba( 255, 255, 255, .45 ); } .comment-content, .comment-content p, .comment-content li { line-height: 1.5; } .comment-content p, .comment-content li { margin-bottom: 20px; } .comment-content *:last-child { margin-bottom: 0; } .comment .reply { font-size: 14px; letter-spacing: 0.05em; margin-top: 22px; text-transform: uppercase; font-weight: 700; } .comment .reply a:hover { text-decoration: none; } /* Comments Pagination ---------------------------- */ .comments-pagination { margin-top: 100px; position: relative; text-align: center; } .comments-pagination .page-numbers { display: inline-block; padding: 0 3px; } .comments-pagination .page-numbers.dots { color: rgba( 0, 0, 0, .35 ); } .dark-mode .comments-pagination .page-numbers.dots { color: rgba( 255, 255, 255, .45 ); } .comments-pagination .prev, .comments-pagination .next { margin: 0 0 0 0; position: absolute; top: 0; } .comments-pagination .prev { left: 0; } .comments-pagination .next { right: 0; } /* Respond ---------------------------- */ .logged-in .comment-respond .comment-reply-title { margin-bottom: 20px; } .comment-respond .logged-in-as { color: rgba( 0, 0, 0, .35 ); font-size: 18px; line-height: 1.25; margin: 0 0 50px 0; } .dark-mode .comment-respond .logged-in-as { color: rgba( 255, 255, 255, .45 ); } .comment-respond p + p { margin-top: 20px; } .comment-respond .comment-form-author, .comment-respond .comment-form-email { float: left; margin: 20px 0; width: calc( 50% - 10px ); } .comment-respond .comment-form-email { margin-left: 20px; } .comment-respond label { display: block; } /* Reply Respond ---------------------------- */ .comments .comment-respond { margin: 50px 0; } /* -------------------------------------------------------------------------------- */ /* 8. Page Templates /* -------------------------------------------------------------------------------- */ /* Resume Template ---------------------------- */ .resume-template .entry-content { max-width: 1024px; padding-left: 280px; } .resume-template .entry-content h1, .resume-template .entry-content h2, .resume-template .entry-content h3, .resume-template .entry-content h4, .resume-template .entry-content h5, .resume-template .entry-content h6 { border-top: 1px solid #000; font-size: 24px; font-weight: 500; margin: 80px 0 -28px -280px; padding: 50px 580px 0 0; } .resume-template .entry-content > h1:first-child, .resume-template .entry-content > h2:first-child, .resume-template .entry-content > h3:first-child, .resume-template .entry-content > h4:first-child, .resume-template .entry-content > h5:first-child, .resume-template .entry-content > h6:first-child { margin-top: 0; } .dark-mode.resume-template .entry-content h1, .dark-mode.resume-template .entry-content h2, .dark-mode.resume-template .entry-content h3, .dark-mode.resume-template .entry-content h4, .dark-mode.resume-template .entry-content h5, .dark-mode.resume-template .entry-content h6 { border-top-color: rgba( 255, 255, 255, 0.1 ); } .resume-template .entry-content .alignnone { margin-left: auto; margin-right: auto; max-width: 100%; } /* -------------------------------------------------------------------------------- */ /* 9. Pagination /* -------------------------------------------------------------------------------- */ .post-pagination { margin-top: 100px; } .post-pagination .previous-posts-link { float: left; } .post-pagination .next-posts-link { float: right; } .post-pagination a { color: rgba( 0, 0, 0, .35 ); } .dark-mode .post-pagination a { color: rgba( 255, 255, 255, .45 ); } .post-pagination a:hover { color: #000; text-decoration: none; } .dark-mode .post-pagination a:hover { color: #fff; } /* Jetpack Infinite Scroll ---------------------------- */ .infinite-scroll .post-pagination { display: none; } /* Loading Button */ .infinite-scroll .posts { padding-bottom: 130px; } .infinite-scroll.infinity-end .posts { padding-bottom: 0; } .infinite-scroll #infinite-handle { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } .infinite-scroll #infinite-handle span { background: none; padding: 0 0 0 0; } .infinite-scroll #infinite-handle button, .infinite-scroll #infinite-handle button:hover, .infinite-scroll #infinite-handle button:focus { background: none; border-radius: 0; color: rgba( 0, 0, 0, .5 ); font-size: 40px; font-weight: 300; letter-spacing: -0.025em; padding: 0; transition: color .2s ease-in-out; } .infinite-scroll #infinite-handle button:hover, .infinite-scroll #infinite-handle button:focus { color: #000; } .dark-mode.infinite-scroll #infinite-handle button, .dark-mode.infinite-scroll #infinite-handle button:hover, .dark-mode.infinite-scroll #infinite-handle button:focus { color: rgba( 255, 255, 255, 0.4 ); font-weight: 400; } .dark-mode.infinite-scroll #infinite-handle button:hover, .dark-mode.infinite-scroll #infinite-handle button:focus { color: #fff; } /* Loading Animation */ .infinite-loader { height: 40px; position: absolute; bottom: 10px; left: calc( 50% - 20px ); width: 40px; } .infinite-loader * { display: none; } .infinite-loader:before, .infinite-loader:after { -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; background: rgba( 0, 0, 0, .25 ); border-radius: 50%; content: ""; height: 100%; opacity: 0.6; position: absolute; left: 0; top: 0; width: 100%; } .dark-mode .infinite-loader:before, .dark-mode .infinite-loader:after { background: rgba( 255, 255, 255, .25 ); } .infinite-loader:after { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0); transform: scale(0.0); } 50% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /* -------------------------------------------------------------------------------- */ /* 10. Footer /* -------------------------------------------------------------------------------- */ .site-footer { padding: 50px 0; text-align: center; clear: both; } .site-footer p { font-weight: 500; font-size: 16px; line-height: 1; text-align: center; } .site-footer p + p { color: rgba( 0, 0, 0, .35 ); font-size: 12px; margin-top: 12px; } .dark-mode .site-footer p + p { color: rgba( 255, 255, 255, .45 ); } .site-footer a { border-bottom: .1rem solid transparent; } .site-footer a:hover { text-decoration: none; } .site-footer p + p a { color: inherit; } .site-footer p:first-child a:hover { border-bottom-color: #000; } .dark-mode .site-footer p:first-child a:hover { border-bottom-color: #fff; } .site-footer p + p a:hover { border-bottom-color: rgba( 0, 0, 0, .35 ); } .dark-mode .site-footer p + p a:hover { border-bottom-color: rgba( 255, 255, 255, .45 ); } .site-footer.footer-navigation { padding: 50px 0 0 0; } .site-footer.footer-navigation ul { text-align: center; } .site-footer.footer-navigation li { display: inline-block; position: relative; margin: 0 8px; font-size: 12px; text-transform: uppercase; } /* ----- Sidebar Templates --------------------- */ .single.has-sidebar-right .entry-primary { width: 680px; float: left; } .single.has-sidebar-right #secondary { width: 290px; margin-left: 34px; float: right; padding: 0 10px; } .single.has-sidebar-left .entry-primary { width: 680px; float: right; } .single.has-sidebar-left #secondary { width: 290px; margin-right: 34px; float: left; padding: 0 10px; } .blog-sidebar-right .posts-holder { width: calc(100% - 324px); float: left; } .blog-sidebar-right #secondary { width: 290px; margin-left: 34px; float: right; padding: 0 10px; } .blog-sidebar-left .posts-holder { width: calc(100% - 324px); float: right; } .blog-sidebar-left #secondary { width: 290px; margin-right: 34px; float: left; padding: 0 10px; } .single.has-sidebar-right .related-posts-wrapper, .single.has-sidebar-left .related-posts-wrapper, .single.has-sidebar-right .site-footer, .single.has-sidebar-left .site-footer { clear: both;} #secondary .widget { margin-bottom: 30px; overflow: hidden; } .footer-widget .widget { margin-bottom: 30px; } #secondary .essb-subscribe-form { margin-bottom: 30px; } .widget-style2 #secondary .widget { overflow: visible; } #secondary .widget, .footer-widget .widget { font-size: 15px; } #secondary .widget li, .footer-widget .widget li { padding: 8px 0; } #secondary .widget .widget-title, .footer-widget .widget .widget-title { text-align: left; text-transform: uppercase; letter-spacing: .5px; color: #000; font-size: 0.8em; margin-bottom: 24px; padding: 0; line-height: 36px; position: relative; } .widget-style2 #secondary .widget .widget-title, .widget-style2 .footer-widget .widget .widget-title { text-align: center; box-shadow: 0 2px 10px 0 rgba(0, 0,0,0.1); } .dark-mode #secondary .widget .widget-title, .dark-mode .footer-widget .widget .widget-title { color: #fff; } #secondary .widget .widget-title span:after, .footer-widget .widget .widget-title span:after { border-bottom: 1px solid rgba(0,0,0,0.2); content: " "; width: 100px; display: block; } .widget-style2 #secondary .widget .widget-title span:after, .widget-style2 .footer-widget .widget .widget-title span:after { border-bottom: 0; content: ''; } .dark-mode #secondary .widget .widget-title span:after, .dark-mode .footer-widget .widget .widget-title span:after { border-bottom-color: rgba(255,255,255,.2); } .footer-widget { padding: 80px 0 0; clear: both; } .footer-widget-inner .footer-widget-column { margin: 0; margin-bottom: 30px; padding: 0 15px; width: 33%; display: inline-block; vertical-align: top; } /* -------------------------------------------------------------------------------- */ /* 11. Media Queries /* -------------------------------------------------------------------------------- */ /* 1380 PX */ @media ( max-width: 1380px ) { /* Entry Content ----------------------------- */ /* PAGE MEDIA */ .gallery { left: calc( 50% - 45vw - 10px ); width: calc( 90vw + 20px ); } /* PULL QUOTES */ .entry-content .pull { position: static; } .entry-content .pull.left { float: left; margin: 5px 40px 40px -80px; } .entry-content .pull.right { float: right; margin: 5px -80px 40px 40px; } } /* 1200 PX */ @media (max-width: 1200px) { .single.has-sidebar-right .entry-primary { width: 100%; float: none; } .single.has-sidebar-right #secondary { width: 100%; margin-left: 0; float: none; padding: 0; margin-top: 30px; } .single.has-sidebar-left .entry-primary { width: 100%; float: none; } .single.has-sidebar-left #secondary { width: 100%; margin-right: 0; float: none; padding: 0; margin-top: 30px; } .blog-sidebar-right .posts-holder { width: 100%; float: none; } .blog-sidebar-right #secondary { width: 100%; margin-left: 0; float: none; padding: 0; margin-top: 30px; } .blog-sidebar-left .posts-holder { width: 100%; float: none; } .blog-sidebar-left #secondary { width: 100%; margin-right: 0; float: none; padding: 0; margin-top: 30px; } .has-sidebar-right .alignnone { margin-right: 0; margin-left: 0; max-width: 100%; } .has-sidebar-left .alignnone { margin-left: 0; margin-right: 0; max-width: 100%; } .single.vertical-featured-image .single-header { max-width: 95%; margin: 0 auto } .single.vertical-featured-image .page-header { width: 100%; display: block; margin-bottom: 50px; text-align: center; } .single.vertical-featured-image .featured-image { max-width: 100%; width: 100%; margin-left: 0; display: block; } } /* 1000 PX */ @media ( max-width: 1000px ) { /* Site Nav ----------------------------- */ .show-alt-nav .alt-nav { display: none; } .show-alt-nav .nav-toggle { display: block; } .show-alt-nav .site-header.header-wide .custom-logo { margin-top: 0.5em; margin-bottom: 0.5em; } /* Singular ----------------------------- */ .post-preview h2 { font-size: 28px; } /* Page Templates ----------------------------- */ .resume-template .entry-content { padding-left: 300px; } .resume-template .entry-content h1, .resume-template .entry-content h2, .resume-template .entry-content h3, .resume-template .entry-content h4, .resume-template .entry-content h5, .resume-template .entry-content h6 { margin: 80px 0 -28px -300px; padding: 50px 600px 0 0; } .footer-widget-inner .footer-widget-column { margin: 0; margin-bottom: 30px; padding: 0 15px; width: 100%; float: none; display: block; } .footer-widget-inner .footer-widget-column .widget-title, #secondary .widget .widget-title { text-align: left; } .blog-3cols .classic-preview { display: inline-block; width: calc(50% - 10px); vertical-align: top; margin-bottom: 3em; } .recipe .recipe-info .recipe-info-single { width: 30% !important; margin-bottom: 1em; } } /* 800 PX */ @media ( max-width: 800px ) { /* Page Templates ----------------------------- */ .resume-template .entry-content { padding-left: 200px; } .resume-template .entry-content h1, .resume-template .entry-content h2, .resume-template .entry-content h3, .resume-template .entry-content h4, .resume-template .entry-content h5, .resume-template .entry-content h6 { margin: 80px 0 -28px -200px; padding: 50px 500px 0 0; } .header-topbar { display: none; } } /* 750 PX */ @media ( max-width: 750px ) { /* Navigation ----------------------------- */ .site-nav .menus > ul { float: none; width: 100%; } .site-nav .menus > ul + ul { margin: 40px 0 0; } /* Entry Content ----------------------------- */ /* PAGE MEDIA */ .alignleft { margin: 5px 25px 25px 0; } .alignright { margin: 5px 0 25px 25px; } .alignnone { max-width: 100%; } .alignnone, .aligncenter { margin: 40px auto; } .gallery { margin: 40px auto 20px; } .gallery + .gallery { margin-top: -20px; } .gallery-columns-1 .gallery-caption, .gallery-columns-2 .gallery-caption, .gallery-columns-3 .gallery-caption { bottom: 10px; font-size: 12px; left: 20px; max-width: calc( 100% - 40px ); } /* PULL QUOTES */ .entry-content .pull.left { margin-left: 0; } .entry-content .pull.right { margin-right: 0; } /* Comments ----------------------------- */ .comment-author, .comment-metadata { padding-left: 70px; } .comment-author .avatar { left: 0; width: 55px; } .blog-3cols .classic-preview { display: block; width: 100%; vertical-align: top; margin-bottom: 3em; } .blog-2cols .classic-preview { display: block; width: 100%; vertical-align: top; margin-bottom: 3em; } } /* 620 PX */ @media ( max-width: 620px ) { body { font-size: 18px; } /* Structure ----------------------------- */ /* BASE TYPOGRAPHY */ .title { font-size: 30px; } /* Site Header ----------------------------- */ .site-header { padding: 50px 0; } .wp-custom-logo .site-header { padding: 35px 0; } /* Navigation ----------------------------- */ .site-nav { padding-top: 124px; padding-bottom: 40px; } .site-nav ul:first-child li { font-size: 30px; } .site-nav ul + ul li { font-size: 20px; font-weight: 400; } .site-nav ul + ul li + li { margin-top: 10px; } .site-nav footer { display: none; } /* Singular ----------------------------- */ .page-header { margin-bottom: 50px; } @supports ( display: -webkit-flex ) or ( display: -moz-flex ) or ( display: flex ) { .page-header { min-height: 150px; } } .page-header p { font-size: 1em; } .meta { font-size: 0.9em; } .meta.bottom { margin-top: 25px; } .meta.bottom p, .meta.bottom p.tags { float: none; max-width: none; } .meta.bottom p.tags a { margin-right: 15px; } .meta.bottom p + p { float: none; margin-top: 8px; } .related-posts-wrapper { margin-top: 50px; } /* Archive ----------------------------- */ .posts { margin: -10px 0; position: relative; left: calc( 50% - 50vw + 2.5px ); width: calc( 100vw - 5px ); } .post-preview { padding: 5px; } .post-preview header { bottom: 20px; left: 15px; right: 15px; top: 20px; } .post-preview.sticky .sticky-post { font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; } .post-preview h2 { font-size: 20px; } /* PAGINATION */ .post-pagination { margin-top: 50px; } .infinite-scroll .posts { padding-bottom: 70px; } .infinite-scroll #infinite-handle button, .infinite-scroll #infinite-handle button:hover, .infinite-scroll #infinite-handle button:focus { font-size: 30px; } /* Entry Content ----------------------------- */ .entry-content p { margin-bottom: 25px; } /* PAGE MEDIA */ .gallery { left: calc( 50% - 50vw ); margin: 40px auto 30px; padding: 0 5px; width: 100vw; } .gallery + .gallery { margin-top: -30px; } .gallery .gallery-item { margin-bottom: 10px; padding: 0 5px; } .gallery-caption { display: none; } .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item { width: 50%; } /* PULL QUOTES */ .entry-content .pull.left, .entry-content .pull.right { float: none; margin: 40px 0 40px 0; width: 100%; } /* Comments ----------------------------- */ .comments, .comment-respond { padding-top: 50px; } .comments-pagination { margin-top: 50px; } .comment-respond .comment-form-author, .comment-respond .comment-form-email { float: none; margin: 20px 0 0; width: 100%; } /* Page Templates ----------------------------- */ .resume-template .entry-content { padding-left: 0; } .resume-template .entry-content h1, .resume-template .entry-content h2, .resume-template .entry-content h3, .resume-template .entry-content h4, .resume-template .entry-content h5, .resume-template .entry-content h6 { font-size: 22px; margin: 80px 0 35px 0; padding: 40px 0 0; } /* Site Footer ----------------------------- */ .site-footer { padding: 50px 0; } .site-footer p + p { font-size: 16px; } } /* 400 PX */ @media ( max-width: 400px ) { /* Site Header ----------------------------- */ .site-header .site-title { font-size: 20px; } /* Singular ----------------------------- */ .page-header p { margin-top: 20px; } .page-header .meta { margin-top: 25px; } /* Archive ----------------------------- */ .post-preview header { bottom: 10px; left: 10px; right: 10px; top: 10px; } .post-preview h2 { font-size: 16px; font-weight: 400; } /* Comments ----------------------------- */ .comments-pagination .page-numbers { display: none; } .comments-pagination .page-numbers:first-child, .comments-pagination .page-numbers:last-child { display: block; position: static; } .comments-pagination .page-numbers:first-child { float: left; } .comments-pagination .page-numbers:last-child { float: right; } } /*-------------------------------------------------------------- Single Sticky Bar --------------------------------------------------------------*/ .joy-single-sticky { position: fixed; bottom: 0; width: 100%; left: 0; height: 72px; background: #FFF; -webkit-box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.07); z-index: 999; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translate3d(0, 110px, 0); transform: translate3d(0, 110px, 0); } .dark-mode .joy-single-sticky { background: #2d2d2d; } .joy-single-sticky h5 { color: #000; } .dark-mode .joy-single-sticky h5 { color: #fff; } .joy-single-sticky a { text-decoration: none; font-size: 0.9rem; } .joy-single-sticky.joy-single-sticky-show, .joy-single-sticky .joy-sticky-content { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .joy-sticky-content { max-width: 1200px; margin: 0 auto; height: 72px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .joy-show-meta .meta, .joy-show-prev-next .prev-next { opacity: 1; visibility: visible; pointer-events: auto; } .joy-show-meta .prev-next, .joy-show-prev-next .meta { height: 0; } .joy-header-wide .joy-sticky-content { max-width: 100%; padding: 0 35px; } .joy-flex-center { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 72px; } .joy-sticky-l, .joy-sticky-r { max-width: 500px; } .joy-prev-next-nav a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-decoration: none; border-bottom: 0; } .meta span.sticky-author-date { margin-left: 0; margin-top: 5px; } .joy-prev-next-nav a:hover { text-decoration: none; border-bottom: 0; } .joy-prev-next-nav .joy-next-link a { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; text-align: right; } .joy-sticky-l .joy-pn-ico, .joy-sticky-l .joy-pn-image { margin-right: 1rem; } .joy-sticky-r .joy-pn-ico, .joy-sticky-r .joy-pn-image { margin-left: 1rem; } .joy-pn-image { width: 50px; } .joy-pn-image img { min-width: 50px; width: 50px; height: 50px; } .joy-prev-next-nav .joy-pn-link { line-height: 1.2rem; } .joy-sticky-c { text-align: center; } .joy-top-link { font-size: 0.7em; text-transform: uppercase; } .joy-sticky-c { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .joy-sticky-author img { margin-right: 1rem; border-radius: 50%; } .joy-sticky-comments i { margin-right: 1rem; } .joy-sticky-author { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .sticky-author-date { display: block; } .sticky-author-date, .joy-sticky-c { font-size: 0.7rem; } .sticky-author-date .cat-links a { color: #222; font-size: 0.7rem; font-weight: 400; } /** Widgets **/ #secondary .widget_popular_posts ul li, #footer-widget .widget_popular_posts ul li { padding: 15px 0; } #secondary .widget_popular_posts ul li:first-child, #footer-widget .widget_popular_posts ul li:first-child { padding-top: 8px; } .widget_popular_posts ul li p{ margin-bottom: 0px; font-size: 0.8em; } .widget_popular_posts .entry-image.medium { text-align: center; } .widget_popular_posts ul li.center { text-align: center; } .widget_popular_posts .entry-image.small { max-width: 64px; width: 64px; float: left;} .widget_popular_posts li.small .entry-heading { margin-left: 74px;} .widget_popular_posts li .review-widget-value { margin-top: 3px; } .widget_popular_posts ul li.small { clear: both; min-height: 64px; } .widget_popular_posts .entry-image.circle img { border-radius: 50%; } .widget_popular_posts .entry-image.round img { border-radius: 5px; } .widget_popular_posts .last-update { font-size: 12px; margin-top: 5px; } .widget_popular_posts ul li .entry-summary p { margin-bottom: 0px !important; } /** Instagram Widget **/ .lilly-instagram-feed ul, .lilly-instagram-feed li, .lilly-instagram-feed ul li { list-style: none; margin: 0; } .prefooter { clear: both; margin-top: 50px; } .prefooter .joy-instagram-feed ul { display: flex; } .prefooter .widget-title { font-size: 0.8em; text-transform: uppercase; letter-spacing: .5px; line-height: 24px; text-align: center; margin-bottom: 15px;} .joy-instagram-feed li { padding: 0 !important; } .joy-instagram-feed img { float: left; } .joy-instagram-size-4cols img { max-width: 100%; width: 25%;} .joy-instagram-size-3cols img { max-width: 100%; width: 33.3%;} .joy-instagram-size-2cols img { max-width: 100%; width: 50%;} .joy-instagram-size-1cols img { max-width: 100%; width: 100%;} .joy-instagram-feed:after { content: ""; clear: right;} .joy-instagram-feed .instagram-feed { width: 100%; position: relative; margin-bottom: 30px; overflow: hidden; } .prefooter .joy-instagram-feed .instagram-feed { margin-bottom: 0px; } /** * About Me */ .joy-about-me-holder { text-align: center; } .joy-about-me-widget__image { width: 100px; height: 100px; background-size: cover; background-position: 50% 50%; border-radius: 50%; margin: 0 auto; } .joy-about-me-widget__name { font-size: 16px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; } .joy-about-me__text { font-size: 0.8em; } /** Ads Widget **/ .joy_ads_widget .small li, .joy_ads_widget ul.custom li, .joy_adswidget_ul.small li, .joy_adswidget_ul.custom li{ display: inline-block; margin-right: 3px; margin-bottom: 0; } .joy_ads_widget ul.large img, .joy_adswidget_ul.large img{ width: 300px; height: 250px; } .joy_ads_widget ul.small img, .joy_adswidget_ul.small img{ width: 125px; height: 125px; } .joy_ads_widget ul li a{ padding: 0; margin: 0; } /* Author Info */ .author-info { margin: 50px 0; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1); padding: 50px 30px; text-align: center; } .author-info .author-avatar { display: block; text-align: center; vertical-align: top; margin-bottom: 15px; } .author-info .author-avatar img { margin: 0 auto; max-width: 100%; text-align: center;} .author-info .author-data { display: block; width: 100%; } .author-info .author-data .author-title { font-size: 0.7em; text-transform: uppercase; } .author-info .author-data .author-name { font-size: 1.1em; font-weight: bold; margin-bottom: 20px; } .author-info .author-data .author-bio { font-size: 0.7em; line-height: 1.6em; text-align: center; } .author-info .author-data .author-link { display: block; font-size: 11px; text-transform: uppercase; font-weight: bold; margin-top: 15px; } .post-subscribe-form { margin-bottom: 50px; } /** CreoWorx Toolkit Integration **/ .widget .creoworx-custom-categories-wrap li { padding: 50px 0 !important; background-position: center !important; background-size: cover !important; } .widget_creoworxcustomcategories ul li a span { background: #000; width: 80%; padding: 15px 10px; text-align: center; margin: 0 auto; display: block; float: none !important; } .widget_creoworxcustomcategories ul li:after { background: transparent; } .widget_creoworxpopularpost ul li .entry-header .entry-title, .widget_creoworxfeaturedpost ul li .entry-header .entry-title, .widget_creoworx_pro_recent_post ul li .entry-header .entry-title { font-size: 16px; line-height: 18px; text-align: center; font-weight: bold; margin-top: 5px; } .widget_creoworxpopularpost ul.style-one li .entry-header .entry-title, .widget_creoworxfeaturedpost ul.style-one li .entry-header .entry-title, .widget_creoworx_pro_recent_post ul.style-one li .entry-header .entry-title { text-align: left; } .widget_creoworxpopularpost .style-two li .entry-header .cat-links a, .widget_creoworxfeaturedpost .style-two li .entry-header .cat-links a, .widget_creoworx_pro_recent_post .style-two li .entry-header .cat-links a, .widget_creoworxpopularpost .style-three li .entry-header .cat-links a, .widget_creoworxfeaturedpost .style-three li .entry-header .cat-links a, .widget_creoworx_pro_recent_post .style-three li .entry-header .cat-links a { font-size: 12px; text-transform: uppercase; } .widget_creoworxpopularpost ul li .entry-header .entry-meta, .widget_creoworxfeaturedpost ul li .entry-header .entry-meta, .widget_creoworx_pro_recent_post ul li .entry-header .entry-meta { font-size: 11px; text-transform: uppercase; } .widget_creoworxpostssliderwidget .carousel-title .cat-links { font-size: 12px; text-transform: uppercase; } .widget_creoworxpostssliderwidget .carousel-title .title { font-size: 16px; line-height: 18px; font-weight: bold; text-align: center; margin-top: 10px; } .post-gallery-slider { width: 100%; height: 60vh; } .post-gallery-slider .swiper-slide { background-position: center; background-size: cover !important; } .post-gallery-slider .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .post-gallery-slider .swiper-pagination-bullet-active { background: #fff; } .post-gallery-slider .swiper-button-next, .post-gallery-slider .swiper-button-prev { background-image: none; color: #fff; opacity: 0.5; font-size: 21px; background-color: #000; width: auto; height: auto; margin-top: -40px; padding: 10px; } .post-gallery-slider .swiper-button-next:hover, .post-gallery-slider .swiper-button-prev:hover { opacity: 1; } .dropcap { float: left; font-size: 3em; line-height: 1; margin-right: 10px; } .dropcap.dropcap-style2 { font-size: 8rem; color: rgba(0,0,0,.07); line-height: 1; vertical-align: top; position: absolute; font-weight: bold; margin-left: -40px; margin-top: -20px; } .dropcap.dropcap-style3 { background: #000; color: #fff; font-weight: bold; padding: 10px 15px; } /** Featured Content Slider ***/ .featured-slider { margin-bottom: 100px; } .featured-slider .swiper-slide { background-position: center; background-size: cover; } .featured-slider .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .featured-slider .entry-title, .featured-slider .entry-title a { font-size: 28px; color: #fff; margin-bottom: 20px; text-align: center; font-weight: bold; } .featured-slider .post-meta-details { color: #fff; text-align: center; word-break: break-word; width: 100%; line-height: 1.25; margin-top: 20px; font-size: 15px; } .featured-slider .post-meta-details .bull { margin: 0 5px; } .featured-slider .slider-inner .read-more { margin-top: 20px; } .featured-slider .slider-inner, .featured-slider .slider-inner .read-more a { color: #fff; } .featured-slider .entry-header-wrapper { background: rgba(0,0,0,0.8); padding: 45px; width: 90%; max-width: 800px; min-height: 200px; } .featured-slider.slider-type-slider2 .entry-header-wrapper { padding-bottom: 10px; bottom: 0; left: 0; position: absolute; } .featured-slider .swiper-pagination-bullet-active { background: #fff; } .featured-slider .swiper-button-next { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); } .featured-slider .swiper-button-prev { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); } /** Recipies **/ .recipe { border: 1px solid rgba(0,0,0,0.15); padding: 30px; margin-bottom: 30px; } .recipe .recipe-info { background: rgba(0,0,0,0.025); padding: 20px 0;} .recipe h3.recipe-title { margin-top: 0; } .recipe .recipe-image { margin: 2em 0; } .recipe .recipe-description, .recipe .recipe-notes-content, .recipe .recipe-steps { font-size: 0.8em; } .recipe .recipe-info .recipe-info-single { width: 16%; text-align: center; display: inline-block; font-size: 13px; } .recipe .recipe-info .recipe-info-single span.field, .recipe .recipe-info .recipe-info-single time { font-size: 16px; font-weight: bold; display: block; } .recipe .recipe-ingredients li, .recipe .recipe-ingredients ul { list-style: none; } .recipe .recipe-ingredients ul { margin: 0; } .recipe .recipe-ingredients li { font-size: 0.8em; border-bottom: 0px solid rgba(0,0,0,0.1); cursor: pointer; } .recipe .recipe-ingredients .recipe-check { border: 1px solid rgba(0,0,0,0.1); width: 22px; height: 22px; display: inline-block; color: rgba(0,0,0,0.1); text-align: center; padding: 4px; margin-right: 10px; } .recipe .recipe-ingredients li.completed { color: rgba(0,0,0,0.5); text-decoration: line-through;} .recipe .recipe-ingredients li.completed .recipe-check .mark {color: rgba(0,0,0,0.25); } .recipe .recipe-ingredients .recipe-check .mark { font-size: 14px; font-family: Arial; font-weight: bold; color: transparent; line-height: 14px; display: block; } .recipe .recipe-steps .step { float: left; width: 42px; height: 42px; line-height: 42px; border-radius: 42px; text-align: center; font-size: 16px; font-weight: bold; margin-right: 15px; box-shadow: 0 0px 10px 0 rgba(0,0,0,0.2); margin-top: 10px; } /*** Category Filter ***/ .category-filter { text-align: center; margin-bottom: 2em;} .category-filter li { display: inline-block; margin-right: 15px; } .category-filter .cat-active a, .category-filter li a:hover { box-shadow: inset 0 0 0 currentcolor,0 3px 0 currentcolor; } .category-filter li span { text-align: center; margin-left: 6px; opacity: 0.5; font-size: .75rem; } /** Featured Mag ***/ .featured-mag { margin-bottom: 100px; } .featured-mag .first { width: calc(60% - 40px); } .featured-mag .second { width: calc(40% - 40px); } .featured-mag .first, .featured-mag .second { padding: 20px; vertical-align: top; display: inline-block; } .featured-mag-post.small { margin-bottom: 1em; } .featured-mag-post.small.wide { margin-bottom: 2em; } .featured-mag-post.small .post-featured-image { width: calc(40% - 40px); display: inline-block; margin-right: 20px; vertical-align: top; } .featured-mag-post.small .post-preview-header { width: 60%; display: inline-block; vertical-align: top; } .featured-mag-post.small.wide .post-featured-image { width: 100%; margin-right: 0; margin-bottom: 0.5em; } .featured-mag-post.small.wide .post-preview-header { width: 100%; } .featured-mag-post.small .post-meta-details { margin-top: 0.5rem;} .featured-mag-post.first .title { font-size: 24px; font-weight: bold; } .featured-mag-post.small .title { font-size: 18px; font-weight: bold; } .featured-mag-post.first .post-featured-image { margin-bottom: 1em; } @media screen and (max-width: 1000px) { .featured-mag .first, .featured-mag .second { width: 100%; display: block; } .category-filter li { margin-bottom: 15px; } }