mypapers/webslides/static/css/webslides.css

   1 /*!
   2  * Name: WebSlides
   3  * Version: 1.5.0
   4  * Date: 2017-09-16
   5  * Description: Making HTML presentations easy
   6  * URL: https://github.com/webslides/webslides#readme
   7  * Credits: @jlantunez, @LuisSacristan, @Belelros
   8  */
   9 @charset "UTF-8";
  10 /*-----------------------------------------------------------------------------------
  11         0. CSS Reset & Normalize
  12         1. Base
  13                 1.1 Wrap/Container
  14                 1.2 Animations
  15                 1.3 Responsive Media (videos, iframe, screenshots...)
  16                 1.4 Basic Grid (2,3,4 columns)
  17         2. Typography & Lists
  18                 2.1 Headings with background
  19                 2.2 Classes: .text-
  20                 2.3 San Francisco Font (Apple)
  21         3. Header & Footer
  22                 3.1 Logo
  23         4. Navigation
  24                 4.1 Navbars
  25         5. SLIDES (vertically and horizontally centered)
  26                 5.1 Mini container & Alignment
  27                 5.2 Counter / Navigation Slides
  28                 5.3 Background Images/Video
  29         6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height).
  30                 6.1 .flexblock.features
  31                 6.2 .flexblock.clients
  32                 6.3 .flexblock.steps
  33                 6.4 .flexblock.metrics
  34                 6.5 .flexblock.specs
  35                 6.6 .flexblock.reasons
  36                 6.7 .flexblock.gallery
  37                 6.8 .flexblock.plans
  38                 6.9. flexblock.activity
  39         7. Promos/Offers (pricing, tagline, CTA...)
  40         8. Work / Resume / CV
  41         9. Table of contents
  42         10. Cards
  43         11. Quotes
  44         12. Avatars
  45         13. Tables
  46         14. Forms
  47   15. Longform Elements
  48         16. Safari Bug (flex-wrap)
  49         17. Slidex index (aka zoom)
  50   18. Print
  51   19. Colors
  52 ----------------------------------------------------------------------------------- */
  53 /*
  54 =========================================
  55 0. CSS Reset & Normalize
  56 =========================================
  57 */
  58 html,
  59 body,
  60 div,
  61 span,
  62 applet,
  63 object,
  64 iframe,
  65 h1,
  66 h2,
  67 h3,
  68 h4,
  69 h5,
  70 h6,
  71 p,
  72 blockquote,
  73 pre,
  74 a,
  75 abbr,
  76 acronym,
  77 address,
  78 big,
  79 cite,
  80 code,
  81 del,
  82 dfn,
  83 em,
  84 img,
  85 ins,
  86 kbd,
  87 q,
  88 s,
  89 samp,
  90 small,
  91 strike,
  92 strong,
  93 sub,
  94 sup,
  95 tt,
  96 var,
  97 b,
  98 u,
  99 i,
 100 center,
 101 dl,
 102 dt,
 103 dd,
 104 ol,
 105 ul,
 106 li,
 107 fieldset,
 108 form,
 109 label,
 110 legend,
 111 table,
 112 caption,
 113 tbody,
 114 tfoot,
 115 thead,
 116 tr,
 117 th,
 118 td,
 119 article,
 120 aside,
 121 canvas,
 122 details,
 123 embed,
 124 figure,
 125 figcaption,
 126 footer,
 127 header,
 128 menu,
 129 nav,
 130 output,
 131 ruby,
 132 section,
 133 summary,
 134 time,
 135 mark,
 136 audio,
 137 video {
 138   border: 0;
 139   font: inherit;
 140   font-size: 100%;
 141   margin: 0;
 142   padding: 0;
 143   vertical-align: baseline; }
 144
 145 article,
 146 aside,
 147 details,
 148 figcaption,
 149 figure,
 150 footer,
 151 header,
 152 main,
 153 menu,
 154 nav,
 155 section,
 156 summary {
 157   display: block; }
 158
 159 body {
 160   line-height: 1; }
 161
 162 blockquote,
 163 q {
 164   quotes: '' ''; }
 165
 166 blockquote:before,
 167 blockquote:after,
 168 q:before,
 169 q:after {
 170   content: ''; }
 171
 172 table {
 173   border-collapse: collapse;
 174   border-spacing: 0;
 175   margin-bottom: 24px;
 176   width: 100%; }
 177
 178 html {
 179   -ms-text-size-adjust: 100%;
 180   -webkit-text-size-adjust: 100%;
 181   -webkit-box-sizing: border-box;
 182           box-sizing: border-box; }
 183
 184 *,
 185 *::before,
 186 *::after {
 187   -webkit-box-sizing: inherit;
 188           box-sizing: inherit; }
 189
 190 audio,
 191 canvas,
 192 progress,
 193 video {
 194   display: inline-block;
 195   vertical-align: baseline; }
 196
 197 embed,
 198 iframe,
 199 object {
 200   max-width: 100%; }
 201
 202 audio:not([controls]) {
 203   display: none;
 204   height: 0; }
 205
 206 [hidden],
 207 template {
 208   display: none; }
 209
 210 ul {
 211   list-style: square;
 212   text-indent: inherit; }
 213
 214 ol {
 215   list-style: decimal; }
 216
 217 b,
 218 strong {
 219   font-weight: 600; }
 220
 221 a {
 222   background-color: transparent; }
 223
 224 a:active,
 225 a:hover {
 226   outline: 0; }
 227
 228 sup,
 229 sub {
 230   font-size: .75em;
 231   height: 0;
 232   line-height: 2.2em;
 233   position: relative;
 234   vertical-align: baseline; }
 235
 236 sup {
 237   bottom: 1ex; }
 238
 239 sub {
 240   top: .5ex; }
 241
 242 small {
 243   font-size: .75em;
 244   line-height: 1.72; }
 245
 246 big {
 247   font-size: 1.25em; }
 248
 249 hr {
 250   border: 0;
 251   clear: both;
 252   display: block;
 253   height: 1px;
 254   margin: 3.2rem auto;
 255   text-align: center;
 256   width: 100%; }
 257
 258 h2 + hr,
 259 h3 + hr {
 260   margin-bottom: 4.8rem; }
 261
 262 p + hr {
 263   margin-bottom: 4rem; }
 264
 265 dfn,
 266 cite,
 267 em,
 268 i {
 269   font-style: italic; }
 270
 271 abbr,
 272 acronym {
 273   cursor: help; }
 274
 275 mark,
 276 ins {
 277   padding: 0 4px;
 278   text-decoration: none;
 279   text-shadow: none; }
 280
 281 ::-moz-selection {
 282   text-shadow: none; }
 283
 284 ::selection {
 285   text-shadow: none; }
 286
 287 img {
 288   border: 0;
 289   height: auto;
 290   max-width: 100%; }
 291
 292 img:hover {
 293   opacity: .9; }
 294
 295 svg:not(:root) {
 296   overflow: hidden; }
 297
 298 figure {
 299   line-height: 0;
 300   margin: 0;
 301   position: relative; }
 302
 303 optgroup {
 304   font-weight: bold; }
 305
 306 td,
 307 th {
 308   padding: 0; }
 309
 310 dt {
 311   font-weight: bold; }
 312
 313 dd {
 314   margin: 0; }
 315
 316 /*=== Clearing === */
 317 header:before, header:after,
 318 main:before,
 319 main:after,
 320 section:before,
 321 section:after,
 322 aside:before,
 323 aside:after,
 324 footer:before,
 325 footer:after,
 326 .clear:before,
 327 .clear:after,
 328 .wrap:before,
 329 .wrap:after {
 330   content: '';
 331   display: table; }
 332
 333 header:after,
 334 main:after,
 335 section:after,
 336 aside:after,
 337 footer:after,
 338 .clear:after,
 339 .wrap:after {
 340   clear: both; }
 341
 342 /*=========================================
 343 1. Base --> Baseline: 8px = .8rem
 344 =========================================== */
 345 /* -- Disable elastic scrolling/bounce:
 346 webslides.js will add .ws-ready automatically. Don't worry :) -- */
 347 .ws-ready,
 348 .ws-ready body {
 349   height: 100%;
 350   overflow: hidden;
 351   width: 100%; }
 352
 353 .ws-ready.ws-ready-zoom {
 354   overflow: visible; }
 355   .ws-ready.ws-ready-zoom body {
 356     overflow: auto; }
 357
 358 #webslides {
 359   -ms-overflow-style: none;
 360   -webkit-overflow-scrolling: touch;
 361   height: 100vh;
 362   overflow-x: hidden;
 363   overflow-y: scroll; }
 364   #webslides::-webkit-scrollbar {
 365     display: none; }
 366
 367 li li {
 368   margin-left: 1.6rem; }
 369
 370 a,
 371 a:active,
 372 a:focus,
 373 a:visited,
 374 input:focus,
 375 textarea:focus,
 376 button {
 377   text-decoration: none;
 378   -webkit-transition: all .3s ease-out;
 379   transition: all .3s ease-out; }
 380
 381 p a:active {
 382   position: relative;
 383   top: 2px; }
 384
 385 nav a[rel='external'] em,
 386 .hidden {
 387   clip: rect(1px, 1px, 1px, 1px);
 388   height: 1px;
 389   overflow: hidden;
 390   position: absolute;
 391   width: 1px; }
 392
 393 .shadow {
 394   position: relative; }
 395   .shadow:before, .shadow:after {
 396     bottom: 1.6rem;
 397     content: '';
 398     max-width: 300px;
 399     position: absolute;
 400     top: 80%;
 401     width: 50%;
 402     z-index: -1; }
 403   .shadow:after {
 404     right: 2.4rem;
 405     -webkit-transform: rotate(3deg);
 406             transform: rotate(3deg); }
 407   .shadow:before {
 408     left: 2.4rem;
 409     -webkit-transform: rotate(-3deg);
 410             transform: rotate(-3deg); }
 411
 412 /*=== 1.1 WRAP/CONTAINER === */
 413 .wrap,
 414 header nav,
 415 footer nav {
 416   margin-left: auto;
 417   margin-right: auto;
 418   max-width: 100%;
 419   position: relative;
 420   width: 100%;
 421   z-index: 2; }
 422   @media (min-width: 1024px) {
 423     .wrap,
 424     header nav,
 425     footer nav {
 426       width: 90%; } }
 427
 428 .frame,
 429 .shadow {
 430   padding: 2.4rem; }
 431
 432 .radius {
 433   border-radius: .4rem; }
 434
 435 .alignright {
 436   float: right; }
 437
 438 .alignleft {
 439   float: left; }
 440
 441 .aligncenter {
 442   margin-left: auto;
 443   margin-right: auto;
 444   text-align: center; }
 445
 446 img.aligncenter,
 447 figure.aligncenter {
 448   display: block;
 449   margin-bottom: .8rem;
 450   margin-top: .8rem; }
 451
 452 img.alignleft,
 453 figure.alignleft,
 454 img.alignright,
 455 figure.alignright,
 456 img.aligncenter,
 457 figure.aligncenter {
 458   margin-bottom: 3.2rem;
 459   margin-top: 3.2rem; }
 460
 461 img.alignright,
 462 svg.alignright,
 463 figure.alignright {
 464   margin: .8rem 0 .8rem 2.4rem; }
 465
 466 img.alignleft,
 467 svg.alignleft,
 468 figure.alignleft {
 469   margin: .8rem 2.4rem .8rem 0; }
 470
 471 /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
 472 @media (min-width: 1024px) {
 473   .size-80 {
 474     width: 80%; }
 475   .size-70 {
 476     width: 70%; }
 477   .size-60 {
 478     width: 60%; }
 479   .size-50 {
 480     width: 50%; }
 481   .size-40 {
 482     width: 40%; }
 483   .size-30 {
 484     width: 30%; }
 485   .size-20 {
 486     width: 20%; } }
 487
 488 pre,
 489 code {
 490   font-family: 'Cousine', monospace; }
 491
 492 pre {
 493   font-size: 1.6rem;
 494   line-height: 2.4rem;
 495   overflow: auto;
 496   padding: 2.4rem;
 497   text-align: left;
 498   white-space: pre-wrap;
 499   width: 100%;
 500   word-wrap: break-word; }
 501   pre + p {
 502     margin-top: 3.2rem; }
 503   pre code {
 504     padding: 0; }
 505
 506 code {
 507   padding: .4rem; }
 508
 509 /* === 1.2 Animations ================
 510 Just 5 basic animations:
 511 .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight
 512 https://github.com/daneden/animate.css */
 513 /*-- fadeIn -- */
 514 @-webkit-keyframes fadeIn {
 515   from {
 516     opacity: 0; }
 517   to {
 518     opacity: 1; } }
 519 @keyframes fadeIn {
 520   from {
 521     opacity: 0; }
 522   to {
 523     opacity: 1; } }
 524
 525 .fadeIn {
 526   -webkit-animation: fadeIn 1s;
 527           animation: fadeIn 1s; }
 528
 529 /*-- fadeInUp -- */
 530 @-webkit-keyframes fadeInUp {
 531   from {
 532     opacity: 0;
 533     -webkit-transform: translate3d(0, 100%, 0);
 534             transform: translate3d(0, 100%, 0); }
 535   to {
 536     opacity: 1;
 537     -webkit-transform: none;
 538             transform: none; } }
 539 @keyframes fadeInUp {
 540   from {
 541     opacity: 0;
 542     -webkit-transform: translate3d(0, 100%, 0);
 543             transform: translate3d(0, 100%, 0); }
 544   to {
 545     opacity: 1;
 546     -webkit-transform: none;
 547             transform: none; } }
 548
 549 .fadeInUp {
 550   -webkit-animation: fadeInUp 1s;
 551           animation: fadeInUp 1s; }
 552
 553 /*-- zoomIn -- */
 554 @-webkit-keyframes zoomIn {
 555   from {
 556     -webkit-transform: scale3d(0.3, 0.3, 0.3);
 557             transform: scale3d(0.3, 0.3, 0.3); }
 558   50% {
 559     opacity: 1; } }
 560 @keyframes zoomIn {
 561   from {
 562     -webkit-transform: scale3d(0.3, 0.3, 0.3);
 563             transform: scale3d(0.3, 0.3, 0.3); }
 564   50% {
 565     opacity: 1; } }
 566
 567 .zoomIn {
 568   -webkit-animation: zoomIn 1s;
 569           animation: zoomIn 1s; }
 570
 571 /*-- slideInLeft -- */
 572 @-webkit-keyframes slideInLeft {
 573   from {
 574     -webkit-transform: translate3d(-100%, 0, 0);
 575             transform: translate3d(-100%, 0, 0);
 576     visibility: visible; }
 577   to {
 578     -webkit-transform: translate3d(0, 0, 0);
 579             transform: translate3d(0, 0, 0); } }
 580 @keyframes slideInLeft {
 581   from {
 582     -webkit-transform: translate3d(-100%, 0, 0);
 583             transform: translate3d(-100%, 0, 0);
 584     visibility: visible; }
 585   to {
 586     -webkit-transform: translate3d(0, 0, 0);
 587             transform: translate3d(0, 0, 0); } }
 588
 589 .slideInLeft {
 590   -webkit-animation: slideInLeft 1s;
 591           animation: slideInLeft 1s;
 592   -webkit-animation-fill-mode: both;
 593           animation-fill-mode: both; }
 594
 595 /*-- slideInRight -- */
 596 @-webkit-keyframes slideInRight {
 597   from {
 598     -webkit-transform: translate3d(100%, 0, 0);
 599             transform: translate3d(100%, 0, 0);
 600     visibility: visible; }
 601   to {
 602     -webkit-transform: translate3d(0, 0, 0);
 603             transform: translate3d(0, 0, 0); } }
 604 @keyframes slideInRight {
 605   from {
 606     -webkit-transform: translate3d(100%, 0, 0);
 607             transform: translate3d(100%, 0, 0);
 608     visibility: visible; }
 609   to {
 610     -webkit-transform: translate3d(0, 0, 0);
 611             transform: translate3d(0, 0, 0); } }
 612
 613 .slideInRight {
 614   -webkit-animation: slideInRight 1s;
 615           animation: slideInRight 1s;
 616   -webkit-animation-fill-mode: both;
 617           animation-fill-mode: both; }
 618
 619 /* Animated Background (Matrix) */
 620 @-webkit-keyframes anim {
 621   0% {
 622     -webkit-transform: translateY(0);
 623             transform: translateY(0); }
 624   100% {
 625     -webkit-transform: translateY(-1200px);
 626             transform: translateY(-1200px); } }
 627 @keyframes anim {
 628   0% {
 629     -webkit-transform: translateY(0);
 630             transform: translateY(0); }
 631   100% {
 632     -webkit-transform: translateY(-1200px);
 633             transform: translateY(-1200px); } }
 634
 635 /* Duration */
 636 .slow {
 637   -webkit-animation-duration: 4s;
 638           animation-duration: 4s; }
 639   .slow + .slow {
 640     -webkit-animation-duration: 5s;
 641             animation-duration: 5s; }
 642
 643 /*=== 1.3 Responsive Media (videos, iframe...) === */
 644 .embed {
 645   height: 0;
 646   overflow: hidden;
 647   /*aspect ratio:16:9*/
 648   padding-bottom: 56.6%;
 649   /*aspect ratio: 4:3*/
 650   /*padding-bottom: 75%;*/
 651   position: relative;
 652   /* -- Responsive background video
 653   https://fvsch.com/code/video-background/ -- */ }
 654   .embed iframe,
 655   .embed object,
 656   .embed embed,
 657   .embed video {
 658     height: 100%;
 659     left: 0;
 660     margin: 0;
 661     position: absolute;
 662     top: 0;
 663     width: 100%; }
 664   .fullscreen > .embed {
 665     bottom: 0;
 666     height: auto;
 667     left: 0;
 668     padding-bottom: 0;
 669     position: fixed;
 670     right: 0;
 671     top: 0;
 672     /* 1. No object-fit support: */ }
 673     .fullscreen > .embed > iframe,
 674     .fullscreen > .embed > object,
 675     .fullscreen > .embed > embed,
 676     .fullscreen > .embed > video {
 677       /* 2. If supporting object-fit, overriding (1): */ }
 678       @media (min-aspect-ratio: 16 / 9) {
 679         .fullscreen > .embed > iframe,
 680         .fullscreen > .embed > object,
 681         .fullscreen > .embed > embed,
 682         .fullscreen > .embed > video {
 683           height: 300%;
 684           top: -100%; } }
 685       @media (max-aspect-ratio: 16 / 9) {
 686         .fullscreen > .embed > iframe,
 687         .fullscreen > .embed > object,
 688         .fullscreen > .embed > embed,
 689         .fullscreen > .embed > video {
 690           left: -100%;
 691           width: 300%; } }
 692       @supports ((-o-object-fit: cover) or (object-fit: cover)) {
 693         .fullscreen > .embed > iframe,
 694         .fullscreen > .embed > object,
 695         .fullscreen > .embed > embed,
 696         .fullscreen > .embed > video {
 697           height: 100%;
 698           left: 0;
 699           -o-object-fit: cover;
 700              object-fit: cover;
 701           top: 0;
 702           width: 100%; } }
 703
 704 /*=== HTML Browser (Screenshots) ================ */
 705 /* <figure class="browser"> img </figure> */
 706 .browser {
 707   border-radius: .3rem;
 708   margin: 0 auto 3.2rem;
 709   max-width: 1024px;
 710   overflow: hidden; }
 711   li .browser {
 712     margin-bottom: 0; }
 713   h1 + .browser,
 714   h2 + .browser,
 715   p + .browser {
 716     margin-top: 4.8rem; }
 717   .browser figcaption {
 718     padding: 2.4rem; }
 719   .browser:before {
 720     content: '\25CF   \25CF   \25CF';
 721     font-size: .8rem;
 722     left: 0;
 723     line-height: 0;
 724     padding: 1.6rem;
 725     position: absolute;
 726     text-align: left;
 727     top: 0;
 728     width: 100%; }
 729     @media (min-width: 768px) {
 730       .browser:before {
 731         font-size: 1.6rem; } }
 732
 733 /*=== 1.4. Basic Grid (Flexible blocks)
 734 Auto-fill & Equal height === */
 735 .grid {
 736   clear: both;
 737   display: -webkit-box;
 738   display: -ms-flexbox;
 739   display: flex;
 740   -ms-flex-wrap: wrap;
 741       flex-wrap: wrap;
 742   margin-left: auto;
 743   margin-right: auto; }
 744   .grid:after {
 745     clear: both; }
 746   .grid:before {
 747     content: '';
 748     display: table; }
 749   .grid > .column {
 750     display: -webkit-box;
 751     display: -ms-flexbox;
 752     display: flex;
 753     -webkit-box-flex: 1;
 754         -ms-flex: auto;
 755             flex: auto;
 756     -webkit-box-orient: vertical;
 757     -webkit-box-direction: normal;
 758         -ms-flex-direction: column;
 759             flex-direction: column;
 760     padding: 2.4rem;
 761     position: relative;
 762     -webkit-transition: .3s;
 763     transition: .3s;
 764     width: 100%; }
 765   .grid.vertical-align .column {
 766     -webkit-box-pack: center;
 767         -ms-flex-pack: center;
 768             justify-content: center; }
 769   @media (min-width: 768px) {
 770     .grid > .column {
 771       width: 25%; }
 772     .grid.sm .column:nth-child(1) {
 773       width: 30%; }
 774     .grid.sm .column:nth-child(2) {
 775       width: 70%; }
 776     .grid.ms .column:nth-child(1) {
 777       width: 70%; }
 778     .grid.ms .column:nth-child(2) {
 779       width: 30%; }
 780     .grid.sms .column:nth-child(2) {
 781       width: 50%; } }
 782
 783 /*============================
 784 2. TYPOGRAPHY & LISTS
 785 ============================== */
 786 html,
 787 body {
 788   font-weight: 300;
 789   line-height: 1;
 790   text-rendering: optimizeLegibility; }
 791
 792 html,
 793 body,
 794 input,
 795 select,
 796 textarea {
 797   font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
 798   font-size: 62.5%; }
 799
 800 body,
 801 textarea {
 802   font-size: 1.8rem; }
 803
 804 p,
 805 li,
 806 dt,
 807 dd,
 808 time,
 809 table,
 810 big,
 811 textarea,
 812 label {
 813   line-height: 3.2rem;
 814   margin-bottom: 3.2rem; }
 815
 816 li,
 817 p:last-child {
 818   margin-bottom: 0; }
 819
 820 ul > li,
 821 ol > li {
 822   margin-left: 3.2rem; }
 823
 824 li li {
 825   font-size: 100%; }
 826
 827 /*== List .description (Product/Specs) === */
 828 ul.description {
 829   padding: 0; }
 830   ul.description + p {
 831     margin-top: 3.2rem; }
 832   ul.description li {
 833     padding-bottom: .8rem;
 834     padding-top: .8rem;
 835     position: relative;
 836     -webkit-transition: .3s;
 837     transition: .3s; }
 838   ul.description li:hover {
 839     padding-left: .4rem; }
 840
 841 ul.description li,
 842 .column ul li {
 843   list-style: none;
 844   margin-left: 0; }
 845
 846 .column ol > li {
 847   margin-left: 1.6rem; }
 848
 849 h1 svg,
 850 h2 svg,
 851 h3 svg,
 852 h4 svg {
 853   margin-top: -.8rem; }
 854
 855 .text-intro svg,
 856 .text-quote p svg,
 857 .wall p svg,
 858 .try svg {
 859   margin-top: -.4rem; }
 860
 861 h1 {
 862   font-size: 4rem;
 863   line-height: 5.6rem; }
 864   @media (min-width: 768px) {
 865     h1 {
 866       font-size: 5.6rem;
 867       line-height: 7.2rem; } }
 868
 869 h1 span {
 870   font-style: italic; }
 871
 872 h2 {
 873   font-size: 3.2rem;
 874   line-height: 4.8rem; }
 875   @media (min-width: 768px) {
 876     h2 {
 877       font-size: 4.8rem;
 878       line-height: 6.4rem; } }
 879
 880 h3 {
 881   font-size: 2.4rem;
 882   line-height: 4rem; }
 883   @media (min-width: 768px) {
 884     h3 {
 885       font-size: 4rem;
 886       line-height: 5.6rem; } }
 887
 888 h4 {
 889   font-size: 2.2rem;
 890   line-height: 4rem; }
 891   @media (min-width: 768px) {
 892     h4 {
 893       font-size: 3.2rem;
 894       line-height: 4.8rem; } }
 895
 896 h5 {
 897   font-size: 2rem;
 898   font-weight: 600;
 899   line-height: 3.2rem; }
 900
 901 h6 {
 902   font-size: 1.8rem;
 903   font-weight: 600;
 904   line-height: 3.2rem; }
 905
 906 h2.alignleft + p.alignright {
 907   margin-bottom: 0;
 908   margin-top: 1.2rem; }
 909
 910 h3.alignleft + p.alignright {
 911   margin-bottom: 0;
 912   margin-top: .4rem; }
 913
 914 h1 + h1 {
 915   margin-top: .8rem; }
 916
 917 h1 + h2 {
 918   margin-top: .8rem; }
 919
 920 h1 + h3 {
 921   margin-top: .8rem; }
 922
 923 h1 + h4 {
 924   margin-top: .8rem; }
 925
 926 h1 + h5 {
 927   margin-top: .8rem; }
 928
 929 h1 + h6 {
 930   margin-top: .8rem; }
 931
 932 h2 + h1 {
 933   margin-top: .8rem; }
 934
 935 h2 + h2 {
 936   margin-top: .8rem; }
 937
 938 h2 + h3 {
 939   margin-top: .8rem; }
 940
 941 h2 + h4 {
 942   margin-top: .8rem; }
 943
 944 h2 + h5 {
 945   margin-top: .8rem; }
 946
 947 h2 + h6 {
 948   margin-top: .8rem; }
 949
 950 h3 + h1 {
 951   margin-top: .8rem; }
 952
 953 h3 + h2 {
 954   margin-top: .8rem; }
 955
 956 h3 + h3 {
 957   margin-top: .8rem; }
 958
 959 h3 + h4 {
 960   margin-top: .8rem; }
 961
 962 h3 + h5 {
 963   margin-top: .8rem; }
 964
 965 h3 + h6 {
 966   margin-top: .8rem; }
 967
 968 h4 + h1 {
 969   margin-top: .8rem; }
 970
 971 h4 + h2 {
 972   margin-top: .8rem; }
 973
 974 h4 + h3 {
 975   margin-top: .8rem; }
 976
 977 h4 + h4 {
 978   margin-top: .8rem; }
 979
 980 h4 + h5 {
 981   margin-top: .8rem; }
 982
 983 h4 + h6 {
 984   margin-top: .8rem; }
 985
 986 h5 + h1 {
 987   margin-top: .8rem; }
 988
 989 h5 + h2 {
 990   margin-top: .8rem; }
 991
 992 h5 + h3 {
 993   margin-top: .8rem; }
 994
 995 h5 + h4 {
 996   margin-top: .8rem; }
 997
 998 h5 + h5 {
 999   margin-top: .8rem; }
