[Summary view] [Print] [Text view]

   1  /*
   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.
   7  Version: 3.8
   8  Tested up to: 6.7
   9  Requires at least: 4.7
  10  Requires PHP: 5.2.4
  11  License: GNU General Public License v2 or later
  12  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  13  Text Domain: twentyseventeen
  14  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, block-patterns
  15  
  16  This theme, like WordPress, is licensed under the GPL.
  17  Use it to make something cool, have fun, and share what you've learned with others.
  18  */
  19  
  20  /*--------------------------------------------------------------
  21  >>> TABLE OF CONTENTS:
  22  ----------------------------------------------------------------
  23  1.0 Normalize
  24  2.0 Accessibility
  25  3.0 Alignments
  26  4.0 Clearings
  27  5.0 Typography
  28  6.0 Forms
  29  7.0 Formatting
  30  8.0 Lists
  31  9.0 Tables
  32  10.0 Links
  33  11.0 Featured Image Hover
  34  12.0 Navigation
  35  13.0 Layout
  36     13.1 Header
  37     13.2 Front Page
  38     13.3 Regular Content
  39     13.4 Posts
  40     13.5 Pages
  41     13.6 Footer
  42  14.0 Comments
  43  15.0 Widgets
  44  16.0 Media
  45     16.1 Galleries
  46  17.0 Customizer
  47  18.0 SVGs Fallbacks
  48  19.0 Media Queries
  49  20.0 Print
  50  --------------------------------------------------------------*/
  51  
  52  /*--------------------------------------------------------------
  53  1.0 Normalize
  54  Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
  55  --------------------------------------------------------------*/
  56  
  57  html {
  58      font-family: sans-serif;
  59      line-height: 1.15;
  60      -ms-text-size-adjust: 100%;
  61      -webkit-text-size-adjust: 100%;
  62  }
  63  
  64  body {
  65      margin: 0;
  66  }
  67  
  68  article,
  69  aside,
  70  footer,
  71  header,
  72  nav,
  73  section {
  74      display: block;
  75  }
  76  
  77  h1 {
  78      font-size: 2em;
  79      margin: 0.67em 0;
  80  }
  81  
  82  figcaption,
  83  figure,
  84  main {
  85      display: block;
  86  }
  87  
  88  figure {
  89      margin: 1em 0;
  90  }
  91  
  92  hr {
  93      -webkit-box-sizing: content-box;
  94      -moz-box-sizing: content-box;
  95      box-sizing: content-box;
  96      height: 0;
  97      overflow: visible;
  98  }
  99  
 100  pre {
 101      font-family: monospace, monospace;
 102      font-size: 1em;
 103  }
 104  
 105  a {
 106      background-color: transparent;
 107      -webkit-text-decoration-skip: objects;
 108  }
 109  
 110  a:active,
 111  a:hover {
 112      outline-width: 0;
 113  }
 114  
 115  abbr[title] {
 116      border-bottom: 1px #767676 dotted;
 117      text-decoration: none;
 118  }
 119  
 120  b,
 121  strong {
 122      font-weight: inherit;
 123  }
 124  
 125  b,
 126  strong {
 127      font-weight: 700;
 128  }
 129  
 130  code,
 131  kbd,
 132  samp {
 133      font-family: monospace, monospace;
 134      font-size: 1em;
 135  }
 136  
 137  dfn {
 138      font-style: italic;
 139  }
 140  
 141  mark {
 142      background-color: #eee;
 143      color: #222;
 144  }
 145  
 146  small {
 147      font-size: 80%;
 148  }
 149  
 150  sub,
 151  sup {
 152      font-size: 75%;
 153      line-height: 0;
 154      position: relative;
 155      vertical-align: baseline;
 156  }
 157  
 158  sub {
 159      bottom: -0.25em;
 160  }
 161  
 162  sup {
 163      top: -0.5em;
 164  }
 165  
 166  audio,
 167  video {
 168      display: inline-block;
 169  }
 170  
 171  audio:not([controls]) {
 172      display: none;
 173      height: 0;
 174  }
 175  
 176  img {
 177      border-style: none;
 178  }
 179  
 180  svg:not(:root) {
 181      overflow: hidden;
 182  }
 183  
 184  button,
 185  input,
 186  optgroup,
 187  select,
 188  textarea {
 189      font-family: sans-serif;
 190      font-size: 100%;
 191      line-height: 1.15;
 192      margin: 0;
 193  }
 194  
 195  button,
 196  input {
 197      overflow: visible;
 198  }
 199  
 200  button,
 201  select {
 202      text-transform: none;
 203  }
 204  
 205  button,
 206  html [type="button"],
 207  [type="reset"],
 208  [type="submit"] {
 209      -webkit-appearance: button;
 210  }
 211  
 212  button::-moz-focus-inner,
 213  [type="button"]::-moz-focus-inner,
 214  [type="reset"]::-moz-focus-inner,
 215  [type="submit"]::-moz-focus-inner {
 216      border-style: none;
 217      padding: 0;
 218  }
 219  
 220  button:-moz-focusring,
 221  [type="button"]:-moz-focusring,
 222  [type="reset"]:-moz-focusring,
 223  [type="submit"]:-moz-focusring {
 224      outline: 1px dotted ButtonText;
 225  }
 226  
 227  fieldset {
 228      border: 1px solid #bbb;
 229      margin: 0 2px;
 230      padding: 0.35em 0.625em 0.75em;
 231  }
 232  
 233  legend {
 234      -webkit-box-sizing: border-box;
 235      -moz-box-sizing: border-box;
 236      box-sizing: border-box;
 237      color: inherit;
 238      display: table;
 239      max-width: 100%;
 240      padding: 0;
 241      white-space: normal;
 242  }
 243  
 244  progress {
 245      display: inline-block;
 246      vertical-align: baseline;
 247  }
 248  
 249  textarea {
 250      overflow: auto;
 251  }
 252  
 253  [type="checkbox"],
 254  [type="radio"] {
 255      -webkit-box-sizing: border-box;
 256      -moz-box-sizing: border-box;
 257      box-sizing: border-box;
 258      padding: 0;
 259  }
 260  
 261  [type="number"]::-webkit-inner-spin-button,
 262  [type="number"]::-webkit-outer-spin-button {
 263      height: auto;
 264  }
 265  
 266  [type="search"] {
 267      -webkit-appearance: textfield;
 268      outline-offset: -2px;
 269  }
 270  
 271  [type="search"]::-webkit-search-cancel-button,
 272  [type="search"]::-webkit-search-decoration {
 273      -webkit-appearance: none;
 274  }
 275  
 276  ::-webkit-file-upload-button {
 277      -webkit-appearance: button;
 278      font: inherit;
 279  }
 280  
 281  details,
 282  menu {
 283      display: block;
 284  }
 285  
 286  summary {
 287      display: list-item;
 288  }
 289  
 290  canvas {
 291      display: inline-block;
 292  }
 293  
 294  template {
 295      display: none;
 296  }
 297  
 298  [hidden] {
 299      display: none;
 300  }
 301  
 302  /*--------------------------------------------------------------
 303  2.0 Accessibility
 304  --------------------------------------------------------------*/
 305  
 306  /* Text meant only for screen readers. */
 307  
 308  .screen-reader-text {
 309      clip: rect(1px, 1px, 1px, 1px);
 310      height: 1px;
 311      overflow: hidden;
 312      position: absolute !important;
 313      width: 1px;
 314      word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 315  }
 316  
 317  .screen-reader-text:focus {
 318      background-color: #f1f1f1;
 319      -webkit-border-radius: 3px;
 320      border-radius: 3px;
 321      -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 322      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 323      clip: auto !important;
 324      color: #21759b;
 325      display: block;
 326      font-size: 14px;
 327      font-size: 0.875rem;
 328      font-weight: 700;
 329      height: auto;
 330      left: 5px;
 331      line-height: normal;
 332      padding: 15px 23px 14px;
 333      text-decoration: none;
 334      top: 5px;
 335      width: auto;
 336      z-index: 100000; /* Above WP toolbar. */
 337  }
 338  
 339  /*--------------------------------------------------------------
 340  3.0 Alignments
 341  --------------------------------------------------------------*/
 342  
 343  .alignleft {
 344      display: inline;
 345      float: left;
 346      margin-right: 1.5em;
 347  }
 348  
 349  .alignright {
 350      display: inline;
 351      float: right;
 352      margin-left: 1.5em;
 353  }
 354  
 355  .aligncenter {
 356      clear: both;
 357      display: block;
 358      margin-left: auto;
 359      margin-right: auto;
 360  }
 361  
 362  /*--------------------------------------------------------------
 363  4.0 Clearings
 364  --------------------------------------------------------------*/
 365  
 366  .clear:before,
 367  .clear:after,
 368  .entry-content:before,
 369  .entry-content:after,
 370  .entry-footer:before,
 371  .entry-footer:after,
 372  .comment-content:before,
 373  .comment-content:after,
 374  .site-header:before,
 375  .site-header:after,
 376  .site-content:before,
 377  .site-content:after,
 378  .site-footer:before,
 379  .site-footer:after,
 380  .nav-links:before,
 381  .nav-links:after,
 382  .pagination:before,
 383  .pagination:after,
 384  .comment-author:before,
 385  .comment-author:after,
 386  .widget-area:before,
 387  .widget-area:after,
 388  .widget:before,
 389  .widget:after,
 390  .comment-meta:before,
 391  .comment-meta:after {
 392      content: "";
 393      display: table;
 394      table-layout: fixed;
 395  }
 396  
 397  .clear:after,
 398  .entry-content:after,
 399  .entry-footer:after,
 400  .comment-content:after,
 401  .site-header:after,
 402  .site-content:after,
 403  .site-footer:after,
 404  .nav-links:after,
 405  .pagination:after,
 406  .comment-author:after,
 407  .widget-area:after,
 408  .widget:after,
 409  .comment-meta:after {
 410      clear: both;
 411  }
 412  
 413  /*--------------------------------------------------------------
 414  5.0 Typography
 415  --------------------------------------------------------------*/
 416  
 417  body,
 418  button,
 419  input,
 420  select,
 421  textarea {
 422      color: #333;
 423      font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
 424      font-size: 15px;
 425      font-size: 0.9375rem;
 426      font-weight: 400;
 427      line-height: 1.66;
 428  }
 429  
 430  h1,
 431  h2,
 432  h3,
 433  h4,
 434  h5,
 435  h6 {
 436      clear: both;
 437      line-height: 1.4;
 438      margin: 0 0 0.75em;
 439      padding: 1.5em 0 0;
 440  }
 441  
 442  h1:first-child,
 443  h2:first-child,
 444  h3:first-child,
 445  h4:first-child,
 446  h5:first-child,
 447  h6:first-child {
 448      padding-top: 0;
 449  }
 450  
 451  h1 {
 452      font-size: 24px;
 453      font-size: 1.5rem;
 454      font-weight: 300;
 455  }
 456  
 457  h2,
 458  .home.blog .entry-title {
 459      color: #666;
 460      font-size: 20px;
 461      font-size: 1.25rem;
 462      font-weight: 300;
 463  }
 464  
 465  h3 {
 466      color: #333;
 467      font-size: 18px;
 468      font-size: 1.125rem;
 469      font-weight: 300;
 470  }
 471  
 472  h4 {
 473      color: #333;
 474      font-size: 16px;
 475      font-size: 1rem;
 476      font-weight: 800;
 477  }
 478  
 479  h5 {
 480      color: #767676;
 481      font-size: 13px;
 482      font-size: 0.8125rem;
 483      font-weight: 800;
 484      letter-spacing: 0.15em;
 485      text-transform: uppercase;
 486  }
 487  
 488  h6 {
 489      color: #333;
 490      font-size: 15px;
 491      font-size: 0.9375rem;
 492      font-weight: 800;
 493  }
 494  
 495  p {
 496      margin: 0 0 1.5em;
 497      padding: 0;
 498  }
 499  
 500  dfn,
 501  cite,
 502  em,
 503  i {
 504      font-style: italic;
 505  }
 506  
 507  blockquote {
 508      color: #666;
 509      font-size: 18px;
 510      font-size: 1.125rem;
 511      font-style: italic;
 512      line-height: 1.7;
 513      margin: 0;
 514      overflow: hidden;
 515      padding: 0;
 516  }
 517  
 518  blockquote cite {
 519      display: block;
 520      font-style: normal;
 521      font-weight: 600;
 522      margin-top: 0.5em;
 523  }
 524  
 525  address {
 526      margin: 0 0 1.5em;
 527  }
 528  
 529  pre {
 530      background: #eee;
 531      font-family: "Courier 10 Pitch", Courier, monospace;
 532      font-size: 15px;
 533      font-size: 0.9375rem;
 534      line-height: 1.6;
 535      margin-bottom: 1.6em;
 536      max-width: 100%;
 537      overflow: auto;
 538      padding: 1.6em;
 539  }
 540  
 541  code,
 542  kbd,
 543  tt,
 544  var {
 545      font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 546      font-size: 15px;
 547      font-size: 0.9375rem;
 548  }
 549  
 550  abbr,
 551  acronym {
 552      border-bottom: 1px dotted #666;
 553      cursor: help;
 554  }
 555  
 556  mark,
 557  ins {
 558      background: #eee;
 559      text-decoration: none;
 560  }
 561  
 562  big {
 563      font-size: 125%;
 564  }
 565  
 566  blockquote {
 567      quotes: "" "";
 568  }
 569  
 570  q {
 571      quotes: "“" "”" "‘" "’";
 572  }
 573  
 574  blockquote:before,
 575  blockquote:after {
 576      content: "";
 577  }
 578  
 579  :focus {
 580      outline: none;
 581  }
 582  
 583  /* Typography for Arabic Font */
 584  
 585  html[lang="ar"] body,
 586  html[lang="ar"] button,
 587  html[lang="ar"] input,
 588  html[lang="ar"] select,
 589  html[lang="ar"] textarea,
 590  html[lang="ary"] body,
 591  html[lang="ary"] button,
 592  html[lang="ary"] input,
 593  html[lang="ary"] select,
 594  html[lang="ary"] textarea,
 595  html[lang="azb"] body,
 596  html[lang="azb"] button,
 597  html[lang="azb"] input,
 598  html[lang="azb"] select,
 599  html[lang="azb"] textarea,
 600  html[lang^="fa-"] body,
 601  html[lang^="fa-"] button,
 602  html[lang^="fa-"] input,
 603  html[lang^="fa-"] select,
 604  html[lang^="fa-"] textarea,
 605  html[lang="haz"] body,
 606  html[lang="haz"] button,
 607  html[lang="haz"] input,
 608  html[lang="haz"] select,
 609  html[lang="haz"] textarea,
 610  html[lang="ps"] body,
 611  html[lang="ps"] button,
 612  html[lang="ps"] input,
 613  html[lang="ps"] select,
 614  html[lang="ps"] textarea,
 615  html[lang="ur"] body,
 616  html[lang="ur"] button,
 617  html[lang="ur"] input,
 618  html[lang="ur"] select,
 619  html[lang="ur"] textarea {
 620      font-family: Tahoma, Arial, sans-serif;
 621  }
 622  
 623  html[lang="ar"] h1,
 624  html[lang="ar"] h2,
 625  html[lang="ar"] h3,
 626  html[lang="ar"] h4,
 627  html[lang="ar"] h5,
 628  html[lang="ar"] h6,
 629  html[lang="ary"] h1,
 630  html[lang="ary"] h2,
 631  html[lang="ary"] h3,
 632  html[lang="ary"] h4,
 633  html[lang="ary"] h5,
 634  html[lang="ary"] h6,
 635  html[lang="azb"] h1,
 636  html[lang="azb"] h2,
 637  html[lang="azb"] h3,
 638  html[lang="azb"] h4,
 639  html[lang="azb"] h5,
 640  html[lang="azb"] h6,
 641  html[lang^="fa-"] h1,
 642  html[lang^="fa-"] h2,
 643  html[lang^="fa-"] h3,
 644  html[lang^="fa-"] h4,
 645  html[lang^="fa-"] h5,
 646  html[lang^="fa-"] h6,
 647  html[lang="haz"] h1,
 648  html[lang="haz"] h2,
 649  html[lang="haz"] h3,
 650  html[lang="haz"] h4,
 651  html[lang="haz"] h5,
 652  html[lang="haz"] h6,
 653  html[lang="ps"] h1,
 654  html[lang="ps"] h2,
 655  html[lang="ps"] h3,
 656  html[lang="ps"] h4,
 657  html[lang="ps"] h5,
 658  html[lang="ps"] h6,
 659  html[lang="ur"] h1,
 660  html[lang="ur"] h2,
 661  html[lang="ur"] h3,
 662  html[lang="ur"] h4,
 663  html[lang="ur"] h5,
 664  html[lang="ur"] h6 {
 665      font-weight: 700;
 666  }
 667  
 668  /* Typography for Chinese Font */
 669  
 670  html[lang^="zh-"] body,
 671  html[lang^="zh-"] button,
 672  html[lang^="zh-"] input,
 673  html[lang^="zh-"] select,
 674  html[lang^="zh-"] textarea {
 675      font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif;
 676  }
 677  
 678  html[lang="zh-CN"] body,
 679  html[lang="zh-CN"] button,
 680  html[lang="zh-CN"] input,
 681  html[lang="zh-CN"] select,
 682  html[lang="zh-CN"] textarea {
 683      font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeitiSC-Light, Arial, sans-serif;
 684  }
 685  
 686  html[lang^="zh-"] h1,
 687  html[lang^="zh-"] h2,
 688  html[lang^="zh-"] h3,
 689  html[lang^="zh-"] h4,
 690  html[lang^="zh-"] h5,
 691  html[lang^="zh-"] h6 {
 692      font-weight: 700;
 693  }
 694  
 695  /* Typography for Cyrillic Font */
 696  
 697  html[lang="bg-BG"] body,
 698  html[lang="bg-BG"] button,
 699  html[lang="bg-BG"] input,
 700  html[lang="bg-BG"] select,
 701  html[lang="bg-BG"] textarea,
 702  html[lang="ru-RU"] body,
 703  html[lang="ru-RU"] button,
 704  html[lang="ru-RU"] input,
 705  html[lang="ru-RU"] select,
 706  html[lang="ru-RU"] textarea,
 707  html[lang="uk"] body,
 708  html[lang="uk"] button,
 709  html[lang="uk"] input,
 710  html[lang="uk"] select,
 711  html[lang="uk"] textarea {
 712      font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
 713  }
 714  
 715  html[lang="bg-BG"] h1,
 716  html[lang="bg-BG"] h2,
 717  html[lang="bg-BG"] h3,
 718  html[lang="bg-BG"] h4,
 719  html[lang="bg-BG"] h5,
 720  html[lang="bg-BG"] h6,
 721  html[lang="ru-RU"] h1,
 722  html[lang="ru-RU"] h2,
 723  html[lang="ru-RU"] h3,
 724  html[lang="ru-RU"] h4,
 725  html[lang="ru-RU"] h5,
 726  html[lang="ru-RU"] h6,
 727  html[lang="uk"] h1,
 728  html[lang="uk"] h2,
 729  html[lang="uk"] h3,
 730  html[lang="uk"] h4,
 731  html[lang="uk"] h5,
 732  html[lang="uk"] h6 {
 733      font-weight: 700;
 734      line-height: 1.2;
 735  }
 736  
 737  /* Typography for Devanagari Font */
 738  
 739  html[lang="bn-BD"] body,
 740  html[lang="bn-BD"] button,
 741  html[lang="bn-BD"] input,
 742  html[lang="bn-BD"] select,
 743  html[lang="bn-BD"] textarea,
 744  html[lang="hi-IN"] body,
 745  html[lang="hi-IN"] button,
 746  html[lang="hi-IN"] input,
 747  html[lang="hi-IN"] select,
 748  html[lang="hi-IN"] textarea,
 749  html[lang="mr-IN"] body,
 750  html[lang="mr-IN"] button,
 751  html[lang="mr-IN"] input,
 752  html[lang="mr-IN"] select,
 753  html[lang="mr-IN"] textarea {
 754      font-family: Arial, sans-serif;
 755  }
 756  
 757  html[lang="bn-BD"] h1,
 758  html[lang="bn-BD"] h2,
 759  html[lang="bn-BD"] h3,
 760  html[lang="bn-BD"] h4,
 761  html[lang="bn-BD"] h5,
 762  html[lang="bn-BD"] h6,
 763  html[lang="hi-IN"] h1,
 764  html[lang="hi-IN"] h2,
 765  html[lang="hi-IN"] h3,
 766  html[lang="hi-IN"] h4,
 767  html[lang="hi-IN"] h5,
 768  html[lang="hi-IN"] h6,
 769  html[lang="mr-IN"] h1,
 770  html[lang="mr-IN"] h2,
 771  html[lang="mr-IN"] h3,
 772  html[lang="mr-IN"] h4,
 773  html[lang="mr-IN"] h5,
 774  html[lang="mr-IN"] h6 {
 775      font-weight: 700;
 776  }
 777  
 778  /* Typography for Greek Font */
 779  
 780  html[lang="el"] body,
 781  html[lang="el"] button,
 782  html[lang="el"] input,
 783  html[lang="el"] select,
 784  html[lang="el"] textarea {
 785      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 786  }
 787  
 788  html[lang="el"] h1,
 789  html[lang="el"] h2,
 790  html[lang="el"] h3,
 791  html[lang="el"] h4,
 792  html[lang="el"] h5,
 793  html[lang="el"] h6 {
 794      font-weight: 700;
 795      line-height: 1.3;
 796  }
 797  
 798  /* Typography for Gujarati Font */
 799  
 800  html[lang="gu-IN"] body,
 801  html[lang="gu-IN"] button,
 802  html[lang="gu-IN"] input,
 803  html[lang="gu-IN"] select,
 804  html[lang="gu-IN"] textarea {
 805      font-family: Arial, sans-serif;
 806  }
 807  
 808  html[lang="gu-IN"] h1,
 809  html[lang="gu-IN"] h2,
 810  html[lang="gu-IN"] h3,
 811  html[lang="gu-IN"] h4,
 812  html[lang="gu-IN"] h5,
 813  html[lang="gu-IN"] h6 {
 814      font-weight: 700;
 815  }
 816  
 817  /* Typography for Hebrew Font */
 818  
 819  html[lang="he-IL"] body,
 820  html[lang="he-IL"] button,
 821  html[lang="he-IL"] input,
 822  html[lang="he-IL"] select,
 823  html[lang="he-IL"] textarea {
 824      font-family: "Arial Hebrew", Arial, sans-serif;
 825  }
 826  
 827  html[lang="he-IL"] h1,
 828  html[lang="he-IL"] h2,
 829  html[lang="he-IL"] h3,
 830  html[lang="he-IL"] h4,
 831  html[lang="he-IL"] h5,
 832  html[lang="he-IL"] h6 {
 833      font-weight: 700;
 834  }
 835  
 836  /* Typography for Japanese Font */
 837  
 838  html[lang="ja"] body,
 839  html[lang="ja"] button,
 840  html[lang="ja"] input,
 841  html[lang="ja"] select,
 842  html[lang="ja"] textarea {
 843      font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
 844  }
 845  
 846  html[lang="ja"] h1,
 847  html[lang="ja"] h2,
 848  html[lang="ja"] h3,
 849  html[lang="ja"] h4,
 850  html[lang="ja"] h5,
 851  html[lang="ja"] h6 {
 852      font-weight: 700;
 853  }
 854  
 855  /* Typography for Korean font */
 856  
 857  html[lang="ko-KR"] body,
 858  html[lang="ko-KR"] button,
 859  html[lang="ko-KR"] input,
 860  html[lang="ko-KR"] select,
 861  html[lang="ko-KR"] textarea {
 862      font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
 863  }
 864  
 865  html[lang="ko-KR"] h1,
 866  html[lang="ko-KR"] h2,
 867  html[lang="ko-KR"] h3,
 868  html[lang="ko-KR"] h4,
 869  html[lang="ko-KR"] h5,
 870  html[lang="ko-KR"] h6 {
 871      font-weight: 600;
 872  }
 873  
 874  /* Typography for Thai Font */
 875  
 876  html[lang="th"] h1,
 877  html[lang="th"] h2,
 878  html[lang="th"] h3,
 879  html[lang="th"] h4,
 880  html[lang="th"] h5,
 881  html[lang="th"] h6 {
 882      line-height: 1.65;
 883      font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
 884  }
 885  
 886  html[lang="th"] body,
 887  html[lang="th"] button,
 888  html[lang="th"] input,
 889  html[lang="th"] select,
 890  html[lang="th"] textarea {
 891      line-height: 1.8;
 892      font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
 893  }
 894  
 895  /* Remove letter-spacing for all non-latin alphabets */
 896  
 897  html[lang="ar"] *,
 898  html[lang="ary"] *,
 899  html[lang="azb"] *,
 900  html[lang^="fa-"] *,
 901  html[lang="haz"] *,
 902  html[lang="ps"] *,
 903  html[lang="ur"] *,
 904  html[lang^="zh-"] *,
 905  html[lang="bg-BG"] *,
 906  html[lang="ru-RU"] *,
 907  html[lang="uk"] *,
 908  html[lang="bn-BD"] *,
 909  html[lang="hi-IN"] *,
 910  html[lang="mr-IN"] *,
 911  html[lang="el"] *,
 912  html[lang="gu-IN"] *,
 913  html[lang="he-IL"] *,
 914  html[lang="ja"] *,
 915  html[lang="ko-KR"] *,
 916  html[lang="th"] * {
 917      letter-spacing: 0 !important;
 918  }
 919  
 920  /*--------------------------------------------------------------
 921  6.0 Forms
 922  --------------------------------------------------------------*/
 923  
 924  label {
 925      color: #333;
 926      display: block;
 927      font-weight: 800;
 928      margin-bottom: 0.5em;
 929  }
 930  
 931  fieldset {
 932      margin-bottom: 1em;
 933  }
 934  
 935  input[type="text"],
 936  input[type="email"],
 937  input[type="url"],
 938  input[type="password"],
 939  input[type="search"],
 940  input[type="number"],
 941  input[type="tel"],
 942  input[type="range"],
 943  input[type="date"],
 944  input[type="month"],
 945  input[type="week"],
 946  input[type="time"],
 947  input[type="datetime"],
 948  input[type="datetime-local"],
 949  input[type="color"],
 950  textarea {
 951      color: #666;
 952      background: #fff;
 953      background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
 954      border: 1px solid #bbb;
 955      -webkit-border-radius: 3px;
 956      border-radius: 3px;
 957      display: block;
 958      padding: 0.7em;
 959      width: 100%;
 960  }
 961  
 962  input[type="text"]:focus,
 963  input[type="email"]:focus,
 964  input[type="url"]:focus,
 965  input[type="password"]:focus,
 966  input[type="search"]:focus,
 967  input[type="number"]:focus,
 968  input[type="tel"]:focus,
 969  input[type="range"]:focus,
 970  input[type="date"]:focus,
 971  input[type="month"]:focus,
 972  input[type="week"]:focus,
 973  input[type="time"]:focus,
 974  input[type="datetime"]:focus,
 975  input[type="datetime-local"]:focus,
 976  input[type="color"]:focus,
 977  textarea:focus {
 978      color: #222;
 979      border-color: #333;
 980  }
 981  
 982  select {
 983      border: 1px solid #bbb;
 984      -webkit-border-radius: 3px;
 985      border-radius: 3px;
 986      height: 3em;
 987      max-width: 100%;
 988  }
 989  
 990  input[type="radio"]:focus,
 991  input[type="checkbox"]:focus {
 992      outline: thin dotted #333;
 993  }
 994  
 995  input[type="radio"],
 996  input[type="checkbox"] {
 997      margin-right: 0.5em;
 998  }
 999  
