2 Theme Name: Twenty Seventeen
3 Theme URI: https://wordpress.org/themes/twentyseventeen/
4 Author: the WordPress team
5 Author URI: https://wordpress.org/
6 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.
8 License: GNU General Public License v2 or later
9 License URI: http://www.gnu.org/licenses/gpl-2.0.html
10 Text Domain: twentyseventeen
11 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
13 This theme, like WordPress, is licensed under the GPL.
14 Use it to make something cool, have fun, and share what you've learned with others.
17 /*--------------------------------------------------------------
18 >>> TABLE OF CONTENTS:
19 ----------------------------------------------------------------
30 11.0 Featured Image Hover
47 --------------------------------------------------------------*/
49 /*--------------------------------------------------------------
51 Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
52 --------------------------------------------------------------*/
55 font-family: sans-serif;
57 -ms-text-size-adjust: 100%;
58 -webkit-text-size-adjust: 100%;
90 -webkit-box-sizing: content-box;
91 -moz-box-sizing: content-box;
92 box-sizing: content-box;
98 font-family: monospace, monospace;
103 background-color: transparent;
104 -webkit-text-decoration-skip: objects;
113 border-bottom: 1px #767676 dotted;
114 text-decoration: none;
119 font-weight: inherit;
130 font-family: monospace, monospace;
139 background-color: #eee;
152 vertical-align: baseline;
165 display: inline-block;
168 audio:not([controls]) {
186 font-family: sans-serif;
199 text-transform: none;
203 html [type="button"],
206 -webkit-appearance: button;
209 button::-moz-focus-inner,
210 [type="button"]::-moz-focus-inner,
211 [type="reset"]::-moz-focus-inner,
212 [type="submit"]::-moz-focus-inner {
217 button:-moz-focusring,
218 [type="button"]:-moz-focusring,
219 [type="reset"]:-moz-focusring,
220 [type="submit"]:-moz-focusring {
221 outline: 1px dotted ButtonText;
225 border: 1px solid #bbb;
227 padding: 0.35em 0.625em 0.75em;
231 -webkit-box-sizing: border-box;
232 -moz-box-sizing: border-box;
233 box-sizing: border-box;
242 display: inline-block;
243 vertical-align: baseline;
252 -webkit-box-sizing: border-box;
253 -moz-box-sizing: border-box;
254 box-sizing: border-box;
258 [type="number"]::-webkit-inner-spin-button,
259 [type="number"]::-webkit-outer-spin-button {
264 -webkit-appearance: textfield;
265 outline-offset: -2px;
268 [type="search"]::-webkit-search-cancel-button,
269 [type="search"]::-webkit-search-decoration {
270 -webkit-appearance: none;
273 ::-webkit-file-upload-button {
274 -webkit-appearance: button;
288 display: inline-block;
299 /*--------------------------------------------------------------
301 --------------------------------------------------------------*/
303 /* Text meant only for screen readers. */
305 .screen-reader-text {
306 clip: rect(1px, 1px, 1px, 1px);
309 position: absolute !important;
311 word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
314 .screen-reader-text:focus {
315 background-color: #f1f1f1;
316 -webkit-border-radius: 3px;
318 -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
319 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
320 clip: auto !important;
329 padding: 15px 23px 14px;
330 text-decoration: none;
333 z-index: 100000; /* Above WP toolbar. */
336 /*--------------------------------------------------------------
338 --------------------------------------------------------------*/
359 /*--------------------------------------------------------------
361 --------------------------------------------------------------*/
365 .entry-content:before,
366 .entry-content:after,
367 .entry-footer:before,
369 .comment-content:before,
370 .comment-content:after,
373 .site-content:before,
381 .comment-author:before,
382 .comment-author:after,
387 .comment-meta:before,
388 .comment-meta:after {
395 .entry-content:after,
397 .comment-content:after,
403 .comment-author:after,
406 .comment-meta:after {
410 /*--------------------------------------------------------------
412 --------------------------------------------------------------*/
420 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
422 font-size: 0.9375rem;
478 font-size: 0.8125rem;
480 letter-spacing: 0.15em;
481 text-transform: uppercase;
487 font-size: 0.9375rem;
527 font-family: "Courier 10 Pitch", Courier, monospace;
529 font-size: 0.9375rem;
531 margin-bottom: 1.6em;
541 font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
543 font-size: 0.9375rem;
548 border-bottom: 1px dotted #666;
555 text-decoration: none;
567 quotes: "“" "”" "‘" "’";
579 /* Typography for Arabic Font */
581 html[lang="ar"] body,
582 html[lang="ar"] button,
583 html[lang="ar"] input,
584 html[lang="ar"] select,
585 html[lang="ar"] textarea,
586 html[lang="ary"] body,
587 html[lang="ary"] button,
588 html[lang="ary"] input,
589 html[lang="ary"] select,
590 html[lang="ary"] textarea,
591 html[lang="azb"] body,
592 html[lang="azb"] button,
593 html[lang="azb"] input,
594 html[lang="azb"] select,
595 html[lang="azb"] textarea,
596 html[lang="fa-IR"] body,
597 html[lang="fa-IR"] button,
598 html[lang="fa-IR"] input,
599 html[lang="fa-IR"] select,
600 html[lang="fa-IR"] textarea,
601 html[lang="haz"] body,
602 html[lang="haz"] button,
603 html[lang="haz"] input,
604 html[lang="haz"] select,
605 html[lang="haz"] textarea,
606 html[lang="ps"] body,
607 html[lang="ps"] button,
608 html[lang="ps"] input,
609 html[lang="ps"] select,
610 html[lang="ps"] textarea,
611 html[lang="ur"] body,
612 html[lang="ur"] button,
613 html[lang="ur"] input,
614 html[lang="ur"] select,
615 html[lang="ur"] textarea {
616 font-family: Tahoma, Arial, sans-serif;
637 html[lang="fa-IR"] h1,
638 html[lang="fa-IR"] h2,
639 html[lang="fa-IR"] h3,
640 html[lang="fa-IR"] h4,
641 html[lang="fa-IR"] h5,
642 html[lang="fa-IR"] h6,
664 /* Typography for Chinese Font */
666 html[lang^="zh-"] body,
667 html[lang^="zh-"] button,
668 html[lang^="zh-"] input,
669 html[lang^="zh-"] select,
670 html[lang^="zh-"] textarea {
671 font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif;
674 html[lang^="zh-"] h1,
675 html[lang^="zh-"] h2,
676 html[lang^="zh-"] h3,
677 html[lang^="zh-"] h4,
678 html[lang^="zh-"] h5,
679 html[lang^="zh-"] h6 {
683 /* Typography for Cyrillic Font */
685 html[lang="bg-BG"] body,
686 html[lang="bg-BG"] button,
687 html[lang="bg-BG"] input,
688 html[lang="bg-BG"] select,
689 html[lang="bg-BG"] textarea,
690 html[lang="ru-RU"] body,
691 html[lang="ru-RU"] button,
692 html[lang="ru-RU"] input,
693 html[lang="ru-RU"] select,
694 html[lang="ru-RU"] textarea,
695 html[lang="uk"] body,
696 html[lang="uk"] button,
697 html[lang="uk"] input,
698 html[lang="uk"] select,
699 html[lang="uk"] textarea {
700 font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
703 html[lang="bg-BG"] h1,
704 html[lang="bg-BG"] h2,
705 html[lang="bg-BG"] h3,
706 html[lang="bg-BG"] h4,
707 html[lang="bg-BG"] h5,
708 html[lang="bg-BG"] h6,
709 html[lang="ru-RU"] h1,
710 html[lang="ru-RU"] h2,
711 html[lang="ru-RU"] h3,
712 html[lang="ru-RU"] h4,
713 html[lang="ru-RU"] h5,
714 html[lang="ru-RU"] h6,
725 /* Typography for Devanagari Font */
727 html[lang="bn-BD"] body,
728 html[lang="bn-BD"] button,
729 html[lang="bn-BD"] input,
730 html[lang="bn-BD"] select,
731 html[lang="bn-BD"] textarea,
732 html[lang="hi-IN"] body,
733 html[lang="hi-IN"] button,
734 html[lang="hi-IN"] input,
735 html[lang="hi-IN"] select,
736 html[lang="hi-IN"] textarea,
737 html[lang="mr-IN"] body,
738 html[lang="mr-IN"] button,
739 html[lang="mr-IN"] input,
740 html[lang="mr-IN"] select,
741 html[lang="mr-IN"] textarea {
742 font-family: Arial, sans-serif;
745 html[lang="bn-BD"] h1,
746 html[lang="bn-BD"] h2,
747 html[lang="bn-BD"] h3,
748 html[lang="bn-BD"] h4,
749 html[lang="bn-BD"] h5,
750 html[lang="bn-BD"] h6,
751 html[lang="hi-IN"] h1,
752 html[lang="hi-IN"] h2,
753 html[lang="hi-IN"] h3,
754 html[lang="hi-IN"] h4,
755 html[lang="hi-IN"] h5,
756 html[lang="hi-IN"] h6,
757 html[lang="mr-IN"] h1,
758 html[lang="mr-IN"] h2,
759 html[lang="mr-IN"] h3,
760 html[lang="mr-IN"] h4,
761 html[lang="mr-IN"] h5,
762 html[lang="mr-IN"] h6 {
766 /* Typography for Greek Font */
768 html[lang="el"] body,
769 html[lang="el"] button,
770 html[lang="el"] input,
771 html[lang="el"] select,
772 html[lang="el"] textarea {
773 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
786 /* Typography for Gujarati Font */
788 html[lang="gu-IN"] body,
789 html[lang="gu-IN"] button,
790 html[lang="gu-IN"] input,
791 html[lang="gu-IN"] select,
792 html[lang="gu-IN"] textarea {
793 font-family: Arial, sans-serif;
796 html[lang="gu-IN"] h1,
797 html[lang="gu-IN"] h2,
798 html[lang="gu-IN"] h3,
799 html[lang="gu-IN"] h4,
800 html[lang="gu-IN"] h5,
801 html[lang="gu-IN"] h6 {
805 /* Typography for Hebrew Font */
807 html[lang="he-IL"] body,
808 html[lang="he-IL"] button,
809 html[lang="he-IL"] input,
810 html[lang="he-IL"] select,
811 html[lang="he-IL"] textarea {
812 font-family: "Arial Hebrew", Arial, sans-serif;
815 html[lang="he-IL"] h1,
816 html[lang="he-IL"] h2,
817 html[lang="he-IL"] h3,
818 html[lang="he-IL"] h4,
819 html[lang="he-IL"] h5,
820 html[lang="he-IL"] h6 {
824 /* Typography for Japanese Font */
826 html[lang="ja"] body,
827 html[lang="ja"] button,
828 html[lang="ja"] input,
829 html[lang="ja"] select,
830 html[lang="ja"] textarea {
831 font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
843 /* Typography for Korean font */
845 html[lang="ko-KR"] body,
846 html[lang="ko-KR"] button,
847 html[lang="ko-KR"] input,
848 html[lang="ko-KR"] select,
849 html[lang="ko-KR"] textarea {
850 font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
853 html[lang="ko-KR"] h1,
854 html[lang="ko-KR"] h2,
855 html[lang="ko-KR"] h3,
856 html[lang="ko-KR"] h4,
857 html[lang="ko-KR"] h5,
858 html[lang="ko-KR"] h6 {
862 /* Typography for Thai Font */
871 font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
874 html[lang="th"] body,
875 html[lang="th"] button,
876 html[lang="th"] input,
877 html[lang="th"] select,
878 html[lang="th"] textarea {
880 font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
883 /* Remove letter-spacing for all non-latin alphabets */
891 html[lang="bg-BG"] *,
892 html[lang="ru-RU"] *,
894 html[lang="bn-BD"] *,
895 html[lang="hi-IN"] *,
896 html[lang="mr-IN"] *,
898 html[lang="gu-IN"] *,
899 html[lang="he-IL"] *,
901 html[lang="ko-KR"] *,
903 letter-spacing: 0 !important;
906 /*--------------------------------------------------------------
908 --------------------------------------------------------------*/
914 margin-bottom: 0.5em;
924 input[type="password"],
925 input[type="search"],
926 input[type="number"],
933 input[type="datetime"],
934 input[type="datetime-local"],
939 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
940 border: 1px solid #bbb;
941 -webkit-border-radius: 3px;
948 input[type="text"]:focus,
949 input[type="email"]:focus,
950 input[type="url"]:focus,
951 input[type="password"]:focus,
952 input[type="search"]:focus,
953 input[type="number"]:focus,
954 input[type="tel"]:focus,
955 input[type="range"]:focus,
956 input[type="date"]:focus,
957 input[type="month"]:focus,
958 input[type="week"]:focus,
959 input[type="time"]:focus,
960 input[type="datetime"]:focus,
961 input[type="datetime-local"]:focus,
962 input[type="color"]:focus,
969 border: 1px solid #bbb;
970 -webkit-border-radius: 3px;
977 input[type="checkbox"] {
981 input[type="radio"] + label,
982 input[type="checkbox"] + label {
987 input[type="button"],
988 input[type="submit"] {
989 background-color: #222;
991 -webkit-border-radius: 2px;
993 -webkit-box-shadow: none;
997 display: inline-block;
1004 -webkit-transition: background 0.2s;
1005 transition: background 0.2s;
1009 input + input[type="button"],
1010 input + input[type="submit"] {
1011 padding: 0.75em 2em;
1015 input[type="reset"],
1016 input[type="button"].secondary,
1017 input[type="reset"].secondary,
1018 input[type="submit"].secondary {
1019 background-color: #ddd;
1025 input[type="button"]:hover,
1026 input[type="button"]:focus,
1027 input[type="submit"]:hover,
1028 input[type="submit"]:focus {
1029 background: #767676;
1032 button.secondary:hover,
1033 button.secondary:focus,
1034 input[type="reset"]:hover,
1035 input[type="reset"]:focus,
1036 input[type="button"].secondary:hover,
1037 input[type="button"].secondary:focus,
1038 input[type="reset"].secondary:hover,
1039 input[type="reset"].secondary:focus,
1040 input[type="submit"].secondary:hover,
1041 input[type="submit"].secondary:focus {
1045 /* Placeholder text color -- selectors need to be separate to work. */
1046 ::-webkit-input-placeholder {
1048 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1053 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1056 ::-moz-placeholder {
1058 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1060 /* Since FF19 lowers the opacity of the placeholder by default */
1063 :-ms-input-placeholder {
1065 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1068 /*--------------------------------------------------------------
1070 --------------------------------------------------------------*/
1073 background-color: #bbb;
1076 margin-bottom: 1.5em;
1079 /*--------------------------------------------------------------
1081 --------------------------------------------------------------*/
1094 list-style: decimal;
1108 margin: 0 1.5em 1.5em;
1111 /*--------------------------------------------------------------
1113 --------------------------------------------------------------*/
1116 border-collapse: collapse;
1122 border-bottom: 2px solid #bbb;
1123 padding-bottom: 0.5em;
1132 border-bottom: 1px solid #eee;
1149 /*--------------------------------------------------------------
1151 --------------------------------------------------------------*/
1155 text-decoration: none;
1159 outline: thin dotted;
1173 .site-footer .widget-area a,
1174 .posts-navigation a,
1175 .widget_authors a strong {
1176 -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
1177 box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
1178 -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1179 transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1180 transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
1181 transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
1187 .page-links a .page-number,
1189 .entry-footer .cat-links a,
1190 .entry-footer .tags-links a,
1194 .comment-navigation a,
1195 .comment-metadata a,
1196 .comment-metadata a.comment-edit-link,
1197 .comment-reply-link,
1200 .comments-pagination a,
1202 .widget .widget-title a,
1204 .site-footer .widget-area ul li a,
1205 .site-footer .widget-area ul li a {
1206 -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
1207 box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
1208 text-decoration: none;
1209 -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1210 transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1211 transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
1212 transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
1215 .entry-content a:focus,
1216 .entry-content a:hover,
1217 .entry-summary a:focus,
1218 .entry-summary a:hover,
1221 .site-footer .widget-area a:focus,
1222 .site-footer .widget-area a:hover,
1223 .posts-navigation a:focus,
1224 .posts-navigation a:hover,
1225 .comment-metadata a:focus,
1226 .comment-metadata a:hover,
1227 .comment-metadata a.comment-edit-link:focus,
1228 .comment-metadata a.comment-edit-link:hover,
1229 .comment-reply-link:focus,
1230 .comment-reply-link:hover,
1231 .widget_authors a:focus strong,
1232 .widget_authors a:hover strong,
1233 .entry-title a:focus,
1234 .entry-title a:hover,
1235 .entry-meta a:focus,
1236 .entry-meta a:hover,
1237 .page-links a:focus .page-number,
1238 .page-links a:hover .page-number,
1239 .entry-footer a:focus,
1240 .entry-footer a:hover,
1241 .entry-footer .cat-links a:focus,
1242 .entry-footer .cat-links a:hover,
1243 .entry-footer .tags-links a:focus,
1244 .entry-footer .tags-links a:hover,
1245 .post-navigation a:focus,
1246 .post-navigation a:hover,
1247 .pagination a:not(.prev):not(.next):focus,
1248 .pagination a:not(.prev):not(.next):hover,
1249 .comments-pagination a:not(.prev):not(.next):focus,
1250 .comments-pagination a:not(.prev):not(.next):hover,
1251 .logged-in-as a:focus,
1252 .logged-in-as a:hover,
1259 .widget .widget-title a:focus,
1260 .widget .widget-title a:hover,
1261 .widget ul li a:focus,
1262 .widget ul li a:hover {
1264 -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
1265 box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
1268 /* Fixes linked images */
1269 .entry-content a img,
1271 -webkit-box-shadow: 0 0 0 8px #fff;
1272 box-shadow: 0 0 0 8px #fff;
1275 .post-navigation a:focus .icon,
1276 .post-navigation a:hover .icon {
1280 /*--------------------------------------------------------------
1281 11.0 Featured Image Hover
1282 --------------------------------------------------------------*/
1288 .post-thumbnail a img {
1289 -webkit-backface-visibility: hidden;
1290 -webkit-transition: opacity 0.2s;
1291 transition: opacity 0.2s;
1294 .post-thumbnail a:hover img,
1295 .post-thumbnail a:focus img {
1299 /*--------------------------------------------------------------
1301 --------------------------------------------------------------*/
1305 border-bottom: 1px solid #eee;
1306 border-top: 1px solid #eee;
1312 .navigation-top .wrap {
1320 -webkit-transition: color 0.2s;
1321 transition: color 0.2s;
1324 .navigation-top .current-menu-item > a,
1325 .navigation-top .current_page_item > a {
1334 .main-navigation ul {
1342 /* Hide the menu on small screens when JavaScript is available.
1343 * It only works with JavaScript.
1346 .js .main-navigation ul,
1347 .main-navigation .menu-item-has-children > a > .icon,
1348 .main-navigation .page_item_has_children > a > .icon,
1349 .main-navigation ul a > .icon {
1353 .main-navigation > div > ul {
1354 border-top: 1px solid #eee;
1355 padding: 0.75em 1.695em;
1358 .js .main-navigation.toggled-on > div > ul {
1362 .main-navigation ul ul {
1363 padding: 0 0 0 1.5em;
1366 .main-navigation ul ul.toggled-on {
1370 .main-navigation ul ul a {
1374 text-transform: none;
1377 .main-navigation li {
1378 border-bottom: 1px solid #eee;
1382 .main-navigation li li,
1383 .main-navigation li:last-child {
1387 .main-navigation a {
1390 text-decoration: none;
1393 .main-navigation a:hover {
1400 background-color: transparent;
1402 -webkit-box-shadow: none;
1407 font-size: 0.875rem;
1410 margin: 1px auto 2px;
1415 /* Display the menu toggle when JavaScript is available. */
1421 .main-navigation.toggled-on ul.nav-menu {
1426 .menu-toggle:focus {
1427 background-color: transparent;
1428 -webkit-box-shadow: none;
1432 .menu-toggle:focus {
1433 outline: thin solid;
1436 .menu-toggle .icon {
1437 margin-right: 0.5em;
1441 .toggled-on .menu-toggle .icon-bars,
1442 .menu-toggle .icon-close {
1446 .toggled-on .menu-toggle .icon-close {
1447 display: inline-block;
1450 /* Dropdown Toggle */
1453 background-color: transparent;
1455 -webkit-box-shadow: none;
1469 .dropdown-toggle:hover,
1470 .dropdown-toggle:focus {
1471 background: transparent;
1474 .dropdown-toggle:focus {
1475 outline: thin dotted;
1478 .dropdown-toggle.toggled-on .icon {
1479 -ms-transform: rotate(-180deg); /* IE 9 */
1480 -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
1481 transform: rotate(-180deg);
1484 /* Scroll down arrow */
1486 .site-header .menu-scroll-down {
1490 /*--------------------------------------------------------------
1492 --------------------------------------------------------------*/
1495 -webkit-box-sizing: border-box;
1496 -moz-box-sizing: border-box;
1497 box-sizing: border-box;
1503 /* 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/ */
1504 -webkit-box-sizing: inherit;
1505 -moz-box-sizing: inherit;
1506 box-sizing: inherit;
1511 /* Fallback for when there is no custom background color defined. */
1516 word-wrap: break-word;
1533 /*--------------------------------------------------------------
1535 --------------------------------------------------------------*/
1542 background-color: #fafafa;
1551 -webkit-transition: margin-bottom 0.2s;
1552 transition: margin-bottom 0.2s;
1557 text-decoration: none;
1558 -webkit-transition: opacity 0.2s;
1559 transition: opacity 0.2s;
1562 .site-branding a:hover,
1563 .site-branding a:focus {
1573 letter-spacing: 0.08em;
1576 text-transform: uppercase;
1582 opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
1585 body.has-header-image .site-title,
1586 body.has-header-video .site-title,
1587 body.has-header-image .site-title a,
1588 body.has-header-video .site-title a {
1595 font-size: 0.8125rem;
1599 body.has-header-image .site-description,
1600 body.has-header-video .site-description {
1606 display: inline-block;
1608 vertical-align: middle;
1612 .custom-logo-link img {
1613 display: inline-block;
1618 body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
1619 body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
1624 .custom-logo-link a:hover,
1625 .custom-logo-link a:focus {
1629 body:not(.title-tagline-hidden) .site-branding-text {
1630 display: inline-block;
1631 vertical-align: middle;
1638 .has-header-image.twentyseventeen-front-page .custom-header,
1639 .has-header-video.twentyseventeen-front-page .custom-header,
1640 .has-header-image.home.blog .custom-header,
1641 .has-header-video.home.blog .custom-header {
1648 .custom-header-media {
1658 .custom-header-media:before {
1659 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
1660 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 */
1661 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 */
1662 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+ */
1663 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
1674 .has-header-image .custom-header-media img,
1675 .has-header-video .custom-header-media video,
1676 .has-header-video .custom-header-media iframe {
1683 min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
1686 padding-bottom: 1px; /* Prevent header from extending beyond the footer */
1687 -ms-transform: translateX(-50%) translateY(-50%);
1688 -moz-transform: translateX(-50%) translateY(-50%);
1689 -webkit-transform: translateX(-50%) translateY(-50%);
1690 transform: translateX(-50%) translateY(-50%);
1693 .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
1694 background-color: rgba(34, 34, 34, 0.5);
1695 border: 1px solid rgba(255, 255, 255, 0.6);
1696 color: rgba(255, 255, 255, 0.6);
1703 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1704 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1708 .wp-custom-header .wp-custom-header-video-button:hover,
1709 .wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */
1710 border-color: rgba(255, 255, 255, 0.8);
1711 background-color: rgba(34, 34, 34, 0.8);
1715 .admin-bar .wp-custom-header-video-button {
1719 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
1723 -ms-transform: translateX(-50%) translateY(0);
1724 -moz-transform: translateX(-50%) translateY(0);
1725 -webkit-transform: translateX(-50%) translateY(0);
1726 transform: translateX(-50%) translateY(0);
1729 /* For browsers that support 'object-fit' */
1730 @supports ( object-fit: cover ) {
1731 .has-header-image .custom-header-media img,
1732 .has-header-video .custom-header-media video,
1733 .has-header-video .custom-header-media iframe,
1734 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
1737 -o-object-fit: cover;
1740 -ms-transform: none;
1741 -moz-transform: none;
1742 -webkit-transform: none;
1748 /* Hides div in Customizer preview when header images or videos change. */
1750 body:not(.has-header-image):not(.has-header-video) .custom-header-media {
1754 .has-header-image.twentyseventeen-front-page .site-branding,
1755 .has-header-video.twentyseventeen-front-page .site-branding,
1756 .has-header-image.home.blog .site-branding,
1757 .has-header-video.home.blog .site-branding {
1758 display: table-cell;
1760 vertical-align: bottom;
1763 /*--------------------------------------------------------------
1765 --------------------------------------------------------------*/
1767 .twentyseventeen-front-page .site-content {
1771 .twentyseventeen-panel {
1777 background-position: center center;
1778 background-repeat: no-repeat;
1779 -webkit-background-size: cover;
1780 background-size: cover;
1784 .panel-image:before {
1785 /* 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 */
1786 background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
1787 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
1788 background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
1789 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
1790 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
1799 .twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
1800 border-top: 1px solid #ddd;
1807 .panel-content .wrap {
1808 padding-bottom: 0.5em;
1809 padding-top: 1.75em;
1812 /* Panel edit link */
1814 .twentyseventeen-panel .edit-link {
1819 .twentyseventeen-panel .entry-header .edit-link {
1821 font-size: 0.875rem;
1824 /* Front Page - Recent Posts */
1826 .twentyseventeen-front-page .panel-content .recent-posts article {
1832 .recent-posts .entry-header {
1833 margin-bottom: 1.2em;
1836 .page .panel-content .recent-posts .entry-title {
1841 text-transform: none;
1844 .twentyseventeen-panel .recent-posts .entry-header .edit-link {
1846 display: inline-block;
1848 font-size: 0.6875rem;
1852 /*--------------------------------------------------------------
1853 13.3 Regular Content
1854 --------------------------------------------------------------*/
1856 .site-content-contain {
1857 background-color: #fff;
1865 /*--------------------------------------------------------------
1867 --------------------------------------------------------------*/
1869 /* Post Landing Page */
1875 .post:not(.sticky) .icon-thumb-tack {
1879 .sticky .icon-thumb-tack {
1888 .page .panel-content .entry-title,
1890 body.page:not(.twentyseventeen-front-page) .entry-title {
1893 font-size: 0.875rem;
1895 letter-spacing: 0.14em;
1896 text-transform: uppercase;
1899 .entry-header .entry-title {
1900 margin-bottom: 0.25em;
1905 text-decoration: none;
1909 .entry-title:not(:first-child) {
1916 font-size: 0.6875rem;
1918 letter-spacing: 0.1818em;
1919 padding-bottom: 0.25em;
1920 text-transform: uppercase;
1928 .updated:not(.published) {
1933 .group-blog .byline {
1938 .comments-pagination {
1939 border-top: 1px solid #eee;
1941 font-size: 0.875rem;
1948 .comments-pagination .icon {
1949 width: 0.666666666em;
1950 height: 0.666666666em;
1953 .comments-pagination {
1959 padding: 0.5em 0.75em;
1962 .page-numbers.current {
1964 display: inline-block;
1967 .page-numbers.current .screen-reader-text {
1971 position: relative !important;
1976 .next.page-numbers {
1977 background-color: #ddd;
1978 -webkit-border-radius: 2px;
1980 display: inline-block;
1984 padding: 0.25em 0.5em 0.4em;
1988 .next.page-numbers {
1989 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1990 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1993 .prev.page-numbers:focus,
1994 .prev.page-numbers:hover,
1995 .next.page-numbers:focus,
1996 .next.page-numbers:hover {
1997 background-color: #767676;
2001 .prev.page-numbers {
2005 .next.page-numbers {
2009 /* Aligned blockquotes */
2011 .entry-content blockquote.alignleft,
2012 .entry-content blockquote.alignright {
2015 font-size: 0.8125rem;
2019 /* Blog landing, search, archives */
2021 .blog .site-main > article,
2022 .archive .site-main > article,
2023 .search .site-main > article {
2024 padding-bottom: 2em;
2027 body:not(.twentyseventeen-front-page) .entry-header {
2031 body:not(.twentyseventeen-front-page) .entry-header,
2032 body:not(.twentyseventeen-front-page) .entry-content,
2033 body:not(.twentyseventeen-front-page) #comments {
2038 body:not(.twentyseventeen-front-page) .entry-header {
2042 .blog .entry-meta a.post-edit-link,
2043 .archive .entry-meta a.post-edit-link,
2044 .search .entry-meta a.post-edit-link {
2046 display: inline-block;
2048 white-space: nowrap;
2051 .search .page .entry-meta a.post-edit-link {
2053 white-space: nowrap;
2056 .taxonomy-description {
2059 font-size: 0.8125rem;
2064 .entry-content .more-link:before {
2072 .single-post:not(.has-sidebar) #primary,
2073 .page.page-one-column:not(.twentyseventeen-front-page) #primary,
2074 .archive.page-one-column:not(.has-sidebar) .page-header,
2075 .archive.page-one-column:not(.has-sidebar) #primary {
2081 .single-featured-image-header {
2082 background-color: #fafafa;
2083 border-bottom: 1px solid #eee;
2086 .single-featured-image-header img {
2093 font-size: 0.875rem;
2098 .page-links .page-number {
2100 display: inline-block;
2105 display: inline-block;
2108 .page-links a .page-number {
2115 border-bottom: 1px solid #eee;
2116 border-top: 1px solid #eee;
2121 .entry-footer .cat-links,
2122 .entry-footer .tags-links {
2125 font-size: 0.6875rem;
2127 letter-spacing: 0.1818em;
2128 padding-left: 2.5em;
2130 text-transform: uppercase;
2133 .entry-footer .cat-links + .tags-links {
2137 .entry-footer .cat-links a,
2138 .entry-footer .tags-links a {
2142 .entry-footer .cat-links .icon,
2143 .entry-footer .tags-links .icon {
2146 margin-right: 0.5em;
2151 .entry-footer .edit-link {
2152 display: inline-block;
2155 .entry-footer .edit-link a.post-edit-link {
2156 background-color: #222;
2157 -webkit-border-radius: 2px;
2159 -webkit-box-shadow: none;
2162 display: inline-block;
2164 font-size: 0.875rem;
2168 -webkit-transition: background-color 0.2s ease-in-out;
2169 transition: background-color 0.2s ease-in-out;
2170 white-space: nowrap;
2173 .entry-footer .edit-link a.post-edit-link:hover,
2174 .entry-footer .edit-link a.post-edit-link:focus {
2175 background-color: #767676;
2180 .blog .format-status .entry-title,
2181 .archive .format-status .entry-title,
2182 .blog .format-aside .entry-title,
2183 .archive .format-aside .entry-title {
2187 .format-quote blockquote {
2196 .format-quote blockquote .icon {
2202 -webkit-transform: scale(-1, 1);
2203 -ms-transform: scale(-1, 1);
2204 transform: scale(-1, 1);
2208 /* Post Navigation */
2215 .post-navigation .nav-links {
2220 background: transparent;
2224 font-size: 0.6875rem;
2225 letter-spacing: 0.1818em;
2227 text-transform: uppercase;
2233 font-size: 0.9375rem;
2236 .post-navigation .nav-next {
2240 .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
2241 margin-right: 0.5em;
2244 .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
2248 /*--------------------------------------------------------------
2250 --------------------------------------------------------------*/
2253 padding-bottom: 2em;
2256 .page .entry-header .edit-link {
2258 font-size: 0.875rem;
2261 .search .page .entry-header .edit-link {
2263 font-size: 0.6875rem;
2271 .page:not(.home) #content {
2272 padding-bottom: 1.5em;
2277 .error404 .page-content {
2278 padding-bottom: 4em;
2281 .error404 .page-content .search-form,
2282 .search .page-content .search-form {
2286 /*--------------------------------------------------------------
2288 --------------------------------------------------------------*/
2291 border-top: 1px solid #eee;
2294 .site-footer .wrap {
2295 padding-bottom: 1.5em;
2299 /* Footer widgets */
2301 .site-footer .widget-area {
2302 padding-bottom: 2em;
2308 .social-navigation {
2314 .social-navigation ul {
2320 .social-navigation li {
2324 .social-navigation a {
2325 background-color: #767676;
2326 -webkit-border-radius: 40px;
2327 border-radius: 40px;
2329 display: inline-block;
2331 margin: 0 1em 0.5em 0;
2336 .social-navigation a:hover,
2337 .social-navigation a:focus {
2338 background-color: #333;
2341 .social-navigation .icon {
2345 vertical-align: top;
2352 font-size: 0.875rem;
2368 /*--------------------------------------------------------------
2370 --------------------------------------------------------------*/
2374 padding: 2em 0 0.5em;
2380 margin-bottom: 1.5em;
2384 .comment-list .children {
2390 .comment-list li:before {
2401 margin-bottom: 0.4em;
2406 .comment-author .avatar {
2413 .comment-author .says {
2418 margin-bottom: 1.5em;
2424 font-size: 0.625rem;
2426 letter-spacing: 0.1818em;
2427 text-transform: uppercase;
2430 .comment-metadata a {
2434 .comment-metadata a.comment-edit-link {
2442 font-size: 0.875rem;
2446 .comment-reply-link {
2451 .comment-reply-link .icon {
2460 .children .comment-author .avatar {
2466 .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
2467 border: 1px solid #333;
2472 .comment-awaiting-moderation {
2475 font-size: 0.875rem;
2479 .comments-pagination {
2487 /*--------------------------------------------------------------
2489 --------------------------------------------------------------*/
2496 padding-bottom: 3em;
2502 font-size: 0.8125rem;
2504 letter-spacing: 0.1818em;
2505 margin-bottom: 1.5em;
2506 text-transform: uppercase;
2528 border-bottom: 1px solid #ddd;
2529 border-top: 1px solid #ddd;
2533 .widget ul li + li {
2546 padding-left: 1.5rem;
2549 /* Widget lists of links */
2551 .widget_top-posts ul li ul,
2552 .widget_rss_links ul li ul,
2553 .widget-grofile ul.grofile-links li ul,
2554 .widget_pages ul li ul,
2555 .widget_meta ul li ul {
2559 .widget_nav_menu ul li li,
2560 .widget_top-posts ul li,
2561 .widget_top-posts ul li li,
2562 .widget_rss_links ul li,
2563 .widget_rss_links ul li li,
2564 .widget-grofile ul.grofile-links li,
2565 .widget-grofile ul.grofile-links li li {
2566 padding-bottom: 0.25em;
2567 padding-top: 0.25em;
2571 padding-bottom: 1em;
2585 word-wrap: break-word;
2590 .widget_rss .widget-title .rsswidget:first-child {
2594 .widget_rss .widget-title .rsswidget:first-child:hover {
2595 background-color: transparent;
2598 .widget_rss .widget-title .rsswidget:first-child img {
2606 .widget_rss ul li:first-child {
2611 .widget_rss li .rsswidget {
2613 font-size: 1.375rem;
2618 .widget_rss .rss-date,
2619 .widget_rss li cite {
2623 font-size: 0.625rem;
2626 letter-spacing: 0.18em;
2628 text-transform: uppercase;
2631 .widget_rss .rss-date {
2632 margin: 0.5em 0 1.5em;
2636 .widget_rss .rssSummary {
2637 margin-bottom: 0.5em;
2640 /* Contact Info Widget */
2642 .widget_contact_info .contact-map {
2643 margin-bottom: 0.5em;
2648 .widget-grofile h4 {
2654 /* Recent Comments */
2656 .widget_recent_comments table,
2657 .widget_recent_comments th,
2658 .widget_recent_comments td {
2662 /* Recent Posts widget */
2664 .widget_recent_entries .post-date {
2674 .search-form .search-submit {
2682 .search-form .search-submit .icon {
2688 /* Tag cloud widget */
2692 .wp_widget_tag_cloud {
2696 .widget .tagcloud a,
2697 .widget.widget_tag_cloud a,
2698 .wp_widget_tag_cloud a {
2699 border: 1px solid #ddd;
2700 -webkit-box-shadow: none;
2702 display: inline-block;
2704 font-size: 14px !important; /* !important to overwrite inline styles */
2705 font-size: 0.875rem !important;
2706 margin: 4px 4px 0 0 !important;
2707 padding: 4px 10px 5px !important;
2709 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2710 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2712 word-wrap: break-word;
2716 .widget .tagcloud a:hover,
2717 .widget .tagcloud a:focus,
2718 .widget.widget_tag_cloud a:hover,
2719 .widget.widget_tag_cloud a:focus,
2720 .wp_widget_tag_cloud a:hover,
2721 .wp_widget_tag_cloud a:focus {
2723 -webkit-box-shadow: none;
2725 text-decoration: none;
2728 /* Calendar widget */
2730 .widget_calendar th,
2731 .widget_calendar td {
2735 .widget_calendar tfoot td {
2739 /*--------------------------------------------------------------
2741 --------------------------------------------------------------*/
2745 height: auto; /* Make sure images are scaled correctly. */
2746 max-width: 100%; /* Adhere to container width. */
2755 .page-content .wp-smiley,
2756 .entry-content .wp-smiley,
2757 .comment-content .wp-smiley {
2764 /* Make sure embeds and iframes fit their containers. */
2769 margin-bottom: 1.5em;
2777 font-size: 0.8125rem;
2779 margin-bottom: 1.5em;
2783 .wp-caption img[class*="wp-image-"] {
2789 .wp-caption .wp-caption-text {
2793 /* Media Elements */
2796 margin-bottom: 1.5em;
2801 .mejs-controls a.mejs-horizontal-volume-slider,
2802 .mejs-controls a.mejs-horizontal-volume-slider:focus,
2803 .mejs-controls a.mejs-horizontal-volume-slider:hover {
2804 background: transparent;
2808 /* Playlist Color Overrides: Light */
2810 .site-content .wp-playlist-light {
2815 .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
2819 .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
2823 .site-content .wp-playlist-light .wp-playlist-item {
2824 border-bottom: 1px dotted #eee;
2825 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2826 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2829 .site-content .wp-playlist-light .wp-playlist-item:hover,
2830 .site-content .wp-playlist-light .wp-playlist-item:focus {
2831 border-bottom-color: rgba(0, 0, 0, 0);
2832 background-color: #767676;
2836 .site-content .wp-playlist-light a.wp-playlist-caption:hover,
2837 .site-content .wp-playlist-light .wp-playlist-item:hover a,
2838 .site-content .wp-playlist-light .wp-playlist-item:focus a {
2842 /* Playlist Color Overrides: Dark */
2844 .site-content .wp-playlist-dark {
2849 .site-content .wp-playlist-dark .mejs-container .mejs-controls {
2850 background-color: #333;
2853 .site-content .wp-playlist-dark .wp-playlist-caption {
2857 .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
2861 .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
2865 .site-content .wp-playlist-dark .wp-playlist-playing {
2866 background-color: #333;
2869 .site-content .wp-playlist-dark .wp-playlist-item {
2870 border-bottom: 1px dotted #555;
2871 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2872 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2875 .site-content .wp-playlist-dark .wp-playlist-item:hover,
2876 .site-content .wp-playlist-dark .wp-playlist-item:focus {
2877 border-bottom-color: rgba(0, 0, 0, 0);
2878 background-color: #aaa;
2882 .site-content .wp-playlist-dark a.wp-playlist-caption:hover,
2883 .site-content .wp-playlist-dark .wp-playlist-item:hover a,
2884 .site-content .wp-playlist-dark .wp-playlist-item:focus a {
2888 /* Playlist Style Overrides */
2890 .site-content .wp-playlist {
2891 padding: 0.625em 0.625em 0.3125em;
2894 .site-content .wp-playlist-current-item .wp-playlist-item-title {
2898 .site-content .wp-playlist-current-item .wp-playlist-item-album {
2902 .site-content .wp-playlist-current-item .wp-playlist-item-artist {
2904 font-size: 0.625rem;
2906 letter-spacing: 0.1818em;
2907 text-transform: uppercase;
2910 .site-content .wp-playlist-item {
2911 padding: 0 0.3125em;
2915 .site-content .wp-playlist-item:last-of-type {
2916 border-bottom: none;
2919 .site-content .wp-playlist-item a {
2920 padding: 0.3125em 0;
2921 border-bottom: none;
2924 .site-content .wp-playlist-item a,
2925 .site-content .wp-playlist-item a:focus,
2926 .site-content .wp-playlist-item a:hover {
2927 -webkit-box-shadow: none;
2929 background: transparent;
2932 .site-content .wp-playlist-item-length {
2936 /* SVG Icons base styles */
2939 display: inline-block;
2942 position: relative; /* Align more nicely with capital letters */
2944 vertical-align: middle;
2948 /*--------------------------------------------------------------
2950 --------------------------------------------------------------*/
2953 display: inline-block;
2955 vertical-align: top;
2961 .gallery-columns-1 .gallery-item {
2965 .gallery-columns-2 .gallery-item {
2970 .gallery-item a:hover,
2971 .gallery-item a:focus {
2972 -webkit-box-shadow: none;
2975 display: inline-block;
2979 .gallery-item a img {
2981 -webkit-transition: -webkit-filter 0.2s ease-in;
2982 transition: -webkit-filter 0.2s ease-in;
2983 transition: filter 0.2s ease-in;
2984 transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
2985 -webkit-backface-visibility: hidden;
2986 backface-visibility: hidden;
2989 .gallery-item a:hover img,
2990 .gallery-item a:focus img {
2991 -webkit-filter: opacity(60%);
2992 filter: opacity(60%);
2998 padding: 0 10px 0 0;
3002 /*--------------------------------------------------------------
3004 --------------------------------------------------------------*/
3006 .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
3007 border: 2px dashed #0085ba; /* Matches visible edit shortcuts. */
3018 .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .panel-content {
3019 z-index: 2; /* Prevent :after from preventing interactions within the section */
3022 /* Used for placeholder text */
3023 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
3026 font-size: 0.875rem;
3028 letter-spacing: 1px;
3030 text-transform: uppercase;
3034 /* Show borders on the custom page panels only when the front page sections are being edited */
3035 .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
3039 .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
3043 /* Add some space around the visual edit shortcut buttons. */
3044 .twentyseventeen-panel .customize-partial-edit-shortcut button {
3049 /* Ensure that placeholder icons are visible. */
3050 .twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
3051 visibility: visible;
3054 /*--------------------------------------------------------------
3056 --------------------------------------------------------------*/
3062 .no-svg .svg-fallback {
3063 display: inline-block;
3066 .no-svg .dropdown-toggle {
3073 .no-svg .dropdown-toggle .svg-fallback.icon-angle-down {
3078 -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
3079 -ms-transform: rotate(180deg); /* IE 9 */
3080 transform: rotate(180deg);
3083 .no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down {
3084 -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
3085 -ms-transform: rotate(0); /* IE 9 */
3086 transform: rotate(0);
3089 .no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before {
3093 /* Social Menu fallbacks */
3095 .no-svg .social-navigation a {
3096 background: transparent;
3102 /* Show screen reader text in some cases */
3104 .no-svg .next.page-numbers .screen-reader-text,
3105 .no-svg .prev.page-numbers .screen-reader-text,
3106 .no-svg .social-navigation li a .screen-reader-text,
3107 .no-svg .search-submit .screen-reader-text {
3113 position: relative !important; /* overrides previous !important styles */
3117 /*--------------------------------------------------------------
3119 --------------------------------------------------------------*/
3121 /* Adjust positioning of edit shortcuts, override style in customize-preview.css */
3122 @media screen and (min-width: 20em) {
3124 body.customize-partial-edit-shortcuts-shown .site-header .site-title {
3129 @media screen and (min-width: 30em) {
3139 font-size: 1.125rem;
3144 font-size: 1.875rem;
3148 .page .panel-content .recent-posts .entry-title {
3150 font-size: 1.625rem;
3155 font-size: 1.375rem;
3160 font-size: 1.125rem;
3165 font-size: 0.8125rem;
3173 .entry-content blockquote.alignleft,
3174 .entry-content blockquote.alignright {
3176 font-size: 0.875rem;
3179 /* Fix image alignment */
3182 margin-right: 1.5em;
3198 .panel-content .wrap {
3199 padding-bottom: 2em;
3203 .page-one-column .panel-content .wrap {
3207 .panel-content .entry-header {
3208 margin-bottom: 4.5em;
3211 .panel-content .recent-posts .entry-header {
3215 /* Blog Index, Archive, Search */
3217 .taxonomy-description {
3219 font-size: 0.875rem;
3222 .page-numbers.current {
3234 /* Gallery Columns */
3240 .gallery-columns-1 .gallery-item {
3244 .gallery-columns-2 .gallery-item {
3248 .gallery-columns-3 .gallery-item {
3252 .gallery-columns-4 .gallery-item {
3257 @media screen and (min-width: 48em) {
3271 .entry-content blockquote.alignleft,
3272 .entry-content blockquote.alignright {
3274 font-size: 0.8125rem;
3285 .has-sidebar:not(.error404) #primary {
3290 .has-sidebar #secondary {
3296 .error404 #primary {
3306 .has-header-image.twentyseventeen-front-page .site-branding,
3307 .has-header-video.twentyseventeen-front-page .site-branding,
3308 .has-header-image.home.blog .site-branding,
3309 .has-header-video.home.blog .site-branding {
3319 .has-header-image.twentyseventeen-front-page .custom-header,
3320 .has-header-video.twentyseventeen-front-page .custom-header,
3321 .has-header-image.home.blog .custom-header,
3322 .has-header-video.home.blog .custom-header {
3327 .custom-header-media {
3332 .twentyseventeen-front-page.has-header-image .custom-header-media,
3333 .twentyseventeen-front-page.has-header-video .custom-header-media,
3334 .home.blog.has-header-image .custom-header-media,
3335 .home.blog.has-header-video .custom-header-media {
3340 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
3341 .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
3354 .custom-logo-link img,
3355 body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
3356 body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
3360 .title-tagline-hidden.home.has-header-image .custom-logo-link img,
3361 .title-tagline-hidden.home.has-header-video .custom-logo-link img {
3380 font-size: 0.875rem;
3388 .navigation-top .wrap {
3390 /* The font size is 14px here and we need 50px padding in ems */
3391 padding: 0.75em 3.4166666666667em;
3394 .navigation-top nav {
3395 margin-left: -1.25em;
3398 .site-navigation-fixed.navigation-top {
3408 .admin-bar .site-navigation-fixed.navigation-top {
3412 /* Main Navigation */
3415 .js .dropdown-toggle {
3423 .js .main-navigation ul,
3424 .js .main-navigation ul ul,
3425 .js .main-navigation > div > ul {
3429 .main-navigation ul {
3430 background: transparent;
3434 .main-navigation > div > ul {
3440 .main-navigation li {
3442 display: inline-block;
3445 .main-navigation li li {
3449 .main-navigation a {
3450 padding: 1em 1.25em;
3453 .main-navigation ul ul {
3455 border: 1px solid #bbb;
3463 .main-navigation ul li.menu-item-has-children:before,
3464 .main-navigation ul li.menu-item-has-children:after,
3465 .main-navigation ul li.page_item_has_children:before,
3466 .main-navigation ul li.page_item_has_children:after {
3467 border-style: solid;
3468 border-width: 0 6px 6px;
3479 .main-navigation ul li.menu-item-has-children.focus:before,
3480 .main-navigation ul li.menu-item-has-children:hover:before,
3481 .main-navigation ul li.menu-item-has-children.focus:after,
3482 .main-navigation ul li.menu-item-has-children:hover:after,
3483 .main-navigation ul li.page_item_has_children.focus:before,
3484 .main-navigation ul li.page_item_has_children:hover:before,
3485 .main-navigation ul li.page_item_has_children.focus:after,
3486 .main-navigation ul li.page_item_has_children:hover:after {
3490 .main-navigation ul li.menu-item-has-children:before,
3491 .main-navigation ul li.page_item_has_children:before {
3492 border-color: transparent transparent #bbb;
3496 .main-navigation ul li.menu-item-has-children:after,
3497 .main-navigation ul li.page_item_has_children:after {
3498 border-color: transparent transparent #fff;
3501 .main-navigation ul ul li:hover > ul,
3502 .main-navigation ul ul li.focus > ul {
3507 .main-navigation ul ul a {
3508 padding: 0.75em 1.25em;
3512 .main-navigation li li {
3513 -webkit-transition: background-color 0.2s ease-in-out;
3514 transition: background-color 0.2s ease-in-out;
3517 .main-navigation li li:hover,
3518 .main-navigation li li.focus {
3519 background: #767676;
3522 .main-navigation li li a {
3523 -webkit-transition: color 0.3s ease-in-out;
3524 transition: color 0.3s ease-in-out;
3527 .main-navigation li li.focus > a,
3528 .main-navigation li li:focus > a,
3529 .main-navigation li li:hover > a,
3530 .main-navigation li li a:hover,
3531 .main-navigation li li a:focus,
3532 .main-navigation li li.current_page_item a:hover,
3533 .main-navigation li li.current-menu-item a:hover,
3534 .main-navigation li li.current_page_item a:focus,
3535 .main-navigation li li.current-menu-item a:focus {
3539 .main-navigation ul li:hover > ul,
3540 .main-navigation ul li.focus > ul {
3545 .main-navigation .menu-item-has-children > a > .icon,
3546 .main-navigation .page_item_has_children > a > .icon {
3553 .main-navigation ul ul .menu-item-has-children > a > .icon,
3554 .main-navigation ul ul .page_item_has_children > a > .icon {
3560 -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
3561 -ms-transform: rotate(-90deg); /* IE 9 */
3562 transform: rotate(-90deg);
3565 .main-navigation ul ul ul {
3571 .main-navigation ul ul li.menu-item-has-children.focus:before,
3572 .main-navigation ul ul li.menu-item-has-children:hover:before,
3573 .main-navigation ul ul li.menu-item-has-children.focus:after,
3574 .main-navigation ul ul li.menu-item-has-children:hover:after,
3575 .main-navigation ul ul li.page_item_has_children.focus:before,
3576 .main-navigation ul ul li.page_item_has_children:hover:before,
3577 .main-navigation ul ul li.page_item_has_children.focus:after,
3578 .main-navigation ul ul li.page_item_has_children:hover:after {
3582 .site-header .site-navigation-fixed .menu-scroll-down {
3586 /* Scroll down arrow */
3588 .site-header .menu-scroll-down {
3595 .site-header .menu-scroll-down .icon {
3596 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
3597 -ms-transform: rotate(90deg); /* IE 9 */
3598 transform: rotate(90deg);
3601 .site-header .menu-scroll-down {
3606 .site-header .navigation-top .menu-scroll-down {
3611 .menu-scroll-down:focus {
3612 outline: thin dotted;
3615 .menu-scroll-down .icon {
3622 .twentyseventeen-front-page.has-header-image .site-branding,
3623 .twentyseventeen-front-page.has-header-video .site-branding,
3624 .home.blog.has-header-image .site-branding,
3625 .home.blog.has-header-video .site-branding {
3626 margin-bottom: 70px;
3629 .twentyseventeen-front-page.has-header-image .custom-header-media,
3630 .twentyseventeen-front-page.has-header-video .custom-header-media,
3631 .home.blog.has-header-image .custom-header-media,
3632 .home.blog.has-header-video .custom-header-media {
3639 .twentyseventeen-front-page.has-header-image .custom-header-media:before,
3640 .twentyseventeen-front-page.has-header-video .custom-header-media:before,
3641 .home.blog.has-header-image .custom-header-media:before,
3642 .home.blog.has-header-video .custom-header-media:before {
3646 .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
3647 .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
3648 .admin-bar.home.blog.has-header-image .custom-header-media,
3649 .admin-bar.home.blog.has-header-video .custom-header-media {
3650 height: calc(100vh - 32px);
3653 .panel-content .wrap {
3654 padding-bottom: 4.5em;
3663 /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
3664 .background-fixed .panel-image {
3665 background-attachment: fixed;
3668 .page-two-column .panel-content .entry-header {
3673 .page-two-column .panel-content .entry-content {
3678 /* Front Page - Recent Posts */
3680 .page-two-column .panel-content .recent-posts {
3686 .panel-content .recent-posts article {
3690 .panel-content .recent-posts .entry-header,
3691 .page-two-column #primary .panel-content .recent-posts .entry-header,
3692 .panel-content .recent-posts .entry-content,
3693 .page-two-column #primary .panel-content .recent-posts .entry-content {
3698 .panel-content .recent-posts .entry-header {
3699 margin-bottom: 1.5em;
3702 .page .panel-content .recent-posts .entry-title {
3704 font-size: 1.625rem;
3713 .single-post .entry-title,
3714 .page .entry-title {
3716 font-size: 1.625rem;
3719 .comments-pagination,
3724 .post-navigation .nav-previous {
3729 .post-navigation .nav-next {
3736 .post-navigation .nav-next {
3740 /* Blog, archive, search */
3742 .sticky .icon-thumb-tack {
3749 body:not(.has-sidebar):not(.page-one-column) .page-header,
3750 body.has-sidebar.error404 #primary .page-header,
3751 body.page-two-column:not(.archive) #primary .entry-header,
3752 body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
3757 .blog:not(.has-sidebar) #primary article,
3758 .archive:not(.page-one-column):not(.has-sidebar) #primary article,
3759 .search:not(.has-sidebar) #primary article,
3760 .error404:not(.has-sidebar) #primary .page-content,
3761 .error404.has-sidebar #primary .page-content,
3762 body.page-two-column:not(.archive) #primary .entry-content,
3763 body.page-two-column #comments {
3768 .blog .site-main > article,
3769 .archive .site-main > article,
3770 .search .site-main > article {
3771 padding-bottom: 4em;
3774 .navigation.pagination {
3780 .has-sidebar .navigation.pagination,
3781 .archive.page-one-column:not(.has-sidebar) .navigation.pagination {
3791 .entry-footer .cat-tags-links {
3792 display: table-cell;
3793 vertical-align: middle;
3797 .entry-footer .edit-link {
3798 display: table-cell;
3800 vertical-align: middle;
3803 .entry-footer .edit-link a.post-edit-link {
3810 /* without sidebar */
3812 :not(.has-sidebar) .entry-content blockquote.alignleft {
3813 margin-left: -17.5%;
3817 :not(.has-sidebar) .entry-content blockquote.alignright {
3818 margin-right: -17.5%;
3824 .has-sidebar .entry-content blockquote.alignleft {
3829 .has-sidebar .entry-content blockquote.alignright {
3834 .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
3835 margin-right: -72.5%;
3839 /* blog and archive */
3841 .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
3842 .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
3843 .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
3844 .page-two-column .entry-content blockquote.alignleft {
3845 margin-left: -72.5%;
3849 .blog:not(.has-sidebar) .entry-content blockquote.alignright,
3850 .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright,
3851 .archive:not(.has-sidebar) .entry-content blockquote.alignright,
3852 .page-two-column .entry-content blockquote.alignright {
3859 .format-quote blockquote .icon {
3865 .page.page-one-column .entry-header,
3866 .twentyseventeen-front-page.page-one-column .entry-header,
3867 .archive.page-one-column:not(.has-sidebar) .page-header {
3871 .page:not(.home) #content {
3872 padding-bottom: 3.25em;
3877 .error404 .page-content {
3878 padding-bottom: 9em;
3888 margin-bottom: 2.5em;
3891 ol.children .children {
3895 /* Posts pagination */
3897 .nav-links .nav-title {
3901 .nav-title-icon-wrapper {
3907 .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
3911 .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
3919 font-size: 0.875rem;
3927 font-size: 0.6875rem;
3935 font-size: 0.875rem;
3940 .site-footer .widget-column.footer-widget-1 {
3945 .site-footer .widget-column.footer-widget-2 {
3950 .social-navigation {
3963 .social-navigation + .site-info {
3970 visibility: visible;
3975 /* Gallery Columns */
3977 .gallery-columns-5 .gallery-item {
3981 .gallery-columns-6 .gallery-item {
3985 .gallery-columns-7 .gallery-item {
3989 .gallery-columns-8 .gallery-item {
3993 .gallery-columns-9 .gallery-item {
3998 @media screen and ( min-width: 67em ) {
4003 .navigation-top .wrap {
4004 padding: 0.75em 2em;
4007 .navigation-top nav {
4013 .sticky .icon-thumb-tack {
4025 display: inline-block;
4028 .page-numbers.current {
4030 font-size: 0.9375rem;
4033 .page-numbers.current .screen-reader-text {
4034 clip: rect(1px, 1px, 1px, 1px);
4037 position: absolute !important;
4048 @media screen and ( min-width: 79em ) {
4050 .has-sidebar .entry-content blockquote.alignleft {
4054 .blog:not(.has-sidebar) .entry-content blockquote.alignright,
4055 .archive:not(.has-sidebar) .entry-content blockquote.alignright,
4056 .page-two-column .entry-content blockquote.alignright,
4057 .twentyseventeen-front-page .entry-content blockquote.alignright {
4062 @media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {
4064 .admin-bar .site-navigation-fixed.navigation-top,
4065 .admin-bar .site-navigation-hidden.navigation-top {
4070 /*--------------------------------------------------------------
4072 --------------------------------------------------------------*/
4086 .content-bottom-widgets,
4093 .pagination.navigation,
4094 .comments-pagination,
4097 .comment-reply-link,
4098 .comment-metadata .edit-link,
4099 .pingback .edit-link,
4100 .site-footer aside.widget-area,
4102 display: none !important;
4108 .single-featured-image-header {
4142 .page .panel-content .entry-title,
4144 body.page:not(.twentyseventeen-front-page) .entry-title {
4151 padding-left: 5% !important;
4152 padding-right: 5% !important;
4159 background: transparent;
4163 .custom-header-media {
4167 .twentyseventeen-front-page.has-header-image .site-branding,
4168 .twentyseventeen-front-page.has-header-video .site-branding,
4169 .home.blog.has-header-image .site-branding,
4170 .home.blog.has-header-video .site-branding {
4176 margin-bottom: 1.75em !important; /* override styles added by JavaScript */
4190 .single-featured-image-header {
4191 background: transparent;
4202 background: none !important; /* Brute force since user agents all print differently. */
4208 .twentyseventeen-front-page.has-header-image .site-title,
4209 .twentyseventeen-front-page.has-header-video .site-title,
4210 .twentyseventeen-front-page.has-header-image .site-title a,
4211 .twentyseventeen-front-page.has-header-video .site-title a {
4212 color: #222 !important; /* Make sure color schemes don't affect to print */
4219 .twentyseventeen-front-page.has-header-image .site-description,
4220 .twentyseventeen-front-page.has-header-video .site-description,
4223 color: #777 !important; /* Make sure color schemes don't affect to print */
4226 .entry-content blockquote.alignleft,
4227 .entry-content blockquote.alignright {