gripuqam.org/wp-content/themes/tortuga/style.css
2025-03-31 12:02:18 -04:00

3109 lines
56 KiB
CSS

/*
Theme Name: Tortuga
Theme URI: https://themezee.com/themes/tortuga/
Author: ThemeZee
Author URI: https://themezee.com
Description: Tortuga is a highly flexible and adventurous WordPress theme for your pirate magazine or any news related website. It supports three different post layouts, two sidebar schemes and a Magazine Homepage template based on widgets. Other highlights of Tortuga are the beautiful post slider and header widgets area. Arrr!
Version: 2.1.1
Requires at least: 5.2
Tested up to: 5.5
Requires PHP: 5.6
AMP: true
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tortuga
Tags: two-columns, custom-background, custom-header, custom-logo, custom-menu, editor-style, block-styles, rtl-language-support, grid-layout, blog, entertainment, news, featured-image-header, featured-images, flexible-header, custom-colors, full-width-template, sticky-post, threaded-comments, translation-ready, theme-options, one-column, left-sidebar, right-sidebar, three-columns
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Tortuga is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# - CSS Variables
# - Normalize
# - Typography
# - Elements
# - Forms
# - Accessibility
# - Alignments
# - Clearings
# - Site Layout
# - Header
# - Navigation
# - Social Icons Menu
# - Posts and pages
# - Archives and Blog Layouts
# - Blocks
# - Featured Posts
# - Widgets
# - Magazine Widgets
# - Comments
# - Media
# - Footer
# - Plugins
# - Media Queries for Typography
# - Media Queries for Layout
# - Media Queries for Navigation
# - Media Queries for Featured Posts
# - Media Queries for Media
# - Theme Options
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# - CSS Variables
--------------------------------------------------------------*/
:root {
--text-font: "Open Sans", arial, helvetica, sans-serif;
--title-font: "Titillium Web", arial, helvetica, sans-serif;
--navi-font: "Titillium Web", arial, helvetica, sans-serif;
--widget-title-font: "Titillium Web", arial, helvetica, sans-serif;
--title-font-weight: normal;
--navi-font-weight: normal;
--widget-title-font-weight: normal;
--title-text-transform: uppercase;
--navi-text-transform: uppercase;
--widget-title-text-transform: uppercase;
--text-line-height: 1.75;
--title-line-height: 1.4;
}
/*--------------------------------------------------------------
# - Normalize
--------------------------------------------------------------*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 0;
}
hr {
box-sizing: content-box;
height: 0;
}
code,
kbd,
pre,
samp {
font-size: 1em;
font-family: monospace, monospace;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
color: inherit;
font: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/*--------------------------------------------------------------
# - Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
color: #303030;
font-size: 17px;
font-size: 1.0625rem;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-family: var(--text-font);
line-height: 1.75;
line-height: var(--text-line-height);
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
margin: 0.75em 0;
line-height: 1.4;
line-height: var(--title-line-height);
}
h1 {
font-size: 36px;
font-size: 2.25rem;
}
h2 {
font-size: 28px;
font-size: 1.75rem;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
}
h4 {
font-size: 22px;
font-size: 1.375rem;
}
h5 {
font-size: 20px;
font-size: 1.25rem;
}
h6 {
font-size: 19px;
font-size: 1.1875rem;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
overflow: auto;
margin-bottom: 1.5em;
padding: 1.5em;
max-width: 100%;
border: 1px solid #e5e5e5;
background: #f5f5f5;
font-size: 15px;
font-size: 0.9375rem;
font-family: "Courier 10 Pitch", Courier, monospace;
line-height: 1.6;
}
code,
kbd,
tt,
var {
font-size: 15px;
font-size: 0.9375rem;
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
text-decoration: none;
}
big {
font-size: 125%;
}
/*--------------------------------------------------------------
# - Elements
--------------------------------------------------------------*/
html {
box-sizing: border-box;
}
/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background: #ddd; /* Fallback for when there is no custom background color defined. */
}
blockquote {
margin: 0 0 1.5em;
padding: 0.05em 1.25em 1em;
border: 1px solid #ddd;
border-left: 3px solid #dd5533;
color: #777;
font-style: italic;
font-size: 18px;
font-size: 1.125rem;
}
blockquote cite,
blockquote small {
display: block;
margin-top: 1em;
color: #404040;
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
}
blockquote cite:before,
blockquote small:before {
content: "\2014\00a0";
}
blockquote em,
blockquote i,
blockquote cite {
font-style: normal;
}
blockquote > :last-child {
margin-bottom: 0.5em;
}
hr {
margin-bottom: 1.5em;
height: 1px;
border: 0;
background-color: #ddd;
}
ul,
ol {
margin: 0 0 1.5em;
padding: 0 0 0 1.25em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 1.5em;
}
img {
max-width: 100%; /* Adhere to container width. */
height: auto; /* Make sure images are scaled correctly. */
}
table {
margin: 0 0 1.5em;
width: 100%;
border: none;
table-layout: fixed;
}
th,
td {
padding: 0.3em 0.6em;
border: 1px solid #ddd;
}
a {
color: #dd5533;
text-decoration: none;
}
a:link,
a:visited {
color: #dd5533;
}
a:hover,
a:focus,
a:active {
color: #303030;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
/*--------------------------------------------------------------
# - Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
margin: 0;
padding: 0.6em 1em;
border: none;
background: #dd5533;
color: #fff;
text-decoration: none;
font-size: 17px;
font-size: 1.0625rem;
transition: all 0.2s ease;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background: #303030;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
padding: 0.3em 0.6em;
max-width: 100%;
border: 1px solid #ddd;
color: #666;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
border: 1px solid #ccc;
color: #111;
}
textarea {
width: 100%;
}
/*--------------------------------------------------------------
# - Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar. */
display: block;
clip: auto !important;
padding: 15px 23px 14px;
width: auto;
height: auto;
border-radius: 3px;
background-color: #f1f1f1;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
color: #21759b;
text-decoration: none;
font-weight: bold;
font-size: 14px;
font-size: 0.875rem;
line-height: normal;
}
/*--------------------------------------------------------------
# - Alignments
--------------------------------------------------------------*/
.alignleft {
float: left;
margin-right: 1.5em;
}
.alignright {
float: right;
margin-left: 1.5em;
}
.aligncenter {
display: block;
clear: both;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/*--------------------------------------------------------------
# - Clearings
--------------------------------------------------------------*/
.clearfix:before,
.clearfix:after,
.post-navigation .nav-links:before,
.post-navigation .nav-links:after,
.comment-navigation:before,
.comment-navigation:after {
display: table;
content: "";
}
.clearfix:after,
.post-navigation .nav-links:after,
.comment-navigation:after {
clear: both;
}
/*--------------------------------------------------------------
# - Site Layout
--------------------------------------------------------------*/
.site {
margin: 0;
width: 100%;
}
.container {
margin: 0 auto;
padding: 0 2rem;
max-width: 1320px;
width: 100%;
}
.site-content {
padding-top: 2rem;
}
.content-area {
float: left;
box-sizing: border-box;
padding-right: 2rem;
width: 73%;
}
.sidebar {
float: right;
width: 27%;
}
/* No Sidebar & Centered Layout Template */
.no-sidebar .content-area,
.site-content .centered-content-area {
float: none;
margin: 0 auto;
padding: 0;
max-width: 900px;
width: 100%;
}
.post-layout-three-columns .content-archive {
max-width: 100%;
}
/* Fullwidth Template */
.site-content .fullwidth-content-area {
float: none;
margin: 0;
padding: 0;
max-width: 100%;
width: 100%;
}
/*--------------------------------------------------------------
# - Header
--------------------------------------------------------------*/
.site-header {
background: #303030;
color: #fff;
}
.header-main {
padding-top: 1em;
padding-bottom: 1em;
}
.site-branding {
float: left;
margin: 1em 0;
padding: 0;
max-width: 100%;
}
.site-branding a:link,
.site-branding a:visited,
.site-branding a:hover {
padding: 0;
border: none;
text-decoration: none;
}
.site-title {
display: inline-block;
margin: 0.15em 0;
padding: 0;
color: #fff;
text-decoration: none;
font-size: 36px;
font-size: 2.25rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--title-font);
font-weight: normal;
font-weight: var(--title-font-weight);
text-transform: uppercase;
text-transform: var(--title-text-transform);
line-height: 1.4;
line-height: var(--title-line-height);
}
.site-title a:link,
.site-title a:visited {
color: #fff;
transition: all 0.2s ease;
}
.site-title a:hover,
.site-title a:active {
color: rgba(255, 255, 255, 0.6);
}
.site-branding .custom-logo {
float: left;
margin: 0.5em 1em 0 0;
padding: 0;
max-width: 100%;
height: auto;
border: none;
vertical-align: top;
}
.site-description {
margin: 0 0 0.75em;
font-size: 15px;
font-size: 0.9375rem;
}
/* Header Widgets */
.header-widgets {
display: inline;
}
.header-widget {
float: right;
margin: 0.5em 0 0 1.5em;
}
.header-widget ul {
margin: 0;
padding: 0;
}
.header-widget-title {
margin: 0 0 0.5em;
}
/* Custom Header Image */
.header-image {
text-align: center;
}
.header-image img {
max-width: 1920px;
width: 100%;
height: auto;
vertical-align: top;
}
/*--------------------------------------------------------------
# - Navigation
--------------------------------------------------------------*/
.primary-navigation-wrap {
border-bottom: 5px solid #dd5533;
background: rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
color: #fff;
}
.primary-navigation-container {
position: relative;
}
.primary-navigation {
position: relative;
width: 100%;
}
/* Hide the menu on small screens when JavaScript is available. */
.main-navigation ul,
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation ul a > .icon {
display: none;
}
.main-navigation.toggled-on > ul.menu {
display: block;
}
/* Main Navigation Toggle */
.primary-menu-toggle {
display: flex;
margin: 0;
padding: 0.8em 1.2em;
border: none;
background: #dd5533;
color: #fff;
text-decoration: none;
font-size: 16px;
font-size: 1rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--navi-font);
font-weight: normal;
font-weight: var(--navi-font-weight);
text-transform: uppercase;
text-transform: var(--navi-text-transform);
text-align: left;
transition: all 0.2s ease;
align-items: center;
}
.primary-menu-toggle:focus {
outline: thin dotted;
color: #fff;
background: #dd5533;
}
.primary-menu-toggle:hover,
.primary-menu-toggle:active {
color: rgba(255, 255, 255, 0.5);
background: #dd5533;
cursor: pointer;
}
.primary-menu-toggle .icon {
margin: 0;
width: 24px;
height: 24px;
vertical-align: top;
fill: #fff;
}
.primary-menu-toggle[aria-expanded="true"] .icon-menu,
.primary-menu-toggle[aria-expanded="false"] .icon-close {
display: none;
}
.primary-menu-toggle[aria-expanded="true"] .icon-close {
display: inline-block;
}
/* Menu Items Styling */
.main-navigation ul {
margin: 0;
padding: 0;
color: #fff;
list-style: none;
font-size: 16px;
font-size: 1rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--navi-font);
font-weight: normal;
font-weight: var(--navi-font-weight);
text-transform: uppercase;
text-transform: var(--navi-text-transform);
}
.main-navigation > ul {
padding: 3px 0;
border-top: 5px solid #dd5533;
}
.main-navigation ul li {
position: relative;
margin: 0;
}
.main-navigation ul a {
display: block;
margin: 0;
padding: 1em 1.5em;
border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.main-navigation ul li:last-child > a {
border-bottom: none;
}
.main-navigation ul a,
.main-navigation ul a:link,
.main-navigation ul a:visited {
color: #fff;
text-decoration: none;
transition: all 0.2s ease;
}
.main-navigation ul a:hover,
.main-navigation ul a:active,
.main-navigation ul a:focus {
background-color: #dd5533;
}
.main-navigation ul li.current-menu-item > a {
background-color: #dd5533;
}
/* Submenus */
.main-navigation ul ul {
font-size: 13px;
font-size: 0.8125rem;
}
.is-amp-page .main-navigation ul button.toggled-on + ul,
.main-navigation ul ul.toggled-on {
display: block;
}
.main-navigation ul ul a {
padding-left: 3em;
}
.main-navigation ul ul ul a {
padding-left: 4.5em;
}
.main-navigation ul ul ul ul a {
padding-left: 6em;
}
/* Submenu Dropdown Toggles */
.main-navigation .dropdown-toggle {
position: absolute;
display: block;
top: 0;
right: 0;
padding: 0.9em 1.5em;
background: none;
border: none;
}
.main-navigation .dropdown-toggle:focus {
outline: thin dotted;
color: #fff;
background: none;
}
.main-navigation .dropdown-toggle:hover,
.main-navigation .dropdown-toggle:active {
background-color: #dd5533;
}
.main-navigation .dropdown-toggle .icon {
margin: 0.2em 0 0;
width: 20px;
height: 20px;
vertical-align: top;
fill: #fff;
}
.main-navigation .dropdown-toggle.toggled-on .icon {
-ms-transform: rotate(-180deg); /* IE 9 */
-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
transform: rotate(-180deg);
}
.main-navigation ul ul .dropdown-toggle {
padding: 0.6em 1.2em;
}
.main-navigation ul ul .dropdown-toggle .icon {
width: 18px;
height: 18px;
}
/*--------------------------------------------------------------
# - Social Icons Menu
--------------------------------------------------------------*/
.social-icons-menu {
margin: 0;
padding: 0;
list-style-position: outside;
list-style-type: none;
line-height: 1;
}
.social-icons-menu li {
float: left;
margin: 0;
padding: 0;
}
.social-icons-menu li a {
position: relative;
display: inline-block;
padding: 0.5em;
text-decoration: none;
color: #fff;
}
.social-icons-menu li a .screen-reader-text {
display: none;
}
/* Add Genericons */
.social-icons-menu li a:before {
display: inline-block;
vertical-align: top;
text-decoration: inherit;
font-size: 16px;
font-family: 'Genericons';
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.social-icons-menu li a:before {
content: '\f408';
}
/* Default Icon */
.social-icons-menu li a[href*="codepen.io"]:before {
content: '\f216';
}
.social-icons-menu li a[href*="digg.com"]:before {
content: '\f221';
}
.social-icons-menu li a[href*="dribbble.com"]:before {
content: '\f201';
}
.social-icons-menu li a[href*="facebook.com"]:before {
content: '\f204';
}
.social-icons-menu li a[href*="flickr.com"]:before {
content: '\f211';
}
.social-icons-menu li a[href*="plus.google.com"]:before {
content: '\f218';
}
.social-icons-menu li a[href*="github.com"]:before {
content: '\f200';
}
.social-icons-menu li a[href*="instagram.com"]:before {
content: '\f215';
}
.social-icons-menu li a[href*="linkedin.com"]:before {
content: '\f207';
}
.social-icons-menu li a[href*="pinterest.com"]:before {
content: '\f209';
}
.social-icons-menu li a[href*="polldaddy.com"]:before {
content: '\f217';
}
.social-icons-menu li a[href*="getpocket.com"]:before {
content: '\f224';
}
.social-icons-menu li a[href*="reddit.com"]:before {
content: '\f222';
}
.social-icons-menu li a[href*="spotify.com"]:before {
content: '\f515';
}
.social-icons-menu li a[href*="skype.com"]:before,
.social-icons-menu li a[href*="skype:"]:before {
content: '\f220';
}
.social-icons-menu li a[href*="stumbleupon.com"]:before {
content: '\f223';
}
.social-icons-menu li a[href*="tumblr.com"]:before {
content: '\f214';
}
.social-icons-menu li a[href*="twitch.tv"]:before {
content: '\f516';
}
.social-icons-menu li a[href*="twitter.com"]:before {
content: '\f202';
}
.social-icons-menu li a[href*="vimeo.com"]:before {
content: '\f212';
}
.social-icons-menu li a[href*="wordpress.org"]:before {
content: '\f205';
}
.social-icons-menu li a[href*="wordpress.com"]:before {
content: '\f205';
}
.social-icons-menu li a[href*="youtube.com"]:before {
content: '\f213';
}
.social-icons-menu li a[href*="newsletter"]:before,
.social-icons-menu li a[href*="mailto"]:before {
content: '\f410';
}
.social-icons-menu li a[href*="/feed"]:before,
.social-icons-menu li a[href*="/feed/"]:before,
.social-icons-menu li a[href*="?feed=rss2"]:before,
.social-icons-menu li a[href*="feedburner.google.com"]:before,
.social-icons-menu li a[href*="feedburner.com"]:before {
content: '\f413';
}
/*--------------------------------------------------------------
# - Posts and pages
--------------------------------------------------------------*/
.type-post,
.type-page,
.type-attachment,
.comments-area,
.site-main > article:not(.type-post):not(.type-page):not(.type-attachment),
.post-wrapper > .post-column > article:not(.type-post):not(.type-page):not(.type-attachment) {
margin: 0 0 2em 0;
padding: 1.5em;
max-width: 100%;
border-top: 3px solid #dd5533;
background: #fff;
box-shadow: 0 2px 2px #aaa;
}
.archive-title,
.page-title,
.entry-title {
margin: 0;
padding: 0;
color: #dd5533;
-ms-word-wrap: break-word;
word-wrap: break-word;
font-size: 28px;
font-size: 1.75rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--title-font);
font-weight: normal;
font-weight: var(--title-font-weight);
text-transform: uppercase;
text-transform: var(--title-text-transform);
line-height: 1.4;
line-height: var(--title-line-height);
}
.entry-title a:link,
.entry-title a:visited {
color: #dd5533;
text-decoration: none;
transition: all 0.2s ease;
}
.entry-title a:hover,
.entry-title a:active {
color: #303030;
}
.type-post .wp-post-image,
.type-page .wp-post-image,
.site-main > article:not(.type-post):not(.type-page):not(.type-attachment) .wp-post-image,
.post-wrapper > .post-column > article:not(.type-post):not(.type-page):not(.type-attachment) .wp-post-image {
margin: 0 0 0.5em;
}
.entry-content a {
text-decoration: underline;
}
.sticky {
border-width: 5px;
}
/* Page Links | wp_link_pages() */
.page-links {
margin: 0 0 1.5em;
word-spacing: 0.75em;
font-weight: bold;
}
/* Entry Meta */
.entry-meta {
margin: 0;
padding: 0;
color: #303030;
font-size: 14px;
font-size: 0.875rem;
}
.entry-meta .meta-date,
.entry-meta .meta-author,
.entry-meta .meta-category,
.entry-meta .meta-comments {
margin-right: 1.5em;
}
.entry-meta a:link,
.entry-meta a:visited {
color: #303030;
}
.entry-meta a:hover,
.entry-meta a:active {
color: #777;
}
.entry-meta span::before {
display: inline-block;
margin-right: 0.2em;
vertical-align: middle;
font: normal 16px 'Genericons';
-webkit-font-smoothing: antialiased;
}
.entry-meta .meta-date::before {
content: '\f307';
}
.entry-meta .meta-author::before {
content: '\f304';
}
.entry-meta .meta-category::before {
content: '\f301';
}
.entry-meta .meta-comments::before {
content: '\f300';
}
/* Hide post meta if they are deactivated in settings */
body.date-hidden .type-post .entry-meta .meta-date,
body.author-hidden .type-post .entry-meta .meta-author,
body.categories-hidden .type-post .entry-meta .meta-category,
body.comments-hidden .type-post .entry-meta .meta-comments,
body.date-hidden .post-slider .entry-meta .meta-date,
body.author-hidden .post-slider .entry-meta .meta-author {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
body.date-hidden.author-hidden.categories-hidden.comments-hidden .content-area .type-post .entry-meta {
display: none;
}
/* Entry Tags & Tagcloud Widget */
.entry-tags {
margin: 0 0 1.5em;
}
.widget_tag_cloud .tagcloud,
.entry-tags .meta-tags {
font-size: 14px;
font-size: 0.875rem;
}
.widget_tag_cloud .tagcloud::before,
.widget_tag_cloud .tagcloud::after,
.entry-tags .meta-tags::before,
.entry-tags .meta-tags::after {
display: table;
content: "";
}
.widget_tag_cloud .tagcloud::after,
.entry-tags .meta-tags::after {
clear: both;
}
.widget_tag_cloud .tagcloud a,
.entry-tags .meta-tags a {
display: inline-block;
float: left;
margin: 0 2px 2px 0;
padding: 0.2em 0.5em;
background: #303030;
text-decoration: none;
text-transform: uppercase;
font-size: 12px !important;
font-size: 0.75rem !important;
}
.widget_tag_cloud .tagcloud a:link,
.widget_tag_cloud .tagcloud a:visited,
.entry-tags .meta-tags a:link,
.entry-tags .meta-tags a:visited {
color: #fff;
transition: all 0.2s ease;
}
.widget_tag_cloud .tagcloud a:hover,
.widget_tag_cloud .tagcloud a:active,
.entry-tags .meta-tags a:hover,
.entry-tags .meta-tags a:active {
background: #dd5533;
color: #fff;
}
/* Read more Link */
.more-link {
display: inline-block;
margin: 0;
padding: 0.6em 1em;
background: #dd5533;
color: #fff;
text-decoration: none;
font-size: 15px;
font-size: 0.9375rem;
transition: all 0.2s ease;
}
.more-link:link,
.more-link:visited {
color: #fff;
}
.more-link:hover,
.more-link:active {
background: #303030;
text-decoration: none;
}
.more-link::after {
content: " \00BB";
}
/* Post Navigation */
.post-navigation {
margin: 0;
}
.post-navigation .nav-links .nav-previous {
float: left;
}
.post-navigation .nav-links .nav-next {
float: right;
}
.post-navigation .nav-links .nav-previous a::before {
margin-right: 3px;
content: "\00AB";
}
.post-navigation .nav-links .nav-next a::after {
margin-left: 4px;
content: "\00BB";
}
.post-navigation .nav-links a {
display: inline-block;
margin: 0 0 3px;
padding: 0.3em 0.8em;
background: #dd5533;
color: #fff;
text-decoration: none;
font-size: 14px;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.post-navigation .nav-links a:link,
.post-navigation .nav-links a:visited {
color: #fff;
}
.post-navigation .nav-links a:hover,
.post-navigation .nav-links a:active {
background: #303030;
}
/*--------------------------------------------------------------
# - Archives and Blog Layouts
--------------------------------------------------------------*/
/* Archives and Search Heading */
.page-header {
margin: 0 0 2em 0;
padding: 1.5em;
border-top: 3px solid #dd5533;
background: #fff;
box-shadow: 0 2px 2px #aaa;
}
.blog-description,
.archive-description p {
margin-bottom: 0;
}
/* Post Columns */
.post-layout-columns .post-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -2em;
}
.post-layout-columns .post-wrapper .post-column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
padding-right: 2em;
}
.post-layout-columns .post-wrapper .post-column article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 22px;
font-size: 1.375rem;
}
.post-layout-columns .post-wrapper .post-column article .entry-content {
flex-grow: 1;
font-size: 16px;
font-size: 1rem;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
}
.post-layout-columns .post-wrapper .post-column article .more-link {
font-size: 15px;
font-size: 0.9375rem;
}
/* 2 Columns */
.post-layout-two-columns .post-wrapper .post-column {
width: 50%;
}
/* 3 Columns */
.post-layout-three-columns .content-archive {
float: none;
padding: 0;
width: 100%;
}
.post-layout-three-columns .post-wrapper .post-column {
width: 33.3333333333333%;
}
/* Post Columns Fixes for IE 10 and IE 11*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.post-layout-columns .post-wrapper .post-column,
.post-layout-columns .post-wrapper .post-column article {
display: block;
}
}
/* Theme Pagination */
.pagination {
margin: 0 0 2em;
}
.pagination a,
.pagination .current {
display: inline-block;
margin: 0 3px 3px 0;
padding: 0.4em 1em;
background: #303030;
color: #fff;
text-align: center;
text-decoration: none;
}
.pagination a:link,
.pagination a:visited {
color: #fff;
}
.pagination a:hover,
.pagination a:active,
.pagination .current {
background: #dd5533;
}
/* Infinite Scroll Pagination */
.infinite-scroll .pagination {
display: none;
}
.infinite-scroll #infinite-handle,
.infinite-scroll .infinite-loader {
width: 100%;
text-align: center;
}
.infinite-scroll .infinite-loader .spinner {
bottom: -1em;
left: auto;
margin: 0 auto;
}
.infinite-scroll #infinite-handle span {
display: inline-block;
margin: 0 0 2em;
padding: 0.4em 1em;
background: #303030;
text-decoration: none;
font-size: 17px;
font-size: 1.0625rem;
}
.infinite-scroll #infinite-handle span:hover {
background: #dd5533;
}
/*--------------------------------------------------------------
# - Blocks
--------------------------------------------------------------*/
/* Audio */
.wp-block-audio audio {
width: 100%;
}
/* Separator */
.wp-block-separator {
height: 2px;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
max-width: 100px;
}
/* Quote */
.wp-block-quote.is-style-large {
border: none;
margin: 0 0 1.5em;
padding: 0;
font-size: 28px;
font-size: 1.75rem;
}
.wp-block-quote.is-style-large p {
margin-bottom: 0.5em;
font-size: inherit;
font-style: inherit;
line-height: inherit;
}
.wp-block-quote.is-style-large cite {
text-align: inherit;
}
/* Pullquote */
.wp-block-pullquote {
margin-bottom: 1.5em;
padding: 1.5em 0;
border-bottom: 3px solid #ddd;
border-top: 3px solid #ddd;
}
.wp-block-pullquote blockquote {
border: none;
margin: 0;
padding: 0;
font-size: 28px;
font-size: 1.75rem;
}
.wp-block-pullquote blockquote p {
margin-bottom: 0.5em;
}
/* Cover */
.wp-block-cover {
display: flex;
}
.wp-block-cover-text {
margin-top: 0;
margin-bottom: 0;
}
/* Image */
.wp-block-image .alignleft {
margin-right: 1.5em;
}
.wp-block-image .alignright {
margin-left: 1.5em;
}
/* Captions */
.blocks-gallery-caption,
.wp-block-embed figcaption,
.wp-block-image figcaption {
margin-top: 0.3em;
margin-bottom: 1em;
color: #555;
font-size: 13px;
font-size: 0.8125rem;
text-align: center;
}
/* Latest Posts */
.wp-block-latest-posts.wp-block-latest-posts__list {
margin: 0;
padding: 0;
}
/* Table */
.wp-block-table table {
table-layout: auto;
}
/* Block Text Colors */
.has-primary-color {
color: #dd5533;
}
.has-white-color {
color: #ffffff;
}
.has-light-gray-color {
color: #f0f0f0;
}
.has-dark-gray-color {
color: #777777;
}
.has-black-color {
color: #303030;
}
/* Block Background Colors */
.has-primary-background-color {
background-color: #dd5533;
}
.has-white-background-color {
background-color: #ffffff;
}
.has-light-gray-background-color {
background-color: #f0f0f0;
}
.has-dark-gray-background-color {
background-color: #777777;
}
.has-black-background-color {
background-color: #303030;
}
/*--------------------------------------------------------------
# - Widgets
--------------------------------------------------------------*/
.widget {
margin: 0 0 2em 0;
padding: 1em 1.5em 1.5em;
max-width: 100%;
border-top: 3px solid #dd5533;
background: #fff;
box-shadow: 0 2px 2px #aaa;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.widget-header {
margin: 0 0 1em 0;
}
.widget-title {
display: block;
margin: 0;
padding: 0;
color: #dd5533;
font-size: 20px;
font-size: 1.25rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--widget-title-font);
font-weight: normal;
font-weight: var(--widget-title-font-weight);
text-transform: uppercase;
text-transform: var(--widget-title-text-transform);
line-height: 1.4;
line-height: var(--title-line-height);
}
.widget ul {
margin: 0;
padding: 0;
list-style: circle inside;
}
.widget ul .children,
.widget ul .sub-menu {
margin: 0.5em 0 0.5em 1em;
padding: 0;
}
/* Make sure select elements fit in widgets. */
.widget select {
max-width: 100%;
}
/* Theme Search Widget */
.search-form {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.search-form .screen-reader-text {
display: none;
}
.search-form .search-field {
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0.5em 1.5em 0.5em 0.7em;
width: 100%;
-webkit-appearance: none;
}
.search-form .search-submit {
position: absolute;
top: 0;
right: 0;
padding: 0.65em 0.75em 0 0.2em;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.search-form .search-submit .genericon-search {
display: inline-block;
padding: 0.05em 0 0.55em 0.45em;
color: #fff;
content: '\f400';
vertical-align: middle;
text-decoration: inherit;
font-weight: normal;
font-style: normal;
font-size: 24px;
font-family: 'Genericons';
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Theme Calendar Widget */
.widget_calendar {
font-size: 14px;
font-size: 0.875rem;
}
.widget_calendar table {
margin: 0;
}
.widget_calendar table caption {
padding: 0 0 1em;
}
.widget_calendar table thead tr {
background: #f5f5f5;
}
.widget_calendar table tr td {
text-align: center;
}
.widget_calendar table tbody tr td a {
font-weight: bold;
}
.widget_calendar table tfoot tr td {
padding-top: 1em;
border: none;
}
.widget_calendar table tfoot tr #prev {
text-align: left;
}
.widget_calendar table tfoot tr #next {
text-align: right;
}
/*--------------------------------------------------------------
# - Magazine Widgets
--------------------------------------------------------------*/
.widget-magazine-posts {
margin-bottom: -1em;
}
.widget-magazine-posts .type-post {
margin: 0 0 1.5em 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
}
.widget-magazine-posts .type-post .wp-post-image {
margin: 0;
max-width: 100%;
}
.widget-magazine-posts .type-post .entry-title {
display: inline;
}
.widget-magazine-posts .type-post .entry-content {
font-size: 16px;
font-size: 1rem;
}
.widget-magazine-posts .type-post .entry-content p {
margin: 1em 0 0;
}
.widget-magazine-posts .type-post .more-link {
margin: 1em 0 0;
text-decoration: none;
}
.widget-magazine-posts .large-post .entry-title {
font-size: 22px;
font-size: 1.375rem;
}
.widget-magazine-posts .medium-post {
display: block;
float: left;
box-sizing: border-box;
padding-right: 1.5em;
width: 33.33333333%;
}
.widget-magazine-posts .medium-post .entry-title {
font-size: 17px;
font-size: 1.0625rem;
}
.widget-magazine-posts .small-post {
display: block;
float: left;
box-sizing: border-box;
width: 100%;
}
.widget-magazine-posts .small-post .wp-post-image {
float: left;
margin: 0 1em 0 0;
max-width: 40%;
}
.widget-magazine-posts .small-post .entry-title {
font-size: 16px;
font-size: 1rem;
}
.widget-magazine-posts .medium-post .entry-meta,
.widget-magazine-posts .small-post .entry-meta {
font-size: 12px;
font-size: 0.75rem;
}
/* Magazine Posts Horizontal Box Widget */
.widget-magazine-posts .magazine-horizontal-box .large-post .wp-post-image {
float: left;
box-sizing: border-box;
margin: 0;
padding-right: 0.75em;
width: 50%;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .post-content {
float: right;
box-sizing: border-box;
padding-left: 0.75em;
width: 50%;
}
.widget-magazine-posts .magazine-horizontal-box .medium-posts {
margin-right: -1.5em;
}
/* Magazine Posts Vertical Box Widget */
.widget-magazine-posts .magazine-vertical-box .large-post {
float: left;
box-sizing: border-box;
margin-bottom: 1em;
padding-right: 0.75em;
width: 50%;
}
.widget-magazine-posts .magazine-vertical-box .small-posts {
box-sizing: border-box;
margin-left: 50%;
padding-left: 0.75em;
width: 50%;
}
/* Magazine Posts Grid Widget */
.widget-magazine-posts .magazine-grid {
margin-right: -1.5em;
}
.widget-magazine-posts .magazine-grid .large-post {
float: left;
box-sizing: border-box;
padding-right: 1.5em;
width: 50%;
}
.widget-magazine-posts .magazine-grid .post-column:nth-child(2n+1) .large-post,
.widget-magazine-posts .magazine-grid .post-column:nth-child(3n+1) .medium-post {
clear: left;
}
/* Magazine Posts Columns Widget */
.tortuga-magazine-columns-widget {
padding: 0;
border: none;
background: none;
box-shadow: none;
}
.tortuga-magazine-columns-widget .widget-magazine-posts {
margin-bottom: 0;
}
.widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content {
float: left;
width: 100%;
margin: 0;
padding: 1em 1.5em 1.5em;
max-width: 100%;
border-top: 3px solid #dd5533;
background: #fff;
box-shadow: 0 2px 2px #aaa;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content .magazine-posts-columns-post-list {
float: left;
box-sizing: border-box;
margin-bottom: -1.5em;
width: 100%;
}
.widget-magazine-posts-columns .magazine-posts-column-left {
float: left;
box-sizing: border-box;
padding-right: 1em;
width: 50%;
}
.widget-magazine-posts-columns .magazine-posts-column-right {
box-sizing: border-box;
margin-left: 50%;
padding-left: 1em;
width: 50%;
}
.widget-magazine-posts-columns .medium-post {
padding-right: 0;
width: 100%;
}
/*--------------------------------------------------------------
# - Comments
--------------------------------------------------------------*/
.comments-area {
padding: 1em 1.5em;
}
/* Comment Header */
.comments-header,
.comment-reply-title {
margin: 0 0 1em 0;
}
.comments-header .comments-title,
.comment-reply-title span {
display: inline-block;
margin: 0;
padding: 0;
color: #dd5533;
-ms-word-wrap: break-word;
word-wrap: break-word;
font-size: 20px;
font-size: 1.25rem;
font-family: "Titillium Web", arial, helvetica, sans-serif;
font-family: var(--widget-title-font);
font-weight: normal;
font-weight: var(--widget-title-font-weight);
text-transform: uppercase;
text-transform: var(--widget-title-text-transform);
line-height: 1.4;
line-height: var(--title-line-height);
}
/* Comment List */
.comment-list {
margin: 0;
padding: 0;
list-style: none;
}
.comment {
margin: 0 0 1.5em;
padding: 1.5em 0 0;
border-top: 1px dotted #aaa;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.comment-meta {
float: left;
padding: 0;
width: 100%;
}
.comment-meta .comment-author img {
float: left;
margin-right: 1em;
}
.bypostauthor {
display: block;
}
.comment-meta .comment-metadata {
margin-top: 0.3em;
font-size: 14px;
font-size: 0.875rem;
}
.comment-meta .comment-metadata a {
margin-right: 1em;
}
.comment-content {
clear: left;
padding: 0.2em 0 0;
}
.comment-content a {
word-wrap: break-word;
}
.comment ol.children {
margin: 1.5em 0 0;
list-style: none;
}
.comment .comment-respond {
margin-top: 1.5em;
}
/* Comment Pagination */
.comment-navigation {
margin: 0 0 1.5em;
padding: 0;
font-size: 14px;
font-size: 0.875rem;
}
.comment-navigation .nav-previous {
float: left;
}
.comment-navigation .nav-next {
float: right;
}
.comment-navigation .nav-previous a:before {
margin-right: 3px;
content: "\00AB";
}
.comment-navigation .nav-next a:after {
margin-left: 4px;
content: "\00BB";
}
/* Comment Form */
.comment-form {
padding: 0;
}
.comment-form label {
display: inline-block;
min-width: 150px;
font-weight: bold;
}
.comment-form textarea {
margin-top: 0.4em;
}
.comment-form .form-submit {
margin-bottom: 1em;
}
.comment-form input[type="checkbox"] + label {
display: inline;
padding-left: 0.5em;
font-weight: normal;
}
.comment-reply-title small a {
margin-left: 1em;
text-decoration: underline;
font-weight: normal;
font-size: 14px;
font-size: 0.875rem;
}
/*--------------------------------------------------------------
# - Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
margin-top: 0;
margin-bottom: 0;
padding: 0;
border: none;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
/*--------------------------------------------------------------
## 16.1 - Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
font-size: 13px;
font-size: 0.8125rem;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0 auto;
}
.wp-caption-text {
text-align: center;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
/*--------------------------------------------------------------
## 16.2 - Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1em;
}
.gallery-item {
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0 1em 0.75em 0;
width: 100%;
vertical-align: top;
text-align: center;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
font-size: 13px;
font-size: 0.8125rem;
margin-bottom: 0.75em;
}
/*--------------------------------------------------------------
# - Footer
--------------------------------------------------------------*/
.footer-wrap {
background: #303030;
}
.site-footer {
color: rgba(255, 255, 255, 0.6);
font-size: 15px;
font-size: 0.9375rem;
}
.site-footer .site-info {
float: left;
padding: 2.5em 0;
}
.site-footer a:link,
.site-footer a:visited {
border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
color: #fff;
}
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
color: rgba(255, 255, 255, 0.6);
}
/*--------------------------------------------------------------
# - Plugins
--------------------------------------------------------------*/
/* Breadcrumbs */
.breadcrumbs {
margin: 0;
padding: 0.5em 0;
background: #fff;
box-shadow: 0 2px 2px #aaa;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.breadcrumbs-container {
color: #222;
font-size: 14px;
font-size: 0.875rem;
}
.breadcrumbs .trail-browse,
.breadcrumbs .trail-items,
.breadcrumbs .trail-items li {
display: inline;
margin: 0;
padding: 0;
}
.breadcrumbs .trail-browse {
margin-right: 0.5em;
font-weight: normal;
font-size: 14px;
font-size: 0.875rem;
}
.breadcrumbs .trail-items {
list-style: none;
}
.breadcrumbs .trail-items li::after {
padding: 0 0.5em;
content: "\00bb"; /* Raquo */
}
.trail-separator-slash .trail-items li::after {
content: "\002F";
}
.trail-separator-dash .trail-items li::after {
content: "\2013";
}
.trail-separator-bull .trail-items li::after {
content: "\2022";
}
.trail-separator-arrow-bracket .trail-items li::after {
content: "\003e";
}
.trail-separator-raquo .trail-items li::after {
content: "\00bb";
}
.trail-separator-single-arrow .trail-items li::after {
content: "\2192";
}
.trail-separator-double-arrow .trail-items li::after {
content: "\21D2";
}
.breadcrumbs .trail-items li:last-of-type::after {
display: none;
}
:root {
--tz-column-gap: 1.5em;
}
.tz-magazine-block .tz-magazine-post {
margin: 0 0 1.5em 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
}
.tz-magazine-block .tz-entry-title {
font-size: 22px;
font-size: 1.375rem;
}
.tz-magazine-block .tz-magazine-grid-columns-3 .tz-entry-title {
font-size: 17px;
font-size: 1.0625rem;
}
.tz-magazine-block .tz-magazine-grid-columns-4 .tz-entry-title,
.tz-magazine-block .tz-magazine-thumbnail-list .tz-entry-title {
font-size: 16px;
font-size: 1rem;
}
.tz-magazine-block .tz-entry-meta {
margin: 0.1em 0;
font-size: 14px;
font-size: 0.875rem;
}
.tz-magazine-block .tz-meta-field a {
text-decoration: none;
}
.tz-magazine-block .tz-entry-content {
font-size: 16px;
font-size: 1rem;
}
.tz-magazine-block .tz-more-link {
text-decoration: none;
}
/*--------------------------------------------------------------
# - Media Queries for Typography
--------------------------------------------------------------*/
@media only screen and (max-width: 70em) {
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
}
@media only screen and (max-width: 60em) {
.archive-title,
.page-title,
.entry-title {
font-size: 26px;
font-size: 1.625rem;
}
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 22px;
font-size: 1.375rem;
}
}
@media only screen and (max-width: 50em) {
.archive-title,
.page-title,
.entry-title {
font-size: 24px;
font-size: 1.5rem;
}
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
}
@media only screen and (max-width: 40em) {
.archive-title,
.page-title,
.entry-title,
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 22px;
font-size: 1.375rem;
}
.entry-content {
font-size: 16px;
font-size: 1rem;
}
}
@media only screen and (max-width: 30em) {
.site-branding .site-title {
font-size: 32px;
font-size: 2rem;
}
.archive-title,
.page-title,
.entry-title,
.post-layout-columns .post-wrapper .post-column article .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
}
@media only screen and (max-width: 20em) {
.site-branding .site-title {
font-size: 28px;
font-size: 1.75rem;
}
.archive-title,
.page-title,
.entry-title,
.post-layout-columns .post-wrapper .post-column article .entry-title {
margin: 0 0 0.5em;
font-size: 18px;
font-size: 1.125rem;
}
}
/*--------------------------------------------------------------
# - Media Queries for Layout
--------------------------------------------------------------*/
@media only screen and (max-width: 80em) {
.container {
padding: 0 1.5rem;
}
.site-content {
padding-top: 1.5rem;
}
.content-area {
padding-right: 1.5rem;
}
.header-main {
padding-top: 1em;
padding-bottom: 1em;
}
.widget,
.page-header,
.type-post,
.type-page,
.type-attachment,
.pagination,
.comments-area,
.site-main > article:not(.type-post):not(.type-page):not(.type-attachment),
.post-wrapper > .post-column > article:not(.type-post):not(.type-page):not(.type-attachment) {
margin-bottom: 1.5em;
}
.post-layout-columns .post-wrapper {
margin-right: -1.5em;
}
.post-layout-columns .post-wrapper .post-column {
padding-right: 1.5em;
}
}
@media only screen and (max-width: 70em) {
.content-area {
width: 70%;
}
.sidebar {
width: 30%;
}
}
@media only screen and (max-width: 60em) {
.content-area,
.site-content .content-fullwidth {
float: none;
padding: 0;
width: 100%;
}
.sidebar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
float: none;
margin-right: -1.5em;
padding: 0;
width: auto;
}
.sidebar .widget-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float: right;
box-sizing: border-box;
padding-right: 1.5em;
width: 50%;
}
.sidebar .widget-wrap .widget {
width: 100%;
}
.sidebar .widget-wrap:nth-child(2n + 1) {
clear: left;
}
.site-branding {
float: none;
margin: 0;
text-align: center;
}
.site-branding .custom-logo {
float: none;
}
.header-widgets {
display: block;
text-align: center;
}
.header-widget {
display: inline-block;
float: none;
margin: 1em 0 0;
max-width: 100%;
vertical-align: top;
}
.header-widget .search-form {
max-width: 300px;
}
.post-layout-three-columns .post-wrapper .post-column {
width: 50%;
}
/* Footer */
.site-footer .site-info {
float: none;
text-align: center;
}
}
@media only screen and (max-width: 40em) {
.post-layout-columns .post-wrapper {
display: block;
margin-right: 0;
}
.post-layout-columns .post-wrapper .post-column {
display: block;
float: none;
padding-right: 0;
}
.post-layout-two-columns .post-wrapper .post-column,
.post-layout-three-columns .post-wrapper .post-column {
width: 100%;
}
/* Sidebar */
.sidebar {
margin-right: 0;
}
.sidebar .widget-wrap {
float: none;
padding-right: 0;
width: 100%;
}
}
@media only screen and (max-width: 20em) {
.entry-meta .meta-date,
.entry-meta .meta-author,
.entry-meta .meta-category,
.entry-meta .meta-comments {
display: block;
}
}
/*--------------------------------------------------------------
# - Media Queries for Navigation
--------------------------------------------------------------*/
@media only screen and (min-width: 60em) {
.primary-menu-toggle,
.main-navigation .dropdown-toggle {
display: none;
}
.main-navigation ul,
.main-navigation ul ul {
display: block;
}
.primary-navigation {
display: flex;
margin-left: auto;
width: auto;
align-items: center;
}
#masthead .main-navigation > ul.menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0;
border-bottom: none;
}
.main-navigation > ul {
padding: 0;
border: none;
}
.main-navigation > ul > li > a {
padding: 0.8em 1.2em;
border: none;
}
/* Dropdown Menus */
.main-navigation ul ul {
position: absolute;
left: -999em;
top: 100%;
z-index: 99999;
border-top: 5px solid #dd5533;
background: #303030;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
right: auto;
left: 0;
}
.main-navigation ul ul li a {
width: 16rem;
}
.main-navigation ul ul ul {
left: -999em;
margin-top: -5px;
top: 0;
border-left: 1px dotted rgba(255, 255, 255, 0.2);
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
right: auto;
left: 100%;
}
.main-navigation ul ul li a,
.main-navigation ul ul ul li a,
.main-navigation ul ul ul ul li a {
padding: 1em;
}
/* Dropdown Icons */
.main-navigation .menu-item-has-children > a > .icon {
position: relative;
display: inline-block;
left: 0.5rem;
top: 0.1rem;
width: 14px;
height: 14px;
fill: #fff;
transition: fill 0.15s ease;
}
.main-navigation ul ul .menu-item-has-children > a > .icon {
position: absolute;
left: auto;
right: 1em;
top: 50%;
margin-top: -0.5rem;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
/*--------------------------------------------------------------
# - Media Queries for Magazine widgets
--------------------------------------------------------------*/
@media only screen and (max-width: 70em) {
/* Magazine Post Widgets */
.widget-magazine-posts .large-post .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
.widget-magazine-posts .medium-post .entry-title {
font-size: 16px;
font-size: 1rem;
}
.widget-magazine-posts .small-post .entry-title {
font-size: 15px;
font-size: 0.9375rem;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .more-link {
display: none;
}
}
@media only screen and (max-width: 65em) {
.widget-magazine-posts .magazine-horizontal-box .large-post .entry-content {
display: none;
}
}
@media only screen and (max-width: 60em) {
/* Magazine Post Widgets */
.widget-magazine-posts .magazine-horizontal-box .large-post .entry-content,
.widget-magazine-posts .magazine-horizontal-box .large-post .more-link {
display: inline-block;
}
.widget-magazine-posts .large-post .entry-title {
font-size: 22px;
font-size: 1.375rem;
}
.widget-magazine-posts .medium-post .entry-title {
font-size: 17px;
font-size: 1.0625rem;
}
.widget-magazine-posts .small-post .entry-title {
font-size: 16px;
font-size: 1rem;
}
}
@media only screen and (max-width: 50em) {
/* Magazine Post Widgets */
.widget-magazine-posts .large-post .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
.widget-magazine-posts .medium-post .entry-title {
font-size: 16px;
font-size: 1rem;
}
.widget-magazine-posts .small-post .entry-title {
font-size: 15px;
font-size: 0.9375rem;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .more-link {
display: none;
}
}
@media only screen and (max-width: 45em) {
.widget-magazine-posts .medium-post .entry-title {
font-size: 15px;
font-size: 0.9375rem;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .entry-content {
display: none;
}
}
@media only screen and (max-width: 40em) {
/* Magazine Post Widgets */
.widget-magazine-posts .magazine-grid-two-columns {
margin-right: 0;
}
.widget-magazine-posts .magazine-grid .large-post,
.widget-magazine-posts .magazine-horizontal-box .large-post .wp-post-image,
.widget-magazine-posts .magazine-vertical-box .large-post,
.widget-magazine-posts-columns .magazine-posts-column-left {
float: none;
padding: 0;
width: 100%;
}
.widget-magazine-posts .magazine-vertical-box .small-posts,
.widget-magazine-posts-columns .magazine-posts-column-right {
margin-left: 0;
padding-top: 1em;
padding-left: 0;
width: 100%;
}
.widget-magazine-posts .large-post .wp-post-image {
float: left;
margin: 0 1.5em 0 0;
max-width: 50%;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .post-content {
float: right;
padding-left: 1.5em;
width: 50%;
}
.widget-magazine-posts .magazine-grid .large-post {
clear: left;
}
.widget-magazine-posts .magazine-grid .large-post .wp-post-image {
margin-bottom: 1em;
}
.widget-magazine-posts .large-post .entry-content {
display: none;
}
.widget-magazine-posts .large-post .entry-title {
font-size: 18px;
font-size: 1.125rem;
}
}
@media only screen and (max-width: 35em) {
.widget-magazine-posts .magazine-grid-three-columns {
margin-right: 0;
}
.widget-magazine-posts .medium-post {
float: none;
padding-right: 0;
width: 100%;
}
.widget-magazine-posts .medium-post .wp-post-image {
float: left;
margin: 0 1em 0 0;
max-width: 120px;
}
}
@media only screen and (max-width: 30em) {
/* Magazine Homepage: Category Post Widgets */
.widget-magazine-posts .medium-post .wp-post-image,
.widget-magazine-posts .small-post .wp-post-image {
max-width: 30%;
}
.widget-magazine-posts .large-post .wp-post-image,
.widget-magazine-posts .magazine-grid .large-post .wp-post-image {
float: none;
margin: 0 0 0.5em 0;
max-width: 100%;
}
.widget-magazine-posts .magazine-horizontal-box .large-post .post-content {
float: none;
padding: 0;
width: 100%;
}
.widget-magazine-posts .large-post .entry-title {
font-size: 20px;
font-size: 1.25rem;
}
.widget-magazine-posts .large-post .entry-content,
.widget-magazine-posts .large-post .entry-content .more-link,
.widget-magazine-posts .magazine-horizontal-box .large-post .entry-content,
.widget-magazine-posts .magazine-horizontal-box .large-post .entry-content .more-link {
display: inline-block;
}
}
@media only screen and (max-width: 20em) {
.widget-magazine-posts .medium-post .entry-title,
.widget-magazine-posts .small-post .entry-title {
vertical-align: top;
font-size: 13px;
font-size: 0.8125rem;
}
.widget-magazine-posts .medium-post .entry-meta,
.widget-magazine-posts .small-post .entry-meta {
display: none;
}
}
/*--------------------------------------------------------------
# - Media Queries for Media
--------------------------------------------------------------*/
@media only screen and (max-width: 50em) {
/* Gallery */
.gallery-item {
padding: 0 0.75em 0.5em 0;
}
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
max-width: 25%;
}
}
@media only screen and (max-width: 30em) {
.alignright,
.alignleft {
float: none;
margin: 1em 0;
}
/* Gallery */
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
max-width: 50%;
}
}
/*--------------------------------------------------------------
# - Theme Options
--------------------------------------------------------------*/
/* Sidebar Left Layout */
.sidebar-left .content-area {
float: right;
padding-right: 0;
padding-left: 2em;
}
.sidebar-left .sidebar {
float: left;
}
@media only screen and (max-width: 80em) {
.sidebar-left .content-area {
padding-right: 0;
padding-left: 1.5em;
}
}
@media only screen and (max-width: 60em) {
.sidebar-left .content-area {
padding: 0;
}
}
.sidebar-left.post-layout-three-columns .content-archive {
float: none;
padding: 0;
width: 100%;
}
/* Customizer Preview */
.magazine-widgets-placeholder {
position: relative;
padding: 1em;
}
.magazine-widgets-placeholder .magazine-widgets-placeholder-title {
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding: 1em 1em 1em 55px;
color: #0085ba;
border: 2px dashed #0085ba;
}
/* Add some space around the visual edit shortcut buttons. */
.magazine-widgets-placeholder .customize-partial-edit-shortcut button {
left: 15px;
top: 13px;
}