1000
1001 h5 + h6 {
1002   margin-top: .8rem; }
1003
1004 h6 + h1 {
1005   margin-top: .8rem; }
1006
1007 h6 + h2 {
1008   margin-top: .8rem; }
1009
1010 h6 + h3 {
1011   margin-top: .8rem; }
1012
1013 h6 + h4 {
1014   margin-top: .8rem; }
1015
1016 h6 + h5 {
1017   margin-top: .8rem; }
1018
1019 h6 + h6 {
1020   margin-top: .8rem; }
1021
1022 h1 + img,
1023 h2 + img,
1024 h3 + img {
1025   margin-bottom: 4.8rem;
1026   margin-top: 4.8rem; }
1027
1028 [class*='content-'] > [class*='content-'] h2,
1029 [class*='content-'] > [class*='content-'] h3,
1030 [class*='content-'] > [class*='content-'] h4 {
1031   font-size: 2.4rem;
1032   line-height: 4rem; }
1033
1034 /*== 2.1. Headings with background ==*/
1035 h1[class*='bg-'] {
1036   padding: 2.4rem; }
1037
1038 h2[class*='bg-'] {
1039   padding: 2.4rem; }
1040
1041 h3[class*='bg-'] {
1042   padding: 2.4rem; }
1043
1044 h4[class*='bg-'] {
1045   padding: 2.4rem; }
1046
1047 h5[class*='bg-'] {
1048   padding: 2.4rem; }
1049
1050 h6[class*='bg-'] {
1051   padding: 2.4rem; }
1052
1053 ul[class*='bg-'],
1054 ol[class*='bg-'],
1055 li[class*='bg-'],
1056 p[class*='bg-'] {
1057   padding: 2.4rem; }
1058
1059 h1 [class*='bg-'],
1060 h2 [class*='bg-'],
1061 h3 [class*='bg-'] {
1062   padding: .4rem .8rem; }
1063
1064 /*== 2.2. Typography Classes = .text- == */
1065 .text-intro,
1066 [class*='content-'] p {
1067   font-size: 2.4rem;
1068   line-height: 4rem; }
1069
1070 /* -- Serif -- */
1071 .text-serif,
1072 h1 span {
1073   font-family: 'Maitree', times, serif; }
1074
1075 /* -- h1,h2... Promo/Landings -- */
1076 .text-landing {
1077   letter-spacing: .4rem;
1078   text-transform: uppercase; }
1079   @media (min-width: 768px) {
1080     .text-landing {
1081       letter-spacing: 1.6rem; } }
1082
1083 /* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
1084 .text-subtitle {
1085   letter-spacing: .2rem;
1086   margin-bottom: 0;
1087   text-transform: uppercase; }
1088   .text-subtitle p.text-subtitle {
1089     font-size: 1.6rem; }
1090     .text-subtitle p.text-subtitle svg {
1091       vertical-align: text-top; }
1092   .text-subtitle + p {
1093     margin-top: 3.2rem; }
1094
1095 .text-uppercase {
1096   text-transform: uppercase; }
1097
1098 .text-lowercase {
1099   text-transform: lowercase; }
1100
1101 /* -- Emoji (you'll love this) -- */
1102 .text-emoji {
1103   font-size: 6.8rem;
1104   line-height: 8.8rem; }
1105   @media (min-width: 768px) {
1106     .text-emoji {
1107       font-size: 12.8rem;
1108       line-height: 16rem; } }
1109
1110 /* -- Numbers (results, sales... 23,478,289 iphones) -- */
1111 .text-data {
1112   font-size: 6.4rem;
1113   line-height: 8rem;
1114   margin-bottom: .8rem; }
1115   @media (min-width: 768px) {
1116     .text-data {
1117       font-size: 15.2rem;
1118       line-height: 16.8rem; } }
1119
1120 .text-label {
1121   display: inline-block;
1122   font-weight: 600;
1123   text-transform: uppercase;
1124   width: 12.8rem; }
1125
1126 /* -- Magazine Two Columns -- */
1127 @media (min-width: 768px) {
1128   .text-cols {
1129     -webkit-column-count: 2;
1130             column-count: 2;
1131     -webkit-column-gap: 4.8rem;
1132             column-gap: 4.8rem;
1133     text-align: left; }
1134   .text-landing + .text-cols {
1135     margin-top: 3.2rem; } }
1136
1137 .text-cols p:first-child:first-letter {
1138   float: left;
1139   font-size: 11rem;
1140   font-weight: 600;
1141   line-height: 1;
1142   margin: -.4rem 1.6rem 0 0;
1143   padding: 0;
1144   text-transform: uppercase; }
1145
1146 /* -- Heading with border -- */
1147 .text-context {
1148   position: relative; }
1149   .text-context:before {
1150     content: '';
1151     display: block;
1152     height: .2rem;
1153     margin-bottom: .6rem;
1154     width: 12rem; }
1155     .column .text-context:before {
1156       width: 100%; }
1157   .text-context.text-uppercase {
1158     letter-spacing: .1rem; }
1159
1160 /* -- Separator/Symbols (stars ***...) -- */
1161 .text-symbols {
1162   font-weight: 600;
1163   letter-spacing: .8rem;
1164   text-align: center; }
1165
1166 .text-separator {
1167   margin-top: 2.4rem; }
1168   .text-separator:before {
1169     content: '';
1170     height: .4rem;
1171     left: 0;
1172     margin-top: -1.6rem;
1173     position: absolute;
1174     width: 16%; }
1175   @media (min-width: 568px) {
1176     .text-separator {
1177       margin-left: 20%;
1178       margin-top: 0;
1179       width: 80%; }
1180       .text-separator:before {
1181         margin-top: 1.2rem; } }
1182
1183 /* -- Pull Quote (Right/Left)  -- */
1184 [class*='text-pull'] {
1185   font-size: 2.4rem;
1186   font-weight: 400;
1187   line-height: 4rem;
1188   margin-bottom: 3.2rem;
1189   margin-left: 2.4rem;
1190   margin-right: 2.4rem;
1191   position: relative; }
1192
1193 [class*='text-pull-'] {
1194   margin-top: .8rem;
1195   padding-top: 1.4rem; }
1196   @media (min-width: 1024px) {
1197     [class*='text-pull-'] {
1198       margin-left: -4.8rem;
1199       margin-right: -4.8rem; } }
1200
1201 @media (min-width: 568px) {
1202   [class*='text-pull-'] {
1203     max-width: 40%; }
1204   .text-pull-right {
1205     float: right;
1206     margin-left: 2.4rem;
1207     margin-right: -2.4rem; }
1208   .text-pull-left {
1209     float: left;
1210     margin-left: -2.4rem;
1211     margin-right: 2.4rem; } }
1212
1213 img[class*='text-pull-'],
1214 figure[class*='text-pull-'] {
1215   margin-top: .8rem;
1216   padding-top: 0; }
1217
1218 /* -- Interviews (Questions & Answers)  --- */
1219 /* -- <dl class="text-interview">
1220 <dt>name</dt>
1221 <dd><p>question or answer</p>
1222 </dd>
1223 --- */
1224 .text-interview dt {
1225   font-weight: 600;
1226   margin-bottom: 0;
1227   text-transform: uppercase; }
1228
1229 @media (min-width: 1024px) {
1230   .text-interview dt {
1231     margin-left: -34%;
1232     position: absolute;
1233     text-align: right;
1234     white-space: nowrap;
1235     width: 30%; } }
1236
1237 /* -- Info Messages (error, warning, success... -- */
1238 .text-info {
1239   font-size: 1.6rem;
1240   line-height: 2.4rem; }
1241
1242 /*=========================================
1243 2.1. San Francisco Font (Apple's new font)
1244 =========================================== */
1245 .text-apple,
1246 .bg-apple {
1247   font-family: 'San Francisco', helvetica, arial, sans-serif; }
1248
1249 /* Ultra Light */
1250 @font-face {
1251   font-family: 'San Francisco';
1252   font-weight: 100;
1253   src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); }
1254
1255 /* Thin */
1256 @font-face {
1257   font-family: 'San Francisco';
1258   font-weight: 200;
1259   src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); }
1260
1261 /* Regular */
1262 @font-face {
1263   font-family: 'San Francisco';
1264   font-weight: 400;
1265   src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); }
1266
1267 /* Bold */
1268 @font-face {
1269   font-family: 'San Francisco';
1270   font-weight: bold;
1271   src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); }
1272
1273 /*=========================================
1274 3. Header & Footer
1275 =========================================== */
1276 /* -- If you want an unique, global header/footer,read this:
1277 https://github.com/webslides/webslides/issues/57 -- */
1278 header,
1279 footer,
1280 #navigation {
1281   padding: 2.4rem;
1282   -webkit-transition: all .4s ease-in-out;
1283   transition: all .4s ease-in-out;
1284   width: 100%; }
1285
1286 header p,
1287 footer p {
1288   line-height: 4.8rem;
1289   margin-bottom: 0; }
1290
1291 header[role='banner'] img,
1292 footer img {
1293   height: 4rem;
1294   vertical-align: middle; }
1295
1296 footer {
1297   position: relative; }
1298
1299 header,
1300 footer {
1301   z-index: 3; }
1302
1303 header,
1304 .ws-ready footer {
1305   left: 0;
1306   position: absolute;
1307   top: 0; }
1308
1309 .ws-ready footer {
1310   bottom: 0;
1311   top: auto; }
1312
1313 header[role='banner'] {
1314   opacity: 0; }
1315   header[role='banner']:hover {
1316     opacity: 1; }
1317
1318 @media (max-width: 767px) {
1319   footer .alignleft,
1320   footer .alignright {
1321     display: block;
1322     float: none; } }
1323
1324 /*=== 3.1. Logo === */
1325 .logo {
1326   text-transform: lowercase; }
1327   .logo a {
1328     background: url("../images/logos/logo.svg") no-repeat 0 0;
1329     background-size: 4.8rem;
1330     float: left;
1331     height: 4.8rem;
1332     text-indent: -4000px;
1333     /*If you remove text-indent and add: */
1334     /*padding-left: 6rem;*/
1335     vertical-align: middle;
1336     width: 4.8rem; }
1337
1338 /*=========================================
1339 4. Navigation
1340 =========================================== */
1341 /*=== 4.1. Navbars === */
1342 nav ul {
1343   display: -webkit-box;
1344   display: -ms-flexbox;
1345   display: flex;
1346   -ms-flex-wrap: wrap;
1347       flex-wrap: wrap;
1348   /*====align left====*/
1349   -webkit-box-pack: start;
1350       -ms-flex-pack: start;
1351           justify-content: flex-start;
1352   /* ==== align center ====*/
1353   /*justify-content: center; */
1354   /*====align right====*/
1355   /* justify-content: flex-end; */
1356   /*====separated columns li a====*/
1357   /* justify-content: space-between; */
1358   /*====separated columns centered li a====*/
1359   /*justify-content: space-around;*/ }
1360   nav ul li {
1361     float: left;
1362     list-style: none;
1363     position: relative; }
1364
1365 nav ul li:first-child,
1366 nav[role='navigation'] ul li {
1367   margin-left: 0; }
1368
1369 nav[role='navigation'] li a {
1370   display: -webkit-box;
1371   display: -ms-flexbox;
1372   display: flex;
1373   -webkit-box-pack: center;
1374       -ms-flex-pack: center;
1375           justify-content: center;
1376   line-height: 4.8rem;
1377   max-width: 100%;
1378   padding: 0 1.6rem;
1379   position: relative;
1380   text-decoration: none; }
1381   nav[role='navigation'] li a svg {
1382     margin: 1.5rem .4rem 1.5rem 0; }
1383
1384 header nav ul {
1385   -webkit-box-pack: end;
1386       -ms-flex-pack: end;
1387           justify-content: flex-end;
1388   margin: 0; }
1389
1390 nav.aligncenter ul,
1391 .aligncenter nav ul {
1392   /* ==== align center ====*/
1393   -webkit-box-pack: center;
1394       -ms-flex-pack: center;
1395           justify-content: center; }
1396
1397 nav.navbar ul li {
1398   /*====full float li a ====*/
1399   -webkit-box-flex: 1;
1400       -ms-flex: 1 1 auto;
1401           flex: 1 1 auto; }
1402
1403 @media (max-width: 568px) {
1404   nav.navbar ul {
1405     -webkit-box-orient: vertical;
1406     -webkit-box-direction: normal;
1407         -ms-flex-flow: column wrap;
1408             flex-flow: column wrap;
1409     padding: 0; }
1410   nav.navbar li a {
1411     -webkit-box-pack: start;
1412         -ms-flex-pack: start;
1413             justify-content: flex-start; } }
1414
1415 /*============================================
1416 5. SLIDES (Full Screen)
1417 Vertically and horizontally centered
1418 ============================================== */
1419 /* Fade transition to all slides.
1420 * = All HTML elements will have those styles.*/
1421 section * {
1422   -webkit-animation: fadeIn .6s ease-in-out;
1423           animation: fadeIn .6s ease-in-out; }
1424
1425 section .background,
1426 section .light,
1427 section .dark {
1428   -webkit-animation-duration: 0s;
1429           animation-duration: 0s; }
1430
1431 /*=== Section = Slide === */
1432 section,
1433 .slide {
1434   display: -webkit-box;
1435   display: -ms-flexbox;
1436   display: flex;
1437   -webkit-box-orient: vertical;
1438   -webkit-box-direction: normal;
1439       -ms-flex-direction: column;
1440           flex-direction: column;
1441   -webkit-box-pack: center;
1442       -ms-flex-pack: center;
1443           justify-content: center;
1444   min-height: 100vh;
1445   /*Fullscreen*/
1446   /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
1447   padding: 2.4rem;
1448   /*Fixed/Visible header? padding-top: 12rem; */
1449   page-break-after: always;
1450   position: relative;
1451   word-wrap: break-word; }
1452   @media (min-width: 1024px) {
1453     section,
1454     .slide {
1455       padding-bottom: 12rem;
1456       padding-top: 12rem; } }
1457
1458 /*slide with no padding (full card, .embed youtube video...) */
1459 .fullscreen {
1460   padding: 0;
1461   /* Fixed/Visible header?
1462   padding:8.2rem 0 0 0;
1463   */ }
1464
1465 /* slide alignment - top */
1466 .slide-top {
1467   -webkit-box-pack: start;
1468       -ms-flex-pack: start;
1469           justify-content: flex-start; }
1470
1471 /* slide alignment - bottom */
1472 .slide-bottom {
1473   -webkit-box-pack: end;
1474       -ms-flex-pack: end;
1475           justify-content: flex-end; }
1476
1477 /*== 5.1. Mini container width:50%
1478 Aligned items [class*="content-"]=== */
1479 [class*='content-'] {
1480   position: relative;
1481   text-align: left; }
1482
1483 .wrap[class*='bg-'],
1484 .wrap.frame,
1485 [class*='content-'][class*='bg-'],
1486 [class*='content-'].frame,
1487 [class*='align'][class*='bg-'] {
1488   padding: 4.8rem; }
1489
1490 form[class*='bg-'] {
1491   padding: 2.4rem; }
1492
1493 [class*='content-'] > [class*='content-'] p {
1494   font-size: 1.8rem;
1495   line-height: 3.2rem; }
1496
1497 .content-center {
1498   margin: 0 auto;
1499   text-align: center; }
1500
1501 @media (min-width: 768px) {
1502   [class*='content-'] {
1503     width: 50%; }
1504     [class*='content-']:after, [class*='content-']:before {
1505       content: '';
1506       display: table; }
1507     [class*='content-']:after {
1508       clear: both; }
1509   .content-left {
1510     float: left; }
1511   .content-right {
1512     float: right; }
1513   [class*='content-'] + [class*='content-'] {
1514     margin-bottom: 4.8rem;
1515     padding-left: 2.4rem; }
1516   [class*='content-'] + [class*='size-'] {
1517     clear: both;
1518     margin-top: 6.4rem; } }
1519
1520 /*=== 5.3 Slides - Background Images/Videos === */
1521 .background,
1522 [class*='background-'] {
1523   background-repeat: no-repeat;
1524   bottom: 0;
1525   left: 0;
1526   position: absolute;
1527   right: 0;
1528   top: 0; }
1529
1530 /*=== BG Positions === */
1531 .background {
1532   background-position: center;
1533   background-size: cover;
1534   /*fullscreen video
1535     <video class="background-video">
1536   */ }
1537   .background-top {
1538     background-position: top;
1539     background-size: cover; }
1540   .background-bottom {
1541     background-position: bottom;
1542     background-size: cover; }
1543   .background-center {
1544     background-position: center; }
1545   .background-center-top {
1546     background-position: center top; }
1547   .background-right-top {
1548     background-position: right top; }
1549   .background-left-top {
1550     background-position: left top; }
1551   .background-center-bottom, .background-left-bottom, .background-right-bottom, .background-left, .background-right {
1552     background-position: center bottom; }
1553   @media (min-width: 1024px) {
1554     .background-left-bottom {
1555       background-position: left bottom; }
1556     .background-right-bottom {
1557       background-position: right bottom; }
1558     .background-right {
1559       background-position: right; }
1560     .background-left {
1561       background-position: left; } }
1562   .background-video {
1563     height: 100%;
1564     -o-object-fit: fill;
1565        object-fit: fill;
1566     width: 100%; }
1567
1568 /*=== bg image/video overlay === */
1569 /*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
1570 [class*='bg-'] .light,
1571 [class*='bg-'] .light {
1572   opacity: .8; }
1573
1574 [class*='bg-'] .dark,
1575 [class*='bg-'] .dark {
1576   opacity: .2; }
1577
1578 [class*='bg-'] .background-video.dark {
1579   opacity: .5; }
1580
1581 @media (max-width: 1023px) {
1582   [class*='background-'] {
1583     -webkit-animation: fadeIn ease-in .2;
1584             animation: fadeIn ease-in .2;
1585     opacity: .2; }
1586   .background-video {
1587     opacity: .8; } }
1588
1589 /*=== Animated Background Image === */
1590 .background.anim {
1591   -webkit-animation: anim 80s linear infinite;
1592           animation: anim 80s linear infinite;
1593   background-position: center top;
1594   background-repeat: repeat;
1595   background-size: 100%;
1596   height: 200%; }
1597
1598 /*=== Background with a frame === */
1599 /*<span class="background" style="background-image:url('image.jpg')"></span>
1600 <span class="background frame"></span>*/
1601 [class*='background'].frame {
1602   margin: 2.4rem; }
1603
1604 /* === 5.2 Counter / Navigation Slides  === */
1605 #navigation {
1606   -webkit-animation: fadeIn 8s;
1607           animation: fadeIn 8s;
1608   bottom: 0;
1609   left: 0;
1610   margin-left: auto;
1611   margin-right: auto;
1612   opacity: 0;
1613   position: fixed;
1614   right: 0;
1615   width: 24.4rem;
1616   /* hover/visibility */
1617   z-index: 4; }
1618   #navigation:hover {
1619     opacity: 1; }
1620   #navigation p {
1621     margin-bottom: 0; }
1622
1623 #counter {
1624   display: block;
1625   line-height: 4.8rem;
1626   margin-left: auto;
1627   margin-right: auto;
1628   position: relative;
1629   text-align: center;
1630   width: 10rem; }
1631   #counter a:hover {
1632     padding: .8rem; }
1633
1634 a#next,
1635 a#previous {
1636   border-radius: .4rem;
1637   cursor: pointer;
1638   font-size: 2.4rem;
1639   height: 4rem;
1640   padding: .8rem;
1641   position: absolute;
1642   text-align: center;
1643   width: 4rem; }
1644
1645 a#next {
1646   right: 3.2rem; }
1647
1648 a#previous {
1649   left: 3.2rem; }
1650
1651 @media (max-width: 1024px) {
1652   #navigation {
1653     -webkit-animation: fadeIn 6s;
1654             animation: fadeIn 6s;
1655     background: url("../images/swipe.svg") no-repeat center top;
1656     background-size: 4.8rem; }
1657   #navigation a,
1658   #counter {
1659     display: none; } }
1660
1661 /*===============================================================
1662 6. Magic blocks with flexbox (Auto-fill & Equal Height)
1663 Blocks Links li>a = .flexblock.blink (.blink required)
1664 ================================================================= */
1665 .flexblock {
1666   clear: both;
1667   display: -webkit-box;
1668   display: -ms-flexbox;
1669   display: flex;
1670   -ms-flex-wrap: wrap;
1671       flex-wrap: wrap;
1672   margin-left: auto;
1673   margin-right: auto;
1674   padding: 0; }
1675   .flexblock:after {
1676     clear: both; }
1677   .flexblock:before {
1678     content: '';
1679     display: table; }
1680   .flexblock li,
1681   .flexblock.blink li > a {
1682     display: -webkit-box;
1683     display: -ms-flexbox;
1684     display: flex;
1685     -webkit-box-orient: vertical;
1686     -webkit-box-direction: normal;
1687         -ms-flex-direction: column;
1688             flex-direction: column;
1689     margin: 0;
1690     padding: 2.4rem;
1691     position: relative; }
1692   .flexblock li {
1693     -webkit-box-flex: 1;
1694         -ms-flex: auto;
1695             flex: auto;
1696     text-align: left;
1697     -webkit-transition: .3s;
1698     transition: .3s;
1699     width: 100%; }
1700     .flexblock li:hover {
1701       -webkit-transform: translateY(-0.2rem);
1702               transform: translateY(-0.2rem); }
1703     @media (min-width: 600px) {
1704       .flexblock li {
1705         width: 50%; } }
1706     @media (min-width: 1024px) {
1707       .flexblock li {
1708         width: 25%; } }
1709   .flexblock.aligncenter li {
1710     text-align: center; }
1711   .flexblock.vertical-align li {
1712     -webkit-box-pack: center;
1713         -ms-flex-pack: center;
1714             justify-content: center; }
1715   .flexblock.blink li {
1716     padding: 0; }
1717   .flexblock li h2 svg,
1718   .flexblock li h3 svg {
1719     margin-top: 0; }
1720
1721 h1 + .flexblock,
1722 h2 + .flexblock,
1723 h3 + .flexblock,
1724 div + ul,
1725 div + ol {
1726   margin-top: 3.2rem; }
1727
1728 .flexblock li h2,
1729 .flexblock li h3,
1730 footer .column h2,
1731 footer .column h3 {
1732   font-size: 1.8rem;
1733   font-weight: 600;
1734   line-height: 3.2rem;
1735   margin-bottom: 0; }
1736
1737 .flexblock li li,
1738 .flexblock.blink li li {
1739   padding: 0;
1740   width: 100%; }
1741
1742 [class*='content-'] .flexblock li p {
1743   font-size: 1.8rem;
1744   line-height: 3.2rem; }
1745
1746 .content-right .flexblock.features li,
1747 .content-left .flexblock.features li {
1748   width: 46%; }
1749
1750 /*====================================================================
1751 6.1 Features <ul class="flexblock features">
1752 ====================================================================== */
1753 .flexblock.features > li {
1754   border-radius: .4rem;
1755   margin-bottom: 4.8rem;
1756   width: 100%; }
1757
1758 .flexblock.features li h2 {
1759   text-transform: uppercase; }
1760
1761 .flexblock.features li span {
1762   font-weight: 300; }
1763
1764 .flexblock.features li p {
1765   margin: 0; }
1766
1767 .flexblock.features li p em {
1768   display: block; }
1769
1770 .flexblock.features li span,
1771 .flexblock.features li svg {
1772   display: block;
1773   font-size: 6.4rem;
1774   line-height: 1;
1775   margin: 0; }
1776
1777 .flexblock.features li img {
1778   width: 6.4rem; }
1779
1780 .flexblock.features li span sup {
1781   font-size: 3rem; }
1782
1783 @media (min-width: 1200px) {
1784   .flexblock.features li span,
1785   .flexblock.features li svg,
1786   .flexblock.features li img {
1787     float: left;
1788     margin-right: .8rem; } }
1789
1790 @media (min-width: 768px) {
1791   .flexblock.features {
1792     margin-left: -2%;
1793     margin-right: -2%; }
1794   .flexblock.features > li {
1795     margin-left: 2%;
1796     margin-right: 2%;
1797     width: 29%; }
1798   .size-50 .flexblock.features > li {
1799     width: 46%; }
1800   .column .flexblock.features > li {
1801     width: 100%; }
1802   footer .flexblock.features > li {
1803     margin-bottom: 0; } }
1804
1805 /*=====================================================================
1806 6.2 Clients Logos <ul class="flexblock clients">
1807 ======================================================================= */
1808 .flexblock.clients.blink li > a,
1809 .flexblock.clients li {
1810   padding: 0; }
1811
1812 .flexblock.clients li figcaption {
1813   padding: 0 2.4rem 2.4rem; }
1814
1815 .flexblock.clients.border li figcaption {
1816   padding-top: 2.4rem; }
1817
1818 .clients.blink li > a,
1819 .clients li {
1820   -webkit-box-pack: inherit;
1821       -ms-flex-pack: inherit;
1822           justify-content: inherit; }
1823
1824 .clients li img,
1825 .clients li svg {
1826   display: block;
1827   padding: 2.4rem; }
1828
1829 .clients.border li img,
1830 .clients.border li svg {
1831   display: block;
1832   margin-left: auto;
1833   margin-right: auto; }
1834
1835 .clients li:hover {
1836   z-index: 1; }
1837
1838 /*==================================================
1839 6.3 flexblock.steps <ul class="flexblock steps">
1840 About, Philosophy...
1841 =================================================== */
1842 .steps li {
1843   width: 100%; }
1844   .steps li img,
1845   .steps li span {
1846     display: block;
1847     margin: 0 auto .8rem; }
1848   .steps li span {
1849     font-size: 6.4rem; }
1850   @media (min-width: 768px) {
1851     .steps li {
1852       width: 50%; } }
1853
1854 @media (min-width: 1024px) {
1855   .steps li {
1856     width: 25%; }
1857   .process {
1858     border-left-style: solid;
1859     border-left-width: 15px;
1860     height: 0;
1861     left: 0;
1862     position: absolute;
1863     top: 60px;
1864     width: 0; } }
1865
1866 /*=================================================
1867 6.4 Block Numbers - <ul class="flexblock metrics">
1868 =================================================== */
1869 .metrics li {
1870   text-align: center;
1871   width: 100%; }
1872   @media (min-width: 568px) {
1873     .metrics li {
1874       width: 50%; } }
1875   @media (min-width: 1024px) {
1876     .metrics li {
1877       width: 25%; } }
1878
1879 .metrics li strong {
1880   display: block; }
1881
1882 .metrics li span,
1883 .metrics li svg {
1884   display: block;
1885   font-size: 6.4rem;
1886   line-height: 7.2rem;
1887   margin: 0 auto; }
1888
1889 .card-50 .metrics li {
1890   width: 50%; }
1891
1892 /*=====================================================
1893 6.5 Specs/Items: <ul class="flexblock specs">
1894 ======================================================= */
1895 .specs li {
1896   text-align: left;
1897   width: 100%; }
1898   .specs li:after {
1899     bottom: -2.4rem;
1900     content: '';
1901     display: block;
1902     height: 1px;
1903     position: relative; }
1904   .specs li:hover {
1905     -webkit-transform: translateX(0.2rem);
1906             transform: translateX(0.2rem); }
1907   .specs li span,
1908   .specs li svg {
1909     display: block;
1910     font-size: 6.4rem;
1911     line-height: 1;
1912     margin: 0; }
1913   .specs li img {
1914     width: 6.4rem; }
1915   .specs li span {
1916     font-weight: 300; }
1917     .specs li span sup {
1918       font-size: 3rem; }
1919   @media (min-width: 1024px) {
1920     .specs li span,
1921     .specs li svg,
1922     .specs li img {
1923       float: left;
1924       margin-right: 2.4rem; } }
1925
1926 /*=================================================
1927 6.6 Reasons/Why/Numbers (counter-increment)
1928 <ul class="flexblock reasons">
1929 =================================================== */
1930 .flexblock.reasons li {
1931   counter-increment: list;
1932   text-align: left;
1933   width: 100%; }
1934   .flexblock.reasons li:hover {
1935     -webkit-transform: translateY(-0.2rem);
1936             transform: translateY(-0.2rem); }
1937   .flexblock.reasons li:after {
1938     bottom: -2.4rem;
1939     content: '';
1940     display: block;
1941     height: 1px;
1942     position: relative; }
1943   .flexblock.reasons li:before {
1944     content: counter(list) ".";
1945     font-size: 6.4rem;
1946     line-height: 1; }
1947   @media (min-width: 768px) {
1948     .flexblock.reasons li {
1949       padding-left: 8.8rem;
1950       /* You need two digits? (1-10)*/
1951       /*padding-left: 12rem; */ }
1952       .flexblock.reasons li:before {
1953         left: 2.4rem;
1954         position: absolute; } }
1955
1956 /*=================================================
1957 6.7 Gallery - <ul class="flexblock gallery">
1958 Block Thumbnails li+.overlay+image
1959 img size recommended:800x600px
1960 =================================================== */
1961 .flexblock.gallery li {
1962   margin-bottom: 4.8rem; }
1963   .flexblock.gallery li:nth-child(n+4) {
1964     -webkit-box-flex: inherit;
1965         -ms-flex: inherit;
1966             flex: inherit; }
1967   .flexblock.gallery li figcaption {
1968     padding: 1.6rem;
1969     position: relative; }
1970     .flexblock.gallery li figcaption:before {
1971       content: '';
1972       height: 0;
1973       left: 20%;
1974       margin-left: -.5em;
1975       position: absolute;
1976       top: .4rem;
1977       -webkit-transform: rotate(135deg);
1978               transform: rotate(135deg);
1979       -webkit-transform-origin: 0 0;
1980               transform-origin: 0 0;
1981       -webkit-transition: .1s;
1982       transition: .1s;
1983       width: 0; }
1984   .flexblock.gallery li:hover figcaption:before {
1985     top: .3rem; }
1986
1987 .aligncenter .flexblock.gallery li figcaption:before {
1988   left: 55%;
1989   margin-left: 0; }
1990
1991 .flexblock.gallery li,
1992 .flexblock.gallery.blink li > a {
1993   padding: 0; }
1994
1995 .flexblock.gallery h2 {
1996   text-transform: uppercase; }
1997
1998 .flexblock.gallery h2 + p,
1999 .flexblock.gallery h3 + p {
2000   margin-top: .8rem; }
2001
2002 .flexblock.gallery p {
2003   font-size: 1.6rem;
2004   line-height: 2.4rem;
2005   margin-bottom: 0; }
2006
2007 .flexblock.gallery li footer {
2008   margin-top: .8rem;
2009   padding: 1.2rem 0 0;
2010   position: relative; }
2011
2012 .flexblock.gallery li img {
2013   display: block;
2014   margin-left: auto;
2015   margin-right: auto; }
2016
2017 @media (min-width: 600px) {
2018   .flexblock.gallery {
2019     margin-left: -2%;
2020     margin-right: -2%; }
2021     .flexblock.gallery li {
2022       margin-left: 2%;
2023       margin-right: 2%;
2024       width: 46%; } }
2025
2026 @media (min-width: 1024px) {
2027   .flexblock.gallery li {
2028     width: 21%; }
2029   .grid.sm .flexblock.gallery li,
2030   .grid.ms .flexblock.gallery li {
2031     width: 29%; }
2032   .grid.sms .flexblock.gallery li {
2033     width: 46%; } }
2034
2035 .overlay {
2036   bottom: 0;
2037   cursor: pointer;
2038   display: -webkit-box;
2039   display: -ms-flexbox;
2040   display: flex;
2041   -webkit-box-orient: vertical;
2042   -webkit-box-direction: normal;
2043       -ms-flex-direction: column;
2044           flex-direction: column;
2045   height: 100%;
2046   -webkit-box-pack: center;
2047       -ms-flex-pack: center;
2048           justify-content: center;
2049   left: 0;
2050   opacity: 1;
2051   position: absolute;
2052   right: 0;
2053   top: 0;
2054   -webkit-transition: all .3s linear;
2055   transition: all .3s linear;
2056   width: 100%;
2057   z-index: 2; }
2058
2059 li .overlay {
2060   -webkit-box-align: center;
2061       -ms-flex-align: center;
2062           align-items: center; }
2063
2064 li .overlay h2 {
2065   letter-spacing: .2rem;
2066   margin: 0;
2067   padding: 0 2.4rem;
2068   text-align: center;
2069   text-transform: uppercase;
2070   width: 100%; }
2071
2072 .overlay p,
2073 .overlay time {
2074   margin-bottom: 0; }
2075
2076 li:hover .overlay {
2077   cursor: pointer; }
2078
2079 /*===============================================
2080 6.8 Plans / Pricing <ul class="flexblock plans">
2081 ================================================= */
2082 .flexblock.plans > li {
2083   border-radius: 3px;
2084   margin-bottom: 4.8rem;
2085   text-align: center;
2086   z-index: 1; }
2087
2088 .flexblock.plans li,
2089 .flexblock.plans.blink li > a {
2090   padding: 0; }
2091
2092 .flexblock.plans.blink li > a div,
2093 .flexblock.plans li div {
2094   padding-bottom: 3.2rem; }
2095
2096 .flexblock.plans li p,
2097 .flexblock.plans li h2 {
2098   padding: .8rem 3.2rem; }
2099
2100 .flexblock.plans li h2 {
2101   float: left;
2102   font-weight: 400;
2103   letter-spacing: .1rem;
2104   text-transform: uppercase;
2105   width: 100%; }
2106
2107 .flexblock.plans .price {
2108   clear: both;
2109   display: block;
2110   font-size: 4.8rem;
2111   font-weight: 400;
2112   line-height: 6.2rem;
2113   padding: 2.4rem; }
2114   .flexblock.plans .price sup {
2115     font-size: 1.8rem;
2116     margin-right: .4rem; }
2117   .flexblock.plans .price li ul {
2118     margin-bottom: 2.4rem; }
2119
2120 .flexblock.plans li ul li {
2121   display: block;
2122   padding: .8rem 3.2rem;
2123   text-align: left;
2124   width: 100%; }
2125
2126 @media (min-width: 1024px) {
2127   .flexblock.plans {
2128     margin-left: -2%;
2129     margin-right: -2%; }
2130     .flexblock.plans > li {
2131       margin-left: 2%;
2132       margin-right: 2%;
2133       width: 29%; }
2134     .flexblock.plans > li:hover,
2135     .flexblock.plans > li:nth-child(2) {
2136       position: relative;
2137       -webkit-transform: scale(1.08);
2138               transform: scale(1.08);
2139       z-index: 2; }
2140     .flexblock.plans:hover li:nth-child(2):not(:hover) {
2141       position: relative;
2142       -webkit-transform: scale(1);
2143               transform: scale(1);
2144       z-index: 1; } }
2145
2146 /*===========================================
2147 6.9 Block Activity <ul class="activity">
2148 CV / News
2149 ============================================= */
2150 .flexblock.activity {
2151   -webkit-box-orient: vertical;
2152   -webkit-box-direction: normal;
2153       -ms-flex-direction: column;
2154           flex-direction: column; }
2155   .flexblock.activity li {
2156     -webkit-box-flex: 1;
2157         -ms-flex: 1;
2158             flex: 1;
2159     position: relative;
2160     width: auto; }
2161   .flexblock.activity p {
2162     margin-bottom: 0;
2163     vertical-align: top; }
2164   .flexblock.activity img {
2165     display: block; }
2166   .flexblock.activity .year,
2167   .flexblock.activity .title {
2168     display: inline;
2169     font-weight: 600; }
2170   .flexblock.activity .summary {
2171     width: 100%; }
2172   .flexblock.activity .title {
2173     margin-left: 1rem; }
2174   @media (min-width: 768px) {
2175     .flexblock.activity p {
2176       float: left; }
2177     .flexblock.activity .year {
2178       width: 15%; }
2179     .flexblock.activity .title {
2180       margin-left: 4%;
2181       margin-right: 4%;
2182       width: 27%; }
2183     .flexblock.activity .summary {
2184       width: 50%; } }
2185
2186 /*=============================================
2187 7. Promos/Offers (pricing, tagline, CTA...)
2188 =============================================== */
2189 .cta {
2190   display: -webkit-box;
2191   display: -ms-flexbox;
2192   display: flex;
2193   -ms-flex-wrap: wrap;
2194       flex-wrap: wrap;
2195   -webkit-box-pack: center;
2196       -ms-flex-pack: center;
2197           justify-content: center; }
2198
2199 .number,
2200 .cta .benefit {
2201   display: -webkit-box;
2202   display: -ms-flexbox;
2203   display: flex;
2204   -webkit-box-orient: vertical;
2205   -webkit-box-direction: normal;
2206       -ms-flex-direction: column;
2207           flex-direction: column;
2208   -webkit-box-pack: center;
2209       -ms-flex-pack: center;
2210           justify-content: center;
2211   max-width: 100%;
2212   padding: .8rem; }
2213
2214 .number {
2215   text-align: center; }
2216
2217 .cta .benefit {
2218   max-width: 100%;
2219   text-align: center; }
2220
2221 .number span {
2222   display: block;
2223   font-size: 8rem;
2224   line-height: 8rem; }
2225
2226 .number span sup {
2227   font-size: 4rem; }
2228
2229 .cta p {
2230   margin-bottom: 0; }
2231
2232 @media (min-width: 768px) {
2233   .number,
2234   .cta .benefit {
2235     max-width: 50%;
2236     padding: 4.8rem; }
2237   .cta .benefit {
2238     text-align: left; }
2239   .number span {
2240     font-size: 16rem;
2241     line-height: 16rem; }
2242     .number span sup {
2243       font-size: 6rem;
2244       vertical-align: middle; } }
2245
2246 /* --- Header CTA --- */
2247 .cta-cover {
2248   display: table;
2249   width: 100%; }
2250   .cta-cover h1 strong {
2251     font-weight: 400; }
2252   @media (min-width: 1024px) {
2253     .cta-cover h1 {
2254       float: left;
2255       max-width: 80%; }
2256     .cta-cover h1 strong {
2257       display: block; }
2258     .cta-cover .button {
2259       margin-top: 1.2rem; }
2260     .cta-cover .try {
2261       text-align: center; } }
2262   @media (max-width: 1023px) {
2263     .cta-cover .alignright {
2264       float: none; } }
2265
2266 /*=========================================
2267 8. Work/Resumé/CV <ul class="work">
2268 =========================================== */
2269 .work {
2270   clear: both;
2271   display: -webkit-box;
2272   display: -ms-flexbox;
2273   display: flex;
2274   -webkit-box-orient: vertical;
2275   -webkit-box-direction: normal;
2276       -ms-flex-direction: column;
2277           flex-direction: column;
2278   text-align: left; }
2279   h1 + .work,
2280   h2 + .work,
2281   h3 + .work,
2282   p + .work {
2283     margin-top: 4.8rem; }
2284   .work li {
2285     -webkit-box-flex: 1;
2286         -ms-flex: 1;
2287             flex: 1;
2288     list-style: none;
2289     margin: 0;
2290     position: relative; }
2291   .work p {
2292     margin-bottom: 0;
2293     -webkit-transition: .3s;
2294     transition: .3s; }
2295   .work li a {
2296     display: block;
2297     float: left;
2298     height: 100%;
2299     padding: 2.4rem 0;
2300     width: 100%; }
2301   .work li p {
2302     padding-left: 1.2rem; }
2303   .work li.work-label p {
2304     padding-left: 0; }
2305   .work li a:hover p:first-child {
2306     padding-left: 1.6rem; }
2307   .work li p:last-child {
2308     position: absolute;
2309     right: 1.2rem;
2310     top: 2.4rem; }
2311   .work li.work-label p:last-child {
2312     right: 0;
2313     top: 0; }
2314   .work-label {
2315     float: left;
2316     font-weight: 600;
2317     padding: 0 0 2.4rem;
2318     width: 100%; }
2319   .work-title {
2320     display: block;
2321     padding-right: 1.2rem;
2322     width: 75%; }
2323
2324 @media (min-width: 768px) {
2325   .work-label p,
2326   .work li p {
2327     float: left;
2328     margin-right: 2%;
2329     width: 25%; }
2330   .work li.work-label p:last-child,
2331   .work li p:last-child {
2332     float: right;
2333     margin-right: 0;
2334     padding-right: 1.2rem;
2335     position: relative;
2336     right: auto;
2337     text-align: right;
2338     top: auto; }
2339   .work li p.work-date {
2340     width: 120px; } }
2341
2342 @media (max-width: 768px) {
2343   .work-client,
2344   .work-label .work-services {
2345     clip: rect(1px, 1px, 1px, 1px);
2346     height: 1px;
2347     overflow: hidden;
2348     position: absolute;
2349     width: 1px; } }
2350
2351 /*===========================================
2352 9. Table of contents
2353 ============================================= */
2354 .toc,
2355 .toc ol > li:before,
2356 .chapter {
2357   position: relative;
2358   z-index: 2; }
2359
2360 .toc ol {
2361   counter-reset: item;
2362   position: relative; }
2363   .toc ol > li:before {
2364     content: counters(item, ".") ". ";
2365     display: table-cell;
2366     padding-right: .8rem;
2367     width: 2.4rem; }
2368   .toc ol li li:before {
2369     content: counters(item, ".") " "; }
2370
2371 .toc li {
2372   counter-increment: item;
2373   display: table;
2374   font-weight: 400;
2375   margin-bottom: .8rem;
2376   margin-left: 0;
2377   -webkit-transition: .3s;
2378   transition: .3s;
2379   width: 100%; }
2380   .toc li li {
2381     font-weight: 300;
2382     margin-bottom: 0;
2383     margin-left: 0; }
2384   .toc li .toc-page:before {
2385     content: '';
2386     display: block;
2387     left: 0;
2388     margin-top: 1.8rem;
2389     position: absolute;
2390     right: 4rem; }
2391   .toc li > a {
2392     display: inline-block;
2393     width: 100%; }
2394   .toc li a:hover span {
2395     font-weight: 600; }
2396   .toc li a:hover .toc-page:before {
2397     border-bottom-width: 2px; }
2398
2399 .chapter {
2400   display: inline-block;
2401   font-size: 1.8rem;
2402   line-height: 3.2rem;
2403   padding-right: .8rem; }
2404
2405 .toc-page {
2406   float: right; }
2407
2408 /*===========================================
2409 10. Cards
2410 ============================================= */
2411 [class*='card-'],
2412 [class*='card-'] > a {
2413   clear: both;
2414   display: -webkit-box;
2415   display: -ms-flexbox;
2416   display: flex;
2417   -webkit-box-orient: horizontal;
2418   -webkit-box-direction: normal;
2419       -ms-flex-direction: row;
2420           flex-direction: row;
2421   position: relative; }
2422
2423 .fullscreen [class*='card-'],
2424 .fullscreen [class*='card-'] > a {
2425   min-height: 100vh; }
2426
2427 [class*='card-'] figure img,
2428 [class*='card-'] figure iframe {
2429   display: block;
2430   margin: 0 auto; }
2431
2432 [class*='card-'] figure figcaption {
2433   bottom: 0;
2434   font-size: 1.4rem;
2435   left: 0;
2436   line-height: 2.4rem;
2437   padding: .8rem 2.4rem;
2438   position: absolute;
2439   z-index: 2; }
2440   [class*='card-'] figure figcaption svg {
2441     font-size: 1rem; }
2442
2443 @media (min-width: 768px) {
2444   [class*='card'][class*='bg-'] figure,
2445   .fullscreen [class*='card'] figure {
2446     max-height: 100%;
2447     min-width: 380px;
2448     text-align: center;
2449     vertical-align: middle; }
2450   [class*='card-'][class*='bg-'] figure img,
2451   [class*='card-'][class*='bg-'] figure iframe,
2452   .fullscreen [class*='card-'] figure img,
2453   .fullscreen [class*='card-'] figure iframe {
2454     height: 100%;
2455     left: 0;
2456     -o-object-fit: cover;
2457        object-fit: cover;
2458     position: absolute;
2459     top: 0;
2460     width: 100%;
2461     z-index: 1; } }
2462
2463 .flex-content,
2464 [class*='card'] blockquote {
2465   padding: 2.4rem;
2466   position: relative; }
2467
2468 [class*='card-'] .flex-content,
2469 [class*='card-'] blockquote {
2470   display: -webkit-box;
2471   display: -ms-flexbox;
2472   display: flex;
2473   -webkit-box-orient: vertical;
2474   -webkit-box-direction: normal;
2475       -ms-flex-direction: column;
2476           flex-direction: column;
2477   -webkit-box-pack: center;
2478       -ms-flex-pack: center;
2479           justify-content: center; }
2480
2481 .flex-content p {
2482   position: relative; }
2483
2484 @media (min-width: 768px) {
2485   .card-50 figure,
2486   .card-50 blockquote,
2487   .card-50 .flex-content {
2488     width: 50%; }
2489   .card-30 figure,
2490   .card-70 .flex-content,
2491   .card-70 blockquote {
2492     width: 30%; }
2493   .card-40 figure,
2494   .card-60 .flex-content,
2495   .card-60 blockquote {
2496     width: 40%; }
2497   .card-60 figure,
2498   .card-40 .flex-content,
2499   .card-40 blockquote {
2500     width: 60%; }
2501   .card-70 figure,
2502   .card-30 .flex-content,
2503   .card-30 blockquote {
2504     width: 70%; }
2505   [class*='card']:nth-child(odd) figure {
2506     -webkit-box-ordinal-group: 1;
2507         -ms-flex-order: 0;
2508             order: 0; }
2509   [class*='card']:nth-child(even) figure {
2510     -webkit-box-ordinal-group: 2;
2511         -ms-flex-order: 1;
2512             order: 1; }
2513   .flex-content,
2514   [class*='card'] blockquote {
2515     padding: 4.8rem; }
2516   .fullscreen [class*='card'] .flex-content,
2517   .fullscreen [class*='card'] blockquote {
2518     padding: 6.4rem; } }
2519
2520 @media (max-width: 767px) {
2521   [class*='card-'],
2522   [class*='card-'] > a {
2523     -webkit-box-orient: vertical;
2524     -webkit-box-direction: normal;
2525         -ms-flex-flow: column;
2526             flex-flow: column; }
2527   .card figure,
2528   .card header {
2529     width: 100%; } }
2530
2531 /*=========================================
2532 11. Quotes
2533 =========================================== */
2534 blockquote {
2535   display: inline-block;
2536   position: relative; }
2537   blockquote p {
2538     font-size: 2.4rem;
2539     line-height: 4rem; }
2540     blockquote p:last-child {
2541       margin-bottom: 3.2rem; }
2542
2543 /* -- Interviews dl.text-interview -- */
2544 dd blockquote p:last-child {
2545   margin-bottom: 0; }
2546
2547 cite {
2548   display: block;
2549   text-align: center; }
2550   cite:before {
2551     content: '\2014   \2009';
2552     margin-right: 6px; }
2553
2554 cite span {
2555   display: block; }
2556
2557 /* -- A big Blockquote -- */
2558 /* .wall will be deprecated soon. Use .text-quote ;) */
2559 .text-quote,
2560 .wall {
2561   /* Versatility: blockquote, p, h2... */
2562   position: relative; }
2563   .text-quote:before,
2564   .wall:before {
2565     content: '\201C';
2566     font-family: arial, sans-serif;
2567     font-size: 12rem;
2568     height: 5.6rem;
2569     left: -.8rem;
2570     line-height: 1;
2571     position: absolute;
2572     text-align: center;
2573     top: -4rem;
2574     width: 5.6rem; }
2575   @media (min-width: 768px) {
2576     .text-quote,
2577     .wall {
2578       padding-left: 6.4rem; }
2579       .text-quote p,
2580       .wall p {
2581         font-size: 3.2rem;
2582         line-height: 4.8rem; }
2583       .text-quote:before,
2584       .wall:before {
2585         left: .8rem;
2586         top: -1.6rem; } }
2587
2588 /*=========================================
2589 12. Avatars - uifaces.com
2590 =========================================== */
2591 cite img,
2592 img[class*='avatar-'] {
2593   display: inline-block;
2594   margin-right: 6px;
2595   vertical-align: middle; }
2596
2597 img[class*='avatar-'] {
2598   border-radius: 50%; }
2599
2600 img.avatar-40 {
2601   height: 40px;
2602   width: 40px; }
2603
2604 img.avatar-48 {
2605   height: 48px;
2606   width: 48px; }
2607
2608 img.avatar-56 {
2609   height: 56px;
2610   width: 56px; }
2611
2612 img.avatar-64 {
2613   height: 64px;
2614   width: 64px; }
2615
2616 img.avatar-72 {
2617   height: 72px;
2618   width: 72px; }
2619
2620 img.avatar-80 {
2621   height: 80px;
2622   width: 80px; }
2623
2624 /*=========================================
2625 13. Tables
2626 =========================================== */
2627 table {
2628   margin-bottom: 3.2rem;
2629   margin-top: 3.2rem; }
2630
2631 td,
2632 th,
2633 thead {
2634   border-spacing: 0;
2635   padding: .7rem 2.4rem; }
2636
2637 thead th,
2638 th {
2639   cursor: default;
2640   font-weight: 600;
2641   text-align: left;
2642   text-transform: uppercase;
2643   white-space: nowrap; }
2644
2645 thead,
2646 td.goals {
2647   font-weight: 600;
2648   text-shadow: none; }
2649
2650 tr > td {
2651   font-weight: 400; }
2652
2653 /*=========================================
2654 14. Forms
2655 =========================================== */
2656 form {
2657   text-align: left; }
2658   form + p,
2659   form input + p,
2660   form textarea + p {
2661     margin-top: .8rem; }
2662
2663 input[type='text'],
2664 input[type='email'],
2665 input[type='tel'],
2666 input[type='url'],
2667 input[type='search'],
2668 input[type='password'] {
2669   -webkit-appearance: none;
2670      -moz-appearance: none;
2671           appearance: none;
2672   border-radius: 0; }
2673
2674 input,
2675 button,
2676 select {
2677   display: inline-block;
2678   font-size: 1.6rem;
2679   font-weight: 400;
2680   height: 4.8rem;
2681   margin: 0;
2682   padding: .7rem;
2683   position: relative;
2684   width: 100%; }
2685
2686 input[type='radio'],
2687 input[type='checkbox'] {
2688   height: auto;
2689   padding: 4px;
2690   width: auto; }
2691
2692 button[type='submit'],
2693 textarea {
2694   width: 100%; }
2695
2696 textarea {
2697   padding: .7rem; }
2698
2699 button {
2700   cursor: pointer;
2701   text-align: center;
2702   width: auto; }
2703
2704 .button {
2705   cursor: pointer;
2706   display: inline-block;
2707   font-size: 1.8rem;
2708   font-weight: 400;
2709   line-height: 4.8rem;
2710   min-width: 16rem;
2711   padding: 0 1.6rem;
2712   text-align: center; }
2713   .button svg {
2714     font-size: 2.4rem; }
2715
2716 .button.radius,
2717 input.radius {
2718   border-radius: 2.4rem; }
2719
2720 button,
2721 input[type='submit'] {
2722   font-weight: 400;
2723   letter-spacing: .1rem;
2724   text-transform: uppercase; }
2725
2726 .plans .button {
2727   margin-left: auto;
2728   margin-right: auto;
2729   width: 50%; }
2730
2731 .try {
2732   display: block;
2733   font-size: 1.6rem;
2734   margin-top: 1.6rem; }
2735
2736 fieldset {
2737   padding: 2.4rem; }
2738
2739 legend {
2740   border: 0;
2741   font-weight: 400;
2742   letter-spacing: .1rem;
2743   padding: 1.6rem 2.4rem;
2744   text-align: center;
2745   text-transform: uppercase;
2746   width: 100%; }
2747
2748 input:focus,
2749 textarea:focus,
2750 select:focus {
2751   border-width: 1px; }
2752
2753 a.button:hover,
2754 button[type='submit']:hover,
2755 input[type='submit']:hover {
2756   -webkit-transform: scale(1.01);
2757           transform: scale(1.01); }
2758
2759 :disabled,
2760 button:disabled:hover {
2761   cursor: not-allowed; }
2762
2763 .user input {
2764   margin-bottom: 0; }
2765   .user input[type='email'], .user input[type='search'], .user input[type='text'] {
2766     width: 100%; }
2767     @media (min-width: 500px) {
2768       .user input[type='email'], .user input[type='search'], .user input[type='text'] {
2769         float: left;
2770         width: 70%; } }
2771
2772 .user button,
2773 .user input[type='submit'] {
2774   left: 0;
2775   width: 100%; }
2776   @media (min-width: 500px) {
2777     .user button,
2778     .user input[type='submit'] {
2779       cursor: pointer;
2780       width: 30%; } }
2781
2782 /* Buttons/Badges */
2783 @media (min-width: 500px) {
2784   [class*='button'] + [class*='button'] {
2785     margin-left: 1.8rem; } }
2786
2787 @media (max-width: 499px) {
2788   [class*='button'] + [class*='button'] {
2789     margin-top: .8rem; } }
2790
2791 /*=== App Store Badges === */
2792 /* Change width and height: 216x64px, 162x48px, 135x40... */
2793 [class*='badge-'] {
2794   background-repeat: no-repeat;
2795   background-size: cover;
2796   border-radius: .6rem;
2797   display: inline-block;
2798   height: 40px;
2799   line-height: 4rem;
2800   text-indent: -4000px;
2801   width: 135px; }
2802   [class*='badge-']:hover {
2803     opacity: .7; }
2804   @media (min-width: 1024px) {
2805     [class*='badge-'] {
2806       height: 48px;
2807       line-height: 4.8rem;
2808       width: 162px; } }
2809   @media (min-width: 500px) {
2810     [class*='badge-'] + [class*='badge-'] {
2811       margin-left: 1.8rem; } }
2812   @media (max-width: 499px) {
2813     [class*='badge-'] + [class*='badge-'] {
2814       margin-top: .8rem; } }
2815
2816 .badge-ios {
2817   background-image: url("../images/bt-appstore.png"); }
2818
2819 .badge-android {
2820   background-image: url("../images/bt-playstore.png"); }
2821
2822 /*=========================================
2823 15. Longform
2824 =========================================== */
2825 /* -- Posts = .wrap.longform -- */
2826 .longform {
2827   width: 72rem;
2828   /* Why 72rem=720px?
2829   90-95 characters per line = better reading speed */
2830   /* Mobile: video full width */ }
2831   .longform .alignleft,
2832   .longform .alignright {
2833     max-width: 40%; }
2834   .longform img.aligncenter,
2835   .longform figure.aligncenter {
2836     margin-bottom: 3.2rem;
2837     margin-top: 3.2rem; }
2838   .longform ul,
2839   .longform ol {
2840     margin-bottom: 3.2rem; }
2841   .longform ul ol,
2842   .longform ol ul,
2843   .longform ul ul,
2844   .longform ol ol {
2845     margin-bottom: 0; }
2846   .longform figcaption p,
2847   .longform [class*='text-pull-'] p {
2848     font-size: 1.6rem;
2849     line-height: 2.4rem; }
2850   .longform .text-pull.embed {
2851     margin-left: -2.4rem;
2852     margin-right: -2.4rem;
2853     padding-bottom: 60.6%; }
2854   @media (min-width: 1280px) {
2855     .longform [class*='text-pull-'] {
2856       max-width: 32%; }
2857     .longform .text-pull-right {
2858       margin-right: -256px; }
2859     .longform .text-pull-left {
2860       margin-left: -256px; } }
2861   @media (min-width: 1024px) {
2862     .longform .text-quote {
2863       margin-left: -4.8rem;
2864       margin-right: -4.8rem; } }
2865
2866 /*=========================================
2867 16. SAFARI BUGS (flex-wrap)
2868 Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
2869 =========================================== */
2870 .flexblock:before,
2871 .flexblock:after,
2872 .grid:before,
2873 .grid:after,
2874 .cta:before,
2875 .cta:after {
2876   width: 0; }
2877
2878 /*==============================================
2879 18. Slides Index: Thumbnails navigation gallery
2880 ================================================ */
2881 #webslides-zoomed {
2882   -ms-flex-line-pack: start;
2883       align-content: flex-start;
2884   -webkit-box-align: start;
2885       -ms-flex-align: start;
2886           align-items: flex-start;
2887   -webkit-box-orient: horizontal;
2888   -webkit-box-direction: normal;
2889       -ms-flex-direction: row;
2890           flex-direction: row;
2891   -webkit-box-pack: start;
2892       -ms-flex-pack: start;
2893           justify-content: flex-start;
2894   min-height: 100vh;
2895   position: relative;
2896   z-index: 2; }
2897   #webslides-zoomed.disabled {
2898     left: -100000px;
2899     position: absolute; }
2900   #webslides-zoomed .slide {
2901     height: 400%;
2902     width: 400%; }
2903     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
2904       #webslides-zoomed .slide {
2905         height: 200%;
2906         width: 200%; } }
2907     @media (max-aspect-ratio: 2 / 3) {
2908       #webslides-zoomed .slide {
2909         height: 200%;
2910         width: 200%; } }
2911   @media (min-width: 1024px) {
2912     #webslides-zoomed > .wrap {
2913       padding-bottom: 12rem;
2914       padding-top: 12rem; } }
2915   #webslides-zoomed > .wrap > .grid > .column {
2916     -ms-flex-item-align: auto;
2917         align-self: auto;
2918     -webkit-box-flex: 0;
2919         -ms-flex: 0 1 auto;
2920             flex: 0 1 auto;
2921     -webkit-box-ordinal-group: 1;
2922         -ms-flex-order: 0;
2923             order: 0;
2924     position: relative;
2925     width: 25%; }
2926     @media screen and (max-width: 567px) {
2927       #webslides-zoomed > .wrap > .grid > .column {
2928         width: 100%; } }
2929     @media screen and (min-width: 568px) and (max-width: 1024px) {
2930       #webslides-zoomed > .wrap > .grid > .column {
2931         width: 50%; } }
2932     @media screen and (max-width: 567px) and (orientation: portrait) {
2933       #webslides-zoomed > .wrap > .grid > .column {
2934         width: 100%; } }
2935     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2936       border-radius: .3rem;
2937       display: inline-block;
2938       height: 25vh;
2939       overflow: hidden;
2940       position: relative;
2941       -webkit-transition: .3s;
2942       transition: .3s; }
2943       @media screen and (max-width: 567px) {
2944         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2945           height: 50vh; } }
2946       @media screen and (min-width: 568px) and (max-width: 1023px) {
2947         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2948           height: 33vh; } }
2949       @media screen and (orientation: portrait) {
2950         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2951           height: 50vw; } }
2952       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
2953         -webkit-transform: scale(1.02);
2954                 transform: scale(1.02);
2955         z-index: 2; }
2956       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom.current {
2957         -webkit-transform: scale(1.08);
2958                 transform: scale(1.08); }
2959     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
2960       background: transparent;
2961       cursor: pointer;
2962       height: 100%;
2963       position: absolute;
2964       width: 100%; }
2965   #webslides-zoomed .column > .wrap-zoom > .slide {
2966     clip: rect(0 auto auto 0);
2967     display: -webkit-box !important;
2968     display: -ms-flexbox !important;
2969     display: flex !important;
2970     left: 0;
2971     position: absolute;
2972     top: 0;
2973     -webkit-transform: scale(0.25) translate(-150%, -150vh);
2974             transform: scale(0.25) translate(-150%, -150vh); }
2975     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
2976       #webslides-zoomed .column > .wrap-zoom > .slide {
2977         -webkit-transform: scale(0.5) translate(-50%, -50%);
2978                 transform: scale(0.5) translate(-50%, -50%); } }
2979     @media (max-aspect-ratio: 2 / 3) {
2980       #webslides-zoomed .column > .wrap-zoom > .slide {
2981         -webkit-transform: scale(0.5) translate(-50%, -50%);
2982                 transform: scale(0.5) translate(-50%, -50%); } }
2983   #webslides-zoomed .column {
2984     opacity: 0;
2985     -webkit-transform: scale(1.2);
2986             transform: scale(1.2);
2987     -webkit-transition: opacity .4s, -webkit-transform .4s;
2988     transition: opacity .4s, -webkit-transform .4s;
2989     transition: opacity .4s, transform .4s;
2990     transition: opacity .4s, transform .4s, -webkit-transform .4s;
2991     -webkit-transition-delay: .2s;
2992             transition-delay: .2s; }
2993   #webslides-zoomed.in .column {
2994     opacity: 1;
2995     -webkit-transform: scale(1);
2996             transform: scale(1); }
2997
2998 .text-slide-number {
2999   display: inline-block;
3000   margin: .8rem auto;
3001   text-align: center; }
3002
3003 #webslides {
3004   -webkit-transition: -webkit-filter .3s;
3005   transition: -webkit-filter .3s;
3006   transition: filter .3s;
3007   transition: filter .3s, -webkit-filter .3s; }
3008   #webslides.disabled, #webslides.zooming {
3009     position: fixed;
3010     width: 100%;
3011     z-index: 0; }
3012   #webslides.disabled {
3013     /*
3014     filter: blur(10px);
3015     transform: scale(1.1);
3016     */
3017     /* Blur makes scroll no accesible */
3018     width: calc(100% - 10px); }
3019
3020 /*=========================================
3021 17. PRINT
3022 =========================================== */
3023 @media print {
3024   @page {
3025     margin: .5cm;
3026     size: A4 landscape; }
3027   * {
3028     background: transparent !important;
3029     color: #000 !important;
3030     -webkit-filter: none !important;
3031             filter: none !important;
3032     text-shadow: none !important; }
3033   html,
3034   body,
3035   #webslides {
3036     height: auto !important;
3037     overflow: auto !important;
3038     width: auto !important; }
3039   #webslides {
3040     overflow-x: auto !important;
3041     overflow-y: auto !important; }
3042   section,
3043   .slide {
3044     display: -webkit-box !important;
3045     display: -ms-flexbox !important;
3046     display: flex !important;
3047     height: auto !important; }
3048   section * {
3049     -webkit-animation: none;
3050             animation: none; }
3051   table,
3052   figure {
3053     page-break-inside: avoid; }
3054   #counter,
3055   #navigation {
3056     display: none; } }
3057
3058 /*=========================================
3059 19. Colors
3060 =========================================== */
3061 /* -- Disable elastic scrolling/bounce:
3062 webslides.js will add .ws-ready automatically. Don't worry :) -- */
3063 body {
3064   background-color: #f7f9fb;
3065   color: #333; }
3066
3067 :focus {
3068   -webkit-box-shadow: 0 0 2px #96bbee;
3069           box-shadow: 0 0 2px #96bbee; }
3070
3071 svg {
3072   fill: currentColor; }
3073
3074 [class*='bg-'] a,
3075 [class*='bg-gradient-'] a {
3076   color: #bce; }
3077
3078 .bg-brown a {
3079   color: #c23; }
3080
3081 a,
3082 .bg-white a,
3083 .bg-light a,
3084 .bg-gradient-white a {
3085   color: #44d; }
3086
3087 a:hover {
3088   color: #3af; }
3089
3090 .flexblock li > a,
3091 [class*='bg-'] li > a,
3092 [class*='bg-gradient-'] li > a,
3093 article header a {
3094   color: inherit; }
3095
3096 hr {
3097   background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%); }
3098
3099 hr:after {
3100   background-color: rgba(255, 255, 255, 0.8);
3101   color: #333; }
3102
3103 abbr,
3104 acronym {
3105   border-bottom: 1px dotted #f7f9fb; }
3106
3107 mark,
3108 ins {
3109   background-color: rgba(221, 238, 255, 0.8);
3110   color: inherit; }
3111
3112 ::-moz-selection {
3113   background-color: rgba(221, 238, 255, 0.8); }
3114
3115 ::-webkit-selection {
3116   background-color: rgba(221, 238, 255, 0.8); }
3117
3118 ::selection {
3119   background-color: rgba(221, 238, 255, 0.8); }
3120
3121 pre {
3122   background: #fff;
3123   border: 1px solid rgba(0, 20, 80, 0.1);
3124   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
3125           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08); }
3126
3127 pre:hover {
3128   -webkit-box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
3129           box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); }
3130
3131 code,
3132 [class*='bg-'] pre {
3133   background-color: rgba(255, 255, 255, 0.09); }
3134
3135 .bg-white code {
3136   background: rgba(0, 20, 80, 0.03); }
3137
3138 /*================================================
3139 Slides - Backgrounds <section class="bg-primary">
3140 ================================================== */
3141 /*3 Corp Colors*/
3142 .bg-primary {
3143   background-color: #44d; }
3144
3145 .bg-secondary {
3146   background-color: #67d; }
3147
3148 .bg-light {
3149   background-color: #f7f9fb; }
3150
3151 .bg-black {
3152   background-color: #111; }
3153
3154 .bg-black-blue {
3155   background-color: #123; }
3156
3157 .bg-blue {
3158   background-color: #346; }
3159
3160 .bg-brown {
3161   background-color: #f9f8f2; }
3162
3163 .bg-gray {
3164   background-color: #d5d9e2; }
3165
3166 .bg-green {
3167   background-color: #077; }
3168
3169 .bg-purple {
3170   background-color: #62b; }
3171
3172 .bg-red {
3173   background-color: #c23; }
3174
3175 .bg-white {
3176   background-color: #fff; }
3177
3178 .bg-facebook {
3179   background-color: #3b5998; }
3180
3181 [class*='bg-'] .bg-white {
3182   color: #333;
3183   text-shadow: none; }
3184
3185 /* BG Apple Keynote*/
3186 .bg-apple {
3187   background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(50%, #1a2028), to(#293845));
3188   background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%); }
3189
3190 /*Font Color*/
3191 .bg-trans-dark,
3192 .bg-trans-gradient,
3193 .bg-primary,
3194 .bg-secondary,
3195 .bg-blue,
3196 .bg-green,
3197 .bg-purple,
3198 .bg-red,
3199 .bg-facebook,
3200 .bg-apple,
3201 [class*='bg-black'],
3202 [class*='bg-gradient-'] {
3203   color: #fff;
3204   text-shadow: 0 1px 0 #013; }
3205
3206 .bg-light p {
3207   color: #456; }
3208
3209 .bg-brown p {
3210   color: #666; }
3211
3212 /*Transparent/Opacity*/
3213 .bg-trans-dark {
3214   background: rgba(0, 0, 0, 0.8); }
3215
3216 .bg-trans-light {
3217   background: rgba(0, 0, 0, 0.2); }
3218
3219 /*Covers/Longforms...*/
3220 .bg-trans-gradient {
3221   background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent));
3222   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); }
3223
3224 /*Horizontal Gradient*/
3225 .bg-gradient-h {
3226   background: linear-gradient(134deg, #32b 0, #62b 100%); }
3227
3228 /*Vertical Gradient*/
3229 .bg-gradient-v {
3230   background: -webkit-gradient(linear, left bottom, left top, from(#62b), to(#32b));
3231   background: linear-gradient(to top, #62b 0%, #32b 100%); }
3232
3233 /*Radial Gradient*/
3234 .bg-gradient-r {
3235   background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); }
3236
3237 /*White Gradient (vertical)*/
3238 .bg-gradient-white {
3239   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f4f6), to(#fff));
3240   background: linear-gradient(180deg, #f2f4f6 0, #fff 100%);
3241   color: #333;
3242   text-shadow: none; }
3243
3244 /*Gray Gradient (horizontal)*/
3245 .bg-gradient-gray {
3246   background: -webkit-gradient(linear, left top, right top, color-stop(0, #f7f9fb), to(#dee2e6));
3247   background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
3248   color: #333;
3249   text-shadow: none; }
3250
3251 /*Border/Frame*/
3252 .frame {
3253   border: 0.8rem solid #fff; }
3254
3255 [class*='background'].frame {
3256   border-width: .2rem; }
3257
3258 /*Layer/Box Shadow*/
3259 .shadow,
3260 .pre {
3261   position: relative; }
3262
3263 .shadow:before,
3264 .shadow:after {
3265   -webkit-box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
3266           box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); }
3267
3268 /*============================
3269 TYPOGRAPHY
3270 ============================== */
3271 /* -- Horizontal separator  -- */
3272 .text-separator:before {
3273   background-color: rgba(170, 0, 0, 0.8); }
3274
3275 /* -- Pull Quote (Right/Left)  -- */
3276 [class*='text-pull-'] {
3277   border-top: 4px solid rgba(0, 0, 0, 0.5); }
3278
3279 img[class*='text-pull-'],
3280 figure[class*='text-pull-'] {
3281   border-top: 0; }
3282
3283 /* -- Context  -- */
3284 [class*='bg-'] .text-context:before {
3285   background-color: #fff; }
3286
3287 .text-context:before,
3288 .bg-white .text-context:before {
3289   background-color: rgba(0, 20, 80, 0.2); }
3290
3291 /* -- Text shadow  -- */
3292 .text-shadow {
3293   text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
3294
3295 /* -- time, ampersands, prepositions (for, of...), symbols...
3296 [class*='card-'] time,
3297 h1 span {
3298   color: #abd;
3299 }
3300
3301 /* -- <pre> comment  -- */
3302 .code-comment {
3303   color: rgba(70, 170, 130, 0.9);
3304   text-shadow: none; }
3305
3306 /*=========================================
3307 Header/Nav
3308 =========================================== */
3309 header[role='banner'] {
3310   background-color: #fff; }
3311
3312 .logo a {
3313   color: inherit; }
3314
3315 nav[role='navigation'] li.active a {
3316   background-color: #555;
3317   color: #fff; }
3318
3319 nav[role='navigation'] li a {
3320   background-color: rgba(50, 50, 50, 0.9);
3321   color: #fff; }
3322   nav[role='navigation'] li a:hover {
3323     background-color: rgba(50, 50, 50, 0.7); }
3324
3325 nav li.twitter a:hover {
3326   background-color: #1da1f3; }
3327
3328 nav li.facebook a:hover {
3329   background-color: #3b5998; }
3330
3331 nav li.linkedin a:hover {
3332   background-color: #1683bb; }
3333
3334 nav li.dribbble a:hover {
3335   background-color: #ea4c89; }
3336
3337 nav li.github a:hover {
3338   background-color: #60b044; }
3339
3340 nav li.email a:hover {
3341   background-color: #dd4b39; }
3342
3343 /*===================================================
3344 .flexblock li hover/active
3345 ===================================================== */
3346 .flexblock li.active a,
3347 .metrics li:hover,
3348 .specs li:hover,
3349 .reasons li:hover {
3350   background-color: rgba(0, 20, 80, 0.03); }
3351
3352 /*=========================================
3353 Features & Clients List
3354 =========================================== */
3355 .features li,
3356 .clients li {
3357   background-color: rgba(255, 255, 255, 0.9); }
3358
3359 [class*='bg-'] .features li,
3360 [class*='bg-'] .clients li {
3361   background-color: rgba(255, 255, 255, 0.1); }
3362
3363 .features li:hover,
3364 .clients li:hover {
3365   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08);
3366           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); }
3367
3368 /*============================
3369 .flexblock with border
3370 ============================== */
3371 .border {
3372   border-bottom: 1px solid rgba(0, 20, 80, 0.1);
3373   border-right: 1px solid rgba(0, 20, 80, 0.1); }
3374
3375 .border li {
3376   border-left: 1px solid rgba(0, 20, 80, 0.1);
3377   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3378
3379 .flexblock.border li li {
3380   border: 0; }
3381
3382 /*===========================================
3383 flexblock.steps
3384 ============================================= */
3385 .steps li:nth-child(1) {
3386   background-color: #e8eef7; }
3387
3388 .steps li:nth-child(2) {
3389   background-color: #dde5f3; }
3390
3391 .steps li:nth-child(3) {
3392   background-color: #cdd8ec; }
3393
3394 .steps li:nth-child(4) {
3395   background-color: #bbcdec; }
3396
3397 .process {
3398   border-bottom: 15px solid transparent;
3399   border-top: 15px solid transparent; }
3400
3401 .steps li:hover,
3402 .steps.blink li:hover > a {
3403   background-color: #b8cef7; }
3404
3405 @media (min-width: 1024px) {
3406   .process.step-2 {
3407     border-left-color: #e8eef7; }
3408   .process.step-3 {
3409     border-left-color: #dde5f3; }
3410   .process.step-4 {
3411     border-left-color: #cdd8ec; }
3412   .steps li:hover + li [class*='step-'] {
3413     border-left-color: #b8cef7; } }
3414
3415 /*=========================================================
3416 Items: You can use for settings, drag&drop, close/delete...
3417 =========================================================== */
3418 .specs li:after {
3419   background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
3420   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
3421
3422 .specs li:last-child:after {
3423   background: none; }
3424
3425 /*=========================================================
3426 Why/Steps/Motivation/Reasons -  Decimal/Numbers
3427 =========================================================== */
3428 .reasons li:after {
3429   background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0)));
3430   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
3431
3432 .reasons li:last-child:after {
3433   background: none; }
3434
3435 /*=========================================
3436 Overlays
3437 =========================================== */
3438 .overlay {
3439   background-color: rgba(0, 0, 0, 0.2); }
3440
3441 li:hover .overlay {
3442   background-color: rgba(0, 0, 0, 0.1); }
3443
3444 .overlay,
3445 .overlay a {
3446   color: #fff;
3447   text-shadow: 0 1px 0 #111; }
3448
3449 /*=========================================
3450 Gallery li+.overlay+image
3451 =========================================== */
3452 .gallery li {
3453   background-color: rgba(0, 20, 80, 0.06);
3454   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
3455           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03); }
3456
3457 .gallery li figcaption {
3458   background-color: #fff; }
3459
3460 .flexblock.gallery li:hover {
3461   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
3462           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
3463
3464 .gallery li footer {
3465   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3466
3467 .gallery li a {
3468   color: #333;
3469   text-shadow: none; }
3470
3471 .flesblock.gallery li a footer {
3472   color: #aaa; }
3473
3474 /*Arrow */
3475 .gallery li figcaption:before {
3476   border: 0.8rem solid #000;
3477   border-color: transparent transparent #fff #fff; }
3478
3479 /*=========================================
3480 Plans / Pricing
3481 =========================================== */
3482 .plans > li div,
3483 .flexblock.plans li:hover div {
3484   background-color: #fff; }
3485
3486 .plans > li:hover,
3487 .plans > li:nth-child(2) {
3488   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
3489           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
3490
3491 .plans:hover li:nth-child(2):not(:hover) {
3492   -webkit-box-shadow: none;
3493           box-shadow: none; }
3494
3495 .plans li h2 {
3496   background-color: rgba(0, 20, 80, 0.5);
3497   color: #fff; }
3498
3499 .plans ul li {
3500   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3501   .plans ul li:last-child {
3502     border-bottom: 0; }
3503
3504 .plans > li > a {
3505   color: #333;
3506   text-shadow: none; }
3507
3508 /*============================
3509 Activity/CV/Timeline/News
3510 ============================== */
3511 .activity li {
3512   border-top: 0.1rem solid rgba(0, 20, 80, 0.1); }
3513
3514 .activity li:hover {
3515   background-color: rgba(0, 20, 80, 0.02); }
3516
3517 /*=========================================
3518 Resume/Work/CV/Portfolio
3519 =========================================== */
3520 .work-label,
3521 .work li a {
3522   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3523
3524 .work li:nth-child(odd) > a {
3525   background-color: rgba(0, 20, 80, 0.03); }
3526
3527 .work li a:hover {
3528   background-color: rgba(0, 20, 80, 0.04); }
3529
3530 /*===========================================
3531 Clients / Services / Logos...
3532 ============================================= */
3533 .clients.border figcaption {
3534   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3535
3536 /*====================
3537 LOGOS
3538 ====================== */
3539 /* --- Images (black logo/image) --- */
3540 img.blacklogo {
3541   background: none;
3542   -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
3543           filter: grayscale(100%) brightness(10%) contrast(100%); }
3544
3545 /* --- Images (gray logo/image) --- */
3546 img.graylogo {
3547   -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
3548           filter: grayscale(100%) brightness(10%) contrast(10%); }
3549
3550 /* --- Images (white Logo/Image) --- */
3551 img.whitelogo {
3552   -webkit-filter: brightness(0) invert(1);
3553           filter: brightness(0) invert(1); }
3554
3555 /* --- Logo/Images Hover --- */
3556 li:hover img.blacklogo,
3557 li:hover img.graylogo,
3558 img.blacklogo:hover,
3559 img.graylogo:hover {
3560   background: none;
3561   -webkit-filter: grayscale(0%);
3562           filter: grayscale(0%);
3563   -webkit-transition: all .6s ease;
3564   transition: all .6s ease; }
3565
3566 /*=========================================================
3567 Cards
3568 =========================================================== */
3569 [class*='card-'] > a {
3570   color: inherit; }
3571
3572 /* ---  card ul specs --- */
3573 .description > li {
3574   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3575
3576 .description > li:last-child {
3577   border-bottom: 0; }
3578
3579 /*== Figure Background === */
3580 [class*='card-'][class*='bg-'] figure {
3581   background-color: rgba(0, 20, 80, 0.06); }
3582
3583 /*== Ficaption Cards === */
3584 [class*='card'] figcaption,
3585 [class*='card'] figcaption a {
3586   background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2)));
3587   background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
3588   color: #fff; }
3589
3590 /*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
3591 @media (min-width: 768px) {
3592   .cta .benefit {
3593     -o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
3594        border-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.4)), to(transparent)) 1 100%;
3595        border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
3596     border-left-width: 1px;
3597     border-style: solid; } }
3598
3599 /*=========================================
3600 Tables
3601 =========================================== */
3602 table td,
3603 th,
3604 thead {
3605   border: 1px solid rgba(0, 0, 0, 0.5); }
3606
3607 thead {
3608   background-color: rgba(0, 0, 0, 0.3); }
3609
3610 tr:nth-child(even) > td {
3611   background: rgba(0, 0, 0, 0.1); }
3612
3613 tr > td {
3614   border-top: 1px solid rgba(0, 0, 0, 0.5); }
3615
3616 td:hover,
3617 tr:nth-child(even) > td:hover {
3618   background-color: rgba(255, 255, 255, 0.5); }
3619
3620 /*============================
3621 Browser (Screenshots)
3622 ============================== */
3623 .browser {
3624   border: 1px solid rgba(0, 20, 80, 0.1); }
3625
3626 .browser:hover {
3627   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
3628           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
3629
3630 /*=== Topbar === */
3631 .browser:before {
3632   background-color: rgba(0, 20, 80, 0.1);
3633   border-bottom: 1px solid rgba(0, 20, 80, 0.2);
3634   color: rgba(255, 255, 255, 0.9); }
3635
3636 .browser:hover:before {
3637   background-color: rgba(0, 20, 80, 0.12);
3638   color: #fff; }
3639
3640 /*=========================================
3641 Forms
3642 =========================================== */
3643 input,
3644 textarea {
3645   background-color: #fafbfc; }
3646
3647 input:focus,
3648 textarea:focus {
3649   background-color: #fff;
3650   -webkit-box-shadow: 0 0 5px #51cbee;
3651           box-shadow: 0 0 5px #51cbee; }
3652
3653 input:focus::-moz-placeholder {
3654   color: #ddd; }
3655
3656 input:focus::-webkit-input-placeholder {
3657   color: #ddd; }
3658
3659 a.button,
3660 [class*='badge-'],
3661 button[type='submit'],
3662 input {
3663   -webkit-box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
3664           box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3); }
3665
3666 button,
3667 input,
3668 select,
3669 textarea,
3670 button[type='submit'],
3671 input[type='submit'],
3672 .button,
3673 .button:hover,
3674 button[type='submit']:hover,
3675 input[type='submit']:hover {
3676   border: 1px solid #44d; }
3677
3678 button[type='submit'],
3679 input[type='submit'],
3680 .button,
3681 .button:hover,
3682 button[type='submit']:hover,
3683 input[type='submit']:hover {
3684   background-color: #44d;
3685   color: #fff;
3686   text-shadow: 0 1px 0 #123; }
3687
3688 .button:active,
3689 button[type='submit']:active,
3690 input[type='submit']:active {
3691   background-color: #17d; }
3692
3693 .ghost,
3694 .ghost:hover {
3695   background: none;
3696   color: inherit;
3697   text-shadow: none; }
3698
3699 .bg-primary select,
3700 .bg-primary textarea,
3701 .bg-primary .button,
3702 .bg-primary button,
3703 .bg-primary button:hover,
3704 .bg-primary input,
3705 [class*='bg-gradient-'] .button,
3706 [class*='bg-'] a.button.ghost {
3707   border-color: #fff; }
3708
3709 [class*='bg-'] a.button {
3710   color: #fff; }
3711
3712 .bg-white a.button.ghost,
3713 .bg-gradient-white a.button.ghost {
3714   border: 1px solid #44d;
3715   color: #333; }
3716
3717 :disabled,
3718 button:disabled:hover {
3719   background-color: #eee;
3720   border-color: #eee;
3721   color: #ccc; }
3722
3723 fieldset {
3724   background-color: rgba(0, 20, 80, 0.2);
3725   border: 1px solid #44d; }
3726
3727 legend {
3728   background-color: rgba(0, 0, 0, 0.6);
3729   color: #fff; }
3730
3731 /* Inputs/Buttons - hover */
3732 input:hover,
3733 select:hover {
3734   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
3735           box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
3736
3737 /* App Store Badges */
3738 [class*='badge-'] {
3739   background-color: #000;
3740   border: 1px solid #345; }
3741
3742 form .flexblock li:hover {
3743   background-color: rgba(0, 0, 0, 0.05); }
3744
3745 /*============================
3746 Table of Contents
3747 ============================== */
3748 .toc,
3749 .toc ol > li:before,
3750 .chapter {
3751   background-color: #f7f9fb; }
3752
3753 .toc li .toc-page:before {
3754   border-bottom: 1px dotted rgba(0, 0, 0, 0.9); }
3755
3756 /*============================
3757 Slides (Counter/Arrows)
3758 ============================== */
3759 #counter,
3760 #navigation a {
3761   color: #abc; }
3762
3763 #webslides:hover #navigation a:hover {
3764   background-color: rgba(0, 10, 40, 0.8);
3765   color: #fff; }
3766
3767 /*============================
3768 Footer
3769 ============================== */
3770 footer[role='contentinfo'] {
3771   background-color: #fff; }
3772
3773 /*============================
3774 Slides Index
3775 ============================== */
3776 #webslides-zoomed {
3777   background: rgba(0, 10, 40, 0.8); }
3778
3779 #webslides-zoomed .column > .wrap-zoom {
3780   background-color: #f7f9fb;
3781   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
3782           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
3783   color: #333; }
3784   #webslides-zoomed .column > .wrap-zoom:hover {
3785     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
3786             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
3787   #webslides-zoomed .column > .wrap-zoom.current {
3788     border: 0.6rem solid rgba(0, 20, 255, 0.2); }
3789
3790 .text-slide-number {
3791   color: #abc; }