1000  input[type="radio"] + label,
1001  input[type="checkbox"] + label {
1002      font-weight: 400;
1003  }
1004  
1005  button,
1006  input[type="button"],
1007  input[type="submit"] {
1008      background-color: #222;
1009      border: 0;
1010      -webkit-border-radius: 2px;
1011      border-radius: 2px;
1012      -webkit-box-shadow: none;
1013      box-shadow: none;
1014      color: #fff;
1015      cursor: pointer;
1016      display: inline-block;
1017      font-size: 14px;
1018      font-size: 0.875rem;
1019      font-weight: 800;
1020      line-height: 1;
1021      padding: 1em 2em;
1022      text-shadow: none;
1023      -webkit-transition: background 0.2s;
1024      transition: background 0.2s;
1025  }
1026  
1027  input + button,
1028  input + input[type="button"],
1029  input + input[type="submit"] {
1030      padding: 0.75em 2em;
1031  }
1032  
1033  button.secondary,
1034  input[type="reset"],
1035  input[type="button"].secondary,
1036  input[type="reset"].secondary,
1037  input[type="submit"].secondary {
1038      background-color: #ddd;
1039      color: #222;
1040  }
1041  
1042  :not( .mejs-button ) > button:hover,
1043  :not( .mejs-button ) > button:focus,
1044  input[type="button"]:hover,
1045  input[type="button"]:focus,
1046  input[type="submit"]:hover,
1047  input[type="submit"]:focus {
1048      background: #767676;
1049  }
1050  
1051  button.secondary:hover,
1052  button.secondary:focus,
1053  input[type="reset"]:hover,
1054  input[type="reset"]:focus,
1055  input[type="button"].secondary:hover,
1056  input[type="button"].secondary:focus,
1057  input[type="reset"].secondary:hover,
1058  input[type="reset"].secondary:focus,
1059  input[type="submit"].secondary:hover,
1060  input[type="submit"].secondary:focus {
1061      background: #bbb;
1062  }
1063  
1064  /* Placeholder text color -- selectors need to be separate to work. */
1065  ::-webkit-input-placeholder {
1066      color: #333;
1067      font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1068  }
1069  
1070  :-moz-placeholder {
1071      color: #333;
1072      font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1073  }
1074  
1075  ::-moz-placeholder {
1076      color: #333;
1077      font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1078      opacity: 1;
1079      /* Since FF19 lowers the opacity of the placeholder by default */
1080  }
1081  
1082  :-ms-input-placeholder {
1083      color: #333;
1084      font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
1085  }
1086  
1087  /*--------------------------------------------------------------
1088  7.0 Formatting
1089  --------------------------------------------------------------*/
1090  
1091  hr {
1092      background-color: #bbb;
1093      border: 0;
1094      height: 1px;
1095      margin-bottom: 1.5em;
1096  }
1097  
1098  /*--------------------------------------------------------------
1099  8.0 Lists
1100  --------------------------------------------------------------*/
1101  
1102  ul,
1103  ol {
1104      margin: 0 0 1.5em;
1105      padding: 0;
1106  }
1107  
1108  ul {
1109      list-style: disc;
1110  }
1111  
1112  ol {
1113      list-style: decimal;
1114  }
1115  
1116  li > ul,
1117  li > ol {
1118      margin-bottom: 0;
1119      margin-left: 1.5em;
1120  }
1121  
1122  dt {
1123      font-weight: 700;
1124  }
1125  
1126  dd {
1127      margin: 0 1.5em 1.5em;
1128  }
1129  
1130  /*--------------------------------------------------------------
1131  9.0 Tables
1132  --------------------------------------------------------------*/
1133  
1134  table {
1135      border-collapse: collapse;
1136      margin: 0 0 1.5em;
1137      width: 100%;
1138  }
1139  
1140  thead th {
1141      border-bottom: 2px solid #bbb;
1142      padding-bottom: 0.5em;
1143  }
1144  
1145  th {
1146      padding: 0.4em;
1147      text-align: left;
1148  }
1149  
1150  tr {
1151      border-bottom: 1px solid #eee;
1152  }
1153  
1154  td {
1155      padding: 0.4em;
1156  }
1157  
1158  th,
1159  td,
1160  th:first-child,
1161  td:first-child {
1162      padding-left: 0;
1163  }
1164  
1165  th:last-child,
1166  td:last-child {
1167      padding-right: 0;
1168  }
1169  
1170  /*--------------------------------------------------------------
1171  10.0 Links
1172  --------------------------------------------------------------*/
1173  
1174  a {
1175      color: #222;
1176      text-decoration: none;
1177  }
1178  
1179  a:focus {
1180      outline: thin dotted;
1181  }
1182  
1183  a:hover,
1184  a:active {
1185      color: #000;
1186      outline: 0;
1187  }
1188  
1189  /* Hover effects */
1190  
1191  .entry-content a,
1192  .entry-summary a,
1193  .comment-content a,
1194  .widget a,
1195  .site-footer .widget-area a,
1196  .posts-navigation a,
1197  .widget_authors a strong {
1198      -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
1199      box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
1200      -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1201      transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1202      transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
1203      transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
1204  }
1205  
1206  .entry-title a,
1207  .entry-meta a,
1208  .page-links a,
1209  .page-links a .page-number,
1210  .entry-footer a,
1211  .entry-footer .cat-links a,
1212  .entry-footer .tags-links a,
1213  .edit-link a,
1214  .post-navigation a,
1215  .logged-in-as a,
1216  .comment-navigation a,
1217  .comment-metadata a,
1218  .comment-metadata a.comment-edit-link,
1219  .comment-reply-link,
1220  a .nav-title,
1221  .pagination a,
1222  .comments-pagination a,
1223  .site-info a,
1224  .widget .widget-title a,
1225  .widget ul li a,
1226  .site-footer .widget-area ul li a,
1227  .site-footer .widget-area ul li a {
1228      -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
1229      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
1230      text-decoration: none;
1231      -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1232      transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
1233      transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
1234      transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
1235  }
1236  
1237  .entry-content a:focus,
1238  .entry-content a:hover,
1239  .entry-summary a:focus,
1240  .entry-summary a:hover,
1241  .comment-content a:focus,
1242  .comment-content a:hover,
1243  .widget a:focus,
1244  .widget a:hover,
1245  .site-footer .widget-area a:focus,
1246  .site-footer .widget-area a:hover,
1247  .posts-navigation a:focus,
1248  .posts-navigation a:hover,
1249  .comment-metadata a:focus,
1250  .comment-metadata a:hover,
1251  .comment-metadata a.comment-edit-link:focus,
1252  .comment-metadata a.comment-edit-link:hover,
1253  .comment-reply-link:focus,
1254  .comment-reply-link:hover,
1255  .widget_authors a:focus strong,
1256  .widget_authors a:hover strong,
1257  .entry-title a:focus,
1258  .entry-title a:hover,
1259  .entry-meta a:focus,
1260  .entry-meta a:hover,
1261  .page-links a:focus .page-number,
1262  .page-links a:hover .page-number,
1263  .entry-footer a:focus,
1264  .entry-footer a:hover,
1265  .entry-footer .cat-links a:focus,
1266  .entry-footer .cat-links a:hover,
1267  .entry-footer .tags-links a:focus,
1268  .entry-footer .tags-links a:hover,
1269  .post-navigation a:focus,
1270  .post-navigation a:hover,
1271  .pagination a:not(.prev):not(.next):focus,
1272  .pagination a:not(.prev):not(.next):hover,
1273  .comments-pagination a:not(.prev):not(.next):focus,
1274  .comments-pagination a:not(.prev):not(.next):hover,
1275  .logged-in-as a:focus,
1276  .logged-in-as a:hover,
1277  a:focus .nav-title,
1278  a:hover .nav-title,
1279  .edit-link a:focus,
1280  .edit-link a:hover,
1281  .site-info a:focus,
1282  .site-info a:hover,
1283  .widget .widget-title a:focus,
1284  .widget .widget-title a:hover,
1285  .widget ul li a:focus,
1286  .widget ul li a:hover {
1287      color: #000;
1288      -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
1289      box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
1290  }
1291  
1292  /* Fixes linked images */
1293  .entry-content a img,
1294  .comment-content a img,
1295  .widget a img {
1296      -webkit-box-shadow: 0 0 0 8px #fff;
1297      box-shadow: 0 0 0 8px #fff;
1298  }
1299  
1300  .post-navigation a:focus .icon,
1301  .post-navigation a:hover .icon {
1302      color: #222;
1303  }
1304  
1305  /*--------------------------------------------------------------
1306  11.0 Featured Image Hover
1307  --------------------------------------------------------------*/
1308  
1309  .post-thumbnail {
1310      margin-bottom: 1em;
1311  }
1312  
1313  .post-thumbnail a img {
1314      -webkit-backface-visibility: hidden;
1315      -webkit-transition: opacity 0.2s;
1316      transition: opacity 0.2s;
1317  }
1318  
1319  .post-thumbnail a:hover img,
1320  .post-thumbnail a:focus img {
1321      opacity: 0.7;
1322  }
1323  
1324  /*--------------------------------------------------------------
1325  12.0 Navigation
1326  --------------------------------------------------------------*/
1327  
1328  .navigation-top {
1329      background: #fff;
1330      border-bottom: 1px solid #eee;
1331      border-top: 1px solid #eee;
1332      font-size: 16px;
1333      font-size: 1rem;
1334      position: relative;
1335  }
1336  
1337  .navigation-top .wrap {
1338      max-width: 1000px;
1339      padding: 0;
1340  }
1341  
1342  .navigation-top a {
1343      color: #222;
1344      font-weight: 600;
1345      -webkit-transition: color 0.2s;
1346      transition: color 0.2s;
1347  }
1348  
1349  .navigation-top .current-menu-item > a,
1350  .navigation-top .current_page_item > a {
1351      color: #767676;
1352  }
1353  
1354  .main-navigation {
1355      clear: both;
1356      display: block;
1357  }
1358  
1359  .main-navigation ul {
1360      background: #fff;
1361      list-style: none;
1362      margin: 0;
1363      padding: 0 1.5em;
1364      text-align: left;
1365  }
1366  
1367  /* Hide the menu on small screens when JavaScript is available.
1368   * It only works with JavaScript.
1369   */
1370  
1371  .js .main-navigation ul,
1372  .main-navigation .menu-item-has-children > a > .icon,
1373  .main-navigation .page_item_has_children > a > .icon,
1374  .main-navigation ul a > .icon {
1375      display: none;
1376  }
1377  
1378  .main-navigation > div > ul {
1379      border-top: 1px solid #eee;
1380      padding: 0.75em 1.695em;
1381  }
1382  
1383  .js .main-navigation.toggled-on > div > ul {
1384      display: block;
1385  }
1386  
1387  .main-navigation ul ul {
1388      padding: 0 0 0 1.5em;
1389  }
1390  
1391  .main-navigation ul ul.toggled-on {
1392      display: block;
1393  }
1394  
1395  .main-navigation ul ul a {
1396      letter-spacing: 0;
1397      padding: 0.4em 0;
1398      position: relative;
1399      text-transform: none;
1400  }
1401  
1402  .main-navigation li {
1403      border-bottom: 1px solid #eee;
1404      position: relative;
1405  }
1406  
1407  .main-navigation li li,
1408  .main-navigation li:last-child {
1409      border: 0;
1410  }
1411  
1412  .main-navigation a {
1413      display: block;
1414      padding: 0.5em 0;
1415      text-decoration: none;
1416  }
1417  
1418  .main-navigation a:hover {
1419      color: #767676;
1420  }
1421  
1422  /* Menu toggle */
1423  
1424  .menu-toggle {
1425      background-color: transparent;
1426      border: 0;
1427      -webkit-box-shadow: none;
1428      box-shadow: none;
1429      color: #222;
1430      display: none;
1431      font-size: 14px;
1432      font-size: 0.875rem;
1433      font-weight: 800;
1434      line-height: 1.5;
1435      margin: 1px auto 2px;
1436      padding: 1em;
1437      text-shadow: none;
1438  }
1439  
1440  /* Display the menu toggle when JavaScript is available. */
1441  
1442  .js .menu-toggle {
1443      display: block;
1444  }
1445  
1446  .main-navigation.toggled-on ul.nav-menu {
1447      display: block;
1448  }
1449  
1450  .menu-toggle:hover,
1451  .menu-toggle:focus {
1452      background-color: transparent;
1453      -webkit-box-shadow: none;
1454      box-shadow: none;
1455  }
1456  
1457  .menu-toggle:focus {
1458      outline: thin solid;
1459  }
1460  
1461  .menu-toggle .icon {
1462      margin-right: 0.5em;
1463      top: -2px;
1464  }
1465  
1466  .toggled-on .menu-toggle .icon-bars,
1467  .menu-toggle .icon-close {
1468      display: none;
1469  }
1470  
1471  .toggled-on .menu-toggle .icon-close {
1472      display: inline-block;
1473  }
1474  
1475  /* Dropdown Toggle */
1476  
1477  .dropdown-toggle {
1478      background-color: transparent;
1479      border: 0;
1480      -webkit-box-shadow: none;
1481      box-shadow: none;
1482      color: #222;
1483      display: block;
1484      font-size: 16px;
1485      right: -0.5em;
1486      line-height: 1.5;
1487      margin: 0 auto;
1488      padding: 0.5em;
1489      position: absolute;
1490      text-shadow: none;
1491      top: 0;
1492  }
1493  
1494  .dropdown-toggle:hover,
1495  .dropdown-toggle:focus {
1496      background: transparent;
1497  }
1498  
1499  .dropdown-toggle:focus {
1500      outline: thin dotted;
1501  }
1502  
1503  .dropdown-toggle.toggled-on .icon {
1504      -ms-transform: rotate(-180deg); /* IE 9 */
1505      -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
1506      transform: rotate(-180deg);
1507  }
1508  
1509  /* Scroll down arrow */
1510  
1511  .site-header .menu-scroll-down {
1512      display: none;
1513  }
1514  
1515  /*--------------------------------------------------------------
1516  13.0 Layout
1517  --------------------------------------------------------------*/
1518  
1519  html {
1520      -webkit-box-sizing: border-box;
1521      -moz-box-sizing: border-box;
1522      box-sizing: border-box;
1523  }
1524  
1525  *,
1526  *:before,
1527  *:after {
1528      /* 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/ */
1529      -webkit-box-sizing: inherit;
1530      -moz-box-sizing: inherit;
1531      box-sizing: inherit;
1532  }
1533  
1534  body {
1535      background: #fff;
1536      /* Fallback for when there is no custom background color defined. */
1537  }
1538  
1539  #page {
1540      position: relative;
1541      word-wrap: break-word;
1542  }
1543  
1544  .wrap {
1545      margin-left: auto;
1546      margin-right: auto;
1547      max-width: 700px;
1548      padding-left: 2em;
1549      padding-right: 2em;
1550  }
1551  
1552  .wrap:after {
1553      clear: both;
1554      content: "";
1555      display: block;
1556  }
1557  
1558  /*--------------------------------------------------------------
1559  13.1 Header
1560  --------------------------------------------------------------*/
1561  
1562  #masthead .wrap {
1563      position: relative;
1564  }
1565  
1566  .site-header {
1567      background-color: #fafafa;
1568      position: relative;
1569  }
1570  
1571  /* Site branding */
1572  
1573  .site-branding {
1574      padding: 1em 0;
1575      position: relative;
1576      -webkit-transition: margin-bottom 0.2s;
1577      transition: margin-bottom 0.2s;
1578      z-index: 3;
1579  }
1580  
1581  .site-branding a {
1582      text-decoration: none;
1583      -webkit-transition: opacity 0.2s;
1584      transition: opacity 0.2s;
1585  }
1586  
1587  .site-branding a:hover,
1588  .site-branding a:focus {
1589      opacity: 0.7;
1590  }
1591  
1592  .site-title {
1593      clear: none;
1594      font-size: 24px;
1595      font-size: 1.5rem;
1596      font-weight: 800;
1597      line-height: 1.25;
1598      letter-spacing: 0.08em;
1599      margin: 0;
1600      padding: 0;
1601      text-transform: uppercase;
1602  }
1603  
1604  .site-title,
1605  .site-title a {
1606      color: #222;
1607      opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
1608  }
1609  
1610  body.has-header-image .site-title,
1611  body.has-header-video .site-title,
1612  body.has-header-image .site-title a,
1613  body.has-header-video .site-title a {
1614      color: #fff;
1615  }
1616  
1617  .site-description {
1618      color: #666;
1619      font-size: 13px;
1620      font-size: 0.8125rem;
1621      margin-bottom: 0;
1622  }
1623  
1624  body.has-header-image .site-description,
1625  body.has-header-video .site-description {
1626      color: #fff;
1627      opacity: 0.8;
1628  }
1629  
1630  .custom-logo-link {
1631      display: inline-block;
1632      padding-right: 1em;
1633      vertical-align: middle;
1634      width: auto;
1635  }
1636  
1637  .custom-logo-link img {
1638      display: inline-block;
1639      max-height: 80px;
1640      width: auto;
1641  }
1642  
1643  body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
1644  body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
1645      max-height: 200px;
1646      max-width: 100%;
1647  }
1648  
1649  .custom-logo-link a:hover,
1650  .custom-logo-link a:focus {
1651      opacity: 0.9;
1652  }
1653  
1654  body:not(.title-tagline-hidden) .site-branding-text {
1655      display: inline-block;
1656      max-width: 100%;
1657      vertical-align: middle;
1658  }
1659  
1660  .custom-header {
1661      position: relative;
1662  }
1663  
1664  .has-header-image.twentyseventeen-front-page .custom-header,
1665  .has-header-video.twentyseventeen-front-page .custom-header,
1666  .has-header-image.home.blog .custom-header,
1667  .has-header-video.home.blog .custom-header {
1668      display: table;
1669      height: 300px;
1670      height: 75vh;
1671      width: 100%;
1672  }
1673  
1674  .custom-header-media {
1675      bottom: 0;
1676      left: 0;
1677      overflow: hidden;
1678      position: absolute;
1679      right: 0;
1680      top: 0;
1681      width: 100%;
1682  }
1683  
1684  .custom-header-media:before {
1685      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
1686      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 */
1687      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 */
1688      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+ */
1689      bottom: 0;
1690      content: "";
1691      display: block;
1692      height: 100%;
1693      left: 0;
1694      position: absolute;
1695      right: 0;
1696      z-index: 2;
1697  }
1698  
1699  .has-header-image .custom-header-media img,
1700  .has-header-video .custom-header-media video,
1701  .has-header-video .custom-header-media iframe {
1702      position: fixed;
1703      height: auto;
1704      left: 50%;
1705      max-width: 1000%;
1706      min-height: 100%;
1707      min-width: 100%;
1708      min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
1709      width: auto;
1710      top: 50%;
1711      padding-bottom: 1px; /* Prevent header from extending beyond the footer */
1712      -ms-transform: translateX(-50%) translateY(-50%);
1713      -moz-transform: translateX(-50%) translateY(-50%);
1714      -webkit-transform: translateX(-50%) translateY(-50%);
1715      transform: translateX(-50%) translateY(-50%);
1716  }
1717  
1718  .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
1719      background-color: rgba(34, 34, 34, 0.5);
1720      border: 1px solid rgba(255, 255, 255, 0.6);
1721      color: rgba(255, 255, 255, 0.6);
1722      height: 45px;
1723      overflow: hidden;
1724      padding: 0;
1725      position: fixed;
1726      right: 30px;
1727      top: 30px;
1728      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1729      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
1730      width: 45px;
1731  }
1732  
1733  .wp-custom-header .wp-custom-header-video-button:hover,
1734  .wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */
1735      border-color: rgba(255, 255, 255, 0.8);
1736      background-color: rgba(34, 34, 34, 0.8);
1737      color: #fff;
1738  }
1739  
1740  .admin-bar .wp-custom-header-video-button {
1741      top: 62px;
1742  }
1743  
1744  .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
1745      bottom: 0;
1746      position: absolute;
1747      top: auto;
1748      -ms-transform: translateX(-50%) translateY(0);
1749      -moz-transform: translateX(-50%) translateY(0);
1750      -webkit-transform: translateX(-50%) translateY(0);
1751      transform: translateX(-50%) translateY(0);
1752  }
1753  
1754  /* For browsers that support 'object-fit' */
1755  @supports ( object-fit: cover ) {
1756      .has-header-image .custom-header-media img,
1757      .has-header-video .custom-header-media video,
1758      .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
1759          height: 100%;
1760          left: 0;
1761          -o-object-fit: cover;
1762          object-fit: cover;
1763          top: 0;
1764          -ms-transform: none;
1765          -moz-transform: none;
1766          -webkit-transform: none;
1767          transform: none;
1768          width: 100%;
1769      }
1770  }
1771  
1772  /* Hides div in Customizer preview when header images or videos change. */
1773  
1774  body:not(.has-header-image):not(.has-header-video) .custom-header-media {
1775      display: none;
1776  }
1777  
1778  .has-header-image.twentyseventeen-front-page .site-branding,
1779  .has-header-video.twentyseventeen-front-page .site-branding,
1780  .has-header-image.home.blog .site-branding,
1781  .has-header-video.home.blog .site-branding {
1782      display: table-cell;
1783      height: 100%;
1784      vertical-align: bottom;
1785  }
1786  
1787  /*--------------------------------------------------------------
1788  13.2 Front Page
1789  --------------------------------------------------------------*/
1790  
1791  .twentyseventeen-front-page .site-content {
1792      padding: 0;
1793  }
1794  
1795  .twentyseventeen-panel {
1796      overflow: hidden;
1797      position: relative;
1798  }
1799  
1800  .panel-image {
1801      background-position: center center;
1802      background-repeat: no-repeat;
1803      -webkit-background-size: cover;
1804      background-size: cover;
1805      position: relative;
1806  }
1807  
1808  .panel-image:before {
1809      /* 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 */
1810      background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
1811      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
1812      background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
1813      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
1814      bottom: 0;
1815      content: "";
1816      left: 0;
1817      right: 0;
1818      position: absolute;
1819      top: 100px;
1820  }
1821  
1822  .twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
1823      border-top: 1px solid #ddd;
1824  }
1825  
1826  .panel-content {
1827      position: relative;
1828  }
1829  
1830  .panel-content .wrap {
1831      padding-bottom: 0.5em;
1832      padding-top: 1.75em;
1833  }
1834  
1835  /* Panel edit link */
1836  
1837  .twentyseventeen-panel .edit-link {
1838      display: block;
1839      margin: 0.3em 0 0;
1840  }
1841  
1842  .twentyseventeen-panel .entry-header .edit-link {
1843      font-size: 14px;
1844      font-size: 0.875rem;
1845  }
1846  
1847  /* Front Page - Recent Posts */
1848  
1849  .twentyseventeen-front-page .panel-content .recent-posts article {
1850      border: 0;
1851      color: #333;
1852      margin-bottom: 3em;
1853  }
1854  
1855  .recent-posts .entry-header {
1856      margin-bottom: 1.2em;
1857  }
1858  
1859  .page .panel-content .recent-posts .entry-title {
1860      font-size: 20px;
1861      font-size: 1.25rem;
1862      font-weight: 300;
1863      letter-spacing: 0;
1864      text-transform: none;
1865  }
1866  
1867  .twentyseventeen-panel .recent-posts .entry-header .edit-link {
1868      color: #222;
1869      display: inline-block;
1870      font-size: 11px;
1871      font-size: 0.6875rem;
1872      margin-left: 1em;
1873  }
1874  
1875  /*--------------------------------------------------------------
1876  13.3 Regular Content
1877  --------------------------------------------------------------*/
1878  
1879  .site-content-contain {
1880      background-color: #fff;
1881      position: relative;
1882  }
1883  
1884  .site-content {
1885      padding: 2.5em 0 0;
1886  }
1887  
1888  /*--------------------------------------------------------------
1889  13.4 Posts
1890  --------------------------------------------------------------*/
1891  
1892  /* Post Landing Page */
1893  
1894  .sticky {
1895      position: relative;
1896  }
1897  
1898  .post:not(.sticky) .icon-thumb-tack {
1899      display: none;
1900  }
1901  
1902  .sticky .icon-thumb-tack {
1903      display: block;
1904      height: 18px;
1905      left: -1.5em;
1906      position: absolute;
1907      top: 1.65em;
1908      width: 20px;
1909  }
1910  
1911  .page .panel-content .entry-title,
1912  .page-title,
1913  body.page:not(.twentyseventeen-front-page) .entry-title {
1914      color: #222;
1915      font-size: 14px;
1916      font-size: 0.875rem;
1917      font-weight: 800;
1918      letter-spacing: 0.14em;
1919      text-transform: uppercase;
1920  }
1921  
1922  .entry-header .entry-title {
1923      margin-bottom: 0.25em;
1924  }
1925  
1926  .entry-title a {
1927      color: #333;
1928      text-decoration: none;
1929      margin-left: -2px;
1930  }
1931  
1932  .entry-title:not(:first-child) {
1933      padding-top: 0;
1934  }
1935  
1936  .entry-meta {
1937      color: #767676;
1938      font-size: 11px;
1939      font-size: 0.6875rem;
1940      font-weight: 800;
1941      letter-spacing: 0.1818em;
1942      padding-bottom: 0.25em;
1943      text-transform: uppercase;
1944  }
1945  
1946  .entry-meta a {
1947      color: #767676;
1948  }
1949  
1950  .byline,
1951  .updated:not(.published) {
1952      display: none;
1953  }
1954  
1955  .single .byline,
1956  .group-blog .byline {
1957      display: inline;
1958  }
1959  
1960  .pagination,
1961  .comments-pagination {
1962      border-top: 1px solid #eee;
1963      font-size: 14px;
1964      font-size: 0.875rem;
1965      font-weight: 800;
1966      padding: 2em 0 3em;
1967      text-align: center;
1968  }
1969  
1970  .pagination .icon,
1971  .comments-pagination .icon {
1972      width: 0.666666666em;
1973      height: 0.666666666em;
1974  }
1975  
1976  .comments-pagination {
1977      border: 0;
1978  }
1979  
1980  .page-numbers {
1981      display: none;
1982      padding: 0.5em 0.75em;
1983  }
1984  
1985  .page-numbers.current {
1986      color: #767676;
1987      display: inline-block;
1988  }
1989  
1990  .page-numbers.current .screen-reader-text {
1991      clip: auto;
1992      height: auto;
1993      overflow: auto;
1994      position: relative !important;
1995      width: auto;
1996  }
1997  
1998  .prev.page-numbers,
1999  .next.page-numbers {
2000      background-color: #ddd;
2001      -webkit-border-radius: 2px;
2002      border-radius: 2px;
2003      display: inline-block;
2004      font-size: 24px;
2005      font-size: 1.5rem;
2006      line-height: 1;
2007      padding: 0.25em 0.5em 0.4em;
2008  }
2009  
2010  .prev.page-numbers,
2011  .next.page-numbers {
2012      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2013      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2014  }
2015  
2016  .prev.page-numbers:focus,
2017  .prev.page-numbers:hover,
2018  .next.page-numbers:focus,
2019  .next.page-numbers:hover {
2020      background-color: #767676;
2021      color: #fff;
2022  }
2023  
2024  .prev.page-numbers {
2025      float: left;
2026  }
2027  
2028  .next.page-numbers {
2029      float: right;
2030  }
2031  
2032  /* Aligned blockquotes */
2033  
2034  .entry-content blockquote.alignleft,
2035  .entry-content blockquote.alignright {
2036      color: #666;
2037      font-size: 13px;
2038      font-size: 0.8125rem;
2039      width: 48%;
2040  }
2041  
2042  /* Blog landing, search, archives */
2043  
2044  .blog .site-main > article,
2045  .archive .site-main > article,
2046  .search .site-main > article {
2047      padding-bottom: 2em;
2048  }
2049  
2050  body:not(.twentyseventeen-front-page) .entry-header {
2051      padding: 1em 0;
2052  }
2053  
2054  body:not(.twentyseventeen-front-page) .entry-header,
2055  body:not(.twentyseventeen-front-page) .entry-content,
2056  body:not(.twentyseventeen-front-page) #comments {
2057      margin-left: auto;
2058      margin-right: auto;
2059  }
2060  
2061  body:not(.twentyseventeen-front-page) .entry-header {
2062      padding-top: 0;
2063  }
2064  
2065  .blog .entry-meta a.post-edit-link,
2066  .archive .entry-meta a.post-edit-link,
2067  .search .entry-meta a.post-edit-link {
2068      color: #222;
2069      display: inline-block;
2070      margin-left: 1em;
2071      white-space: nowrap;
2072  }
2073  
2074  .search .page .entry-meta a.post-edit-link {
2075      margin-left: 0;
2076      white-space: nowrap;
2077  }
2078  
2079  .taxonomy-description {
2080      color: #666;
2081      font-size: 13px;
2082      font-size: 0.8125rem;
2083  }
2084  
2085  /* More tag */
2086  
2087  .entry-content .more-link:before {
2088      content: "";
2089      display: block;
2090      margin-top: 1.5em;
2091  }
2092  
2093  /* Single Post */
2094  
2095  .single-post:not(.has-sidebar) #primary,
2096  .page.page-one-column:not(.twentyseventeen-front-page) #primary,
2097  .archive.page-one-column:not(.has-sidebar) .page-header,
2098  .archive.page-one-column:not(.has-sidebar) #primary {
2099      margin-left: auto;
2100      margin-right: auto;
2101      max-width: 740px;
2102  }
2103  
2104  .single-featured-image-header {
2105      background-color: #fafafa;
2106      border-bottom: 1px solid #eee;
2107  }
2108  
2109  .single-featured-image-header img {
2110      display: block;
2111      margin: auto;
2112  }
2113  
2114  .page-links {
2115      font-size: 14px;
2116      font-size: 0.875rem;
2117      font-weight: 800;
2118      padding: 2em 0 3em;
2119  }
2120  
2121  .page-links .page-number {
2122      color: #767676;
2123      display: inline-block;
2124      padding: 0.5em 1em;
2125  }
2126  
2127  .page-links a {
2128      display: inline-block;
2129  }
2130  
2131  .page-links a .page-number {
2132      color: #222;
2133  }
2134  
2135  /* Entry footer */
2136  
2137  .entry-footer {
2138      border-bottom: 1px solid #eee;
2139      border-top: 1px solid #eee;
2140      margin-top: 2em;
2141      padding: 2em 0;
2142  }
2143  
2144  .entry-footer .cat-links,
2145  .entry-footer .tags-links {
2146      display: block;
2147      font-size: 11px;
2148      font-size: 0.6875rem;
2149      font-weight: 800;
2150      letter-spacing: 0.1818em;
2151      padding-left: 2.5em;
2152      position: relative;
2153      text-transform: uppercase;
2154  }
2155  
2156  .entry-footer .cat-links + .tags-links {
2157      margin-top: 1em;
2158  }
2159  
2160  .entry-footer .cat-links a,
2161  .entry-footer .tags-links a {
2162      color: #333;
2163  }
2164  
2165  .entry-footer .cat-links .icon,
2166  .entry-footer .tags-links .icon {
2167      color: #767676;
2168      left: 0;
2169      margin-right: 0.5em;
2170      position: absolute;
2171      top: 2px;
2172  }
2173  
2174  .entry-footer .edit-link {
2175      display: inline-block;
2176  }
2177  
2178  .entry-footer .edit-link a.post-edit-link {
2179      background-color: #222;
2180      -webkit-border-radius: 2px;
2181      border-radius: 2px;
2182      -webkit-box-shadow: none;
2183      box-shadow: none;
2184      color: #fff;
2185      display: inline-block;
2186      font-size: 14px;
2187      font-size: 0.875rem;
2188      font-weight: 800;
2189      margin-top: 2em;
2190      padding: 0.7em 2em;
2191      -webkit-transition: background-color 0.2s ease-in-out;
2192      transition: background-color 0.2s ease-in-out;
2193      white-space: nowrap;
2194  }
2195  
2196  .entry-footer .edit-link a.post-edit-link:hover,
2197  .entry-footer .edit-link a.post-edit-link:focus {
2198      background-color: #767676;
2199  }
2200  
2201  /* Post Formats */
2202  
2203  .blog .format-status .entry-title,
2204  .archive .format-status .entry-title,
2205  .blog .format-aside .entry-title,
2206  .archive .format-aside .entry-title {
2207      display: none;
2208  }
2209  
2210  .format-quote blockquote {
2211      color: #333;
2212      font-size: 20px;
2213      font-size: 1.25rem;
2214      font-weight: 300;
2215      overflow: visible;
2216      position: relative;
2217  }
2218  
2219  .format-quote blockquote .icon {
2220      display: block;
2221      height: 20px;
2222      left: -1.25em;
2223      position: absolute;
2224      top: 0.4em;
2225      -webkit-transform: scale(-1, 1);
2226      -ms-transform: scale(-1, 1);
2227      transform: scale(-1, 1);
2228      width: 20px;
2229  }
2230  
2231  /* Post Navigation */
2232  
2233  .post-navigation {
2234      font-weight: 800;
2235      margin: 3em 0;
2236  }
2237  
2238  .post-navigation .nav-links {
2239      padding: 1em 0;
2240  }
2241  
2242  .nav-subtitle {
2243      background: transparent;
2244      color: #767676;
2245      display: block;
2246      font-size: 11px;
2247      font-size: 0.6875rem;
2248      letter-spacing: 0.1818em;
2249      margin-bottom: 1em;
2250      text-transform: uppercase;
2251  }
2252  
2253  .nav-title {
2254      color: #333;
2255      font-size: 15px;
2256      font-size: 0.9375rem;
2257  }
2258  
2259  .post-navigation .nav-next {
2260      margin-top: 1.5em;
2261  }
2262  
2263  .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
2264      margin-right: 0.5em;
2265  }
2266  
2267  .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
2268      margin-left: 0.5em;
2269  }
2270  
2271  /*--------------------------------------------------------------
2272  13.5 Pages
2273  --------------------------------------------------------------*/
2274  
2275  .page-header {
2276      padding-bottom: 2em;
2277  }
2278  
2279  .page .entry-header .edit-link {
2280      font-size: 14px;
2281      font-size: 0.875rem;
2282  }
2283  
2284  .search .page .entry-header .edit-link {
2285      font-size: 11px;
2286      font-size: 0.6875rem;
2287  }
2288  
2289  .page-links {
2290      clear: both;
2291      margin: 0 0 1.5em;
2292  }
2293  
2294  .page:not(.home) #content {
2295      padding-bottom: 1.5em;
2296  }
2297  
2298  /* 404 page */
2299  
2300  .error404 .page-content {
2301      padding-bottom: 4em;
2302  }
2303  
2304  .error404 .page-content .search-form,
2305  .search .page-content .search-form {
2306      margin-bottom: 3em;
2307  }
2308  
2309  /*--------------------------------------------------------------
2310  13.6 Footer
2311  --------------------------------------------------------------*/
2312  
2313  .site-footer {
2314      border-top: 1px solid #eee;
2315  }
2316  
2317  .site-footer .wrap {
2318      padding-bottom: 1.5em;
2319      padding-top: 2em;
2320  }
2321  
2322  /* Footer widgets */
2323  
2324  .site-footer .widget-area {
2325      padding-bottom: 2em;
2326      padding-top: 2em;
2327  }
2328  
2329  /* Social nav */
2330  
2331  .social-navigation {
2332      font-size: 16px;
2333      font-size: 1rem;
2334      margin-bottom: 1em;
2335  }
2336  
2337  .social-navigation ul {
2338      list-style: none;
2339      margin-bottom: 0;
2340      margin-left: 0;
2341  }
2342  
2343  .social-navigation li {
2344      display: inline;
2345  }
2346  
2347  .social-navigation a {
2348      background-color: #767676;
2349      -webkit-border-radius: 40px;
2350      border-radius: 40px;
2351      color: #fff;
2352      display: inline-block;
2353      height: 40px;
2354      margin: 0 1em 0.5em 0;
2355      text-align: center;
2356      width: 40px;
2357  }
2358  
2359  .social-navigation a:hover,
2360  .social-navigation a:focus {
2361      background-color: #333;
2362  }
2363  
2364  .social-navigation .icon {
2365      height: 16px;
2366      top: 12px;
2367      width: 16px;
2368      vertical-align: top;
2369  }
2370  
2371  /* Site info */
2372  
2373  .site-info {
2374      font-size: 14px;
2375      font-size: 0.875rem;
2376      margin-bottom: 1em;
2377  }
2378  
2379  .site-info a {
2380      color: #666;
2381  }
2382  
2383  .site-info .sep {
2384      margin: 0;
2385      display: block;
2386      visibility: hidden;
2387      height: 0;
2388      width: 100%;
2389  }
2390  
2391  .site-info span[role=separator] {
2392      padding: 0 0.2em 0 0.4em;
2393  }
2394  
2395  .site-info span[role=separator]::before {
2396      content: '\002f';
2397  }
2398  
2399  /*--------------------------------------------------------------
2400  14.0 Comments
2401  --------------------------------------------------------------*/
2402  
2403  #comments {
2404      clear: both;
2405      padding: 2em 0 0.5em;
2406  }
2407  
2408  .comments-title {
2409      font-size: 20px;
2410      font-size: 1.25rem;
2411      margin-bottom: 1.5em;
2412  }
2413  
2414  .comment-list,
2415  .comment-list .children {
2416      list-style: none;
2417      margin: 0;
2418      padding: 0;
2419  }
2420  
2421  .comment-list li:before {
2422      display: none;
2423  }
2424  
2425  .comment-body {
2426      margin-left: 65px;
2427  }
2428  
2429  .comment-author {
2430      font-size: 16px;
2431      font-size: 1rem;
2432      margin-bottom: 0.4em;
2433      position: relative;
2434      z-index: 2;
2435  }
2436  
2437  .comment-author .avatar {
2438      height: 50px;
2439      left: -65px;
2440      position: absolute;
2441      width: 50px;
2442  }
2443  
2444  .comment-author .says {
2445      display: none;
2446  }
2447  
2448  .comment-meta {
2449      margin-bottom: 1.5em;
2450  }
2451  
2452  .comment-metadata {
2453      color: #767676;
2454      font-size: 10px;
2455      font-size: 0.625rem;
2456      font-weight: 800;
2457      letter-spacing: 0.1818em;
2458      text-transform: uppercase;
2459  }
2460  
2461  .comment-metadata a {
2462      color: #767676;
2463  }
2464  
2465  .comment-metadata a.comment-edit-link {
2466      color: #222;
2467      margin-left: 1em;
2468  }
2469  
2470  .comment-body {
2471      color: #333;
2472      font-size: 14px;
2473      font-size: 0.875rem;
2474      margin-bottom: 4em;
2475  }
2476  
2477  .comment-reply-link {
2478      font-weight: 800;
2479      position: relative;
2480  }
2481  
2482  .comment-reply-link .icon {
2483      color: #222;
2484      left: -2em;
2485      height: 1em;
2486      position: absolute;
2487      top: 0;
2488      width: 1em;
2489  }
2490  
2491  .comment-reply-title small {
2492      margin-left: 0.5em;
2493  }
2494  
2495  .children .comment-author .avatar {
2496      height: 30px;
2497      left: -45px;
2498      width: 30px;
2499  }
2500  
2501  .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
2502      border: 1px solid #333;
2503      padding: 2px;
2504  }
2505  
2506  .no-comments,
2507  .comment-awaiting-moderation {
2508      color: #767676;
2509      font-size: 14px;
2510      font-size: 0.875rem;
2511      font-style: italic;
2512  }
2513  
2514  .comments-pagination {
2515      margin: 2em 0 3em;
2516  }
2517  
2518  .form-submit {
2519      text-align: right;
2520  }
2521  
2522  .comment-form #wp-comment-cookies-consent {
2523      margin: 0 10px 0 0;
2524  }
2525  
2526  .comment-form .comment-form-cookies-consent label {
2527      display: inline;
2528  }
2529  
2530  /*--------------------------------------------------------------
2531  15.0 Widgets
2532  --------------------------------------------------------------*/
2533  
2534  #secondary {
2535      padding: 1em 0 2em;
2536  }
2537  
2538  .widget {
2539      padding-bottom: 3em;
2540  }
2541  
2542  h2.widget-title {
2543      color: #222;
2544      font-size: 13px;
2545      font-size: 0.8125rem;
2546      font-weight: 800;
2547      letter-spacing: 0.1818em;
2548      margin-bottom: 1.5em;
2549      text-transform: uppercase;
2550  }
2551  
2552  .widget-title a {
2553      color: inherit;
2554  }
2555  
2556  /* widget forms */
2557  
2558  .widget select {
2559      width: 100%;
2560  }
2561  
2562  
2563  /* widget lists */
2564  
2565  .widget ul {
2566      list-style: none;
2567      margin: 0;
2568  }
2569  
2570  .widget ul li,
2571  .widget ol li {
2572      border-bottom: 1px solid #ddd;
2573      border-top: 1px solid #ddd;
2574      padding: 0.5em 0;
2575  }
2576  
2577  .widget:not(.widget_tag_cloud) ul li + li {
2578      margin-top: -1px;
2579  }
2580  
2581  .widget ul li ul {
2582      margin: 0 0 -1px;
2583      padding: 0;
2584      position: relative;
2585  }
2586  
2587  .widget ul li li {
2588      border: 0;
2589      padding-left: 24px;
2590      padding-left: 1.5rem;
2591  }
2592  
2593  /* Widget lists of links */
2594  
2595  .widget_top-posts ul li ul,
2596  .widget_rss_links ul li ul,
2597  .widget-grofile ul.grofile-links li ul,
2598  .widget_pages ul li ul,
2599  .widget_meta ul li ul {
2600      bottom: 0;
2601  }
2602  
2603  .widget_nav_menu ul li li,
2604  .widget_top-posts ul li,
2605  .widget_top-posts ul li li,
2606  .widget_rss_links ul li,
2607  .widget_rss_links ul li li,
2608  .widget-grofile ul.grofile-links li,
2609  .widget-grofile ul.grofile-links li li {
2610      padding-bottom: 0.25em;
2611      padding-top: 0.25em;
2612  }
2613  
2614  .widget_rss ul li {
2615      padding-bottom: 1em;
2616      padding-top: 1em;
2617  }
2618  
2619  /* Widget markup */
2620  
2621  .widget .post-date,
2622  .widget .rss-date {
2623      font-size: 0.81em;
2624  }
2625  
2626  /* Text widget */
2627  
2628  .widget_text {
2629      word-wrap: break-word;
2630  }
2631  
2632  .widget_text ul {
2633      list-style: disc;
2634      margin: 0 0 1.5em 1.5em;
2635  }
2636  
2637  .widget_text ol {
2638      list-style: decimal;
2639  }
2640  
2641  .widget_text ul li,
2642  .widget_text ol li {
2643      border: none;
2644  }
2645  
2646  .widget_text ul li:last-child,
2647  .widget_text ol li:last-child {
2648      padding-bottom: 0;
2649  }
2650  
2651  .widget_text ul li ul {
2652      margin: 0 0 0 1.5em;
2653  }
2654  
2655  .widget_text ul li li {
2656      padding-left: 0;
2657      padding-right: 0;
2658  }
2659  
2660  .widget_text ol li {
2661      list-style-position: inside;
2662  }
2663  
2664  .widget_text ol li + li {
2665      margin-top: -1px;
2666  }
2667  
2668  /* RSS Widget */
2669  
2670  .widget_rss .widget-title .rsswidget:first-child:not(.rss-widget-title) {
2671      float: right;
2672  }
2673  
2674  .widget_rss .widget-title .rsswidget:first-child:hover {
2675      background-color: transparent;
2676  }
2677  
2678  .widget_rss .widget-title .rsswidget:first-child img {
2679      display: block;
2680  }
2681  
2682  .widget_rss ul li {
2683      padding: 2.125em 0;
2684  }
2685  
2686  .widget_rss ul li:first-child {
2687      border-top: none;
2688      padding-top: 0;
2689  }
2690  
2691  .widget_rss li .rsswidget {
2692      font-size: 22px;
2693      font-size: 1.375rem;
2694      font-weight: 300;
2695      line-height: 1.4;
2696  }
2697  
2698  .widget_rss .rss-date,
2699  .widget_rss li cite {
2700      color: #767676;
2701      display: block;
2702      font-size: 10px;
2703      font-size: 0.625rem;
2704      font-style: normal;
2705      font-weight: 800;
2706      letter-spacing: 0.18em;
2707      line-height: 1.5;
2708      text-transform: uppercase;
2709  }
2710  
2711  .widget_rss .rss-date {
2712      margin: 0.5em 0 1.5em;
2713      padding: 0;
2714  }
2715  
2716  .widget_rss .rssSummary {
2717      margin-bottom: 0.5em;
2718  }
2719  
2720  /* Contact Info Widget */
2721  
2722  .widget_contact_info .contact-map {
2723      margin-bottom: 0.5em;
2724  }
2725  
2726  /* Gravatar */
2727  
2728  .widget-grofile h4 {
2729      font-size: 16px;
2730      font-size: 1rem;
2731      margin-bottom: 0;
2732  }
2733  
2734  /* Recent Comments */
2735  
2736  .widget_recent_comments table,
2737  .widget_recent_comments th,
2738  .widget_recent_comments td {
2739      border: 0;
2740  }
2741  
2742  /* Recent Posts widget */
2743  
2744  .widget_recent_entries .post-date {
2745      display: block;
2746  }
2747  
2748  /* Search */
2749  
2750  .search-form {
2751      position: relative;
2752  }
2753  
2754  .search-form .search-submit {
2755      bottom: 3px;
2756      padding: 0.5em 1em;
2757      position: absolute;
2758      right: 3px;
2759      top: 3px;
2760  }
2761  
2762  .search-form .search-submit .icon {
2763      height: 24px;
2764      top: -2px;
2765      width: 24px;
2766  }
2767  
2768  /* Tag cloud widget */
2769  
2770  .tagcloud ul li {
2771      float: left;
2772      border-top: 0;
2773      border-bottom: 0;
2774      padding: 0;
2775      margin: 4px 4px 0 0;
2776  }
2777  
2778  .tagcloud,
2779  .widget_tag_cloud,
2780  .wp_widget_tag_cloud {
2781      line-height: 1.5;
2782  }
2783  
2784  .widget .tagcloud a,
2785  .widget.widget_tag_cloud a,
2786  .wp_widget_tag_cloud a {
2787      border: 1px solid #ddd;
2788      -webkit-box-shadow: none;
2789      box-shadow: none;
2790      display: block;
2791      padding: 4px 10px 5px;
2792      position: relative;
2793      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2794      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2795      width: auto;
2796      word-wrap: break-word;
2797      z-index: 0;
2798  }
2799  
2800  .widget .tagcloud a:hover,
2801  .widget .tagcloud a:focus,
2802  .widget.widget_tag_cloud a:hover,
2803  .widget.widget_tag_cloud a:focus,
2804  .wp_widget_tag_cloud a:hover,
2805  .wp_widget_tag_cloud a:focus {
2806      border-color: #bbb;
2807      -webkit-box-shadow: none;
2808      box-shadow: none;
2809      text-decoration: none;
2810  }
2811  
2812  /* Calendar widget */
2813  
2814  .widget_calendar .wp-calendar-table {
2815      margin-bottom: 0;
2816  }
2817  
2818  .widget_calendar .wp-calendar-nav {
2819      display: table;
2820      width: 100%;
2821      margin: 0 0 1.5em;
2822      padding: 0.4em 0;
2823  }
2824  
2825  .widget_calendar .wp-calendar-nav span {
2826      display: table-cell;
2827  }
2828  
2829  .widget_calendar .wp-calendar-nav-prev,
2830  .widget_calendar .wp-calendar-nav-next {
2831      width: 40%;
2832  }
2833  
2834  .widget_calendar th,
2835  .widget_calendar td,
2836  .widget_calendar .wp-calendar-nav span {
2837      text-align: center;
2838  }
2839  
2840  .widget_calendar tfoot td {
2841      border: 0;
2842  }
2843  
2844  /* Gallery widget */
2845  
2846  .gallery-columns-5 .gallery-caption,
2847  .gallery-columns-6 .gallery-caption,
2848  .gallery-columns-7 .gallery-caption,
2849  .gallery-columns-8 .gallery-caption,
2850  .gallery-columns-9 .gallery-caption {
2851      display: none;
2852  }
2853  
2854  /*--------------------------------------------------------------
2855  16.0 Media
2856  --------------------------------------------------------------*/
2857  
2858  img,
2859  video {
2860      height: auto; /* Make sure images are scaled correctly. */
2861      max-width: 100%; /* Adhere to container width. */
2862  }
2863  
2864  img.alignleft,
2865  img.alignright {
2866      float: none;
2867      margin: 0;
2868  }
2869  
2870  .page-content .wp-smiley,
2871  .entry-content .wp-smiley,
2872  .comment-content .wp-smiley {
2873      border: none;
2874      margin-bottom: 0;
2875      margin-top: 0;
2876      padding: 0;
2877  }
2878  
2879  audio:focus,
2880  video:focus {
2881      outline: thin dotted;
2882  }
2883  
2884  /* Make sure embeds and iframes fit their containers. */
2885  
2886  embed,
2887  iframe,
2888  object {
2889      margin-bottom: 1.5em;
2890      max-width: 100%;
2891  }
2892  
2893  /* Remove bottom on embeds that wrapped in paragraphs via wpautop. */
2894  
2895  p > embed:only-child,
2896  p > iframe:only-child,
2897  p > object:only-child {
2898      margin-bottom: 0;
2899  }
2900  
2901  .wp-caption,
2902  .gallery-caption {
2903      color: #666;
2904      font-size: 13px;
2905      font-size: 0.8125rem;
2906      font-style: italic;
2907      margin-bottom: 1.5em;
2908      max-width: 100%;
2909  }
2910  
2911  .wp-caption img[class*="wp-image-"] {
2912      display: block;
2913      margin-left: auto;
2914      margin-right: auto;
2915  }
2916  
2917  .wp-caption .wp-caption-text {
2918      margin: 0.8075em 0;
2919  }
2920  
2921  /* Media Elements */
2922  
2923  .mejs-container {
2924      margin-bottom: 1.5em;
2925  }
2926  
2927  /* Audio Player */
2928  
2929  .mejs-controls a.mejs-horizontal-volume-slider,
2930  .mejs-controls a.mejs-horizontal-volume-slider:focus,
2931  .mejs-controls a.mejs-horizontal-volume-slider:hover {
2932      background: transparent;
2933      border: 0;
2934  }
2935  
2936  /* Playlist Color Overrides: Light */
2937  
2938  .site-content .wp-playlist-light {
2939      border-color: #eee;
2940      color: #222;
2941  }
2942  
2943  .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
2944      color: #333;
2945  }
2946  
2947  .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
2948      color: #767676;
2949  }
2950  
2951  .site-content .wp-playlist-light .wp-playlist-item {
2952      border-bottom: 1px dotted #eee;
2953      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2954      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
2955  }
2956  
2957  .site-content .wp-playlist-light .wp-playlist-item:hover,
2958  .site-content .wp-playlist-light .wp-playlist-item:focus {
2959      border-bottom-color: rgba(0, 0, 0, 0);
2960      background-color: #767676;
2961      color: #fff;
2962  }
2963  
2964  .site-content .wp-playlist-light a.wp-playlist-caption:hover,
2965  .site-content .wp-playlist-light .wp-playlist-item:hover a,
2966  .site-content .wp-playlist-light .wp-playlist-item:focus a {
2967      color: #fff;
2968  }
2969  
2970  /* Playlist Color Overrides: Dark */
2971  
2972  .site-content .wp-playlist-dark {
2973      background: #222;
2974      border-color: #333;
2975  }
2976  
2977  .site-content .wp-playlist-dark .mejs-container .mejs-controls {
2978      background-color: #333;
2979  }
2980  
2981  .site-content .wp-playlist-dark .wp-playlist-caption {
2982      color: #fff;
2983  }
2984  
2985  .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
2986      color: #eee;
2987  }
2988  
2989  .site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
2990      color: #aaa;
2991  }
2992  
2993  .site-content .wp-playlist-dark .wp-playlist-playing {
2994      background-color: #333;
2995  }
2996  
2997  .site-content .wp-playlist-dark .wp-playlist-item {
2998      border-bottom: 1px dotted #555;
2999      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
3000      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
3001  }
3002  
3003  .site-content .wp-playlist-dark .wp-playlist-item:hover,
3004  .site-content .wp-playlist-dark .wp-playlist-item:focus {
3005      border-bottom-color: rgba(0, 0, 0, 0);
3006      background-color: #aaa;
3007      color: #222;
3008  }
3009  
3010  .site-content .wp-playlist-dark a.wp-playlist-caption:hover,
3011  .site-content .wp-playlist-dark .wp-playlist-item:hover a,
3012  .site-content .wp-playlist-dark .wp-playlist-item:focus a {
3013      color: #222;
3014  }
3015  
3016  /* Playlist Style Overrides */
3017  
3018  .site-content .wp-playlist {
3019      padding: 0.625em 0.625em 0.3125em;
3020  }
3021  
3022  .site-content .wp-playlist-current-item .wp-playlist-item-title {
3023      font-weight: 700;
3024  }
3025  
3026  .site-content .wp-playlist-current-item .wp-playlist-item-album {
3027      font-style: normal;
3028  }
3029  
3030  .site-content .wp-playlist-current-item .wp-playlist-item-artist {
3031      font-size: 10px;
3032      font-size: 0.625rem;
3033      font-weight: 800;
3034      letter-spacing: 0.1818em;
3035      text-transform: uppercase;
3036  }
3037  
3038  .site-content .wp-playlist-item {
3039      padding: 0 0.3125em;
3040      cursor: pointer;
3041  }
3042  
3043  .site-content .wp-playlist-item:last-of-type {
3044      border-bottom: none;
3045  }
3046  
3047  .site-content .wp-playlist-item a {
3048      padding: 0.3125em 0;
3049      border-bottom: none;
3050  }
3051  
3052  .site-content .wp-playlist-item a,
3053  .site-content .wp-playlist-item a:focus,
3054  .site-content .wp-playlist-item a:hover {
3055      -webkit-box-shadow: none;
3056      box-shadow: none;
3057      background: transparent;
3058  }
3059  
3060  .site-content .wp-playlist-item-length {
3061      top: 5px;
3062  }
3063  
3064  /* SVG Icons base styles */
3065  
3066  .icon {
3067      display: inline-block;
3068      fill: currentColor;
3069      height: 1em;
3070      position: relative; /* Align more nicely with capital letters */
3071      top: -0.0625em;
3072      vertical-align: middle;
3073      width: 1em;
3074  }
3075  
3076  /*--------------------------------------------------------------
3077  16.1 Galleries
3078  --------------------------------------------------------------*/
3079  
3080  .gallery-item {
3081      display: inline-block;
3082      text-align: left;
3083      vertical-align: top;
3084      margin: 0 0 1.5em;
3085      padding: 0 1em 0 0;
3086      width: 50%;
3087  }
3088  
3089  .gallery-columns-1 .gallery-item {
3090      width: 100%;
3091  }
3092  
3093  .gallery-columns-2 .gallery-item {
3094      max-width: 50%;
3095  }
3096  
3097  .gallery-item a,
3098  .gallery-item a:hover,
3099  .gallery-item a:focus,
3100  .widget-area .gallery-item a,
3101  .widget-area .gallery-item a:hover,
3102  .widget-area .gallery-item a:focus {
3103      -webkit-box-shadow: none;
3104      box-shadow: none;
3105      background: none;
3106      display: inline-block;
3107      max-width: 100%;
3108  }
3109  
3110  .gallery-item a img {
3111      display: block;
3112      -webkit-transition: -webkit-filter 0.2s ease-in;
3113      transition: -webkit-filter 0.2s ease-in;
3114      transition: filter 0.2s ease-in;
3115      transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
3116      -webkit-backface-visibility: hidden;
3117      backface-visibility: hidden;
3118  }
3119  
3120  .gallery-item a:hover img,
3121  .gallery-item a:focus img {
3122      -webkit-filter: opacity(60%);
3123      filter: opacity(60%);
3124  }
3125  
3126  .gallery-caption {
3127      display: block;
3128      text-align: left;
3129      padding: 0 10px 0 0;
3130      margin-bottom: 0;
3131  }
3132  
3133  /*--------------------------------------------------------------
3134  17.0 Customizer
3135  --------------------------------------------------------------*/
3136  
3137  .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
3138      border: 2px dashed #0085ba; /* Matches visible edit shortcuts. */
3139      bottom: 1em;
3140      content: "";
3141      display: block;
3142      left: 1em;
3143      position: absolute;
3144      right: 1em;
3145      top: 1em;
3146      z-index: 1;
3147  }
3148  
3149  .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .panel-content {
3150      z-index: 2; /* Prevent :after from preventing interactions within the section */
3151  }
3152  
3153  /* Used for placeholder text */
3154  .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
3155      display: block;
3156      font-size: 14px;
3157      font-size: 0.875rem;
3158      font-weight: 700;
3159      letter-spacing: 1px;
3160      padding: 3em;
3161      text-transform: uppercase;
3162      text-align: center;
3163  }
3164  
3165  /* Show borders on the custom page panels only when the front page sections are being edited */
3166  .highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
3167      border: none;
3168  }
3169  
3170  .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
3171      border: 0;
3172  }
3173  
3174  /* Add some space around the visual edit shortcut buttons. */
3175  .twentyseventeen-panel > .customize-partial-edit-shortcut > button {
3176      top: 30px;
3177      left: 30px;
3178  }
3179  
3180  /* Ensure that placeholder icons are visible. */
3181  .twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
3182      visibility: visible;
3183  }
3184  
3185  /*--------------------------------------------------------------
3186  18.0 SVGs Fallbacks
3187  --------------------------------------------------------------*/
3188  
3189  .svg-fallback {
3190      display: none;
3191  }
3192  
3193  .no-svg .svg-fallback {
3194      display: inline-block;
3195  }
3196  
3197  .no-svg .dropdown-toggle {
3198      padding: 0.5em 0 0;
3199      right: 0;
3200      text-align: center;
3201      width: 2em;
3202  }
3203  
3204  .no-svg .dropdown-toggle .svg-fallback.icon-angle-down {
3205      font-size: 20px;
3206      font-size: 1.25rem;
3207      font-weight: 400;
3208      line-height: 1;
3209      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
3210      -ms-transform: rotate(180deg); /* IE 9 */
3211      transform: rotate(180deg);
3212  }
3213  
3214  .no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down {
3215      -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
3216      -ms-transform: rotate(0); /* IE 9 */
3217      transform: rotate(0);
3218  }
3219  
3220  .no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before {
3221      content: "\005E";
3222  }
3223  
3224  /* Social Menu fallbacks */
3225  
3226  .no-svg .social-navigation a {
3227      background: transparent;
3228      color: #222;
3229      height: auto;
3230      width: auto;
3231  }
3232  
3233  /* Show screen reader text in some cases */
3234  
3235  .no-svg .next.page-numbers .screen-reader-text,
3236  .no-svg .prev.page-numbers .screen-reader-text,
3237  .no-svg .social-navigation li a .screen-reader-text,
3238  .no-svg .search-submit .screen-reader-text {
3239      clip: auto;
3240      font-size: 16px;
3241      font-size: 1rem;
3242      font-weight: 400;
3243      height: auto;
3244      position: relative !important; /* overrides previous !important styles */
3245      width: auto;
3246  }
3247  
3248  /*--------------------------------------------------------------
3249  19.0 Media Queries
3250  --------------------------------------------------------------*/
3251  
3252  /* Adjust positioning of edit shortcuts, override style in customize-preview.css */
3253  @media screen and (min-width: 20em) {
3254  
3255      body.customize-partial-edit-shortcuts-shown .site-header .site-title {
3256          padding-left: 0;
3257      }
3258  }
3259  
3260  @media screen and (min-width: 30em) {
3261  
3262      /* Typography */
3263  
3264      body,
3265      button,
3266      input,
3267      select,
3268      textarea {
3269          font-size: 18px;
3270          font-size: 1.125rem;
3271      }
3272  
3273      h1 {
3274          font-size: 30px;
3275          font-size: 1.875rem;
3276      }
3277  
3278      h2,
3279      .home.blog .entry-title,
3280      .page .panel-content .recent-posts .entry-title {
3281          font-size: 26px;
3282          font-size: 1.625rem;
3283      }
3284  
3285      h3 {
3286          font-size: 22px;
3287          font-size: 1.375rem;
3288      }
3289  
3290      h4 {
3291          font-size: 18px;
3292          font-size: 1.125rem;
3293      }
3294  
3295      h5 {
3296          font-size: 13px;
3297          font-size: 0.8125rem;
3298      }
3299  
3300      h6 {
3301          font-size: 16px;
3302          font-size: 1rem;
3303      }
3304  
3305      .entry-content blockquote.alignleft,
3306      .entry-content blockquote.alignright {
3307          font-size: 14px;
3308          font-size: 0.875rem;
3309      }
3310  
3311      /* Fix image alignment */
3312      img.alignleft {
3313          float: left;
3314          margin-right: 1.5em;
3315      }
3316  
3317      img.alignright {
3318          float: right;
3319          margin-left: 1.5em;
3320      }
3321  
3322      /* Site Branding */
3323  
3324      .site-branding {
3325          padding: 3em 0;
3326      }
3327  
3328      /* Front Page */
3329  
3330      .panel-content .wrap {
3331          padding-bottom: 2em;
3332          padding-top: 3.5em;
3333      }
3334  
3335      .page-one-column .panel-content .wrap {
3336          max-width: 740px;
3337      }
3338  
3339      .panel-content .entry-header {
3340          margin-bottom: 4.5em;
3341      }
3342  
3343      .panel-content .recent-posts .entry-header {
3344          margin-bottom: 0;
3345      }
3346  
3347      /* Blog Index, Archive, Search */
3348  
3349      .taxonomy-description {
3350          font-size: 14px;
3351          font-size: 0.875rem;
3352      }
3353  
3354      .page-numbers.current {
3355          font-size: 16px;
3356          font-size: 1rem;
3357      }
3358  
3359      /* Site Footer */
3360  
3361      .site-footer {
3362          font-size: 16px;
3363          font-size: 1rem;
3364      }
3365  
3366      /* Gallery Columns */
3367  
3368      .gallery-item {
3369          max-width: 25%;
3370      }
3371  
3372      .gallery-columns-1 .gallery-item {
3373          max-width: 100%;
3374      }
3375  
3376      .gallery-columns-2 .gallery-item {
3377          max-width: 50%;
3378      }
3379  
3380      .gallery-columns-3 .gallery-item {
3381          max-width: 33.33%;
3382      }
3383  
3384      .gallery-columns-4 .gallery-item {
3385          max-width: 25%;
3386      }
3387  }
3388  
3389  @media screen and (min-width: 48em) {
3390      html {
3391          scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 72px );
3392      }
3393  
3394      /* Typography */
3395  
3396      body,
3397      button,
3398      input,
3399      select,
3400      textarea {
3401          font-size: 16px;
3402          font-size: 1rem;
3403          line-height: 1.5;
3404      }
3405  
3406      .entry-content blockquote.alignleft,
3407      .entry-content blockquote.alignright {
3408          font-size: 13px;
3409          font-size: 0.8125rem;
3410      }
3411  
3412      /* Layout */
3413  
3414      .wrap {
3415          max-width: 1000px;
3416          padding-left: 3em;
3417          padding-right: 3em;
3418      }
3419  
3420      .has-sidebar:not(.error404) #primary {
3421          float: left;
3422          width: 58%;
3423      }
3424  
3425      .has-sidebar #secondary {
3426          float: right;
3427          padding-top: 0;
3428          width: 36%;
3429      }
3430  
3431      .error404 #primary {
3432          float: none;
3433      }
3434  
3435      /* Site Branding */
3436  
3437      .site-branding {
3438          margin-bottom: 0;
3439      }
3440  
3441      .has-header-image.twentyseventeen-front-page .site-branding,
3442      .has-header-video.twentyseventeen-front-page .site-branding,
3443      .has-header-image.home.blog .site-branding,
3444      .has-header-video.home.blog .site-branding {
3445          bottom: 0;
3446          display: block;
3447          left: 0;
3448          height: auto;
3449          padding-top: 0;
3450          position: absolute;
3451          width: 100%;
3452      }
3453  
3454      .has-header-image.twentyseventeen-front-page .custom-header,
3455      .has-header-video.twentyseventeen-front-page .custom-header,
3456      .has-header-image.home.blog .custom-header,
3457      .has-header-video.home.blog .custom-header {
3458          display: block;
3459          height: auto;
3460      }
3461  
3462      .custom-header-media {
3463          height: 165px;
3464          position: relative;
3465      }
3466  
3467      .twentyseventeen-front-page.has-header-image .custom-header-media,
3468      .twentyseventeen-front-page.has-header-video .custom-header-media,
3469      .home.blog.has-header-image .custom-header-media,
3470      .home.blog.has-header-video .custom-header-media {
3471          height: 0;
3472          position: relative;
3473      }
3474  
3475      .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
3476      .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
3477          bottom: 0;
3478          height: auto;
3479          left: 0;
3480          position: absolute;
3481          right: 0;
3482          top: 0;
3483      }
3484  
3485      .custom-logo-link {
3486          padding-right: 2em;
3487      }
3488  
3489      .custom-logo-link img,
3490      body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
3491      body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
3492          max-width: 350px;
3493      }
3494  
3495      .title-tagline-hidden.home.has-header-image .custom-logo-link img,
3496      .title-tagline-hidden.home.has-header-video .custom-logo-link img {
3497          max-height: 200px;
3498      }
3499  
3500      .site-title {
3501          font-size: 36px;
3502          font-size: 2.25rem;
3503      }
3504  
3505      .site-description {
3506          font-size: 16px;
3507          font-size: 1rem;
3508      }
3509  
3510      /* Navigation */
3511  
3512      .navigation-top {
3513          bottom: 0;
3514          font-size: 14px;
3515          font-size: 0.875rem;
3516          left: 0;
3517          position: absolute;
3518          right: 0;
3519          width: 100%;
3520          z-index: 3;
3521      }
3522  
3523      .navigation-top .wrap {
3524          max-width: 1000px;
3525          /* The font size is 14px here and we need 50px padding in ems */
3526          padding: 0.75em 3.4166666666667em;
3527      }
3528  
3529      .navigation-top nav {
3530          margin-left: -1.25em;
3531      }
3532  
3533      .site-navigation-fixed.navigation-top {
3534          bottom: auto;
3535          position: fixed;
3536          left: 0;
3537          right: 0;
3538          top: 0;
3539          width: 100%;
3540          z-index: 1000;
3541      }
3542  
3543      .admin-bar .site-navigation-fixed.navigation-top {
3544          top: 32px;
3545      }
3546  
3547      /* Main Navigation */
3548  
3549      .js .menu-toggle,
3550      .js .dropdown-toggle {
3551          display: none;
3552      }
3553  
3554      .main-navigation {
3555          width: auto;
3556      }
3557  
3558      .js .main-navigation ul,
3559      .js .main-navigation ul ul,
3560      .js .main-navigation > div > ul {
3561          display: block;
3562      }
3563  
3564      .main-navigation ul {
3565          background: transparent;
3566          padding: 0;
3567      }
3568  
3569      .main-navigation > div > ul {
3570          border: 0;
3571          margin-bottom: 0;
3572          padding: 0;
3573      }
3574  
3575      .main-navigation li {
3576          border: 0;
3577          display: inline-block;
3578      }
3579  
3580      .main-navigation li li {
3581          display: block;
3582      }
3583  
3584      .main-navigation a {
3585          padding: 1em 1.25em;
3586      }
3587  
3588      .main-navigation ul ul {
3589          background: #fff;
3590          border: 1px solid #bbb;
3591          left: -999em;
3592          padding: 0;
3593          position: absolute;
3594          top: 100%;
3595          z-index: 99999;
3596      }
3597  
3598      .main-navigation ul li.menu-item-has-children:before,
3599      .main-navigation ul li.menu-item-has-children:after,
3600      .main-navigation ul li.page_item_has_children:before,
3601      .main-navigation ul li.page_item_has_children:after {
3602          border-style: solid;
3603          border-width: 0 6px 6px;
3604          content: "";
3605          display: none;
3606          height: 0;
3607          position: absolute;
3608          right: 1em;
3609          bottom: -1px;
3610          width: 0;
3611          z-index: 100000;
3612      }
3613  
3614      .main-navigation ul li.menu-item-has-children.focus:before,
3615      .main-navigation ul li.menu-item-has-children:hover:before,
3616      .main-navigation ul li.menu-item-has-children.focus:after,
3617      .main-navigation ul li.menu-item-has-children:hover:after,
3618      .main-navigation ul li.page_item_has_children.focus:before,
3619      .main-navigation ul li.page_item_has_children:hover:before,
3620      .main-navigation ul li.page_item_has_children.focus:after,
3621      .main-navigation ul li.page_item_has_children:hover:after {
3622          display: block;
3623      }
3624  
3625      .main-navigation ul li.menu-item-has-children:before,
3626      .main-navigation ul li.page_item_has_children:before {
3627          border-color: transparent transparent #bbb;
3628          bottom: 0;
3629      }
3630  
3631      .main-navigation ul li.menu-item-has-children:after,
3632      .main-navigation ul li.page_item_has_children:after {
3633          border-color: transparent transparent #fff;
3634      }
3635  
3636      .main-navigation ul ul li:hover > ul,
3637      .main-navigation ul ul li.focus > ul {
3638          left: 100%;
3639          right: auto;
3640      }
3641  
3642      .main-navigation ul ul a {
3643          padding: 0.75em 1.25em;
3644          width: 16em;
3645      }
3646  
3647      .main-navigation li li {
3648          -webkit-transition: background-color 0.2s ease-in-out;
3649          transition: background-color 0.2s ease-in-out;
3650      }
3651  
3652      .main-navigation li li:hover,
3653      .main-navigation li li.focus {
3654          background: #767676;
3655      }
3656  
3657      .main-navigation li li a {
3658          -webkit-transition: color 0.3s ease-in-out;
3659          transition: color 0.3s ease-in-out;
3660      }
3661  
3662      .main-navigation li li.focus > a,
3663      .main-navigation li li:focus > a,
3664      .main-navigation li li:hover > a,
3665      .main-navigation li li a:hover,
3666      .main-navigation li li a:focus,
3667      .main-navigation li li.current_page_item a:hover,
3668      .main-navigation li li.current-menu-item a:hover,
3669      .main-navigation li li.current_page_item a:focus,
3670      .main-navigation li li.current-menu-item a:focus {
3671          color: #fff;
3672      }
3673  
3674      .main-navigation ul li:hover > ul,
3675      .main-navigation ul li.focus > ul {
3676          left: 0.5em;
3677          right: auto;
3678      }
3679  
3680      .main-navigation .menu-item-has-children > a > .icon,
3681      .main-navigation .page_item_has_children > a > .icon {
3682          display: inline;
3683          left: 5px;
3684          position: relative;
3685          top: -1px;
3686      }
3687  
3688      .main-navigation ul ul .menu-item-has-children > a > .icon,
3689      .main-navigation ul ul .page_item_has_children > a > .icon {
3690          margin-top: -9px;
3691          left: auto;
3692          position: absolute;
3693          right: 1em;
3694          top: 50%;
3695          -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
3696          -ms-transform: rotate(-90deg); /* IE 9 */
3697          transform: rotate(-90deg);
3698      }
3699  
3700      .main-navigation ul ul ul {
3701          left: -999em;
3702          margin-top: -1px;
3703          top: 0;
3704      }
3705  
3706      .main-navigation ul ul li.menu-item-has-children.focus:before,
3707      .main-navigation ul ul li.menu-item-has-children:hover:before,
3708      .main-navigation ul ul li.menu-item-has-children.focus:after,
3709      .main-navigation ul ul li.menu-item-has-children:hover:after,
3710      .main-navigation ul ul li.page_item_has_children.focus:before,
3711      .main-navigation ul ul li.page_item_has_children:hover:before,
3712      .main-navigation ul ul li.page_item_has_children.focus:after,
3713      .main-navigation ul ul li.page_item_has_children:hover:after {
3714          display: none;
3715      }
3716  
3717      .site-header .site-navigation-fixed .menu-scroll-down {
3718          display: none;
3719      }
3720  
3721      /* Scroll down arrow */
3722  
3723      .site-header .menu-scroll-down {
3724          display: block;
3725          padding: 1em;
3726          position: absolute;
3727          right: 0;
3728      }
3729  
3730      .site-header .menu-scroll-down .icon {
3731          -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
3732          -ms-transform: rotate(90deg); /* IE 9 */
3733          transform: rotate(90deg);
3734      }
3735  
3736      .site-header .menu-scroll-down {
3737          color: #fff;
3738          top: 2em;
3739      }
3740  
3741      .site-header .navigation-top .menu-scroll-down {
3742          color: #767676;
3743          top: 0.7em;
3744      }
3745  
3746      .menu-scroll-down:focus {
3747          outline: thin dotted;
3748      }
3749  
3750      .menu-scroll-down .icon {
3751          height: 18px;
3752          width: 18px;
3753      }
3754  
3755      /* Front Page */
3756  
3757      .twentyseventeen-front-page.has-header-image .site-branding,
3758      .twentyseventeen-front-page.has-header-video .site-branding,
3759      .home.blog.has-header-image .site-branding,
3760      .home.blog.has-header-video .site-branding {
3761          margin-bottom: 70px;
3762      }
3763  
3764      .twentyseventeen-front-page.has-header-image .custom-header-media,
3765      .twentyseventeen-front-page.has-header-video .custom-header-media,
3766      .home.blog.has-header-image .custom-header-media,
3767      .home.blog.has-header-video .custom-header-media {
3768          height: 1200px;
3769          height: 100vh;
3770          max-height: 100%;
3771          overflow: hidden;
3772      }
3773  
3774      .twentyseventeen-front-page.has-header-image .custom-header-media:before,
3775      .twentyseventeen-front-page.has-header-video .custom-header-media:before,
3776      .home.blog.has-header-image .custom-header-media:before,
3777      .home.blog.has-header-video .custom-header-media:before {
3778          height: 33%;
3779      }
3780  
3781      .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
3782      .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
3783      .admin-bar.home.blog.has-header-image .custom-header-media,
3784      .admin-bar.home.blog.has-header-video .custom-header-media {
3785          height: calc(100vh - 32px);
3786      }
3787  
3788      .panel-content .wrap {
3789          padding-bottom: 4.5em;
3790          padding-top: 6em;
3791      }
3792  
3793      .panel-image {
3794          height: 100vh;
3795          max-height: 1200px;
3796      }
3797  
3798      /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
3799      .background-fixed .panel-image {
3800          background-attachment: fixed;
3801      }
3802  
3803      @supports ( -webkit-touch-callout: none ) {
3804          /* Image scrolls with the content in iOS Safari. */
3805          .background-fixed .panel-image {
3806              background-attachment: scroll;
3807          }
3808      }
3809  
3810      .page-two-column .panel-content .entry-header {
3811          float: left;
3812          width: 36%;
3813      }
3814  
3815      .page-two-column .panel-content .entry-content {
3816          float: right;
3817          width: 58%;
3818      }
3819  
3820      /* Front Page - Recent Posts */
3821  
3822      .page-two-column .panel-content .recent-posts {
3823          clear: right;
3824          float: right;
3825          width: 58%;
3826      }
3827  
3828      .panel-content .recent-posts article {
3829          margin-bottom: 4em;
3830      }
3831  
3832      .panel-content .recent-posts .entry-header,
3833      .page-two-column #primary .panel-content .recent-posts .entry-header,
3834      .panel-content .recent-posts .entry-content,
3835      .page-two-column #primary .panel-content .recent-posts .entry-content {
3836          float: none;
3837          width: 100%;
3838      }
3839  
3840      .twentyseventeen-front-page .panel-content .recent-posts .entry-header {
3841          margin-bottom: 1.5em;
3842      }
3843  
3844      .page .panel-content .recent-posts .entry-title {
3845          font-size: 26px;
3846          font-size: 1.625rem;
3847      }
3848  
3849      /* Posts */
3850  
3851      .site-content {
3852          padding: 5.5em 0 0;
3853      }
3854  
3855      .single-post .entry-title,
3856      .page .entry-title {
3857          font-size: 26px;
3858          font-size: 1.625rem;
3859      }
3860  
3861      .comments-pagination,
3862      .post-navigation {
3863          clear: both;
3864      }
3865  
3866      .post-navigation .nav-previous {
3867          float: left;
3868          width: 50%;
3869      }
3870  
3871      .post-navigation .nav-next {
3872          float: right;
3873          text-align: right;
3874          width: 50%;
3875      }
3876  
3877      .nav-next,
3878      .post-navigation .nav-next {
3879          margin-top: 0;
3880      }
3881  
3882      /* Blog, archive, search */
3883  
3884      .sticky .icon-thumb-tack {
3885          height: 23px;
3886          left: -2.5em;
3887          top: 1.5em;
3888          width: 32px;
3889      }
3890  
3891      body:not(.has-sidebar):not(.page-one-column) .page-header,
3892      body.has-sidebar.error404 #primary .page-header,
3893      body.page-two-column:not(.archive) #primary .entry-header,
3894      body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
3895          float: left;
3896          width: 36%;
3897      }
3898  
3899      .blog:not(.has-sidebar) #primary article,
3900      .archive:not(.page-one-column):not(.has-sidebar) #primary article,
3901      .search:not(.has-sidebar) #primary article,
3902      .error404:not(.has-sidebar) #primary .page-content,
3903      .error404.has-sidebar #primary .page-content,
3904      body.page-two-column:not(.archive) #primary .entry-content,
3905      body.page-two-column #comments {
3906          float: right;
3907          width: 58%;
3908      }
3909  
3910      .blog .site-main > article,
3911      .archive .site-main > article,
3912      .search .site-main > article {
3913          padding-bottom: 4em;
3914      }
3915  
3916      .navigation.pagination {
3917          clear: both;
3918          float: right;
3919          width: 58%;
3920      }
3921  
3922      .has-sidebar .navigation.pagination,
3923      .archive.page-one-column:not(.has-sidebar) .navigation.pagination {
3924          float: none;
3925          width: 100%;
3926      }
3927  
3928      .entry-footer {
3929          display: table;
3930          width: 100%;
3931      }
3932  
3933      .entry-footer .cat-tags-links {
3934          display: table-cell;
3935          vertical-align: middle;
3936          width: 100%;
3937      }
3938  
3939      .entry-footer .edit-link {
3940          display: table-cell;
3941          text-align: right;
3942          vertical-align: middle;
3943      }
3944  
3945      .entry-footer .edit-link a.post-edit-link {
3946          margin-top: 0;
3947          margin-left: 1em;
3948      }
3949  
3950      /* Entry content */
3951  
3952      /* without sidebar */
3953  
3954      :not(.has-sidebar) .entry-content blockquote.alignleft {
3955          margin-left: -17.5%;
3956          width: 48%;
3957      }
3958  
3959      :not(.has-sidebar) .entry-content blockquote.alignright {
3960          margin-right: -17.5%;
3961          width: 48%;
3962      }
3963  
3964      /* with sidebar */
3965  
3966      .has-sidebar .entry-content blockquote.alignleft {
3967          margin-left: 0;
3968          width: 34%;
3969      }
3970  
3971      .has-sidebar .entry-content blockquote.alignright {
3972          margin-right: 0;
3973          width: 34%;
3974      }
3975  
3976      .has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
3977          margin-right: -72.5%;
3978          width: 62%;
3979      }
3980  
3981      /* blog and archive */
3982  
3983      .blog:not(.has-sidebar) .entry-content blockquote.alignleft,
3984      .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
3985      .archive:not(.has-sidebar) .entry-content blockquote.alignleft,
3986      .page-two-column .entry-content blockquote.alignleft {
3987          margin-left: -72.5%;
3988          width: 62%;
3989      }
3990  
3991      .blog:not(.has-sidebar) .entry-content blockquote.alignright,
3992      .twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright,
3993      .archive:not(.has-sidebar) .entry-content blockquote.alignright,
3994      .page-two-column .entry-content blockquote.alignright {
3995          margin-right: 0;
3996          width: 36%;
3997      }
3998  
3999      /* Post formats */
4000  
4001      .format-quote blockquote .icon {
4002          left: -1.5em;
4003      }
4004  
4005      /* Pages */
4006  
4007      .page.page-one-column .entry-header,
4008      .twentyseventeen-front-page.page-one-column .entry-header,
4009      .archive.page-one-column:not(.has-sidebar) .page-header {
4010          margin-bottom: 4em;
4011      }
4012  
4013      .page:not(.home) #content {
4014          padding-bottom: 3.25em;
4015      }
4016  
4017      /* 404 page */
4018  
4019      .error404 .page-content {
4020          padding-bottom: 9em;
4021      }
4022  
4023      /* Comments */
4024  
4025      #comments {
4026          padding-top: 5em;
4027      }
4028  
4029      .comments-title {
4030          margin-bottom: 2.5em;
4031      }
4032  
4033      ol.children .children {
4034          padding-left: 2em;
4035      }
4036  
4037      /* Posts pagination */
4038  
4039      .nav-links .nav-title {
4040          position: relative;
4041      }
4042  
4043      .nav-title-icon-wrapper {
4044          position: absolute;
4045          text-align: center;
4046          width: 2em;
4047      }
4048  
4049      .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
4050          left: -2em;
4051      }
4052  
4053      .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
4054          right: -2em;
4055      }
4056  
4057      /* Secondary */
4058  
4059      #secondary {
4060          font-size: 14px;
4061          font-size: 0.875rem;
4062          line-height: 1.6;
4063      }
4064  
4065      /* Widgets */
4066  
4067      h2.widget-title {
4068          font-size: 11px;
4069          font-size: 0.6875rem;
4070          margin-bottom: 2em;
4071      }
4072  
4073      /* Footer */
4074  
4075      .site-footer {
4076          font-size: 14px;
4077          font-size: 0.875rem;
4078          line-height: 1.6;
4079          margin-top: 3em;
4080      }
4081  
4082      .site-footer .widget-column.footer-widget-1 {
4083          float: left;
4084          width: 36%;
4085      }
4086  
4087      .site-footer .widget-column.footer-widget-2 {
4088          float: right;
4089          width: 58%;
4090      }
4091  
4092      .social-navigation {
4093          clear: left;
4094          float: left;
4095          margin-bottom: 0;
4096          width: 36%;
4097      }
4098  
4099      .site-info {
4100          float: left;
4101          padding: 0.7em 0 0;
4102          width: 58%;
4103      }
4104  
4105      .social-navigation + .site-info {
4106          margin-left: 6%;
4107      }
4108  
4109      .site-info .sep {
4110          margin: 0 0.5em;
4111          display: inline;
4112          visibility: visible;
4113          height: auto;
4114          width: auto;
4115      }
4116  
4117      /* Gallery Columns */
4118  
4119      .gallery-columns-5 .gallery-item {
4120          max-width: 20%;
4121      }
4122  
4123      .gallery-columns-6 .gallery-item {
4124          max-width: 16.66%;
4125      }
4126  
4127      .gallery-columns-7 .gallery-item {
4128          max-width: 14.28%;
4129      }
4130  
4131      .gallery-columns-8 .gallery-item {
4132          max-width: 12.5%;
4133      }
4134  
4135      .gallery-columns-9 .gallery-item {
4136          max-width: 11.11%;
4137      }
4138  }
4139  
4140  @media screen and ( min-width: 67em ) {
4141  
4142      /* Layout */
4143  
4144      /* Navigation */
4145      .navigation-top .wrap {
4146          padding: 0.75em 2em;
4147      }
4148  
4149      .navigation-top nav {
4150          margin-left: 0;
4151      }
4152  
4153      /* Sticky posts */
4154  
4155      .sticky .icon-thumb-tack {
4156          font-size: 32px;
4157          font-size: 2rem;
4158          height: 22px;
4159          left: -1.25em;
4160          top: 0.75em;
4161          width: 32px;
4162      }
4163  
4164      /* Pagination */
4165  
4166      .page-numbers {
4167          display: inline-block;
4168      }
4169  
4170      .page-numbers.current {
4171          font-size: 15px;
4172          font-size: 0.9375rem;
4173      }
4174  
4175      .page-numbers.current .screen-reader-text {
4176          clip: rect(1px, 1px, 1px, 1px);
4177          height: 1px;
4178          overflow: hidden;
4179          position: absolute !important;
4180          width: 1px;
4181      }
4182  
4183      /* Comments */
4184  
4185      .comment-body {
4186          margin-left: 0;
4187      }
4188  }
4189  
4190  @media screen and ( min-width: 79em ) {
4191  
4192      .has-sidebar .entry-content blockquote.alignleft {
4193          margin-left: -20%;
4194      }
4195  
4196      .blog:not(.has-sidebar) .entry-content blockquote.alignright,
4197      .archive:not(.has-sidebar) .entry-content blockquote.alignright,
4198      .page-two-column .entry-content blockquote.alignright,
4199      .twentyseventeen-front-page .entry-content blockquote.alignright {
4200          margin-right: -20%;
4201      }
4202  }
4203  
4204  @media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {
4205  
4206      .admin-bar .site-navigation-fixed.navigation-top,
4207      .admin-bar .site-navigation-hidden.navigation-top {
4208          top: 46px;
4209      }
4210  }
4211  
4212  /*--------------------------------------------------------------
4213  20.0 Print
4214  --------------------------------------------------------------*/
4215  
4216  @media print {
4217  
4218      /* Hide elements */
4219  
4220      form,
4221      button,
4222      input,
4223      select,
4224      textarea,
4225      .navigation-top,
4226      .social-navigation,
4227      #secondary,
4228      .content-bottom-widgets,
4229      .header-image,
4230      .panel-image-prop,
4231      .icon-thumb-tack,
4232      .page-links,
4233      .edit-link,
4234      .post-navigation,
4235      .pagination.navigation,
4236      .comments-pagination,
4237      .comment-respond,
4238      .comment-edit-link,
4239      .comment-reply-link,
4240      .comment-metadata .edit-link,
4241      .pingback .edit-link,
4242      .site-footer aside.widget-area,
4243      .site-info {
4244          display: none !important;
4245      }
4246  
4247      .entry-footer,
4248      #comments,
4249      .site-footer,
4250      .single-featured-image-header {
4251          border: 0;
4252      }
4253  
4254      /* Font sizes */
4255  
4256      body {
4257          font-size: 12pt;
4258      }
4259  
4260      h1 {
4261          font-size: 24pt;
4262      }
4263  
4264      h2 {
4265          font-size: 22pt;
4266      }
4267  
4268      h3 {
4269          font-size: 17pt;
4270      }
4271  
4272      h4 {
4273          font-size: 12pt;
4274      }
4275  
4276      h5 {
4277          font-size: 11pt;
4278      }
4279  
4280      h6 {
4281          font-size: 12pt;
4282      }
4283  
4284      .page .panel-content .entry-title,
4285      .page-title,
4286      body.page:not(.twentyseventeen-front-page) .entry-title {
4287          font-size: 10pt;
4288      }
4289  
4290      /* Layout */
4291  
4292      .wrap {
4293          padding-left: 5% !important;
4294          padding-right: 5% !important;
4295          max-width: none;
4296      }
4297  
4298      /* Site Branding */
4299  
4300      .site-header {
4301          background: transparent;
4302          padding: 0;
4303      }
4304  
4305      .custom-header-media {
4306          padding: 0;
4307      }
4308  
4309      .twentyseventeen-front-page.has-header-image .site-branding,
4310      .twentyseventeen-front-page.has-header-video .site-branding,
4311      .home.blog.has-header-image .site-branding,
4312      .home.blog.has-header-video .site-branding {
4313          position: relative;
4314      }
4315  
4316      .site-branding {
4317          margin-top: 0;
4318          margin-bottom: 1.75em !important; /* override styles added by JavaScript */
4319      }
4320  
4321      .site-title {
4322          font-size: 25pt;
4323      }
4324  
4325      .site-description {
4326          font-size: 12pt;
4327          opacity: 1;
4328      }
4329  
4330      /* Posts */
4331  
4332      .single-featured-image-header {
4333          background: transparent;
4334      }
4335  
4336      .entry-meta {
4337          font-size: 9pt;
4338      }
4339  
4340      /* Colors */
4341  
4342      body,
4343      .site {
4344          background: none !important; /* Brute force since user agents all print differently. */
4345      }
4346  
4347      body,
4348      a,
4349      .site-title a,
4350      .twentyseventeen-front-page.has-header-image .site-title,
4351      .twentyseventeen-front-page.has-header-video .site-title,
4352      .twentyseventeen-front-page.has-header-image .site-title a,
4353      .twentyseventeen-front-page.has-header-video .site-title a {
4354          color: #222 !important; /* Make sure color schemes don't affect to print */
4355      }
4356  
4357      h2,
4358      h5,
4359      blockquote,
4360      .site-description,
4361      .twentyseventeen-front-page.has-header-image .site-description,
4362      .twentyseventeen-front-page.has-header-video .site-description,
4363      .entry-meta,
4364      .entry-meta a {
4365          color: #777 !important; /* Make sure color schemes don't affect to print */
4366      }
4367  
4368      .entry-content blockquote.alignleft,
4369      .entry-content blockquote.alignright {
4370          font-size: 11pt;
4371          width: 34%;
4372      }
4373  
4374      .site-footer {
4375          padding: 0;
4376      }
4377  }