X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/8d3bb1a5dcfdea9857d3c88c3751f09593e34dc8..ef91a7f4f3c6468973e192335a27ec0e0faca0b5:/wp-content/themes/twentyseventeen/style.css?ds=sidebyside diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css new file mode 100644 index 00000000..fd8543be --- /dev/null +++ b/wp-content/themes/twentyseventeen/style.css @@ -0,0 +1,4235 @@ +/* +Theme Name: Twenty Seventeen +Theme URI: https://wordpress.org/themes/twentyseventeen/ +Author: the WordPress team +Author URI: https://wordpress.org/ +Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. +Version: 1.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: twentyseventeen +Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready + +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. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 Normalize +2.0 Accessibility +3.0 Alignments +4.0 Clearings +5.0 Typography +6.0 Forms +7.0 Formatting +8.0 Lists +9.0 Tables +10.0 Links +11.0 Featured Image Hover +12.0 Navigation +13.0 Layout + 13.1 Header + 13.2 Front Page + 13.3 Regular Content + 13.4 Posts + 13.5 Pages + 13.6 Footer +14.0 Comments +15.0 Widgets +16.0 Media + 16.1 Galleries +17.0 Customizer +18.0 SVGs Fallbacks +19.0 Media Queries +20.0 Print +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 Normalize +Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css +--------------------------------------------------------------*/ + +html { + font-family: sans-serif; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +figcaption, +figure, +main { + display: block; +} + +figure { + margin: 1em 0; +} + +hr { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} + +a:active, +a:hover { + outline-width: 0; +} + +abbr[title] { + border-bottom: 1px #767676 dotted; + text-decoration: none; +} + +b, +strong { + font-weight: inherit; +} + +b, +strong { + font-weight: 700; +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +dfn { + font-style: italic; +} + +mark { + background-color: #eee; + color: #222; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +audio, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +img { + border-style: none; +} + +svg:not(:root) { + overflow: hidden; +} + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +fieldset { + border: 1px solid #bbb; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +progress { + display: inline-block; + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +details, +menu { + display: block; +} + +summary { + display: list-item; +} + +canvas { + display: inline-block; +} + +template { + display: none; +} + +[hidden] { + display: none; +} + +/*-------------------------------------------------------------- +2.0 Accessibility +--------------------------------------------------------------*/ + +/* Text meant only for screen readers. */ + +.screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + 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. */ +} + +/*-------------------------------------------------------------- +3.0 Alignments +--------------------------------------------------------------*/ + +.alignleft { + display: inline; + float: left; + margin-right: 1.5em; +} + +.alignright { + display: inline; + float: right; + margin-left: 1.5em; +} + +.aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; +} + +/*-------------------------------------------------------------- +4.0 Clearings +--------------------------------------------------------------*/ + +.clear:before, +.clear:after, +.entry-content:before, +.entry-content:after, +.entry-footer:before, +.entry-footer:after, +.comment-content:before, +.comment-content:after, +.site-header:before, +.site-header:after, +.site-content:before, +.site-content:after, +.site-footer:before, +.site-footer:after, +.nav-links:before, +.nav-links:after, +.pagination:before, +.pagination:after, +.comment-author:before, +.comment-author:after, +.widget-area:before, +.widget-area:after, +.widget:before, +.widget:after, +.comment-meta:before, +.comment-meta:after { + content: ""; + display: table; + table-layout: fixed; +} + +.clear:after, +.entry-content:after, +.entry-footer:after, +.comment-content:after, +.site-header:after, +.site-content:after, +.site-footer:after, +.nav-links:after, +.pagination:after, +.comment-author:after, +.widget-area:after, +.widget:after, +.comment-meta:after { + clear: both; +} + +/*-------------------------------------------------------------- +5.0 Typography +--------------------------------------------------------------*/ + +body, +button, +input, +select, +textarea { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; + font-size: 15px; + font-size: 0.9375rem; + font-weight: 400; + line-height: 1.66; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; + line-height: 1.4; + margin: 0 0 0.75em; + padding: 1.5em 0 0; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + padding-top: 0; +} + +h1 { + font-size: 24px; + font-size: 1.5rem; + font-weight: 300; +} + +h2 { + color: #666; + font-size: 20px; + font-size: 1.25rem; + font-weight: 300; +} + +h3 { + color: #333; + font-size: 18px; + font-size: 1.125rem; + font-weight: 300; +} + +h4 { + color: #333; + font-size: 16px; + font-size: 1rem; + font-weight: 800; +} + +h5 { + color: #767676; + font-size: 13px; + font-size: 0.8125rem; + font-weight: 800; + letter-spacing: 0.15em; + text-transform: uppercase; +} + +h6 { + color: #333; + font-size: 15px; + font-size: 0.9375rem; + font-weight: 800; +} + +p { + margin: 0 0 1.5em; + padding: 0; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +blockquote { + color: #666; + font-size: 18px; + font-size: 1.125rem; + font-style: italic; + line-height: 1.7; + margin: 0; + overflow: hidden; + padding: 0; +} + +blockquote cite { + display: block; + font-style: normal; + font-weight: 600; + margin-top: 0.5em; +} + +address { + margin: 0 0 1.5em; +} + +pre { + background: #eee; + font-family: "Courier 10 Pitch", Courier, monospace; + font-size: 15px; + font-size: 0.9375rem; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} + +code, +kbd, +tt, +var { + font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + font-size: 15px; + font-size: 0.9375rem; +} + +abbr, +acronym { + border-bottom: 1px dotted #666; + cursor: help; +} + +mark, +ins { + background: #eee; + text-decoration: none; +} + +big { + font-size: 125%; +} + +blockquote { + quotes: "" ""; +} + +q { + quotes: "“" "”" "‘" "’"; +} + +blockquote:before, +blockquote:after { + content: ""; +} + +:focus { + outline: none; +} + +/* Typography for Arabic Font */ + +html[lang="ar"] body, +html[lang="ar"] button, +html[lang="ar"] input, +html[lang="ar"] select, +html[lang="ar"] textarea, +html[lang="ary"] body, +html[lang="ary"] button, +html[lang="ary"] input, +html[lang="ary"] select, +html[lang="ary"] textarea, +html[lang="azb"] body, +html[lang="azb"] button, +html[lang="azb"] input, +html[lang="azb"] select, +html[lang="azb"] textarea, +html[lang="fa-IR"] body, +html[lang="fa-IR"] button, +html[lang="fa-IR"] input, +html[lang="fa-IR"] select, +html[lang="fa-IR"] textarea, +html[lang="haz"] body, +html[lang="haz"] button, +html[lang="haz"] input, +html[lang="haz"] select, +html[lang="haz"] textarea, +html[lang="ps"] body, +html[lang="ps"] button, +html[lang="ps"] input, +html[lang="ps"] select, +html[lang="ps"] textarea, +html[lang="ur"] body, +html[lang="ur"] button, +html[lang="ur"] input, +html[lang="ur"] select, +html[lang="ur"] textarea { + font-family: Tahoma, Arial, sans-serif; +} + +html[lang="ar"] h1, +html[lang="ar"] h2, +html[lang="ar"] h3, +html[lang="ar"] h4, +html[lang="ar"] h5, +html[lang="ar"] h6, +html[lang="ary"] h1, +html[lang="ary"] h2, +html[lang="ary"] h3, +html[lang="ary"] h4, +html[lang="ary"] h5, +html[lang="ary"] h6, +html[lang="azb"] h1, +html[lang="azb"] h2, +html[lang="azb"] h3, +html[lang="azb"] h4, +html[lang="azb"] h5, +html[lang="azb"] h6, +html[lang="fa-IR"] h1, +html[lang="fa-IR"] h2, +html[lang="fa-IR"] h3, +html[lang="fa-IR"] h4, +html[lang="fa-IR"] h5, +html[lang="fa-IR"] h6, +html[lang="haz"] h1, +html[lang="haz"] h2, +html[lang="haz"] h3, +html[lang="haz"] h4, +html[lang="haz"] h5, +html[lang="haz"] h6, +html[lang="ps"] h1, +html[lang="ps"] h2, +html[lang="ps"] h3, +html[lang="ps"] h4, +html[lang="ps"] h5, +html[lang="ps"] h6, +html[lang="ur"] h1, +html[lang="ur"] h2, +html[lang="ur"] h3, +html[lang="ur"] h4, +html[lang="ur"] h5, +html[lang="ur"] h6 { + font-weight: 700; +} + +/* Typography for Chinese Font */ + +html[lang^="zh-"] body, +html[lang^="zh-"] button, +html[lang^="zh-"] input, +html[lang^="zh-"] select, +html[lang^="zh-"] textarea { + font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif; +} + +html[lang^="zh-"] h1, +html[lang^="zh-"] h2, +html[lang^="zh-"] h3, +html[lang^="zh-"] h4, +html[lang^="zh-"] h5, +html[lang^="zh-"] h6 { + font-weight: 700; +} + +/* Typography for Cyrillic Font */ + +html[lang="bg-BG"] body, +html[lang="bg-BG"] button, +html[lang="bg-BG"] input, +html[lang="bg-BG"] select, +html[lang="bg-BG"] textarea, +html[lang="ru-RU"] body, +html[lang="ru-RU"] button, +html[lang="ru-RU"] input, +html[lang="ru-RU"] select, +html[lang="ru-RU"] textarea, +html[lang="uk"] body, +html[lang="uk"] button, +html[lang="uk"] input, +html[lang="uk"] select, +html[lang="uk"] textarea { + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; +} + +html[lang="bg-BG"] h1, +html[lang="bg-BG"] h2, +html[lang="bg-BG"] h3, +html[lang="bg-BG"] h4, +html[lang="bg-BG"] h5, +html[lang="bg-BG"] h6, +html[lang="ru-RU"] h1, +html[lang="ru-RU"] h2, +html[lang="ru-RU"] h3, +html[lang="ru-RU"] h4, +html[lang="ru-RU"] h5, +html[lang="ru-RU"] h6, +html[lang="uk"] h1, +html[lang="uk"] h2, +html[lang="uk"] h3, +html[lang="uk"] h4, +html[lang="uk"] h5, +html[lang="uk"] h6 { + font-weight: 700; + line-height: 1.2; +} + +/* Typography for Devanagari Font */ + +html[lang="bn-BD"] body, +html[lang="bn-BD"] button, +html[lang="bn-BD"] input, +html[lang="bn-BD"] select, +html[lang="bn-BD"] textarea, +html[lang="hi-IN"] body, +html[lang="hi-IN"] button, +html[lang="hi-IN"] input, +html[lang="hi-IN"] select, +html[lang="hi-IN"] textarea, +html[lang="mr-IN"] body, +html[lang="mr-IN"] button, +html[lang="mr-IN"] input, +html[lang="mr-IN"] select, +html[lang="mr-IN"] textarea { + font-family: Arial, sans-serif; +} + +html[lang="bn-BD"] h1, +html[lang="bn-BD"] h2, +html[lang="bn-BD"] h3, +html[lang="bn-BD"] h4, +html[lang="bn-BD"] h5, +html[lang="bn-BD"] h6, +html[lang="hi-IN"] h1, +html[lang="hi-IN"] h2, +html[lang="hi-IN"] h3, +html[lang="hi-IN"] h4, +html[lang="hi-IN"] h5, +html[lang="hi-IN"] h6, +html[lang="mr-IN"] h1, +html[lang="mr-IN"] h2, +html[lang="mr-IN"] h3, +html[lang="mr-IN"] h4, +html[lang="mr-IN"] h5, +html[lang="mr-IN"] h6 { + font-weight: 700; +} + +/* Typography for Greek Font */ + +html[lang="el"] body, +html[lang="el"] button, +html[lang="el"] input, +html[lang="el"] select, +html[lang="el"] textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +html[lang="el"] h1, +html[lang="el"] h2, +html[lang="el"] h3, +html[lang="el"] h4, +html[lang="el"] h5, +html[lang="el"] h6 { + font-weight: 700; + line-height: 1.3; +} + +/* Typography for Gujarati Font */ + +html[lang="gu-IN"] body, +html[lang="gu-IN"] button, +html[lang="gu-IN"] input, +html[lang="gu-IN"] select, +html[lang="gu-IN"] textarea { + font-family: Arial, sans-serif; +} + +html[lang="gu-IN"] h1, +html[lang="gu-IN"] h2, +html[lang="gu-IN"] h3, +html[lang="gu-IN"] h4, +html[lang="gu-IN"] h5, +html[lang="gu-IN"] h6 { + font-weight: 700; +} + +/* Typography for Hebrew Font */ + +html[lang="he-IL"] body, +html[lang="he-IL"] button, +html[lang="he-IL"] input, +html[lang="he-IL"] select, +html[lang="he-IL"] textarea { + font-family: "Arial Hebrew", Arial, sans-serif; +} + +html[lang="he-IL"] h1, +html[lang="he-IL"] h2, +html[lang="he-IL"] h3, +html[lang="he-IL"] h4, +html[lang="he-IL"] h5, +html[lang="he-IL"] h6 { + font-weight: 700; +} + +/* Typography for Japanese Font */ + +html[lang="ja"] body, +html[lang="ja"] button, +html[lang="ja"] input, +html[lang="ja"] select, +html[lang="ja"] textarea { + font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; +} + +html[lang="ja"] h1, +html[lang="ja"] h2, +html[lang="ja"] h3, +html[lang="ja"] h4, +html[lang="ja"] h5, +html[lang="ja"] h6 { + font-weight: 700; +} + +/* Typography for Korean font */ + +html[lang="ko-KR"] body, +html[lang="ko-KR"] button, +html[lang="ko-KR"] input, +html[lang="ko-KR"] select, +html[lang="ko-KR"] textarea { + font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif; +} + +html[lang="ko-KR"] h1, +html[lang="ko-KR"] h2, +html[lang="ko-KR"] h3, +html[lang="ko-KR"] h4, +html[lang="ko-KR"] h5, +html[lang="ko-KR"] h6 { + font-weight: 600; +} + +/* Typography for Thai Font */ + +html[lang="th"] h1, +html[lang="th"] h2, +html[lang="th"] h3, +html[lang="th"] h4, +html[lang="th"] h5, +html[lang="th"] h6 { + line-height: 1.65; + font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +html[lang="th"] body, +html[lang="th"] button, +html[lang="th"] input, +html[lang="th"] select, +html[lang="th"] textarea { + line-height: 1.8; + font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +/* Remove letter-spacing for all non-latin alphabets */ + +html[lang="ar"] *, +html[lang="ary"] *, +html[lang="azb"] *, +html[lang="haz"] *, +html[lang="ps"] *, +html[lang^="zh-"] *, +html[lang="bg-BG"] *, +html[lang="ru-RU"] *, +html[lang="uk"] *, +html[lang="bn-BD"] *, +html[lang="hi-IN"] *, +html[lang="mr-IN"] *, +html[lang="el"] *, +html[lang="gu-IN"] *, +html[lang="he-IL"] *, +html[lang="ja"] *, +html[lang="ko-KR"] *, +html[lang="th"] * { + letter-spacing: 0 !important; +} + +/*-------------------------------------------------------------- +6.0 Forms +--------------------------------------------------------------*/ + +label { + color: #333; + display: block; + font-weight: 800; + margin-bottom: 0.5em; +} + +fieldset { + margin-bottom: 1em; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + color: #666; + background: #fff; + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); + border: 1px solid #bbb; + -webkit-border-radius: 3px; + border-radius: 3px; + display: block; + padding: 0.7em; + width: 100%; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: #222; + border-color: #333; +} + +select { + border: 1px solid #bbb; + -webkit-border-radius: 3px; + border-radius: 3px; + height: 3em; + max-width: 100%; +} + +input[type="radio"], +input[type="checkbox"] { + margin-right: 0.5em; +} + +input[type="radio"] + label, +input[type="checkbox"] + label { + font-weight: 400; +} + +button, +input[type="button"], +input[type="submit"] { + background-color: #222; + border: 0; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + line-height: 1; + padding: 1em 2em; + text-shadow: none; + -webkit-transition: background 0.2s; + transition: background 0.2s; +} + +input + button, +input + input[type="button"], +input + input[type="submit"] { + padding: 0.75em 2em; +} + +button.secondary, +input[type="reset"], +input[type="button"].secondary, +input[type="reset"].secondary, +input[type="submit"].secondary { + background-color: #ddd; + color: #222; +} + +button:hover, +button:focus, +input[type="button"]:hover, +input[type="button"]:focus, +input[type="submit"]:hover, +input[type="submit"]:focus { + background: #767676; +} + +button.secondary:hover, +button.secondary:focus, +input[type="reset"]:hover, +input[type="reset"]:focus, +input[type="button"].secondary:hover, +input[type="button"].secondary:focus, +input[type="reset"].secondary:hover, +input[type="reset"].secondary:focus, +input[type="submit"].secondary:hover, +input[type="submit"].secondary:focus { + background: #bbb; +} + +/* Placeholder text color -- selectors need to be separate to work. */ +::-webkit-input-placeholder { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; +} + +:-moz-placeholder { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; +} + +::-moz-placeholder { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; + opacity: 1; + /* Since FF19 lowers the opacity of the placeholder by default */ +} + +:-ms-input-placeholder { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; +} + +/*-------------------------------------------------------------- +7.0 Formatting +--------------------------------------------------------------*/ + +hr { + background-color: #bbb; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} + +/*-------------------------------------------------------------- +8.0 Lists +--------------------------------------------------------------*/ + +ul, +ol { + margin: 0 0 1.5em; + padding: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li > ul, +li > ol { + margin-bottom: 0; + margin-left: 1.5em; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 1.5em 1.5em; +} + +/*-------------------------------------------------------------- +9.0 Tables +--------------------------------------------------------------*/ + +table { + border-collapse: collapse; + margin: 0 0 1.5em; + width: 100%; +} + +thead th { + border-bottom: 2px solid #bbb; + padding-bottom: 0.5em; +} + +th { + padding: 0.4em; + text-align: left; +} + +tr { + border-bottom: 1px solid #eee; +} + +td { + padding: 0.4em; +} + +th:first-child, +td:first-child { + padding-left: 0; +} + +th:last-child, +td:last-child { + padding-right: 0; +} + +/*-------------------------------------------------------------- +10.0 Links +--------------------------------------------------------------*/ + +a { + color: #222; + text-decoration: none; +} + +a:focus { + outline: thin dotted; +} + +a:hover, +a:active { + color: #000; + outline: 0; +} + +/* Hover effects */ + +.entry-content a, +.entry-summary a, +.widget a, +.site-footer .widget-area a, +.posts-navigation a, +.widget_authors a strong { + -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); + box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); + -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out; +} + +.entry-title a, +.entry-meta a, +.page-links a, +.page-links a .page-number, +.entry-footer a, +.entry-footer .cat-links a, +.entry-footer .tags-links a, +.edit-link a, +.post-navigation a, +.logged-in-as a, +.comment-navigation a, +.comment-metadata a, +.comment-metadata a.comment-edit-link, +.comment-reply-link, +a .nav-title, +.pagination a, +.comments-pagination a, +.site-info a, +.widget .widget-title a, +.widget ul li a, +.site-footer .widget-area ul li a, +.site-footer .widget-area ul li a { + -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); + box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); + text-decoration: none; + -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, box-shadow 130ms ease-in-out; + transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out; +} + +.entry-content a:focus, +.entry-content a:hover, +.entry-summary a:focus, +.entry-summary a:hover, +.widget a:focus, +.widget a:hover, +.site-footer .widget-area a:focus, +.site-footer .widget-area a:hover, +.posts-navigation a:focus, +.posts-navigation a:hover, +.comment-metadata a:focus, +.comment-metadata a:hover, +.comment-metadata a.comment-edit-link:focus, +.comment-metadata a.comment-edit-link:hover, +.comment-reply-link:focus, +.comment-reply-link:hover, +.widget_authors a:focus strong, +.widget_authors a:hover strong, +.entry-title a:focus, +.entry-title a:hover, +.entry-meta a:focus, +.entry-meta a:hover, +.page-links a:focus .page-number, +.page-links a:hover .page-number, +.entry-footer a:focus, +.entry-footer a:hover, +.entry-footer .cat-links a:focus, +.entry-footer .cat-links a:hover, +.entry-footer .tags-links a:focus, +.entry-footer .tags-links a:hover, +.post-navigation a:focus, +.post-navigation a:hover, +.pagination a:not(.prev):not(.next):focus, +.pagination a:not(.prev):not(.next):hover, +.comments-pagination a:not(.prev):not(.next):focus, +.comments-pagination a:not(.prev):not(.next):hover, +.logged-in-as a:focus, +.logged-in-as a:hover, +a:focus .nav-title, +a:hover .nav-title, +.edit-link a:focus, +.edit-link a:hover, +.site-info a:focus, +.site-info a:hover, +.widget .widget-title a:focus, +.widget .widget-title a:hover, +.widget ul li a:focus, +.widget ul li a:hover { + color: #000; + -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); +} + +/* Fixes linked images */ +.entry-content a img, +.widget a img { + -webkit-box-shadow: 0 0 0 8px #fff; + box-shadow: 0 0 0 8px #fff; +} + +.post-navigation a:focus .icon, +.post-navigation a:hover .icon { + color: #222; +} + +/*-------------------------------------------------------------- +11.0 Featured Image Hover +--------------------------------------------------------------*/ + +.post-thumbnail { + margin-bottom: 1em; +} + +.post-thumbnail a img { + -webkit-backface-visibility: hidden; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.post-thumbnail a:hover img, +.post-thumbnail a:focus img { + opacity: 0.7; +} + +/*-------------------------------------------------------------- +12.0 Navigation +--------------------------------------------------------------*/ + +.navigation-top { + background: #fff; + border-bottom: 1px solid #eee; + border-top: 1px solid #eee; + font-size: 16px; + font-size: 1rem; + position: relative; +} + +.navigation-top .wrap { + max-width: 1000px; + padding: 0; +} + +.navigation-top a { + color: #222; + font-weight: 600; + -webkit-transition: color 0.2s; + transition: color 0.2s; +} + +.navigation-top .current-menu-item > a, +.navigation-top .current_page_item > a { + color: #767676; +} + +.main-navigation { + clear: both; + display: block; +} + +.main-navigation ul { + background: #fff; + list-style: none; + margin: 0; + padding: 0 1.5em; + text-align: left; +} + +/* Hide the menu on small screens when JavaScript is available. + * It only works with JavaScript. + */ + +.js .main-navigation ul, +.main-navigation .menu-item-has-children > a > .icon, +.main-navigation .page_item_has_children > a > .icon, +.main-navigation ul a > .icon { + display: none; +} + +.main-navigation > div > ul { + border-top: 1px solid #eee; + padding: 0.75em 1.695em; +} + +.js .main-navigation.toggled-on > div > ul { + display: block; +} + +.main-navigation ul ul { + padding: 0 0 0 1.5em; +} + +.main-navigation ul ul.toggled-on { + display: block; +} + +.main-navigation ul ul a { + letter-spacing: 0; + padding: 0.4em 0; + position: relative; + text-transform: none; +} + +.main-navigation li { + border-bottom: 1px solid #eee; + position: relative; +} + +.main-navigation li li, +.main-navigation li:last-child { + border: 0; +} + +.main-navigation a { + display: block; + padding: 0.5em 0; + text-decoration: none; +} + +.main-navigation a:hover { + color: #767676; +} + +/* Menu toggle */ + +.menu-toggle { + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + color: #222; + display: none; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + line-height: 1.5; + margin: 1px auto 2px; + padding: 1em; + text-shadow: none; +} + +/* Display the menu toggle when JavaScript is available. */ + +.js .menu-toggle { + display: block; +} + +.main-navigation.toggled-on ul.nav-menu { + display: block; +} + +.menu-toggle:hover, +.menu-toggle:focus { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +.menu-toggle:focus { + outline: thin solid; +} + +.menu-toggle .icon { + margin-right: 0.5em; + top: -2px; +} + +.toggled-on .menu-toggle .icon-bars, +.menu-toggle .icon-close { + display: none; +} + +.toggled-on .menu-toggle .icon-close { + display: inline-block; +} + +/* Dropdown Toggle */ + +.dropdown-toggle { + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + color: #222; + display: block; + font-size: 16px; + right: -0.5em; + line-height: 1.5; + margin: 0 auto; + padding: 0.5em; + position: absolute; + text-shadow: none; + top: 0; +} + +.dropdown-toggle:hover, +.dropdown-toggle:focus { + background: transparent; +} + +.dropdown-toggle:focus { + outline: thin dotted; +} + +.dropdown-toggle.toggled-on .icon { + -ms-transform: rotate(-180deg); /* IE 9 */ + -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */ + transform: rotate(-180deg); +} + +/* Scroll down arrow */ + +.site-header .menu-scroll-down { + display: none; +} + +/*-------------------------------------------------------------- +13.0 Layout +--------------------------------------------------------------*/ + +html { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*, +*:before, +*:after { + /* 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/ */ + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; +} + +body { + background: #fff; + /* Fallback for when there is no custom background color defined. */ +} + +#page { + position: relative; + word-wrap: break-word; +} + +.wrap { + margin-left: auto; + margin-right: auto; + max-width: 700px; + padding-left: 2em; + padding-right: 2em; +} + +.wrap:after { + clear: both; + content: ""; + display: block; +} + +/*-------------------------------------------------------------- +13.1 Header +--------------------------------------------------------------*/ + +#masthead .wrap { + position: relative; +} + +.site-header { + background-color: #fafafa; + position: relative; +} + +/* Site branding */ + +.site-branding { + padding: 1em 0; + position: relative; + -webkit-transition: margin-bottom 0.2s; + transition: margin-bottom 0.2s; + z-index: 3; +} + +.site-branding a { + text-decoration: none; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.site-branding a:hover, +.site-branding a:focus { + opacity: 0.7; +} + +.site-title { + clear: none; + font-size: 24px; + font-size: 1.5rem; + font-weight: 800; + line-height: 1.25; + letter-spacing: 0.08em; + margin: 0; + padding: 0; + text-transform: uppercase; +} + +.site-title, +.site-title a { + color: #222; + opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */ +} + +body.has-header-image .site-title, +body.has-header-video .site-title, +body.has-header-image .site-title a, +body.has-header-video .site-title a { + color: #fff; +} + +.site-description { + color: #666; + font-size: 13px; + font-size: 0.8125rem; + margin-bottom: 0; +} + +body.has-header-image .site-description, +body.has-header-video .site-description { + color: #fff; + opacity: 0.8; +} + +.custom-logo-link { + display: inline-block; + padding-right: 1em; + vertical-align: middle; + width: auto; +} + +.custom-logo-link img { + display: inline-block; + max-height: 80px; + width: auto; +} + +body.home.title-tagline-hidden.has-header-image .custom-logo-link img, +body.home.title-tagline-hidden.has-header-video .custom-logo-link img { + max-height: 200px; + max-width: 100%; +} + +.custom-logo-link a:hover, +.custom-logo-link a:focus { + opacity: 0.9; +} + +body:not(.title-tagline-hidden) .site-branding-text { + display: inline-block; + vertical-align: middle; +} + +.custom-header { + position: relative; +} + +.has-header-image.twentyseventeen-front-page .custom-header, +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { + display: table; + height: 300px; + height: 75vh; + width: 100%; +} + +.custom-header-media { + bottom: 0; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + width: 100%; +} + +.custom-header-media:before { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */ + background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */ + bottom: 0; + content: ""; + display: block; + height: 100%; + left: 0; + position: absolute; + right: 0; + z-index: 2; +} + +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video, +.has-header-video .custom-header-media iframe { + position: fixed; + height: auto; + left: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100%; + min-width: 100vw; /* vw prevents 1px gap on left that 100% has */ + width: auto; + top: 50%; + padding-bottom: 1px; /* Prevent header from extending beyond the footer */ + -ms-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ + background-color: rgba(34, 34, 34, 0.5); + border: 1px solid rgba(255, 255, 255, 0.6); + color: rgba(255, 255, 255, 0.6); + height: 45px; + overflow: hidden; + padding: 0; + position: fixed; + right: 30px; + top: 30px; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + width: 45px; +} + +.wp-custom-header .wp-custom-header-video-button:hover, +.wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */ + border-color: rgba(255, 255, 255, 0.8); + background-color: rgba(34, 34, 34, 0.8); + color: #fff; +} + +.admin-bar .wp-custom-header-video-button { + top: 62px; +} + +.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { + bottom: 0; + position: absolute; + top: auto; + -ms-transform: translateX(-50%) translateY(0); + -moz-transform: translateX(-50%) translateY(0); + -webkit-transform: translateX(-50%) translateY(0); + transform: translateX(-50%) translateY(0); +} + +/* For browsers that support 'object-fit' */ +@supports ( object-fit: cover ) { + .has-header-image .custom-header-media img, + .has-header-video .custom-header-media video, + .has-header-video .custom-header-media iframe, + .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { + height: 100%; + left: 0; + -o-object-fit: cover; + object-fit: cover; + top: 0; + -ms-transform: none; + -moz-transform: none; + -webkit-transform: none; + transform: none; + width: 100%; + } +} + +/* Hides div in Customizer preview when header images or videos change. */ + +body:not(.has-header-image):not(.has-header-video) .custom-header-media { + display: none; +} + +.has-header-image.twentyseventeen-front-page .site-branding, +.has-header-video.twentyseventeen-front-page .site-branding, +.has-header-image.home.blog .site-branding, +.has-header-video.home.blog .site-branding { + display: table-cell; + height: 100%; + vertical-align: bottom; +} + +/*-------------------------------------------------------------- +13.2 Front Page +--------------------------------------------------------------*/ + +.twentyseventeen-front-page .site-content { + padding: 0; +} + +.twentyseventeen-panel { + overflow: hidden; + position: relative; +} + +.panel-image { + background-position: center center; + background-repeat: no-repeat; + -webkit-background-size: cover; + background-size: cover; + position: relative; +} + +.panel-image:before { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */ + background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3))); + background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */ + bottom: 0; + content: ""; + left: 0; + right: 0; + position: absolute; + top: 100px; +} + +.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) { + border-top: 1px solid #ddd; +} + +.panel-content { + position: relative; +} + +.panel-content .wrap { + padding-bottom: 0.5em; + padding-top: 1.75em; +} + +/* Panel edit link */ + +.twentyseventeen-panel .edit-link { + display: block; + margin: 0.3em 0 0; +} + +.twentyseventeen-panel .entry-header .edit-link { + font-size: 14px; + font-size: 0.875rem; +} + +/* Front Page - Recent Posts */ + +.twentyseventeen-front-page .panel-content .recent-posts article { + border: 0; + color: #333; + margin-bottom: 3em; +} + +.recent-posts .entry-header { + margin-bottom: 1.2em; +} + +.page .panel-content .recent-posts .entry-title { + font-size: 20px; + font-size: 1.25rem; + font-weight: 300; + letter-spacing: 0; + text-transform: none; +} + +.twentyseventeen-panel .recent-posts .entry-header .edit-link { + color: #222; + display: inline-block; + font-size: 11px; + font-size: 0.6875rem; + margin-left: 1em; +} + +/*-------------------------------------------------------------- +13.3 Regular Content +--------------------------------------------------------------*/ + +.site-content-contain { + background-color: #fff; + position: relative; +} + +.site-content { + padding: 2.5em 0 0; +} + +/*-------------------------------------------------------------- +13.4 Posts +--------------------------------------------------------------*/ + +/* Post Landing Page */ + +.sticky { + position: relative; +} + +.post:not(.sticky) .icon-thumb-tack { + display: none; +} + +.sticky .icon-thumb-tack { + display: block; + height: 18px; + left: -1.5em; + position: absolute; + top: 1.65em; + width: 20px; +} + +.page .panel-content .entry-title, +.page-title, +body.page:not(.twentyseventeen-front-page) .entry-title { + color: #222; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.entry-header .entry-title { + margin-bottom: 0.25em; +} + +.entry-title a { + color: #333; + text-decoration: none; + margin-left: -2px; +} + +.entry-title:not(:first-child) { + padding-top: 0; +} + +.entry-meta { + color: #767676; + font-size: 11px; + font-size: 0.6875rem; + font-weight: 800; + letter-spacing: 0.1818em; + padding-bottom: 0.25em; + text-transform: uppercase; +} + +.entry-meta a { + color: #767676; +} + +.byline, +.updated:not(.published) { + display: none; +} + +.single .byline, +.group-blog .byline { + display: inline; +} + +.pagination, +.comments-pagination { + border-top: 1px solid #eee; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + padding: 2em 0 3em; + text-align: center; +} + +.pagination .icon, +.comments-pagination .icon { + width: 0.666666666em; + height: 0.666666666em; +} + +.comments-pagination { + border: 0; +} + +.page-numbers { + display: none; + padding: 0.5em 0.75em; +} + +.page-numbers.current { + color: #767676; + display: inline-block; +} + +.page-numbers.current .screen-reader-text { + clip: auto; + height: auto; + overflow: auto; + position: relative !important; + width: auto; +} + +.prev.page-numbers, +.next.page-numbers { + background-color: #ddd; + -webkit-border-radius: 2px; + border-radius: 2px; + display: inline-block; + font-size: 24px; + font-size: 1.5rem; + line-height: 1; + padding: 0.25em 0.5em 0.4em; +} + +.prev.page-numbers, +.next.page-numbers { + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; +} + +.prev.page-numbers:focus, +.prev.page-numbers:hover, +.next.page-numbers:focus, +.next.page-numbers:hover { + background-color: #767676; + color: #fff; +} + +.prev.page-numbers { + float: left; +} + +.next.page-numbers { + float: right; +} + +/* Aligned blockquotes */ + +.entry-content blockquote.alignleft, +.entry-content blockquote.alignright { + color: #666; + font-size: 13px; + font-size: 0.8125rem; + width: 48%; +} + +/* Blog landing, search, archives */ + +.blog .site-main > article, +.archive .site-main > article, +.search .site-main > article { + padding-bottom: 2em; +} + +body:not(.twentyseventeen-front-page) .entry-header { + padding: 1em 0; +} + +body:not(.twentyseventeen-front-page) .entry-header, +body:not(.twentyseventeen-front-page) .entry-content, +body:not(.twentyseventeen-front-page) #comments { + margin-left: auto; + margin-right: auto; +} + +body:not(.twentyseventeen-front-page) .entry-header { + padding-top: 0; +} + +.blog .entry-meta a.post-edit-link, +.archive .entry-meta a.post-edit-link, +.search .entry-meta a.post-edit-link { + color: #222; + display: inline-block; + margin-left: 1em; + white-space: nowrap; +} + +.search .page .entry-meta a.post-edit-link { + margin-left: 0; + white-space: nowrap; +} + +.taxonomy-description { + color: #666; + font-size: 13px; + font-size: 0.8125rem; +} + +/* More tag */ + +.entry-content .more-link:before { + content: ""; + display: block; + margin-top: 1.5em; +} + +/* Single Post */ + +.single-post:not(.has-sidebar) #primary, +.page.page-one-column:not(.twentyseventeen-front-page) #primary, +.archive.page-one-column:not(.has-sidebar) .page-header, +.archive.page-one-column:not(.has-sidebar) #primary { + margin-left: auto; + margin-right: auto; + max-width: 740px; +} + +.single-featured-image-header { + background-color: #fafafa; + border-bottom: 1px solid #eee; +} + +.single-featured-image-header img { + display: block; + margin: auto; +} + +.page-links { + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + padding: 2em 0 3em; +} + +.page-links .page-number { + color: #767676; + display: inline-block; + padding: 0.5em 1em; +} + +.page-links a { + display: inline-block; +} + +.page-links a .page-number { + color: #222; +} + +/* Entry footer */ + +.entry-footer { + border-bottom: 1px solid #eee; + border-top: 1px solid #eee; + margin-top: 2em; + padding: 2em 0; +} + +.entry-footer .cat-links, +.entry-footer .tags-links { + display: block; + font-size: 11px; + font-size: 0.6875rem; + font-weight: 800; + letter-spacing: 0.1818em; + padding-left: 2.5em; + position: relative; + text-transform: uppercase; +} + +.entry-footer .cat-links + .tags-links { + margin-top: 1em; +} + +.entry-footer .cat-links a, +.entry-footer .tags-links a { + color: #333; +} + +.entry-footer .cat-links .icon, +.entry-footer .tags-links .icon { + color: #767676; + left: 0; + margin-right: 0.5em; + position: absolute; + top: 2px; +} + +.entry-footer .edit-link { + display: inline-block; +} + +.entry-footer .edit-link a.post-edit-link { + background-color: #222; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + margin-top: 2em; + padding: 0.7em 2em; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + white-space: nowrap; +} + +.entry-footer .edit-link a.post-edit-link:hover, +.entry-footer .edit-link a.post-edit-link:focus { + background-color: #767676; +} + +/* Post Formats */ + +.blog .format-status .entry-title, +.archive .format-status .entry-title, +.blog .format-aside .entry-title, +.archive .format-aside .entry-title { + display: none; +} + +.format-quote blockquote { + color: #333; + font-size: 20px; + font-size: 1.25rem; + font-weight: 300; + overflow: visible; + position: relative; +} + +.format-quote blockquote .icon { + display: block; + height: 20px; + left: -1.25em; + position: absolute; + top: 0.4em; + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); + width: 20px; +} + +/* Post Navigation */ + +.post-navigation { + font-weight: 800; + margin: 3em 0; +} + +.post-navigation .nav-links { + padding: 1em 0; +} + +.nav-subtitle { + background: transparent; + color: #767676; + display: block; + font-size: 11px; + font-size: 0.6875rem; + letter-spacing: 0.1818em; + margin-bottom: 1em; + text-transform: uppercase; +} + +.nav-title { + color: #333; + font-size: 15px; + font-size: 0.9375rem; +} + +.post-navigation .nav-next { + margin-top: 1.5em; +} + +.nav-links .nav-previous .nav-title .nav-title-icon-wrapper { + margin-right: 0.5em; +} + +.nav-links .nav-next .nav-title .nav-title-icon-wrapper { + margin-left: 0.5em; +} + +/*-------------------------------------------------------------- +13.5 Pages +--------------------------------------------------------------*/ + +.page-header { + padding-bottom: 2em; +} + +.page .entry-header .edit-link { + font-size: 14px; + font-size: 0.875rem; +} + +.search .page .entry-header .edit-link { + font-size: 11px; + font-size: 0.6875rem; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} + +.page:not(.home) #content { + padding-bottom: 1.5em; +} + +/* 404 page */ + +.error404 .page-content { + padding-bottom: 4em; +} + +.error404 .page-content .search-form, +.search .page-content .search-form { + margin-bottom: 3em; +} + +/*-------------------------------------------------------------- +13.6 Footer +--------------------------------------------------------------*/ + +.site-footer { + border-top: 1px solid #eee; +} + +.site-footer .wrap { + padding-bottom: 1.5em; + padding-top: 2em; +} + +/* Footer widgets */ + +.site-footer .widget-area { + padding-bottom: 2em; + padding-top: 2em; +} + +/* Social nav */ + +.social-navigation { + font-size: 16px; + font-size: 1rem; + margin-bottom: 1em; +} + +.social-navigation ul { + list-style: none; + margin-bottom: 0; + margin-left: 0; +} + +.social-navigation li { + display: inline; +} + +.social-navigation a { + background-color: #767676; + -webkit-border-radius: 40px; + border-radius: 40px; + color: #fff; + display: inline-block; + height: 40px; + margin: 0 1em 0.5em 0; + text-align: center; + width: 40px; +} + +.social-navigation a:hover, +.social-navigation a:focus { + background-color: #333; +} + +.social-navigation .icon { + height: 16px; + top: 12px; + width: 16px; + vertical-align: top; +} + +/* Site info */ + +.site-info { + font-size: 14px; + font-size: 0.875rem; + margin-bottom: 1em; +} + +.site-info a { + color: #666; +} + +.site-info .sep { + margin: 0; + display: block; + visibility: hidden; + height: 0; + width: 100%; +} + +/*-------------------------------------------------------------- +14.0 Comments +--------------------------------------------------------------*/ + +#comments { + clear: both; + padding: 2em 0 0.5em; +} + +.comments-title { + font-size: 20px; + font-size: 1.25rem; + margin-bottom: 1.5em; +} + +.comment-list, +.comment-list .children { + list-style: none; + margin: 0; + padding: 0; +} + +.comment-list li:before { + display: none; +} + +.comment-body { + margin-left: 65px; +} + +.comment-author { + font-size: 16px; + font-size: 1rem; + margin-bottom: 0.4em; + position: relative; + z-index: 2; +} + +.comment-author .avatar { + height: 50px; + left: -65px; + position: absolute; + width: 50px; +} + +.comment-author .says { + display: none; +} + +.comment-meta { + margin-bottom: 1.5em; +} + +.comment-metadata { + color: #767676; + font-size: 10px; + font-size: 0.625rem; + font-weight: 800; + letter-spacing: 0.1818em; + text-transform: uppercase; +} + +.comment-metadata a { + color: #767676; +} + +.comment-metadata a.comment-edit-link { + color: #222; + margin-left: 1em; +} + +.comment-body { + color: #333; + font-size: 14px; + font-size: 0.875rem; + margin-bottom: 4em; +} + +.comment-reply-link { + font-weight: 800; + position: relative; +} + +.comment-reply-link .icon { + color: #222; + left: -2em; + height: 1em; + position: absolute; + top: 0; + width: 1em; +} + +.children .comment-author .avatar { + height: 30px; + left: -45px; + width: 30px; +} + +.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { + border: 1px solid #333; + padding: 2px; +} + +.no-comments, +.comment-awaiting-moderation { + color: #767676; + font-size: 14px; + font-size: 0.875rem; + font-style: italic; +} + +.comments-pagination { + margin: 2em 0 3em; +} + +.form-submit { + text-align: right; +} + +/*-------------------------------------------------------------- +15.0 Widgets +--------------------------------------------------------------*/ + +#secondary { + padding: 1em 0 2em; +} + +.widget { + padding-bottom: 3em; +} + +h2.widget-title { + color: #222; + font-size: 13px; + font-size: 0.8125rem; + font-weight: 800; + letter-spacing: 0.1818em; + margin-bottom: 1.5em; + text-transform: uppercase; +} + +.widget-title a { + color: inherit; +} + +/* widget forms */ + +.widget select { + width: 100%; +} + + +/* widget lists */ + +.widget ul { + list-style: none; + margin: 0; +} + +.widget ul li { + border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 0.5em 0; +} + +.widget ul li + li { + margin-top: -1px; +} + +.widget ul li ul { + margin: 0 0 -1px; + padding: 0; + position: relative; +} + +.widget ul li li { + border: 0; + padding-left: 24px; + padding-left: 1.5rem; +} + +/* Widget lists of links */ + +.widget_top-posts ul li ul, +.widget_rss_links ul li ul, +.widget-grofile ul.grofile-links li ul, +.widget_pages ul li ul, +.widget_meta ul li ul { + bottom: 0; +} + +.widget_nav_menu ul li li, +.widget_top-posts ul li, +.widget_top-posts ul li li, +.widget_rss_links ul li, +.widget_rss_links ul li li, +.widget-grofile ul.grofile-links li, +.widget-grofile ul.grofile-links li li { + padding-bottom: 0.25em; + padding-top: 0.25em; +} + +.widget_rss ul li { + padding-bottom: 1em; + padding-top: 1em; +} + +/* widget markup */ + +.widget .post-date, +.widget .rss-date { + font-size: 0.81em; +} + +/* Text widget */ + +.widget_text { + word-wrap: break-word; +} + +/* RSS Widget */ + +.widget_rss .widget-title .rsswidget:first-child { + float: right; +} + +.widget_rss .widget-title .rsswidget:first-child:hover { + background-color: transparent; +} + +.widget_rss .widget-title .rsswidget:first-child img { + display: block; +} + +.widget_rss ul li { + padding: 2.125em 0; +} + +.widget_rss ul li:first-child { + border-top: none; + padding-top: 0; +} + +.widget_rss li .rsswidget { + font-size: 22px; + font-size: 1.375rem; + font-weight: 300; + line-height: 1.4; +} + +.widget_rss .rss-date, +.widget_rss li cite { + color: #767676; + display: block; + font-size: 10px; + font-size: 0.625rem; + font-style: normal; + font-weight: 800; + letter-spacing: 0.18em; + line-height: 1.5; + text-transform: uppercase; +} + +.widget_rss .rss-date { + margin: 0.5em 0 1.5em; + padding: 0; +} + +.widget_rss .rssSummary { + margin-bottom: 0.5em; +} + +/* Contact Info Widget */ + +.widget_contact_info .contact-map { + margin-bottom: 0.5em; +} + +/* Gravatar */ + +.widget-grofile h4 { + font-size: 16px; + font-size: 1rem; + margin-bottom: 0; +} + +/* Recent Comments */ + +.widget_recent_comments table, +.widget_recent_comments th, +.widget_recent_comments td { + border: 0; +} + +/* Recent Posts widget */ + +.widget_recent_entries .post-date { + display: block; +} + +/* Search */ + +.search-form { + position: relative; +} + +.search-form .search-submit { + bottom: 3px; + padding: 0.5em 1em; + position: absolute; + right: 3px; + top: 3px; +} + +.search-form .search-submit .icon { + height: 24px; + top: -2px; + width: 24px; +} + +/* Tag cloud widget */ + +.tagcloud, +.widget_tag_cloud, +.wp_widget_tag_cloud { + line-height: 1.5; +} + +.widget .tagcloud a, +.widget.widget_tag_cloud a, +.wp_widget_tag_cloud a { + border: 1px solid #ddd; + -webkit-box-shadow: none; + box-shadow: none; + display: inline-block; + float: left; + font-size: 14px !important; /* !important to overwrite inline styles */ + font-size: 0.875rem !important; + margin: 4px 4px 0 0 !important; + padding: 4px 10px 5px !important; + position: relative; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + width: auto; + word-wrap: break-word; + z-index: 0; +} + +.widget .tagcloud a:hover, +.widget .tagcloud a:focus, +.widget.widget_tag_cloud a:hover, +.widget.widget_tag_cloud a:focus, +.wp_widget_tag_cloud a:hover, +.wp_widget_tag_cloud a:focus { + border-color: #bbb; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: none; +} + +/* Calendar widget */ + +.widget_calendar th, +.widget_calendar td { + text-align: center; +} + +.widget_calendar tfoot td { + border: 0; +} + +/*-------------------------------------------------------------- +16.0 Media +--------------------------------------------------------------*/ + +img, +video { + height: auto; /* Make sure images are scaled correctly. */ + max-width: 100%; /* Adhere to container width. */ +} + +img.alignleft, +img.alignright { + float: none; + margin: 0; +} + +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +/* Make sure embeds and iframes fit their containers. */ + +embed, +iframe, +object { + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption, +.gallery-caption { + color: #666; + font-size: 13px; + font-size: 0.8125rem; + font-style: italic; + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-left: auto; + margin-right: auto; +} + +.wp-caption .wp-caption-text { + margin: 0.8075em 0; +} + +/* Media Elements */ + +.mejs-container { + margin-bottom: 1.5em; +} + +/* Audio Player */ + +.mejs-controls a.mejs-horizontal-volume-slider, +.mejs-controls a.mejs-horizontal-volume-slider:focus, +.mejs-controls a.mejs-horizontal-volume-slider:hover { + background: transparent; + border: 0; +} + +/* Playlist Color Overrides: Light */ + +.site-content .wp-playlist-light { + border-color: #eee; + color: #222; +} + +.site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album { + color: #333; +} + +.site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist { + color: #767676; +} + +.site-content .wp-playlist-light .wp-playlist-item { + border-bottom: 1px dotted #eee; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; +} + +.site-content .wp-playlist-light .wp-playlist-item:hover, +.site-content .wp-playlist-light .wp-playlist-item:focus { + border-bottom-color: rgba(0, 0, 0, 0); + background-color: #767676; + color: #fff; +} + +.site-content .wp-playlist-light a.wp-playlist-caption:hover, +.site-content .wp-playlist-light .wp-playlist-item:hover a, +.site-content .wp-playlist-light .wp-playlist-item:focus a { + color: #fff; +} + +/* Playlist Color Overrides: Dark */ + +.site-content .wp-playlist-dark { + background: #222; + border-color: #333; +} + +.site-content .wp-playlist-dark .mejs-container .mejs-controls { + background-color: #333; +} + +.site-content .wp-playlist-dark .wp-playlist-caption { + color: #fff; +} + +.site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album { + color: #eee; +} + +.site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist { + color: #aaa; +} + +.site-content .wp-playlist-dark .wp-playlist-playing { + background-color: #333; +} + +.site-content .wp-playlist-dark .wp-playlist-item { + border-bottom: 1px dotted #555; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; +} + +.site-content .wp-playlist-dark .wp-playlist-item:hover, +.site-content .wp-playlist-dark .wp-playlist-item:focus { + border-bottom-color: rgba(0, 0, 0, 0); + background-color: #aaa; + color: #222; +} + +.site-content .wp-playlist-dark a.wp-playlist-caption:hover, +.site-content .wp-playlist-dark .wp-playlist-item:hover a, +.site-content .wp-playlist-dark .wp-playlist-item:focus a { + color: #222; +} + +/* Playlist Style Overrides */ + +.site-content .wp-playlist { + padding: 0.625em 0.625em 0.3125em; +} + +.site-content .wp-playlist-current-item .wp-playlist-item-title { + font-weight: 700; +} + +.site-content .wp-playlist-current-item .wp-playlist-item-album { + font-style: normal; +} + +.site-content .wp-playlist-current-item .wp-playlist-item-artist { + font-size: 10px; + font-size: 0.625rem; + font-weight: 800; + letter-spacing: 0.1818em; + text-transform: uppercase; +} + +.site-content .wp-playlist-item { + padding: 0 0.3125em; + cursor: pointer; +} + +.site-content .wp-playlist-item:last-of-type { + border-bottom: none; +} + +.site-content .wp-playlist-item a { + padding: 0.3125em 0; + border-bottom: none; +} + +.site-content .wp-playlist-item a, +.site-content .wp-playlist-item a:focus, +.site-content .wp-playlist-item a:hover { + -webkit-box-shadow: none; + box-shadow: none; + background: transparent; +} + +.site-content .wp-playlist-item-length { + top: 5px; +} + +/* SVG Icons base styles */ + +.icon { + display: inline-block; + fill: currentColor; + height: 1em; + position: relative; /* Align more nicely with capital letters */ + top: -0.0625em; + vertical-align: middle; + width: 1em; +} + +/*-------------------------------------------------------------- +16.1 Galleries +--------------------------------------------------------------*/ + +.gallery-item { + display: inline-block; + text-align: left; + vertical-align: top; + margin: 0 0 1.5em; + padding: 0 1em 0 0; + width: 50%; +} + +.gallery-columns-1 .gallery-item { + width: 100%; +} + +.gallery-columns-2 .gallery-item { + max-width: 50%; +} + +.gallery-item a, +.gallery-item a:hover, +.gallery-item a:focus { + -webkit-box-shadow: none; + box-shadow: none; + background: none; + display: inline-block; + max-width: 100%; +} + +.gallery-item a img { + display: block; + -webkit-transition: -webkit-filter 0.2s ease-in; + transition: -webkit-filter 0.2s ease-in; + transition: filter 0.2s ease-in; + transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.gallery-item a:hover img, +.gallery-item a:focus img { + -webkit-filter: opacity(60%); + filter: opacity(60%); +} + +.gallery-caption { + display: block; + text-align: left; + padding: 0 10px 0 0; + margin-bottom: 0; +} + +/*-------------------------------------------------------------- +17.0 Customizer +--------------------------------------------------------------*/ + +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after { + border: 2px dashed #0085ba; /* Matches visible edit shortcuts. */ + bottom: 1em; + content: ""; + display: block; + left: 1em; + position: absolute; + right: 1em; + top: 1em; + z-index: 1; +} + +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .panel-content { + z-index: 2; /* Prevent :after from preventing interactions within the section */ +} + +/* Used for placeholder text */ +.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title { + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 700; + letter-spacing: 1px; + padding: 3em; + text-transform: uppercase; + text-align: center; +} + +/* Show borders on the custom page panels only when the front page sections are being edited */ +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after { + border: none; +} + +.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder { + border: 0; +} + +/* Add some space around the visual edit shortcut buttons. */ +.twentyseventeen-panel .customize-partial-edit-shortcut button { + top: 30px; + left: 30px; +} + +/* Ensure that placeholder icons are visible. */ +.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before { + visibility: visible; +} + +/*-------------------------------------------------------------- +18.0 SVGs Fallbacks +--------------------------------------------------------------*/ + +.svg-fallback { + display: none; +} + +.no-svg .svg-fallback { + display: inline-block; +} + +.no-svg .dropdown-toggle { + padding: 0.5em 0 0; + right: 0; + text-align: center; + width: 2em; +} + +.no-svg .dropdown-toggle .svg-fallback.icon-angle-down { + font-size: 20px; + font-size: 1.25rem; + font-weight: 400; + line-height: 1; + -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ + -ms-transform: rotate(180deg); /* IE 9 */ + transform: rotate(180deg); +} + +.no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down { + -webkit-transform: rotate(0); /* Chrome, Safari, Opera */ + -ms-transform: rotate(0); /* IE 9 */ + transform: rotate(0); +} + +.no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before { + content: "\005E"; +} + +/* Social Menu fallbacks */ + +.no-svg .social-navigation a { + background: transparent; + color: #222; + height: auto; + width: auto; +} + +/* Show screen reader text in some cases */ + +.no-svg .next.page-numbers .screen-reader-text, +.no-svg .prev.page-numbers .screen-reader-text, +.no-svg .social-navigation li a .screen-reader-text, +.no-svg .search-submit .screen-reader-text { + clip: auto; + font-size: 16px; + font-size: 1rem; + font-weight: 400; + height: auto; + position: relative !important; /* overrides previous !important styles */ + width: auto; +} + +/*-------------------------------------------------------------- +19.0 Media Queries +--------------------------------------------------------------*/ + +/* Adjust positioning of edit shortcuts, override style in customize-preview.css */ +@media screen and (min-width: 20em) { + + body.customize-partial-edit-shortcuts-shown .site-header .site-title { + padding-left: 0; + } +} + +@media screen and (min-width: 30em) { + + /* Typography */ + + body, + button, + input, + select, + textarea { + font-size: 18px; + font-size: 1.125rem; + } + + h1 { + font-size: 30px; + font-size: 1.875rem; + } + + h2, + .page .panel-content .recent-posts .entry-title { + font-size: 26px; + font-size: 1.625rem; + } + + h3 { + font-size: 22px; + font-size: 1.375rem; + } + + h4 { + font-size: 18px; + font-size: 1.125rem; + } + + h5 { + font-size: 13px; + font-size: 0.8125rem; + } + + h6 { + font-size: 16px; + font-size: 1rem; + } + + .entry-content blockquote.alignleft, + .entry-content blockquote.alignright { + font-size: 14px; + font-size: 0.875rem; + } + + /* Fix image alignment */ + img.alignleft { + float: left; + margin-right: 1.5em; + } + + img.alignright { + float: right; + margin-left: 1.5em; + } + + /* Site Branding */ + + .site-branding { + padding: 3em 0; + } + + /* Front Page */ + + .panel-content .wrap { + padding-bottom: 2em; + padding-top: 3.5em; + } + + .page-one-column .panel-content .wrap { + max-width: 740px; + } + + .panel-content .entry-header { + margin-bottom: 4.5em; + } + + .panel-content .recent-posts .entry-header { + margin-bottom: 0; + } + + /* Blog Index, Archive, Search */ + + .taxonomy-description { + font-size: 14px; + font-size: 0.875rem; + } + + .page-numbers.current { + font-size: 16px; + font-size: 1rem; + } + + /* Site Footer */ + + .site-footer { + font-size: 16px; + font-size: 1rem; + } + + /* Gallery Columns */ + + .gallery-item { + max-width: 25%; + } + + .gallery-columns-1 .gallery-item { + max-width: 100%; + } + + .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%; + } +} + +@media screen and (min-width: 48em) { + + /* Typography */ + + body, + button, + input, + select, + textarea { + font-size: 16px; + font-size: 1rem; + line-height: 1.5; + } + + .entry-content blockquote.alignleft, + .entry-content blockquote.alignright { + font-size: 13px; + font-size: 0.8125rem; + } + + /* Layout */ + + .wrap { + max-width: 1000px; + padding-left: 3em; + padding-right: 3em; + } + + .has-sidebar:not(.error404) #primary { + float: left; + width: 58%; + } + + .has-sidebar #secondary { + float: right; + padding-top: 0; + width: 36%; + } + + .error404 #primary { + float: none; + } + + /* Site Branding */ + + .site-branding { + margin-bottom: 0; + } + + .has-header-image.twentyseventeen-front-page .site-branding, + .has-header-video.twentyseventeen-front-page .site-branding, + .has-header-image.home.blog .site-branding, + .has-header-video.home.blog .site-branding { + bottom: 0; + display: block; + left: 0; + height: auto; + padding-top: 0; + position: absolute; + width: 100%; + } + + .has-header-image.twentyseventeen-front-page .custom-header, + .has-header-video.twentyseventeen-front-page .custom-header, + .has-header-image.home.blog .custom-header, + .has-header-video.home.blog .custom-header { + display: block; + height: auto; + } + + .custom-header-media { + height: 165px; + position: relative; + } + + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-video .custom-header-media { + height: 0; + position: relative; + } + + .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, + .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media { + bottom: 0; + height: auto; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + .custom-logo-link { + padding-right: 2em; + } + + .custom-logo-link img, + body.home.title-tagline-hidden.has-header-image .custom-logo-link img, + body.home.title-tagline-hidden.has-header-video .custom-logo-link img { + max-width: 350px; + } + + .title-tagline-hidden.home.has-header-image .custom-logo-link img, + .title-tagline-hidden.home.has-header-video .custom-logo-link img { + max-height: 200px; + } + + .site-title { + font-size: 36px; + font-size: 2.25rem; + } + + .site-description { + font-size: 16px; + font-size: 1rem; + } + + /* Navigation */ + + .navigation-top { + bottom: 0; + font-size: 14px; + font-size: 0.875rem; + left: 0; + position: absolute; + right: 0; + width: 100%; + z-index: 3; + } + + .navigation-top .wrap { + max-width: 1000px; + /* The font size is 14px here and we need 50px padding in ems */ + padding: 0.75em 3.4166666666667em; + } + + .navigation-top nav { + margin-left: -1.25em; + } + + .site-navigation-fixed.navigation-top { + bottom: auto; + position: fixed; + left: 0; + right: 0; + top: 0; + width: 100%; + z-index: 7; + } + + .admin-bar .site-navigation-fixed.navigation-top { + top: 32px; + } + + /* Main Navigation */ + + .js .menu-toggle, + .js .dropdown-toggle { + display: none; + } + + .main-navigation { + width: auto; + } + + .js .main-navigation ul, + .js .main-navigation ul ul, + .js .main-navigation > div > ul { + display: block; + } + + .main-navigation ul { + background: transparent; + padding: 0; + } + + .main-navigation > div > ul { + border: 0; + margin-bottom: 0; + padding: 0; + } + + .main-navigation li { + border: 0; + display: inline-block; + } + + .main-navigation li li { + display: block; + } + + .main-navigation a { + padding: 1em 1.25em; + } + + .main-navigation ul ul { + background: #fff; + border: 1px solid #bbb; + left: -999em; + padding: 0; + position: absolute; + top: 100%; + z-index: 99999; + } + + .main-navigation ul li.menu-item-has-children:before, + .main-navigation ul li.menu-item-has-children:after, + .main-navigation ul li.page_item_has_children:before, + .main-navigation ul li.page_item_has_children:after { + border-style: solid; + border-width: 0 6px 6px; + content: ""; + display: none; + height: 0; + position: absolute; + right: 1em; + bottom: -1px; + width: 0; + z-index: 100000; + } + + .main-navigation ul li.menu-item-has-children.focus:before, + .main-navigation ul li.menu-item-has-children:hover:before, + .main-navigation ul li.menu-item-has-children.focus:after, + .main-navigation ul li.menu-item-has-children:hover:after, + .main-navigation ul li.page_item_has_children.focus:before, + .main-navigation ul li.page_item_has_children:hover:before, + .main-navigation ul li.page_item_has_children.focus:after, + .main-navigation ul li.page_item_has_children:hover:after { + display: block; + } + + .main-navigation ul li.menu-item-has-children:before, + .main-navigation ul li.page_item_has_children:before { + border-color: transparent transparent #bbb; + bottom: 0; + } + + .main-navigation ul li.menu-item-has-children:after, + .main-navigation ul li.page_item_has_children:after { + border-color: transparent transparent #fff; + } + + .main-navigation ul ul li:hover > ul, + .main-navigation ul ul li.focus > ul { + left: 100%; + right: auto; + } + + .main-navigation ul ul a { + padding: 0.75em 1.25em; + width: 16em; + } + + .main-navigation li li { + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + } + + .main-navigation li li:hover, + .main-navigation li li.focus { + background: #767676; + } + + .main-navigation li li a { + -webkit-transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; + } + + .main-navigation li li.focus > a, + .main-navigation li li:focus > a, + .main-navigation li li:hover > a, + .main-navigation li li a:hover, + .main-navigation li li a:focus, + .main-navigation li li.current_page_item a:hover, + .main-navigation li li.current-menu-item a:hover, + .main-navigation li li.current_page_item a:focus, + .main-navigation li li.current-menu-item a:focus { + color: #fff; + } + + .main-navigation ul li:hover > ul, + .main-navigation ul li.focus > ul { + left: 0.5em; + right: auto; + } + + .main-navigation .menu-item-has-children > a > .icon, + .main-navigation .page_item_has_children > a > .icon { + display: inline; + left: 5px; + position: relative; + top: -1px; + } + + .main-navigation ul ul .menu-item-has-children > a > .icon, + .main-navigation ul ul .page_item_has_children > a > .icon { + margin-top: -9px; + left: auto; + position: absolute; + right: 1em; + top: 50%; + -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ + -ms-transform: rotate(-90deg); /* IE 9 */ + transform: rotate(-90deg); + } + + .main-navigation ul ul ul { + left: -999em; + margin-top: -1px; + top: 0; + } + + .main-navigation ul ul li.menu-item-has-children.focus:before, + .main-navigation ul ul li.menu-item-has-children:hover:before, + .main-navigation ul ul li.menu-item-has-children.focus:after, + .main-navigation ul ul li.menu-item-has-children:hover:after, + .main-navigation ul ul li.page_item_has_children.focus:before, + .main-navigation ul ul li.page_item_has_children:hover:before, + .main-navigation ul ul li.page_item_has_children.focus:after, + .main-navigation ul ul li.page_item_has_children:hover:after { + display: none; + } + + .site-header .site-navigation-fixed .menu-scroll-down { + display: none; + } + + /* Scroll down arrow */ + + .site-header .menu-scroll-down { + display: block; + padding: 1em; + position: absolute; + right: 0; + } + + .site-header .menu-scroll-down .icon { + -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ + -ms-transform: rotate(90deg); /* IE 9 */ + transform: rotate(90deg); + } + + .site-header .menu-scroll-down { + color: #fff; + top: 2em; + } + + .site-header .navigation-top .menu-scroll-down { + color: #767676; + top: 0.7em; + } + + .menu-scroll-down:focus { + outline: thin dotted; + } + + .menu-scroll-down .icon { + height: 18px; + width: 18px; + } + + /* Front Page */ + + .twentyseventeen-front-page.has-header-image .site-branding, + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { + margin-bottom: 70px; + } + + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-video .custom-header-media { + height: 1200px; + height: 100vh; + max-height: 100%; + overflow: hidden; + } + + .twentyseventeen-front-page.has-header-image .custom-header-media:before, + .twentyseventeen-front-page.has-header-video .custom-header-media:before, + .home.blog.has-header-image .custom-header-media:before, + .home.blog.has-header-video .custom-header-media:before { + height: 33%; + } + + .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, + .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, + .admin-bar.home.blog.has-header-image .custom-header-media, + .admin-bar.home.blog.has-header-video .custom-header-media { + height: calc(100vh - 32px); + } + + .panel-content .wrap { + padding-bottom: 4.5em; + padding-top: 6em; + } + + .panel-image { + height: 100vh; + max-height: 1200px; + } + + /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */ + .background-fixed .panel-image { + background-attachment: fixed; + } + + .page-two-column .panel-content .entry-header { + float: left; + width: 36%; + } + + .page-two-column .panel-content .entry-content { + float: right; + width: 58%; + } + + /* Front Page - Recent Posts */ + + .page-two-column .panel-content .recent-posts { + clear: right; + float: right; + width: 58%; + } + + .panel-content .recent-posts article { + margin-bottom: 4em; + } + + .panel-content .recent-posts .entry-header, + .page-two-column #primary .panel-content .recent-posts .entry-header, + .panel-content .recent-posts .entry-content, + .page-two-column #primary .panel-content .recent-posts .entry-content { + float: none; + width: 100%; + } + + .panel-content .recent-posts .entry-header { + margin-bottom: 1.5em; + } + + .page .panel-content .recent-posts .entry-title { + font-size: 26px; + font-size: 1.625rem; + } + + /* Posts */ + + .site-content { + padding: 5.5em 0 0; + } + + .single-post .entry-title, + .page .entry-title { + font-size: 26px; + font-size: 1.625rem; + } + + .comments-pagination, + .post-navigation { + clear: both; + } + + .post-navigation .nav-previous { + float: left; + width: 50%; + } + + .post-navigation .nav-next { + float: right; + text-align: right; + width: 50%; + } + + .nav-next, + .post-navigation .nav-next { + margin-top: 0; + } + + /* Blog, archive, search */ + + .sticky .icon-thumb-tack { + height: 23px; + left: -2.5em; + top: 1.5em; + width: 32px; + } + + body:not(.has-sidebar):not(.page-one-column) .page-header, + body.has-sidebar.error404 #primary .page-header, + body.page-two-column:not(.archive) #primary .entry-header, + body.page-two-column.archive:not(.has-sidebar) #primary .page-header { + float: left; + width: 36%; + } + + .blog:not(.has-sidebar) #primary article, + .archive:not(.page-one-column):not(.has-sidebar) #primary article, + .search:not(.has-sidebar) #primary article, + .error404:not(.has-sidebar) #primary .page-content, + .error404.has-sidebar #primary .page-content, + body.page-two-column:not(.archive) #primary .entry-content, + body.page-two-column #comments { + float: right; + width: 58%; + } + + .blog .site-main > article, + .archive .site-main > article, + .search .site-main > article { + padding-bottom: 4em; + } + + .navigation.pagination { + clear: both; + float: right; + width: 58%; + } + + .has-sidebar .navigation.pagination, + .archive.page-one-column:not(.has-sidebar) .navigation.pagination { + float: none; + width: 100%; + } + + .entry-footer { + display: table; + width: 100%; + } + + .entry-footer .cat-tags-links { + display: table-cell; + vertical-align: middle; + width: 100%; + } + + .entry-footer .edit-link { + display: table-cell; + text-align: right; + vertical-align: middle; + } + + .entry-footer .edit-link a.post-edit-link { + margin-top: 0; + margin-left: 1em; + } + + /* Entry content */ + + /* without sidebar */ + + :not(.has-sidebar) .entry-content blockquote.alignleft { + margin-left: -17.5%; + width: 48%; + } + + :not(.has-sidebar) .entry-content blockquote.alignright { + margin-right: -17.5%; + width: 48%; + } + + /* with sidebar */ + + .has-sidebar .entry-content blockquote.alignleft { + margin-left: 0; + width: 34%; + } + + .has-sidebar .entry-content blockquote.alignright { + margin-right: 0; + width: 34%; + } + + .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta { + margin-right: -72.5%; + width: 62%; + } + + /* blog and archive */ + + .blog:not(.has-sidebar) .entry-content blockquote.alignleft, + .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft, + .archive:not(.has-sidebar) .entry-content blockquote.alignleft, + .page-two-column .entry-content blockquote.alignleft { + margin-left: -72.5%; + width: 62%; + } + + .blog:not(.has-sidebar) .entry-content blockquote.alignright, + .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright, + .archive:not(.has-sidebar) .entry-content blockquote.alignright, + .page-two-column .entry-content blockquote.alignright { + margin-right: 0; + width: 36%; + } + + /* Post formats */ + + .format-quote blockquote .icon { + left: -1.5em; + } + + /* Pages */ + + .page.page-one-column .entry-header, + .twentyseventeen-front-page.page-one-column .entry-header, + .archive.page-one-column:not(.has-sidebar) .page-header { + margin-bottom: 4em; + } + + .page:not(.home) #content { + padding-bottom: 3.25em; + } + + /* 404 page */ + + .error404 .page-content { + padding-bottom: 9em; + } + + /* Comments */ + + #comments { + padding-top: 5em; + } + + .comments-title { + margin-bottom: 2.5em; + } + + ol.children .children { + padding-left: 2em; + } + + /* Posts pagination */ + + .nav-links .nav-title { + position: relative; + } + + .nav-title-icon-wrapper { + position: absolute; + text-align: center; + width: 2em; + } + + .nav-links .nav-previous .nav-title .nav-title-icon-wrapper { + left: -2em; + } + + .nav-links .nav-next .nav-title .nav-title-icon-wrapper { + right: -2em; + } + + /* Secondary */ + + #secondary { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.6; + } + + /* Widgets */ + + h2.widget-title { + font-size: 11px; + font-size: 0.6875rem; + margin-bottom: 2em; + } + + /* Footer */ + + .site-footer { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.6; + margin-top: 3em; + } + + .site-footer .widget-column.footer-widget-1 { + float: left; + width: 36%; + } + + .site-footer .widget-column.footer-widget-2 { + float: right; + width: 58%; + } + + .social-navigation { + clear: left; + float: left; + margin-bottom: 0; + width: 36%; + } + + .site-info { + float: left; + padding: 0.7em 0 0; + width: 58%; + } + + .social-navigation + .site-info { + margin-left: 6%; + } + + .site-info .sep { + margin: 0 0.5em; + display: inline; + visibility: visible; + height: auto; + width: auto; + } + + /* Gallery Columns */ + + .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%; + } +} + +@media screen and ( min-width: 67em ) { + + /* Layout */ + + /* Navigation */ + .navigation-top .wrap { + padding: 0.75em 2em; + } + + .navigation-top nav { + margin-left: 0; + } + + /* Sticky posts */ + + .sticky .icon-thumb-tack { + font-size: 32px; + font-size: 2rem; + height: 22px; + left: -1.25em; + top: 0.75em; + width: 32px; + } + + /* Pagination */ + + .page-numbers { + display: inline-block; + } + + .page-numbers.current { + font-size: 15px; + font-size: 0.9375rem; + } + + .page-numbers.current .screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + } + + /* Comments */ + + .comment-body { + margin-left: 0; + } +} + +@media screen and ( min-width: 79em ) { + + .has-sidebar .entry-content blockquote.alignleft { + margin-left: -20%; + } + + .blog:not(.has-sidebar) .entry-content blockquote.alignright, + .archive:not(.has-sidebar) .entry-content blockquote.alignright, + .page-two-column .entry-content blockquote.alignright, + .twentyseventeen-front-page .entry-content blockquote.alignright { + margin-right: -20%; + } +} + +@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) { + + .admin-bar .site-navigation-fixed.navigation-top, + .admin-bar .site-navigation-hidden.navigation-top { + top: 46px; + } +} + +/*-------------------------------------------------------------- +20.0 Print +--------------------------------------------------------------*/ + +@media print { + + /* Hide elements */ + + form, + button, + input, + select, + textarea, + .navigation-top, + .social-navigation, + #secondary, + .content-bottom-widgets, + .header-image, + .panel-image-prop, + .icon-thumb-tack, + .page-links, + .edit-link, + .post-navigation, + .pagination.navigation, + .comments-pagination, + .comment-respond, + .comment-edit-link, + .comment-reply-link, + .comment-metadata .edit-link, + .pingback .edit-link, + .site-footer aside.widget-area, + .site-info { + display: none !important; + } + + .entry-footer, + #comments, + .site-footer, + .single-featured-image-header { + border: 0; + } + + /* Font sizes */ + + body { + font-size: 12pt; + } + + h1 { + font-size: 24pt; + } + + h2 { + font-size: 22pt; + } + + h3 { + font-size: 17pt; + } + + h4 { + font-size: 12pt; + } + + h5 { + font-size: 11pt; + } + + h6 { + font-size: 12pt; + } + + .page .panel-content .entry-title, + .page-title, + body.page:not(.twentyseventeen-front-page) .entry-title { + font-size: 10pt; + } + + /* Layout */ + + .wrap { + padding-left: 5% !important; + padding-right: 5% !important; + max-width: none; + } + + /* Site Branding */ + + .site-header { + background: transparent; + padding: 0; + } + + .custom-header-media { + padding: 0; + } + + .twentyseventeen-front-page.has-header-image .site-branding, + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { + position: relative; + } + + .site-branding { + margin-top: 0; + margin-bottom: 1.75em !important; /* override styles added by JavaScript */ + } + + .site-title { + font-size: 25pt; + } + + .site-description { + font-size: 12pt; + opacity: 1; + } + + /* Posts */ + + .single-featured-image-header { + background: transparent; + } + + .entry-meta { + font-size: 9pt; + } + + /* Colors */ + + body, + .site { + background: none !important; /* Brute force since user agents all print differently. */ + } + + body, + a, + .site-title a, + .twentyseventeen-front-page.has-header-image .site-title, + .twentyseventeen-front-page.has-header-video .site-title, + .twentyseventeen-front-page.has-header-image .site-title a, + .twentyseventeen-front-page.has-header-video .site-title a { + color: #222 !important; /* Make sure color schemes don't affect to print */ + } + + h2, + h5, + blockquote, + .site-description, + .twentyseventeen-front-page.has-header-image .site-description, + .twentyseventeen-front-page.has-header-video .site-description, + .entry-meta, + .entry-meta a { + color: #777 !important; /* Make sure color schemes don't affect to print */ + } + + .entry-content blockquote.alignleft, + .entry-content blockquote.alignright { + font-size: 11pt; + width: 34%; + } + + .site-footer { + padding: 0; + } +}