assets/css/style.css

   1 /* ==========================================================================
   2    Table of Contents
   3    ========================================================================== */
   4
   5 /*
   6
   7     0.  Normalize
   8     1.  General
   9     2.  Header
  10     3.  Inner Content
  11     4.  Pagination
  12     5.  Author
  13     6.  Tags
  14     7.  Share Selected Text
  15     8.  Subscribe
  16     9.  Footer
  17     10. Responsive
  18
  19 */
  20
  21 /* ==========================================================================
  22    0. Normalize
  23    ========================================================================== */
  24
  25 html {
  26     font-family: sans-serif;
  27     -ms-text-size-adjust: 100%;
  28     -webkit-text-size-adjust: 100%
  29 }
  30 body { margin: 0; }
  31 article, aside, details,
  32 figcaption, figure,
  33 footer, header,
  34 main, menu, nav,
  35 section, summary { display:block; }
  36 audio, canvas, progress, video {
  37     display: inline-block;
  38     vertical-align: baseline;
  39 }
  40 audio:not([controls]) { display: none; height: 0; }
  41 [hidden], template { display: none; }
  42 a { background-color: transparent;}
  43 a:active, a:hover { outline: 0; }
  44 abbr[title] { border-bottom: 1px dotted; }
  45 b, strong { font-weight: bold; }
  46 dfn { font-style: italic; }
  47 h1 { font-size: 2em; margin: 0.67em 0; }
  48 mark { background: #ff0; color: #000; }
  49 small { font-size: 80%; }
  50 sub, sup {
  51     font-size: 75%;
  52     line-height: 0;
  53     position: relative;
  54     vertical-align: baseline;
  55 }
  56 sup { top: -0.5em; }
  57 sub { bottom: -0.25em; }
  58 img { border: 0; }
  59 svg:not(:root) { overflow: hidden; }
  60 figure { margin: 1em 40px; }
  61 hr { box-sizing: content-box; height: 0; }
  62 pre { overflow: auto; }
  63 code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
  64 button, input, optgroup, select, textarea {
  65     color: inherit;
  66     font: inherit;
  67     margin: 0;
  68 }
  69 button { overflow: visible; }
  70 button, select { text-transform: none; }
  71 button, html input[type="button"],
  72 input[type="reset"], input[type="submit"] {
  73     -webkit-appearance: button;
  74     cursor: pointer;
  75 }
  76 button[disabled], html input[disabled] { cursor: default; }
  77 button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  78 input { line-height: normal; }
  79 input[type="checkbox"],
  80 input[type="radio"] { box-sizing: border-box; padding: 0; }
  81 input[type="number"]::-webkit-inner-spin-button,
  82 input[type="number"]::-webkit-outer-spin-button { height: auto; }
  83 input[type="search"] { -webkit-appearance: textfield; }
  84 input[type="search"]::-webkit-search-cancel-button,
  85 input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  86 fieldset {
  87     border: 1px solid #c0c0c0;
  88     margin: 0 2px;
  89     padding: 0.35em 0.625em 0.75em;
  90 }
  91 legend { border: 0; padding: 0; }
  92 textarea { overflow: auto; }
  93 optgroup { font-weight: bold; }
  94 table{ border-collapse: collapse; border-spacing: 0; }
  95 td, th{ padding: 0; }
  96
  97 /* ==========================================================================
  98    1. General
  99    ========================================================================== */
 100
 101 @font-face {
 102     font-family: 'icons';
 103     src: url('../fonts/icons.eot');
 104     src: url('../fonts/icons.eot#iefix') format('embedded-opentype'),
 105        url('../fonts/icons.woff') format('woff'),
 106        url('../fonts/icons.ttf') format('truetype'),
 107        url('../fonts/icons.svg#icons') format('svg');
 108     font-weight: normal;
 109     font-style: normal;
 110 }
 111
 112 ::selection {
 113     background: rgba(0, 0, 0, 0.2);
 114 }
 115 ::-moz-selection {
 116     background: rgba(0, 0, 0, 0.2);
 117 }
 118
 119 body{
 120     color: #000000;
 121     font-family: "europa", "Cabin", sans-serif;
 122 }
 123
 124 a{
 125     color: #000000;
 126     text-decoration: none;
 127     -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
 128     -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
 129     -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
 130     transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
 131 }
 132
 133 a:hover{
 134     color: #555555;
 135 }
 136
 137 h1{
 138     font-size: 36px;
 139 }
 140
 141 h2{
 142     font-size: 30px;
 143 }
 144
 145 h3{
 146     font-size: 24px;
 147 }
 148
 149 h4{
 150     font-size: 18px;
 151 }
 152
 153 h5{
 154     font-size: 14px;
 155 }
 156
 157 h6{
 158     font-size: 12px;
 159 }
 160
 161 h1, h2, h3, h4, h5, h6{
 162     font-family: "abril-titling", "Lora", serif;
 163     color: #333333;
 164     margin: 30px 0;
 165 }
 166
 167 p{
 168     color: #555555;
 169     font-size: 20px;
 170     margin: 20px 0;
 171     line-height: 30px;
 172 }
 173
 174 ul li,
 175 ol li{
 176     color: #555555;
 177     font-size: 20px;
 178     line-height: 30px;
 179 }
 180
 181 hr{
 182     background: #E9E9E9;
 183     border: none;
 184     width: 100%;
 185     height: 1px;
 186     display: block;
 187 }
 188
 189 blockquote{
 190     border-left: 10px solid #FFF100;
 191     padding-left: 20px;
 192     font-style: italic;
 193     margin: 20px 0;
 194     font-size: 20px;
 195     line-height: 30px;
 196 }
 197
 198 code{
 199     font-family: monospace;
 200     background-color: #f7f7f7;
 201     display: inline-block;
 202     border: 1px solid #f7f7f7;
 203     padding: 0px 7px;
 204     margin: 0 5px;
 205     font-size: 14px;
 206     line-height: 25px;
 207     white-space: pre;
 208     color: #555555;
 209 }
 210
 211 .hljs{
 212     background-color: #f7f7f7;
 213     padding: 17px 10px;
 214 }
 215
 216 pre{
 217     font-family: monospace;
 218     background-color: #f7f7f7;
 219     display: block;
 220     border: 1px solid #f7f7f7;
 221     padding: 17px 10px;
 222     font-size: 14px;
 223     line-height: 25px;
 224     white-space: pre;
 225     color: #555555;
 226 }
 227
 228 pre code{
 229     border: none;
 230 }
 231
 232 mark{
 233     background: #FFF100;
 234     color: #000;
 235     -webkit-transition: background 0.3s ease-in-out;
 236     -moz-transition: background 0.3s ease-in-out;
 237     -o-transition: background 0.3s ease-in-out;
 238     transition: background 0.3s ease-in-out;
 239 }
 240
 241 .wf-loading h1,
 242 .wf-loading h2,
 243 .wf-loading h3,
 244 .wf-loading h4,
 245 .wf-loading h5,
 246 .wf-loading h6,
 247 .wf-loading p,
 248 .wf-loading .blog-logo b,
 249 .wf-loading .post-meta{
 250     visibility: hidden;
 251 }
 252
 253 .btn,
 254 input[type=reset],
 255 input[type=button],
 256 input[type=submit],
 257 button[type=reset],
 258 button[type=button],
 259 button[type=submit]{
 260     text-align: center;
 261     border: 1px solid #E9E9E9;
 262     background: #fff;
 263     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07);
 264     font-size: 14px;
 265     line-height: 20px;
 266     color: #B7B7B7;
 267     text-transform: uppercase;
 268     padding: 9px 16px;
 269     display: inline-block;
 270     -webkit-transition: all 0.3s ease-in-out;
 271     -moz-transition: all 0.3s ease-in-out;
 272     -o-transition: all 0.3s ease-in-out;
 273     transition: all 0.3s ease-in-out;
 274 }
 275
 276 .btn:hover,
 277 input[type=reset]:hover,
 278 input[type=button]:hover,
 279 input[type=submit]:hover,
 280 button[type=reset]:hover,
 281 button[type=button]:hover,
 282 button[type=submit]:hover{
 283     border: 1px solid #BCBBBB;
 284     color: #8C8C8C;
 285     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12);
 286     transform: translate3d(0, 3px,0);
 287 }
 288
 289 input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=button]),
 290 textarea{
 291     border: 1px solid #000000;
 292     height: 30px;
 293     color: #000000;
 294     font-size: 20px;
 295     line-height: 30px;
 296     background: transparent;
 297     padding: 6px 14px;
 298     display: block;
 299     max-width: calc(100% - 30px);
 300     width: 100%;
 301     margin: 10px auto;
 302     -webkit-transition: all 0.3s ease-in-out;
 303     -moz-transition: all 0.3s ease-in-out;
 304     -o-transition: all 0.3s ease-in-out;
 305     transition: all 0.3s ease-in-out;
 306 }
 307
 308 input:-webkit-autofill {
 309     -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
 310 }
 311
 312 input::-ms-clear {
 313     display: none;
 314 }
 315
 316 input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=button]):focus,
 317 textarea:focus{
 318     outline: 0;
 319 }
 320
 321 input:not([type=submit]):not([type=file])::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 322     color: rgba(0,0,0,.2);
 323 }
 324 input:not([type=submit]):not([type=file])::-moz-placeholder { /* Firefox 19+ */
 325     color: rgba(0,0,0,.2);
 326 }
 327 input:not([type=submit]):not([type=file]):-ms-input-placeholder { /* IE 10+ */
 328     color: rgba(0,0,0,.2);
 329 }
 330 input:not([type=submit]):not([type=file]):-moz-placeholder { /* Firefox 18- */
 331     color: rgba(0,0,0,.2);
 332 }
 333
 334 time{
 335     color: #000000;
 336     font-weight: bold;
 337     font-size: 14px;
 338     line-height: 20px;
 339     text-align: center;
 340     display: inline-block;
 341     padding: 2px 7px;
 342     background-color: #FFF100;
 343     text-transform: uppercase;
 344 }
 345
 346 figure{
 347     margin: 0;
 348 }
 349
 350 .main-container{
 351     overflow: hidden;
 352 }
 353
 354 .container{
 355     max-width: 1140px;
 356     margin: 0 auto;
 357     width: 100%;
 358 }
 359
 360 .hidden{
 361     visibility: hidden;
 362     opacity: 0;
 363 }
 364
 365 .overflow-y{
 366     overflow-y: hidden;
 367 }
 368
 369 .pageload-overlay {
 370     position: fixed;
 371     width: 100%;
 372     height: 100%;
 373     top: 0;
 374     left: 0;
 375     visibility: hidden;
 376 }
 377
 378 /* ==========================================================================
 379    2. Header
 380    ========================================================================== */
 381
 382 header{
 383     z-index: 999;
 384     position: fixed;
 385     top: 0;
 386     width: 100%;
 387     left: 0;
 388     -webkit-transition: transform 0.3s ease-in-out;
 389     -moz-transition: transform 0.3s ease-in-out;
 390     -o-transition: transform 0.3s ease-in-out;
 391     transition: transform 0.3s ease-in-out;
 392 }
 393
 394 header .header-container{
 395     background-color: #FFF100;
 396     height: 110px;
 397     padding: 0 30px;
 398     display: flex;
 399 }
 400
 401 .scroll header{
 402     transform: translateY(-100%);
 403 }
 404
 405 .scroll.overflow-y header .header-container{
 406     transform: none;
 407 }
 408
 409 .scroll header #morphing{
 410     top: 0;
 411     height: 100vh;
 412 }
 413
 414 .overflow-y header{
 415     width: 100vw;
 416     height: 100%;
 417     overflow-y: scroll;
 418 }
 419
 420 #morphing{
 421     position: absolute;
 422     top: 110px;
 423     height: calc(100vh - 110px);
 424     width: 100%;
 425     left: 0;
 426     visibility: hidden;
 427     -webkit-transition: all 0.3s ease-in-out;
 428     -moz-transition: all 0.3s ease-in-out;
 429     -o-transition: all 0.3s ease-in-out;
 430     transition: all 0.3s ease-in-out;
 431 }
 432
 433 .begin #morphing{
 434     visibility: visible;
 435 }
 436
 437 header .container{
 438     display: flex;
 439     align-items: center;
 440     justify-content: space-between;
 441 }
 442
 443 header .blog-logo{
 444     position: relative;
 445     z-index: 2;
 446     display: flex;
 447 }
 448
 449 header .blog-logo b{
 450     color: #000000;
 451     font-size: 18px;
 452     line-height: 24px;
 453 }
 454
 455 header .blog-logo img{
 456     max-width: 320px;
 457     max-height: 50px;
 458 }
 459
 460 header nav{
 461     display: flex;
 462     align-items: center;
 463     justify-content: center;
 464     position: relative;
 465     z-index: 9996;
 466 }
 467
 468 header nav ul{
 469     list-style-type: none;
 470     margin: 0;
 471     padding: 0;
 472     font-size: 0;
 473 }
 474
 475 header nav ul li{
 476     display: inline-block;
 477     margin: 0 20px;
 478 }
 479
 480 header nav ul li a{
 481     color: #000000;
 482     font-size: 18px;
 483     font-weight: bold;
 484     line-height: 24px;
 485 }
 486
 487 header .search-trigger{
 488     font-family: 'icons';
 489     margin-left: auto;
 490     height: 23px;
 491     width: 23px;
 492     display: flex;
 493     align-items: center;
 494     cursor: pointer;
 495     position: relative;
 496     font-size: 22px;
 497     margin-left: 10px;
 498     -webkit-transition: opacity 0.3s ease-in-out;
 499     -moz-transition: opacity 0.3s ease-in-out;
 500     -o-transition: opacity 0.3s ease-in-out;
 501     transition: opacity 0.3s ease-in-out;
 502 }
 503
 504 header .search-trigger:before{
 505     content: "\e903";
 506 }
 507
 508 header .pageload-overlay.show + .search-container{
 509     visibility: visible;
 510 }
 511
 512 header .search-container{
 513     display: none;
 514     opacity: 0;
 515     visibility: hidden;
 516     -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
 517     -moz-transition: opacity 0.3s, visibility 0s 0.3s;
 518     -o-transition: opacity 0.3s, visibility 0s 0.3s;
 519     transition: opacity 0.3s, visibility 0s 0.3s;
 520     position: relative;
 521     background: #FFF100;
 522     -webkit-transition: all 0.3s ease-in-out;
 523     -moz-transition: all 0.3s ease-in-out;
 524     -o-transition: all 0.3s ease-in-out;
 525     transition: all 0.3s ease-in-out;
 526 }
 527
 528 header .search-container form{
 529     height: 100px;
 530     max-width: 750px;
 531     margin: 50px auto 100px auto;
 532 }
 533
 534 header .search-container form .container{
 535     position: relative;
 536 }
 537
 538 header .search-container #search-field{
 539     height: 100px;
 540     margin: 0;
 541     border: none;
 542     color: #000000;
 543     font-size: 50px;
 544     font-weight: 300;
 545     line-height: 64px;
 546     border-bottom: 1px solid #000000;
 547     max-width: 100%;
 548     padding: 0;
 549 }
 550
 551 header .search-container #search-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 552     color: #000000;
 553 }
 554 header .search-container #search-field::-moz-placeholder { /* Firefox 19+ */
 555     color: #000000;
 556 }
 557 header .search-container #search-field:-ms-input-placeholder { /* IE 10+ */
 558     color: #000000;
 559 }
 560 header .search-container #search-field:-moz-placeholder { /* Firefox 18- */
 561     color: #000000;
 562 }
 563
 564 header .nav-trigger{
 565     display: none;
 566     margin-left: auto;
 567     height: 24px;
 568     cursor: pointer;
 569     position: relative;
 570     margin-right: 10px;
 571     -webkit-transition: opacity 0.3s ease-in-out;
 572     -moz-transition: opacity 0.3s ease-in-out;
 573     -o-transition: opacity 0.3s ease-in-out;
 574     transition: opacity 0.3s ease-in-out;
 575 }
 576
 577 header .nav-trigger:hover{
 578     opacity: .6;
 579 }
 580
 581 header .nav-trigger i{
 582     display: inline-block;
 583     width: 28px;
 584     background: #000;
 585     height: 3px;
 586     position: relative;
 587     vertical-align: top;
 588     margin-top: 10px;
 589     -webkit-transition: background 0.3s ease-in-out;
 590     -moz-transition: background 0.3s ease-in-out;
 591     -o-transition: background 0.3s ease-in-out;
 592     transition: background 0.3s ease-in-out;
 593 }
 594
 595 .begin-nav-trigger header .nav-trigger i{
 596     background: transparent;
 597 }
 598
 599 header .nav-trigger i:before,
 600 header .nav-trigger i:after{
 601     content: '';
 602     width: 28px;
 603     background: #000;
 604     height: 3px;
 605     position: absolute;
 606     top: -8px;
 607     -webkit-transition: all 0.3s ease-in-out;
 608     -moz-transition: all 0.3s ease-in-out;
 609     -o-transition: all 0.3s ease-in-out;
 610     transition: all 0.3s ease-in-out;
 611 }
 612
 613 header .nav-trigger i:after{
 614     top: auto;
 615     bottom: -8px;
 616 }
 617
 618 .begin-nav-trigger header .nav-trigger i:before{
 619     -webkit-transform: rotate(-45deg);
 620     -ms-transform: rotate(-45deg);
 621     transform: rotate(-45deg);
 622     top: 0;
 623 }
 624
 625 .begin-nav-trigger header .nav-trigger i:after{
 626     -webkit-transform: rotate(45deg);
 627     -ms-transform: rotate(45deg);
 628     transform: rotate(45deg);
 629     bottom: 0;
 630 }
 631
 632 #results{
 633     max-width: 575px;
 634     margin: 0 auto;
 635     text-align: center;
 636     list-style-type: none;
 637     padding: 0;
 638 }
 639
 640 #results li{
 641     counter-increment: counter;
 642     padding: 0 0 100px;
 643 }
 644
 645 #results li:before{
 646     content: counter(counter, decimal-leading-zero)". ";
 647     vertical-align: top;
 648     display: block;
 649     color: #000000;
 650     font-size: 30px;
 651     line-height: 55px;
 652     opacity: 0.1;
 653     font-weight: bold;
 654 }
 655
 656 #results li a{
 657     font-size: 50px;
 658     font-weight: bold;
 659     line-height: 55px;
 660     font-family: "abril-titling", "Lora", serif;
 661 }
 662
 663 #results p{
 664     display: none;
 665     color: #000;
 666     font-size: 50px;
 667     font-weight: bold;
 668     line-height: 55px;
 669     font-family: "abril-titling", "Lora", serif;
 670 }
 671
 672 #results p.empty{
 673     display: block;
 674 }
 675
 676 .begin-search-trigger .search-container{
 677     display: block;
 678 }
 679
 680 .end-search-trigger .search-container{
 681     visibility: visible;
 682     opacity: 1;
 683 }
 684
 685 .pageload-overlay.show {
 686     visibility: visible;
 687 }
 688
 689 .pageload-overlay svg {
 690     position: absolute;
 691     top: 0;
 692     left: 0;
 693     pointer-events: none;
 694 }
 695
 696 .pageload-overlay svg path {
 697     fill: #FFF100;
 698 }
 699
 700 /* ==========================================================================
 701    3. Inner Content
 702    ========================================================================== */
 703
 704 #content{
 705     margin-top: 170px;
 706 }
 707
 708 #content .post{
 709     text-align: center;
 710     margin-bottom: 70px;
 711     -webkit-transition: opacity 0.3s ease-in-out;
 712     -moz-transition: opacity 0.3s ease-in-out;
 713     -o-transition: opacity 0.3s ease-in-out;
 714     transition: opacity 0.3s ease-in-out;
 715 }
 716
 717 #content.loop .post.featured{
 718     background: #e9e9e9;
 719     padding-top: 50px;
 720 }
 721
 722 #content .post .post-title{
 723     font-size: 70px;
 724     line-height: 85px;
 725     max-width: calc(100% - 30px);
 726     margin: 20px 15px 35px;
 727 }
 728
 729 #content .post .content-holder{
 730     max-width: 750px;
 731     text-align: left;
 732     margin: 0 auto 35px auto;
 733     position: relative;
 734 }
 735
 736 #content .post .content-holder p{
 737     margin-top: 35px;
 738 }
 739
 740 #content .post .content-holder img{
 741     max-width: 100%;
 742     height: auto;
 743     display: block;
 744     -webkit-transition: transform .3s ease-in-out;
 745     -moz-transition: transform .3s ease-in-out;
 746     -o-transition: transform .3s ease-in-out;
 747     transition: opacity .3s ease-in-out;
 748 }
 749
 750 #content .post .content-holder .kg-width-wide img{
 751     max-width: calc(100% + 300px);
 752     left: 50%;
 753     position: relative;
 754     transform: translateX(-50%);
 755 }
 756
 757 #content .post .content-holder .kg-width-full img{
 758     max-width: 100vw;
 759     left: 50%;
 760     position: relative;
 761     transform: translateX(-50%);
 762 }
 763
 764 #content .post .content-holder .img-holder:hover img{
 765     opacity: .8;
 766 }
 767
 768 .editor-content .kg-gallery-container {
 769     display: flex;
 770     flex-direction: column;
 771     margin: 10px auto;
 772     max-width: calc(100% + 300px);
 773     position: relative;
 774     width: 100vw;
 775     left: 50%;
 776     position: relative;
 777     transform: translateX(-50%);
 778 }
 779
 780 .editor-content .kg-gallery-row {
 781     display: flex;
 782     flex-direction: row;
 783     justify-content: center;
 784 }
 785
 786 .editor-content .kg-gallery-image img {
 787     display: flex;
 788     object-fit: cover;
 789     margin: 0;
 790     width: 100%;
 791     height: 100%;
 792     max-width: 100%;
 793 }
 794
 795 .editor-content .kg-gallery-row:not(:first-of-type) {
 796     margin: 10px 0 0 0;
 797 }
 798
 799 .editor-content .kg-gallery-image:not(:first-of-type) {
 800     margin: 0 0 0 10px;
 801 }
 802
 803 #content .content-holder figcaption{
 804     border-bottom: 1px solid #e9e9e9;
 805     padding: 10px 0px;
 806     font-size: 14px;
 807 }
 808
 809 #content .post hr{
 810     margin-top: -5px;
 811 }
 812
 813 #content .post .tags{
 814     color: #B7B7B7;
 815     margin-top: 10px;
 816 }
 817
 818 #content .post .tags a{
 819     color: #B7B7B7;
 820     font-size: 14px;
 821     line-height: 20px;
 822     text-transform: uppercase;
 823 }
 824
 825 #content .post .tags a:hover{
 826     color: #000;
 827 }
 828
 829 #content .post .tags a:before{
 830     content: '#';
 831 }
 832
 833 .post .post-title{
 834     font-size: 70px;
 835     line-height: 85px;
 836     margin-top: 20px;
 837     margin-bottom: 35px;
 838     color: #000;
 839 }
 840
 841 .post-content a{
 842     border-bottom: 1px solid #000;
 843 }
 844
 845 .content-inner a.zoom{
 846     border: none;
 847     cursor: pointer;
 848     cursor: -webkit-zoom-in;
 849     display: block;
 850     text-align: center;
 851 }
 852
 853 .post-content input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=button]),
 854 .post-content textarea{
 855     margin-left: 0;
 856 }
 857
 858 .content-inner .content-holder .social-share{
 859     position: absolute;
 860     top: 0;
 861     font-size: 13px;
 862     font-weight: 500;
 863     line-height: 15px;
 864     color: #C1C1C1;
 865     margin-left: -100px;
 866     text-transform: uppercase;
 867     opacity: 1;
 868     z-index: 998;
 869     transition: all .3s;
 870 }
 871
 872 .content-inner .content-holder .social-share.fade{
 873     opacity: 0;
 874     visibility: hidden;
 875 }
 876
 877 .content-inner .content-holder .social-share.active{
 878     position: fixed;
 879     top: 150px;
 880 }
 881
 882 .content-inner .content-holder .social-share a:not(.img-holder){
 883     border: none;
 884     display: block;
 885     text-align: center;
 886     font-size: 22px;
 887     margin: 25px 0;
 888 }
 889
 890 .content-inner .content-holder .social-share a:not(.img-holder):hover{
 891     border: none;
 892 }
 893
 894 .content-inner .content-holder .social-share a:before{
 895     font-family: 'icons';
 896     color: #C1C1C1;
 897     -webkit-transition: all 0.3s ease-in-out;
 898     -moz-transition: all 0.3s ease-in-out;
 899     -o-transition: all 0.3s ease-in-out;
 900     transition: all 0.3s ease-in-out;
 901 }
 902
 903 .content-inner .content-holder .social-share .twitter:before{
 904     content: "\e902";
 905 }
 906
 907 .content-inner .content-holder .social-share .twitter:hover:before{
 908     color: #1da1f2;
 909 }
 910
 911 .content-inner .content-holder .social-share .facebook:before{
 912     content: "\e901";
 913 }
 914
 915 .content-inner .content-holder .social-share .facebook:hover:before{
 916     color: #3b5998;
 917 }
 918
 919 #content.content-inner .content-holder hr{
 920     margin-top: 0;
 921     margin: 30px 0;
 922 }
 923
 924 #content.content-inner .post .content-holder p{
 925     margin-top: 20px;
 926 }
 927
 928 .content-inner iframe{
 929     max-width: 100% !important;
 930     margin: 30px 0;
 931 }
 932
 933 .content-inner iframe[src*="https://www.youtube.com/"] {
 934     height: calc(750px / 1.77777778) !important;
 935     width: 100% !important;
 936 }
 937
 938 .post-footer{
 939     text-align: center;
 940 }
 941
 942 .post-footer .tags{
 943     color: #B7B7B7;
 944     margin-top: 10px;
 945 }
 946
 947 .post-footer .tags a{
 948     color: #B7B7B7;
 949     font-size: 14px;
 950     line-height: 20px;
 951     text-transform: uppercase;
 952 }
 953
 954 .post-footer .tags a:hover{
 955     color: #000;
 956 }
 957
 958 .post-footer .tags a:before {
 959     content: '#';
 960 }
 961
 962 .comments{
 963     margin: 50px auto 100px auto;
 964     max-width: 750px;
 965 }
 966
 967 .error-title{
 968     text-align: center;
 969     padding: 50px 0 100px 0;
 970 }
 971
 972 .error-title h1{
 973     font-size: 70px;
 974     line-height: 85px;
 975     margin-top: 20px;
 976     margin-bottom: 35px;
 977 }
 978
 979 /* ==========================================================================
 980    4. Pagination
 981    ========================================================================== */
 982
 983 .pagination{
 984     text-align: center;
 985     text-transform: uppercase;
 986     color: #B7B7B7;
 987     font-size: 14px;
 988     margin-bottom: 80px;
 989     margin-top: 80px;
 990 }
 991
 992 .pagination .container{
 993     position: relative;
 994 }
 995
 996 .pagination a{
 997     color: #606060;
 998     font-size: 14px;
 999     letter-spacing: 4px;
1000     line-height: 19px;
1001     position: absolute;
1002     top: 0;
1003     left: 0;
1004 }
1005
1006 .pagination a.older-posts{
1007     left: auto;
1008     right: 0;
1009 }
1010
1011 #load-posts{
1012     display: none;
1013     margin: 100px auto;
1014 }
1015
1016 #load-posts:after{
1017     display: none;
1018 }
1019
1020 #load-posts.visible{
1021     display: block;
1022 }
1023
1024 #load-posts.visible + .pagination{
1025     display: none;
1026 }
1027
1028 /* ==========================================================================
1029    5. Author
1030    ========================================================================== */
1031
1032 .author-template .author{
1033     margin-top: 170px;
1034     border-top: 0;
1035 }
1036
1037 .author-template .author .author-image{
1038     margin-top: 0;
1039 }
1040
1041 .author-template #content{
1042     margin-top: 50px;
1043 }
1044
1045 .author{
1046     margin-top: 50px;
1047     padding: 50px 0;
1048     border-top: 1px solid #E9E9E9;
1049     text-align: center;
1050 }
1051
1052 .author h4{
1053     font-family: "europa", "Cabin", sans-serif;
1054     font-size: 16px;
1055     font-weight: bold;
1056     line-height: 25px;
1057     margin: 0 0 18px 0;
1058 }
1059
1060 .author p{
1061     font-size: 16px;
1062     line-height: 20px;
1063     color: #000;
1064     max-width: 370px;
1065     margin: 0 auto;
1066 }
1067
1068 .author .author-image{
1069     max-width: 80px;
1070     margin: -70px auto 18px auto;
1071 }
1072
1073 .author .author-image img{
1074     max-width: 100%;
1075     border-radius: 50%;
1076     -webkit-transition: all 0.3s ease-in-out;
1077     -moz-transition: all 0.3s ease-in-out;
1078     -o-transition: all 0.3s ease-in-out;
1079     transition: all 0.3s ease-in-out;
1080     width: 80px;
1081     height: 80px;
1082     display: flex;
1083     object-fit: cover;
1084 }
1085
1086 .author .author-image .img:hover img{
1087     border-radius: 0;
1088 }
1089
1090 .author .author-meta{
1091     margin: 20px 0;
1092     color: #B7B7B7;
1093     font-size: 16px;
1094     line-height: 19px;
1095 }
1096
1097 .author .author-meta span{
1098     margin: 0 10px;
1099 }
1100
1101 .author .author-meta a{
1102     color: #B7B7B7;
1103     display: inline-block;
1104 }
1105
1106 .author .author-meta a:hover{
1107     color: #000;
1108 }
1109
1110 .author .author-meta .author-location:before{
1111     font-family: 'icons';
1112     content: "\e905";
1113     color: #A4A4A4;
1114     margin-right: 6px;
1115     vertical-align: top;
1116     font-size: 17px;
1117 }
1118
1119 .author .author-meta .author-link:before{
1120     font-family: 'icons';
1121     content: "\e904";
1122     color: #B7B7B7;
1123     margin-right: 6px;
1124     -webkit-transition: all 0.3s ease-in-out;
1125     -moz-transition: all 0.3s ease-in-out;
1126     -o-transition: all 0.3s ease-in-out;
1127     transition: all 0.3s ease-in-out;
1128     vertical-align: top;
1129     font-size: 17px;
1130 }
1131
1132 .author .author-meta .author-link:hover:before{
1133     color: #000000;
1134 }
1135
1136 .author .social{
1137     font-size: 16px;
1138 }
1139
1140 .author .social a{
1141     margin: 0 5px;
1142 }
1143
1144 .author .social a:before{
1145     color: #B7B7B7;
1146 }
1147
1148 .author .social a.facebook:hover{
1149     color: #3b5998;
1150 }
1151
1152 .author .social a.twitter:hover{
1153     color: #1da1f2;
1154 }
1155
1156 /* ==========================================================================
1157    6. Tags
1158    ========================================================================== */
1159
1160 .tag-title{
1161     margin: 170px 0 0 0;
1162 }
1163
1164 .tag-title h1{
1165     height: 100px;
1166     color: #000000;
1167     font-size: 40px;
1168     line-height: 100px;
1169     font-family: "europa", "Cabin", sans-serif;
1170     font-weight: normal;
1171     text-transform: uppercase;
1172     text-align: center;
1173     margin: 0 auto;
1174 }
1175
1176 .tag-title h1:before{
1177     content: '#';
1178 }
1179
1180 .tag-template #content{
1181     margin-top: 70px;
1182 }
1183
1184 /* ==========================================================================
1185    7. Share Selected Text
1186    ========================================================================== */
1187
1188 .share-selected-text-main-container {
1189     position: absolute;
1190     width: 200px;
1191     margin-left: calc(100%/2 - 100px);
1192     opacity: 0;
1193     -webkit-transform: translateY(5px);
1194     -ms-transform: translateY(5px);
1195     transform: translateY(5px);
1196     transition: .3s ease opacity, .3s ease transform, .3s ease top, .3s ease left;
1197     display: -webkit-flex;
1198     display: -ms-flexbox;
1199     display: flex;
1200     -webkit-justify-content: center;
1201     -ms-flex-pack: center;
1202     justify-content: center;
1203     -webkit-align-items: center;
1204     -ms-flex-align: center;
1205     align-items: center;
1206     -webkit-flex-direction: column;
1207     -ms-flex-direction: column;
1208     flex-direction: column;
1209     z-index: 99;
1210     pointer-events: none;
1211 }
1212
1213 .share-selected-text-main-container.active {
1214     opacity: 1;
1215     -webkit-transform: translateY(0);
1216     -ms-transform: translateY(0);
1217     transform: translateY(0);
1218     z-index: 998;
1219 }
1220
1221 .share-selected-text-main-container.active .share-selected-text-inner {
1222     pointer-events: auto;
1223 }
1224
1225 .share-selected-text-main-container .share-selected-text-inner {
1226     -webkit-flex: 1;
1227     -ms-flex: 1;
1228     flex: 1;
1229     display: -webkit-flex;
1230     display: -ms-flexbox;
1231     display: flex;
1232     -webkit-justify-content: center;
1233     -ms-flex-pack: center;
1234     justify-content: center;
1235     -webkit-align-items: center;
1236     -ms-flex-align: center;
1237     align-items: center;
1238     height: 100%;
1239     pointer-events: none;
1240     position: relative;
1241 }
1242
1243 .share-selected-text-main-container .share-selected-text-btn {
1244     display: -webkit-flex;
1245     display: -ms-flexbox;
1246     display: flex;
1247     -webkit-justify-content: center;
1248     -ms-flex-pack: center;
1249     justify-content: center;
1250     -webkit-align-items: center;
1251     -ms-flex-align: center;
1252     align-items: center;
1253     text-transform: uppercase;
1254     font-weight: 700;
1255     color: #fff;
1256     height: 100%;
1257     margin: 0;
1258     padding: 0 20px;
1259     -webkit-transition: all 0.3s ease-in-out;
1260     -moz-transition: all 0.3s ease-in-out;
1261     -o-transition: all 0.3s ease-in-out;
1262     transition: all 0.3s ease-in-out;
1263 }
1264
1265 .share-selected-text-main-container .share-selected-text-btn .fa-twitter:before,
1266 .share-selected-text-main-container .share-selected-text-btn .icon-sst-twitter:before{
1267     font-family: 'icons';
1268     content: '\e902';
1269     font-size: 10px;
1270     font-style: normal;
1271 }
1272
1273 .tooltip {
1274     display: inline-block;
1275     position: absolute;
1276     bottom: 4px;
1277 }
1278
1279 .tooltip-trigger {
1280     cursor: pointer;
1281     position: relative;
1282 }
1283
1284 .tooltip-trigger-text {
1285     display: block;
1286     padding: 0.85em;
1287 }
1288
1289 .tooltip-base {
1290     position: absolute;
1291     bottom: 2em;
1292     left: 50%;
1293     margin-left: -25px;
1294     width: 50px;
1295     height: 50px;
1296     display: flex;
1297     align-items: center;
1298     justify-content: center;
1299     opacity: 0;
1300 }
1301
1302 .tooltip-content {
1303     background: #555555;
1304     width: 50px;
1305     height: 50px;
1306     border-radius: 50%;
1307     position: relative;
1308     -webkit-transition: background 0.3s ease-in-out;
1309     -moz-transition: background 0.3s ease-in-out;
1310     -o-transition: background 0.3s ease-in-out;
1311     transition: background 0.3s ease-in-out;
1312 }
1313
1314 .tooltip-content:before{
1315     content: '';
1316     width: 10px;
1317     height: 10px;
1318     background: #555555;
1319     transform: rotate(45deg);
1320     position: absolute;
1321     bottom: -3px;
1322     left: 50%;
1323     margin-left: -5px;
1324     z-index: -1;
1325     -webkit-transition: background 0.3s ease-in-out;
1326     -moz-transition: background 0.3s ease-in-out;
1327     -o-transition: background 0.3s ease-in-out;
1328     transition: background 0.3s ease-in-out;
1329 }
1330
1331 .tooltip-content:hover,
1332 .tooltip-content:hover:before{
1333     background: #1da1f2;
1334 }
1335
1336 .tooltip-shape {
1337     fill: #141514;
1338 }
1339
1340 .tooltip--smaug .tooltip-base {
1341     bottom: -0.5em;
1342     transform-origin: 50% 100%;
1343 }
1344
1345 .tooltip--smaug .tooltip-content {
1346     padding: 0;
1347 }
1348
1349 /* ==========================================================================
1350    8. Subscribe
1351    ========================================================================== */
1352
1353 .subscribe{
1354     background-color: #FFF100;
1355     padding: 80px 0;
1356 }
1357
1358 .subscribe header{
1359     position: relative;
1360     margin-bottom: 60px;
1361 }
1362
1363 .subscribe.scroll header{
1364     transform: none;
1365 }
1366
1367 .subscribe header .container{
1368     justify-content: center;
1369 }
1370
1371 .subscribe #content{
1372     margin-top: 0;
1373 }
1374
1375 .subscribe footer{
1376     padding-top: 0;
1377 }
1378
1379 .subscribe header a{
1380     width: 80px;
1381     height: 80px;
1382     display: flex;
1383     margin: 0;
1384     align-items: center;
1385     justify-content: center;
1386 }
1387
1388 .subscribe header a:before{
1389     font-family: "icons";
1390     content: "\e907";
1391     font-size: 24px;
1392     color: #000000;
1393 }
1394
1395 /* ==========================================================================
1396    9. Footer
1397    ========================================================================== */
1398
1399 footer{
1400     background-color: #FFF100;
1401     padding: 80px 30px;
1402     text-align: center;
1403 }
1404
1405 footer h3{
1406     margin-top: 0;
1407     font-family: "europa", "Cabin", sans-serif;
1408     font-size: 18px;
1409     line-height: 24px;
1410     color: #000;
1411     margin-bottom: 20px;
1412 }
1413
1414 footer .tags{
1415     margin-bottom: 80px;
1416 }
1417
1418 footer .tags ul{
1419     list-style-type: none;
1420     padding: 0 30px;
1421     margin: 0;
1422 }
1423
1424 footer .tags ul li{
1425     display: inline-block;
1426     font-family: "europa", "Cabin", sans-serif;
1427     font-size: 20px;
1428     line-height: 30px;
1429     text-transform: uppercase;
1430     margin: 0 10px;
1431 }
1432
1433 footer .tags ul li a:before{
1434     content: '#';
1435 }
1436
1437 footer form,
1438 .gh-signin{
1439     position: relative;
1440     display: block;
1441     max-width: 500px;
1442     width: 100%;
1443     margin: 0 auto 80px auto;
1444 }
1445
1446 footer form button[type="submit"],
1447 .gh-signin button[type="submit"]{
1448     font-size: 0;
1449     padding: 0;
1450     border: none;
1451     background: transparent;
1452     box-shadow: none;
1453     line-height: 20px;
1454     width: 20px;
1455     position: absolute;
1456     top: 13px;
1457     z-index: 22;
1458     height: 20px;
1459     display: block;
1460     right: 15px;
1461 }
1462
1463 footer form button[type="submit"]:hover,
1464 .gh-signin button[type="submit"]:hover{
1465     border: none;
1466     box-shadow: none;
1467     transform: translate3d(-3px, 0,0);
1468 }
1469
1470 footer form button[type="submit"]:before,
1471 .gh-signin button[type="submit"]:before{
1472     font-family: "icons";
1473     content: "\e900";
1474     font-size: 12px;
1475     color: #000000;
1476 }
1477
1478 .social{
1479     text-align: center;
1480     font-size: 28px;
1481 }
1482
1483 .social a{
1484     margin: 0 10px 70px 10px;
1485     display: inline-block;
1486 }
1487
1488 .social a:hover:before{
1489     color: #555555;
1490 }
1491
1492 .social a:before{
1493     color: #000000;
1494     -webkit-transition: all 0.3s ease-in-out;
1495     -moz-transition: all 0.3s ease-in-out;
1496     -o-transition: all 0.3s ease-in-out;
1497     transition: all 0.3s ease-in-out;
1498 }
1499
1500 .gh-input.error{
1501     animation: shake .5s linear;
1502     -webkit-animation: shake .5s linear;
1503 }
1504
1505 @-webkit-keyframes shake {
1506     8%, 41% {
1507         -webkit-transform: translateX(-10px);
1508     }
1509     25%, 58% {
1510         -webkit-transform: translateX(10px);
1511     }
1512     75% {
1513         -webkit-transform: translateX(-5px);
1514     }
1515     92% {
1516         -webkit-transform: translateX(5px);
1517     }
1518     0%, 100% {
1519         -webkit-transform: translateX(0);
1520     }
1521 }
1522
1523 /* ==========================================================================
1524    10. Responsive
1525    ========================================================================== */
1526
1527 @media (max-width: 1199px) {
1528     .container{
1529         max-width: 970px;
1530     }
1531     #results li{
1532         padding-bottom: 50px;
1533     }
1534     #results li:last-child{
1535         padding-bottom: 100px;
1536     }
1537     #results li a{
1538         font-size: 42px;
1539         line-height: 48px;
1540     }
1541     #content .post,
1542     #disqus_thread{
1543         padding-left: 30px;
1544         padding-right: 30px;
1545     }
1546     #content.loop .post{
1547         overflow: visible;
1548     }
1549     .pagination{
1550         padding: 0 30px;
1551     }
1552     #content .post .post-title{
1553         font-size: 54px;
1554         line-height: 65px;
1555     }
1556     .content-inner .content-holder .social-share{
1557         margin-left: -80px;
1558     }
1559 }
1560
1561 @media (max-width: 991px) {
1562     .container{
1563         max-width: 750px;
1564     }
1565     header nav ul li{
1566         margin: 0 15px;
1567     }
1568     header .search-container form{
1569         margin-bottom: 50px;
1570     }
1571     header .search-container #search-field{
1572         height: 60px;
1573         font-size: 32px;
1574         line-height: 42px;
1575         max-width: 520px;
1576         margin: 0 auto;
1577         width: calc(100% - 60px);
1578     }
1579     #results{
1580         max-width: 320px;
1581     }
1582     #results li a,
1583     #results p{
1584         font-size: 32px;
1585         line-height: 38px;
1586     }
1587     #results li{
1588         padding-bottom: 50px;
1589     }
1590     #results li:last-child{
1591         padding-bottom: 100px;
1592     }
1593     #morphing{
1594         top: 104px;
1595         height: calc(100vh - 104px);
1596     }
1597     .content-inner .content-holder .social-share{
1598         position: relative;
1599         text-align: center;
1600         margin-left: 0;
1601         margin-top: 50px;
1602     }
1603     .content-inner .content-holder .social-share span{
1604         display: block;
1605     }
1606     .content-inner .content-holder .social-share a:not(.img-holder){
1607         display: inline-block;
1608         margin: 25px 10px;
1609     }
1610     #content .post .content-holder img.kg-image-wide{
1611         max-width: 100vw;
1612     }
1613     .content-inner iframe[src*="https://www.youtube.com/"] {
1614         height: calc(690px / 1.77777778) !important;
1615     }
1616     .tag-title h1{
1617         height: 40px;
1618         font-size: 24px;
1619         line-height: 40px;
1620     }
1621     .tag-template #content {
1622         margin-top: 60px;
1623     }
1624     .subscribe{
1625         padding: 40px 0;
1626     }
1627     .subscribe header{
1628         margin-bottom: 20px;
1629     }
1630     .subscribe #content .post{
1631         margin-bottom: 20px;
1632     }
1633     .author-template .author{
1634         padding-bottom: 20px;
1635         padding-top: 0;
1636     }
1637     footer{
1638         padding: 40px 30px;
1639     }
1640     footer .tags ul li a{
1641         font-size: 14px;
1642         line-height: 20px;
1643     }
1644     footer .tags{
1645         margin-bottom: 40px;
1646     }
1647     footer form, .gh-signin{
1648         max-width: 320px;
1649         margin-bottom: 40px;
1650     }
1651     .social a{
1652         font-size: 20px;
1653         margin-bottom: 40px;
1654     }
1655 }
1656
1657 @media (max-width: 767px) {
1658     #content{
1659         margin-top: 100px;
1660     }
1661     .content-inner .post-content ul,
1662     .content-inner .post-content ol{
1663         padding-left: 20px;
1664     }
1665     ul li, ol li{
1666         font-size: 16px;
1667         line-height: 24px;
1668     }
1669     blockquote{
1670         margin: 0;
1671     }
1672     code{
1673         max-width: calc(100% - 30px);
1674         overflow: auto;
1675         line-height: 24px;
1676         vertical-align: top;
1677     }
1678     header .nav-trigger{
1679         display: inline-block;
1680     }
1681     header nav{
1682         position: static;
1683     }
1684     header nav ul{
1685         display: none;
1686         position: absolute;
1687         top: 100px;
1688         left: 0;
1689         width: 100%;
1690         visibility: hidden;
1691         opacity: 0;
1692         z-index: -1;
1693         padding-bottom: 50px;
1694         -webkit-transition: all 0.3s ease-in-out;
1695         -moz-transition: all 0.3s ease-in-out;
1696         -o-transition: all 0.3s ease-in-out;
1697         transition: all 0.3s ease-in-out;
1698     }
1699     header nav ul li{
1700         display: block;
1701         margin: 15px;
1702         text-align: center;
1703     }
1704     header .search-container{
1705         opacity: 0;
1706         visibility: hidden;
1707         z-index: -1;
1708         -webkit-transition: all 0.3s ease-in-out;
1709         -moz-transition: all 0.3s ease-in-out;
1710         -o-transition: all 0.3s ease-in-out;
1711         transition: all 0.3s ease-in-out;
1712     }
1713     header .search-container #search-field{
1714         height: 48px;
1715         font-size: 24px;
1716         line-height: 32px;
1717         max-width: 300px;
1718     }
1719     .end-nav-trigger header,
1720     .end-search-trigger header{
1721         background: #fff100;
1722     }
1723     .begin-nav-trigger header nav ul,
1724     .begin-search-trigger .search-container{
1725         display: block;
1726         z-index: 1;
1727     }
1728     .end-nav-trigger header nav ul,
1729     .end-search-trigger .search-container{
1730         visibility: visible;
1731         opacity: 1;
1732     }
1733     #results li a, #results p{
1734         font-size: 24px;
1735         line-height: 32px;
1736     }
1737     #results{
1738         max-width: 280px;
1739     }
1740     #results li{
1741         padding-bottom: 25px;
1742     }
1743     header .search-container form{
1744         margin: 20px auto 0;
1745     }
1746     header .header-container{
1747         padding: 0 15px;
1748         height: 70px;
1749     }
1750     header .blog-logo img{
1751         max-height: 35px;
1752     }
1753     #results li:before{
1754         font-size: 18px;
1755         line-height: 32px;
1756     }
1757     #results li:last-child{
1758         padding-bottom: 50px;
1759     }
1760     #content.loop .post{
1761         margin-bottom: 70px;
1762     }
1763     #content .post{
1764         padding-left: 15px;
1765         padding-right: 15px;
1766         margin-bottom: 30px;
1767     }
1768     #content .post .post-title{
1769         font-size: 32px;
1770         line-height: 38px;
1771         max-width: 80%;
1772         margin-left: auto;
1773         margin-right: auto;
1774     }
1775     #content .post .content-holder p{
1776         font-size: 16px;
1777         line-height: 24px;
1778     }
1779     #content .post .content-holder img{
1780         max-width: calc(100% + 30px);
1781         position: relative;
1782         left: 50%;
1783         -webkit-transform: translateX(-50%);
1784         -ms-transform: translateX(-50%);
1785         transform: translateX(-50%);
1786     }
1787    .content-inner iframe[src*="https://www.youtube.com/"] {
1788         height: calc((100vw - 30px) / 1.77777778) !important;
1789     }
1790     #disqus_thread{
1791         padding-left: 15px;
1792         padding-right: 15px;
1793     }
1794     .author-template .author{
1795         margin-top: 130px;
1796     }
1797     .author p{
1798         padding: 0 15px;
1799     }
1800     #morphing{
1801         top: 64px;
1802     }
1803     .tag-title h1{
1804         font-size: 24px;
1805     }
1806     .tag-title{
1807         margin-top: 110px;
1808     }
1809     .tag-template #content {
1810         margin-top: 40px;
1811     }
1812     .author .author-meta{
1813         padding: 0 15px;
1814     }
1815     .author .author-meta span{
1816         display: block;
1817         margin: 15px;
1818     }
1819     .comments{
1820         margin-bottom: 50px;
1821     }
1822     footer{
1823         padding: 50px 30px;
1824     }
1825     footer .tags ul li{
1826         font-size: 18px;
1827         line-height: 27px;
1828     }
1829     footer .tags{
1830         margin-bottom: 50px;
1831     }
1832     footer form{
1833         margin-bottom: 50px;
1834     }
1835     .social a{
1836         margin-bottom: 50px;
1837     }
1838     .copyright{
1839         line-height: 24px;
1840     }
1841     .error-title{
1842         padding-bottom: 80px;
1843     }
1844     .error-title h1{
1845         font-size: 32px;
1846         line-height: 38px;
1847         margin-bottom: 0;
1848     }
1849     .error-title p{
1850         font-size: 16px;
1851         line-height: 24px;
1852         margin-top: 10px;
1853     }
1854 }
1855
1856 @media (max-width: 540px) {
1857     #content .post .post-title{
1858         max-width: 100%;
1859     }
1860 }