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 3. Header & Footer
1244 =========================================== */
1245 /* -- If you want an unique, global header/footer,read this:
1246 https://github.com/webslides/webslides/issues/57 -- */
1247 header,
1248 footer,
1249 #navigation {
1250   padding: 2.4rem;
1251   -webkit-transition: all .4s ease-in-out;
1252   transition: all .4s ease-in-out;
1253   width: 100%; }
1254
1255 header p,
1256 footer p {
1257   line-height: 4.8rem;
1258   margin-bottom: 0; }
1259
1260 header[role='banner'] img,
1261 footer img {
1262   height: 4rem;
1263   vertical-align: middle; }
1264
1265 footer {
1266   position: relative; }
1267
1268 header,
1269 footer {
1270   z-index: 3; }
1271
1272 header,
1273 .ws-ready footer {
1274   left: 0;
1275   position: absolute;
1276   top: 0; }
1277
1278 .ws-ready footer {
1279   bottom: 0;
1280   top: auto; }
1281
1282 header[role='banner'] {
1283   opacity: 0; }
1284   header[role='banner']:hover {
1285     opacity: 1; }
1286
1287 @media (max-width: 767px) {
1288   footer .alignleft,
1289   footer .alignright {
1290     display: block;
1291     float: none; } }
1292
1293 /*=== 3.1. Logo === */
1294 .logo {
1295   text-transform: lowercase; }
1296   .logo a {
1297     background: url("../images/logos/logo.svg") no-repeat 0 0;
1298     background-size: 4.8rem;
1299     float: left;
1300     height: 4.8rem;
1301     text-indent: -4000px;
1302     /*If you remove text-indent and add: */
1303     /*padding-left: 6rem;*/
1304     vertical-align: middle;
1305     width: 4.8rem; }
1306
1307 /*=========================================
1308 4. Navigation
1309 =========================================== */
1310 /*=== 4.1. Navbars === */
1311 nav ul {
1312   display: -webkit-box;
1313   display: -ms-flexbox;
1314   display: flex;
1315   -ms-flex-wrap: wrap;
1316       flex-wrap: wrap;
1317   /*====align left====*/
1318   -webkit-box-pack: start;
1319       -ms-flex-pack: start;
1320           justify-content: flex-start;
1321   /* ==== align center ====*/
1322   /*justify-content: center; */
1323   /*====align right====*/
1324   /* justify-content: flex-end; */
1325   /*====separated columns li a====*/
1326   /* justify-content: space-between; */
1327   /*====separated columns centered li a====*/
1328   /*justify-content: space-around;*/ }
1329   nav ul li {
1330     float: left;
1331     list-style: none;
1332     position: relative; }
1333
1334 nav ul li:first-child,
1335 nav[role='navigation'] ul li {
1336   margin-left: 0; }
1337
1338 nav[role='navigation'] li a {
1339   display: -webkit-box;
1340   display: -ms-flexbox;
1341   display: flex;
1342   -webkit-box-pack: center;
1343       -ms-flex-pack: center;
1344           justify-content: center;
1345   line-height: 4.8rem;
1346   max-width: 100%;
1347   padding: 0 1.6rem;
1348   position: relative;
1349   text-decoration: none; }
1350   nav[role='navigation'] li a svg {
1351     margin: 1.5rem .4rem 1.5rem 0; }
1352
1353 header nav ul {
1354   -webkit-box-pack: end;
1355       -ms-flex-pack: end;
1356           justify-content: flex-end;
1357   margin: 0; }
1358
1359 nav.aligncenter ul,
1360 .aligncenter nav ul {
1361   /* ==== align center ====*/
1362   -webkit-box-pack: center;
1363       -ms-flex-pack: center;
1364           justify-content: center; }
1365
1366 nav.navbar ul li {
1367   /*====full float li a ====*/
1368   -webkit-box-flex: 1;
1369       -ms-flex: 1 1 auto;
1370           flex: 1 1 auto; }
1371
1372 @media (max-width: 568px) {
1373   nav.navbar ul {
1374     -webkit-box-orient: vertical;
1375     -webkit-box-direction: normal;
1376         -ms-flex-flow: column wrap;
1377             flex-flow: column wrap;
1378     padding: 0; }
1379   nav.navbar li a {
1380     -webkit-box-pack: start;
1381         -ms-flex-pack: start;
1382             justify-content: flex-start; } }
1383
1384 /*============================================
1385 5. SLIDES (Full Screen)
1386 Vertically and horizontally centered
1387 ============================================== */
1388 /* Fade transition to all slides.
1389 * = All HTML elements will have those styles.*/
1390 section * {
1391   -webkit-animation: fadeIn .6s ease-in-out;
1392           animation: fadeIn .6s ease-in-out; }
1393
1394 section .background,
1395 section .light,
1396 section .dark {
1397   -webkit-animation-duration: 0s;
1398           animation-duration: 0s; }
1399
1400 /*=== Section = Slide === */
1401 section,
1402 .slide {
1403   display: -webkit-box;
1404   display: -ms-flexbox;
1405   display: flex;
1406   -webkit-box-orient: vertical;
1407   -webkit-box-direction: normal;
1408       -ms-flex-direction: column;
1409           flex-direction: column;
1410   -webkit-box-pack: center;
1411       -ms-flex-pack: center;
1412           justify-content: center;
1413   min-height: 100vh;
1414   /*Fullscreen*/
1415   /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/
1416   padding: 2.4rem;
1417   /*Fixed/Visible header? padding-top: 12rem; */
1418   page-break-after: always;
1419   position: relative;
1420   word-wrap: break-word; }
1421   @media (min-width: 1024px) {
1422     section,
1423     .slide {
1424       padding-bottom: 12rem;
1425       padding-top: 12rem; } }
1426
1427 /*slide with no padding (full card, .embed youtube video...) */
1428 .fullscreen {
1429   padding: 0;
1430   /* Fixed/Visible header?
1431   padding:8.2rem 0 0 0;
1432   */ }
1433
1434 /* slide alignment - top */
1435 .slide-top {
1436   -webkit-box-pack: start;
1437       -ms-flex-pack: start;
1438           justify-content: flex-start; }
1439
1440 /* slide alignment - bottom */
1441 .slide-bottom {
1442   -webkit-box-pack: end;
1443       -ms-flex-pack: end;
1444           justify-content: flex-end; }
1445
1446 /*== 5.1. Mini container width:50%
1447 Aligned items [class*="content-"]=== */
1448 [class*='content-'] {
1449   position: relative;
1450   text-align: left; }
1451
1452 .wrap[class*='bg-'],
1453 .wrap.frame,
1454 [class*='content-'][class*='bg-'],
1455 [class*='content-'].frame,
1456 [class*='align'][class*='bg-'] {
1457   padding: 4.8rem; }
1458
1459 form[class*='bg-'] {
1460   padding: 2.4rem; }
1461
1462 [class*='content-'] > [class*='content-'] p {
1463   font-size: 1.8rem;
1464   line-height: 3.2rem; }
1465
1466 .content-center {
1467   margin: 0 auto;
1468   text-align: center; }
1469
1470 @media (min-width: 768px) {
1471   [class*='content-'] {
1472     width: 50%; }
1473     [class*='content-']:after, [class*='content-']:before {
1474       content: '';
1475       display: table; }
1476     [class*='content-']:after {
1477       clear: both; }
1478   .content-left {
1479     float: left; }
1480   .content-right {
1481     float: right; }
1482   [class*='content-'] + [class*='content-'] {
1483     margin-bottom: 4.8rem;
1484     padding-left: 2.4rem; }
1485   [class*='content-'] + [class*='size-'] {
1486     clear: both;
1487     margin-top: 6.4rem; } }
1488
1489 /*=== 5.3 Slides - Background Images/Videos === */
1490 .background,
1491 [class*='background-'] {
1492   background-repeat: no-repeat;
1493   bottom: 0;
1494   left: 0;
1495   position: absolute;
1496   right: 0;
1497   top: 0; }
1498
1499 /*=== BG Positions === */
1500 .background {
1501   background-position: center;
1502   background-size: cover;
1503   /*fullscreen video
1504     <video class="background-video">
1505   */ }
1506   .background-top {
1507     background-position: top;
1508     background-size: cover; }
1509   .background-bottom {
1510     background-position: bottom;
1511     background-size: cover; }
1512   .background-center {
1513     background-position: center; }
1514   .background-center-top {
1515     background-position: center top; }
1516   .background-right-top {
1517     background-position: right top; }
1518   .background-left-top {
1519     background-position: left top; }
1520   .background-center-bottom, .background-left-bottom, .background-right-bottom, .background-left, .background-right {
1521     background-position: center bottom; }
1522   @media (min-width: 1024px) {
1523     .background-left-bottom {
1524       background-position: left bottom; }
1525     .background-right-bottom {
1526       background-position: right bottom; }
1527     .background-right {
1528       background-position: right; }
1529     .background-left {
1530       background-position: left; } }
1531   .background-video {
1532     height: 100%;
1533     -o-object-fit: fill;
1534        object-fit: fill;
1535     width: 100%; }
1536
1537 /*=== bg image/video overlay === */
1538 /*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark...  -- */
1539 [class*='bg-'] .light,
1540 [class*='bg-'] .light {
1541   opacity: .8; }
1542
1543 [class*='bg-'] .dark,
1544 [class*='bg-'] .dark {
1545   opacity: .2; }
1546
1547 [class*='bg-'] .background-video.dark {
1548   opacity: .5; }
1549
1550 @media (max-width: 1023px) {
1551   [class*='background-'] {
1552     -webkit-animation: fadeIn ease-in .2;
1553             animation: fadeIn ease-in .2;
1554     opacity: .2; }
1555   .background-video {
1556     opacity: .8; } }
1557
1558 /*=== Animated Background Image === */
1559 .background.anim {
1560   -webkit-animation: anim 80s linear infinite;
1561           animation: anim 80s linear infinite;
1562   background-position: center top;
1563   background-repeat: repeat;
1564   background-size: 100%;
1565   height: 200%; }
1566
1567 /*=== Background with a frame === */
1568 /*<span class="background" style="background-image:url('image.jpg')"></span>
1569 <span class="background frame"></span>*/
1570 [class*='background'].frame {
1571   margin: 2.4rem; }
1572
1573 /* === 5.2 Counter / Navigation Slides  === */
1574 #navigation {
1575   -webkit-animation: fadeIn 8s;
1576           animation: fadeIn 8s;
1577   bottom: 0;
1578   left: 0;
1579   margin-left: auto;
1580   margin-right: auto;
1581   opacity: 0;
1582   position: fixed;
1583   right: 0;
1584   width: 24.4rem;
1585   /* hover/visibility */
1586   z-index: 4; }
1587   #navigation:hover {
1588     opacity: 1; }
1589   #navigation p {
1590     margin-bottom: 0; }
1591
1592 #counter {
1593   display: block;
1594   line-height: 4.8rem;
1595   margin-left: auto;
1596   margin-right: auto;
1597   position: relative;
1598   text-align: center;
1599   width: 10rem; }
1600   #counter a:hover {
1601     padding: .8rem; }
1602
1603 a#next,
1604 a#previous {
1605   border-radius: .4rem;
1606   cursor: pointer;
1607   font-size: 2.4rem;
1608   height: 4rem;
1609   padding: .8rem;
1610   position: absolute;
1611   text-align: center;
1612   width: 4rem; }
1613
1614 a#next {
1615   right: 3.2rem; }
1616
1617 a#previous {
1618   left: 3.2rem; }
1619
1620 @media (max-width: 1024px) {
1621   #navigation {
1622     -webkit-animation: fadeIn 6s;
1623             animation: fadeIn 6s;
1624     background: url("../images/swipe.svg") no-repeat center top;
1625     background-size: 4.8rem; }
1626   #navigation a,
1627   #counter {
1628     display: none; } }
1629
1630 /*===============================================================
1631 6. Magic blocks with flexbox (Auto-fill & Equal Height)
1632 Blocks Links li>a = .flexblock.blink (.blink required)
1633 ================================================================= */
1634 .flexblock {
1635   clear: both;
1636   display: -webkit-box;
1637   display: -ms-flexbox;
1638   display: flex;
1639   -ms-flex-wrap: wrap;
1640       flex-wrap: wrap;
1641   margin-left: auto;
1642   margin-right: auto;
1643   padding: 0; }
1644   .flexblock:after {
1645     clear: both; }
1646   .flexblock:before {
1647     content: '';
1648     display: table; }
1649   .flexblock li,
1650   .flexblock.blink li > a {
1651     display: -webkit-box;
1652     display: -ms-flexbox;
1653     display: flex;
1654     -webkit-box-orient: vertical;
1655     -webkit-box-direction: normal;
1656         -ms-flex-direction: column;
1657             flex-direction: column;
1658     margin: 0;
1659     padding: 2.4rem;
1660     position: relative; }
1661   .flexblock li {
1662     -webkit-box-flex: 1;
1663         -ms-flex: auto;
1664             flex: auto;
1665     text-align: left;
1666     -webkit-transition: .3s;
1667     transition: .3s;
1668     width: 100%; }
1669     .flexblock li:hover {
1670       -webkit-transform: translateY(-0.2rem);
1671               transform: translateY(-0.2rem); }
1672     @media (min-width: 600px) {
1673       .flexblock li {
1674         width: 50%; } }
1675     @media (min-width: 1024px) {
1676       .flexblock li {
1677         width: 25%; } }
1678   .flexblock.aligncenter li {
1679     text-align: center; }
1680   .flexblock.vertical-align li {
1681     -webkit-box-pack: center;
1682         -ms-flex-pack: center;
1683             justify-content: center; }
1684   .flexblock.blink li {
1685     padding: 0; }
1686   .flexblock li h2 svg,
1687   .flexblock li h3 svg {
1688     margin-top: 0; }
1689
1690 h1 + .flexblock,
1691 h2 + .flexblock,
1692 h3 + .flexblock,
1693 div + ul,
1694 div + ol {
1695   margin-top: 3.2rem; }
1696
1697 .flexblock li h2,
1698 .flexblock li h3,
1699 footer .column h2,
1700 footer .column h3 {
1701   font-size: 1.8rem;
1702   font-weight: 600;
1703   line-height: 3.2rem;
1704   margin-bottom: 0; }
1705
1706 .flexblock li li,
1707 .flexblock.blink li li {
1708   padding: 0;
1709   width: 100%; }
1710
1711 [class*='content-'] .flexblock li p {
1712   font-size: 1.8rem;
1713   line-height: 3.2rem; }
1714
1715 .content-right .flexblock.features li,
1716 .content-left .flexblock.features li {
1717   width: 46%; }
1718
1719 /*====================================================================
1720 6.1 Features <ul class="flexblock features">
1721 ====================================================================== */
1722 .flexblock.features > li {
1723   border-radius: .4rem;
1724   margin-bottom: 4.8rem;
1725   width: 100%; }
1726
1727 .flexblock.features li h2 {
1728   text-transform: uppercase; }
1729
1730 .flexblock.features li span {
1731   font-weight: 300; }
1732
1733 .flexblock.features li p {
1734   margin: 0; }
1735
1736 .flexblock.features li p em {
1737   display: block; }
1738
1739 .flexblock.features li span,
1740 .flexblock.features li svg {
1741   display: block;
1742   font-size: 6.4rem;
1743   line-height: 1;
1744   margin: 0; }
1745
1746 .flexblock.features li img {
1747   width: 6.4rem; }
1748
1749 .flexblock.features li span sup {
1750   font-size: 3rem; }
1751
1752 @media (min-width: 1200px) {
1753   .flexblock.features li span,
1754   .flexblock.features li svg,
1755   .flexblock.features li img {
1756     float: left;
1757     margin-right: .8rem; } }
1758
1759 @media (min-width: 768px) {
1760   .flexblock.features {
1761     margin-left: -2%;
1762     margin-right: -2%; }
1763   .flexblock.features > li {
1764     margin-left: 2%;
1765     margin-right: 2%;
1766     width: 29%; }
1767   .size-50 .flexblock.features > li {
1768     width: 46%; }
1769   .column .flexblock.features > li {
1770     width: 100%; }
1771   footer .flexblock.features > li {
1772     margin-bottom: 0; } }
1773
1774 /*=====================================================================
1775 6.2 Clients Logos <ul class="flexblock clients">
1776 ======================================================================= */
1777 .flexblock.clients.blink li > a,
1778 .flexblock.clients li {
1779   padding: 0; }
1780
1781 .flexblock.clients li figcaption {
1782   padding: 0 2.4rem 2.4rem; }
1783
1784 .flexblock.clients.border li figcaption {
1785   padding-top: 2.4rem; }
1786
1787 .clients.blink li > a,
1788 .clients li {
1789   -webkit-box-pack: inherit;
1790       -ms-flex-pack: inherit;
1791           justify-content: inherit; }
1792
1793 .clients li img,
1794 .clients li svg {
1795   display: block;
1796   padding: 2.4rem; }
1797
1798 .clients.border li img,
1799 .clients.border li svg {
1800   display: block;
1801   margin-left: auto;
1802   margin-right: auto; }
1803
1804 .clients li:hover {
1805   z-index: 1; }
1806
1807 /*==================================================
1808 6.3 flexblock.steps <ul class="flexblock steps">
1809 About, Philosophy...
1810 =================================================== */
1811 .steps li {
1812   width: 100%; }
1813   .steps li img,
1814   .steps li span {
1815     display: block;
1816     margin: 0 auto .8rem; }
1817   .steps li span {
1818     font-size: 6.4rem; }
1819   @media (min-width: 768px) {
1820     .steps li {
1821       width: 50%; } }
1822
1823 @media (min-width: 1024px) {
1824   .steps li {
1825     width: 25%; }
1826   .process {
1827     border-left-style: solid;
1828     border-left-width: 15px;
1829     height: 0;
1830     left: 0;
1831     position: absolute;
1832     top: 60px;
1833     width: 0; } }
1834
1835 /*=================================================
1836 6.4 Block Numbers - <ul class="flexblock metrics">
1837 =================================================== */
1838 .metrics li {
1839   text-align: center;
1840   width: 100%; }
1841   @media (min-width: 568px) {
1842     .metrics li {
1843       width: 50%; } }
1844   @media (min-width: 1024px) {
1845     .metrics li {
1846       width: 25%; } }
1847
1848 .metrics li strong {
1849   display: block; }
1850
1851 .metrics li span,
1852 .metrics li svg {
1853   display: block;
1854   font-size: 6.4rem;
1855   line-height: 7.2rem;
1856   margin: 0 auto; }
1857
1858 .card-50 .metrics li {
1859   width: 50%; }
1860
1861 /*=====================================================
1862 6.5 Specs/Items: <ul class="flexblock specs">
1863 ======================================================= */
1864 .specs li {
1865   text-align: left;
1866   width: 100%; }
1867   .specs li:after {
1868     bottom: -2.4rem;
1869     content: '';
1870     display: block;
1871     height: 1px;
1872     position: relative; }
1873   .specs li:hover {
1874     -webkit-transform: translateX(0.2rem);
1875             transform: translateX(0.2rem); }
1876   .specs li span,
1877   .specs li svg {
1878     display: block;
1879     font-size: 6.4rem;
1880     line-height: 1;
1881     margin: 0; }
1882   .specs li img {
1883     width: 6.4rem; }
1884   .specs li span {
1885     font-weight: 300; }
1886     .specs li span sup {
1887       font-size: 3rem; }
1888   @media (min-width: 1024px) {
1889     .specs li span,
1890     .specs li svg,
1891     .specs li img {
1892       float: left;
1893       margin-right: 2.4rem; } }
1894
1895 /*=================================================
1896 6.6 Reasons/Why/Numbers (counter-increment)
1897 <ul class="flexblock reasons">
1898 =================================================== */
1899 .flexblock.reasons li {
1900   counter-increment: list;
1901   text-align: left;
1902   width: 100%; }
1903   .flexblock.reasons li:hover {
1904     -webkit-transform: translateY(-0.2rem);
1905             transform: translateY(-0.2rem); }
1906   .flexblock.reasons li:after {
1907     bottom: -2.4rem;
1908     content: '';
1909     display: block;
1910     height: 1px;
1911     position: relative; }
1912   .flexblock.reasons li:before {
1913     content: counter(list) ".";
1914     font-size: 6.4rem;
1915     line-height: 1; }
1916   @media (min-width: 768px) {
1917     .flexblock.reasons li {
1918       padding-left: 8.8rem;
1919       /* You need two digits? (1-10)*/
1920       /*padding-left: 12rem; */ }
1921       .flexblock.reasons li:before {
1922         left: 2.4rem;
1923         position: absolute; } }
1924
1925 /*=================================================
1926 6.7 Gallery - <ul class="flexblock gallery">
1927 Block Thumbnails li+.overlay+image
1928 img size recommended:800x600px
1929 =================================================== */
1930 .flexblock.gallery li {
1931   margin-bottom: 4.8rem; }
1932   .flexblock.gallery li:nth-child(n+4) {
1933     -webkit-box-flex: inherit;
1934         -ms-flex: inherit;
1935             flex: inherit; }
1936   .flexblock.gallery li figcaption {
1937     padding: 1.6rem;
1938     position: relative; }
1939     .flexblock.gallery li figcaption:before {
1940       content: '';
1941       height: 0;
1942       left: 20%;
1943       margin-left: -.5em;
1944       position: absolute;
1945       top: .4rem;
1946       -webkit-transform: rotate(135deg);
1947               transform: rotate(135deg);
1948       -webkit-transform-origin: 0 0;
1949               transform-origin: 0 0;
1950       -webkit-transition: .1s;
1951       transition: .1s;
1952       width: 0; }
1953   .flexblock.gallery li:hover figcaption:before {
1954     top: .3rem; }
1955
1956 .aligncenter .flexblock.gallery li figcaption:before {
1957   left: 55%;
1958   margin-left: 0; }
1959
1960 .flexblock.gallery li,
1961 .flexblock.gallery.blink li > a {
1962   padding: 0; }
1963
1964 .flexblock.gallery h2 {
1965   text-transform: uppercase; }
1966
1967 .flexblock.gallery h2 + p,
1968 .flexblock.gallery h3 + p {
1969   margin-top: .8rem; }
1970
1971 .flexblock.gallery p {
1972   font-size: 1.6rem;
1973   line-height: 2.4rem;
1974   margin-bottom: 0; }
1975
1976 .flexblock.gallery li footer {
1977   margin-top: .8rem;
1978   padding: 1.2rem 0 0;
1979   position: relative; }
1980
1981 .flexblock.gallery li img {
1982   display: block;
1983   margin-left: auto;
1984   margin-right: auto; }
1985
1986 @media (min-width: 600px) {
1987   .flexblock.gallery {
1988     margin-left: -2%;
1989     margin-right: -2%; }
1990     .flexblock.gallery li {
1991       margin-left: 2%;
1992       margin-right: 2%;
1993       width: 46%; } }
1994
1995 @media (min-width: 1024px) {
1996   .flexblock.gallery li {
1997     width: 21%; }
1998   .grid.sm .flexblock.gallery li,
1999   .grid.ms .flexblock.gallery li {
2000     width: 29%; }
2001   .grid.sms .flexblock.gallery li {
2002     width: 46%; } }
2003
2004 .overlay {
2005   bottom: 0;
2006   cursor: pointer;
2007   display: -webkit-box;
2008   display: -ms-flexbox;
2009   display: flex;
2010   -webkit-box-orient: vertical;
2011   -webkit-box-direction: normal;
2012       -ms-flex-direction: column;
2013           flex-direction: column;
2014   height: 100%;
2015   -webkit-box-pack: center;
2016       -ms-flex-pack: center;
2017           justify-content: center;
2018   left: 0;
2019   opacity: 1;
2020   position: absolute;
2021   right: 0;
2022   top: 0;
2023   -webkit-transition: all .3s linear;
2024   transition: all .3s linear;
2025   width: 100%;
2026   z-index: 2; }
2027
2028 li .overlay {
2029   -webkit-box-align: center;
2030       -ms-flex-align: center;
2031           align-items: center; }
2032
2033 li .overlay h2 {
2034   letter-spacing: .2rem;
2035   margin: 0;
2036   padding: 0 2.4rem;
2037   text-align: center;
2038   text-transform: uppercase;
2039   width: 100%; }
2040
2041 .overlay p,
2042 .overlay time {
2043   margin-bottom: 0; }
2044
2045 li:hover .overlay {
2046   cursor: pointer; }
2047
2048 /*===============================================
2049 6.8 Plans / Pricing <ul class="flexblock plans">
2050 ================================================= */
2051 .flexblock.plans > li {
2052   border-radius: 3px;
2053   margin-bottom: 4.8rem;
2054   text-align: center;
2055   z-index: 1; }
2056
2057 .flexblock.plans li,
2058 .flexblock.plans.blink li > a {
2059   padding: 0; }
2060
2061 .flexblock.plans.blink li > a div,
2062 .flexblock.plans li div {
2063   padding-bottom: 3.2rem; }
2064
2065 .flexblock.plans li p,
2066 .flexblock.plans li h2 {
2067   padding: .8rem 3.2rem; }
2068
2069 .flexblock.plans li h2 {
2070   float: left;
2071   font-weight: 400;
2072   letter-spacing: .1rem;
2073   text-transform: uppercase;
2074   width: 100%; }
2075
2076 .flexblock.plans .price {
2077   clear: both;
2078   display: block;
2079   font-size: 4.8rem;
2080   font-weight: 400;
2081   line-height: 6.2rem;
2082   padding: 2.4rem; }
2083   .flexblock.plans .price sup {
2084     font-size: 1.8rem;
2085     margin-right: .4rem; }
2086   .flexblock.plans .price li ul {
2087     margin-bottom: 2.4rem; }
2088
2089 .flexblock.plans li ul li {
2090   display: block;
2091   padding: .8rem 3.2rem;
2092   text-align: left;
2093   width: 100%; }
2094
2095 @media (min-width: 1024px) {
2096   .flexblock.plans {
2097     margin-left: -2%;
2098     margin-right: -2%; }
2099     .flexblock.plans > li {
2100       margin-left: 2%;
2101       margin-right: 2%;
2102       width: 29%; }
2103     .flexblock.plans > li:hover,
2104     .flexblock.plans > li:nth-child(2) {
2105       position: relative;
2106       -webkit-transform: scale(1.08);
2107               transform: scale(1.08);
2108       z-index: 2; }
2109     .flexblock.plans:hover li:nth-child(2):not(:hover) {
2110       position: relative;
2111       -webkit-transform: scale(1);
2112               transform: scale(1);
2113       z-index: 1; } }
2114
2115 /*===========================================
2116 6.9 Block Activity <ul class="activity">
2117 CV / News
2118 ============================================= */
2119 .flexblock.activity {
2120   -webkit-box-orient: vertical;
2121   -webkit-box-direction: normal;
2122       -ms-flex-direction: column;
2123           flex-direction: column; }
2124   .flexblock.activity li {
2125     -webkit-box-flex: 1;
2126         -ms-flex: 1;
2127             flex: 1;
2128     position: relative;
2129     width: auto; }
2130   .flexblock.activity p {
2131     margin-bottom: 0;
2132     vertical-align: top; }
2133   .flexblock.activity img {
2134     display: block; }
2135   .flexblock.activity .year,
2136   .flexblock.activity .title {
2137     display: inline;
2138     font-weight: 600; }
2139   .flexblock.activity .summary {
2140     width: 100%; }
2141   .flexblock.activity .title {
2142     margin-left: 1rem; }
2143   @media (min-width: 768px) {
2144     .flexblock.activity p {
2145       float: left; }
2146     .flexblock.activity .year {
2147       width: 15%; }
2148     .flexblock.activity .title {
2149       margin-left: 4%;
2150       margin-right: 4%;
2151       width: 27%; }
2152     .flexblock.activity .summary {
2153       width: 50%; } }
2154
2155 /*=============================================
2156 7. Promos/Offers (pricing, tagline, CTA...)
2157 =============================================== */
2158 .cta {
2159   display: -webkit-box;
2160   display: -ms-flexbox;
2161   display: flex;
2162   -ms-flex-wrap: wrap;
2163       flex-wrap: wrap;
2164   -webkit-box-pack: center;
2165       -ms-flex-pack: center;
2166           justify-content: center; }
2167
2168 .number,
2169 .cta .benefit {
2170   display: -webkit-box;
2171   display: -ms-flexbox;
2172   display: flex;
2173   -webkit-box-orient: vertical;
2174   -webkit-box-direction: normal;
2175       -ms-flex-direction: column;
2176           flex-direction: column;
2177   -webkit-box-pack: center;
2178       -ms-flex-pack: center;
2179           justify-content: center;
2180   max-width: 100%;
2181   padding: .8rem; }
2182
2183 .number {
2184   text-align: center; }
2185
2186 .cta .benefit {
2187   max-width: 100%;
2188   text-align: center; }
2189
2190 .number span {
2191   display: block;
2192   font-size: 8rem;
2193   line-height: 8rem; }
2194
2195 .number span sup {
2196   font-size: 4rem; }
2197
2198 .cta p {
2199   margin-bottom: 0; }
2200
2201 @media (min-width: 768px) {
2202   .number,
2203   .cta .benefit {
2204     max-width: 50%;
2205     padding: 4.8rem; }
2206   .cta .benefit {
2207     text-align: left; }
2208   .number span {
2209     font-size: 16rem;
2210     line-height: 16rem; }
2211     .number span sup {
2212       font-size: 6rem;
2213       vertical-align: middle; } }
2214
2215 /* --- Header CTA --- */
2216 .cta-cover {
2217   display: table;
2218   width: 100%; }
2219   .cta-cover h1 strong {
2220     font-weight: 400; }
2221   @media (min-width: 1024px) {
2222     .cta-cover h1 {
2223       float: left;
2224       max-width: 80%; }
2225     .cta-cover h1 strong {
2226       display: block; }
2227     .cta-cover .button {
2228       margin-top: 1.2rem; }
2229     .cta-cover .try {
2230       text-align: center; } }
2231   @media (max-width: 1023px) {
2232     .cta-cover .alignright {
2233       float: none; } }
2234
2235 /*=========================================
2236 8. Work/Resumé/CV <ul class="work">
2237 =========================================== */
2238 .work {
2239   clear: both;
2240   display: -webkit-box;
2241   display: -ms-flexbox;
2242   display: flex;
2243   -webkit-box-orient: vertical;
2244   -webkit-box-direction: normal;
2245       -ms-flex-direction: column;
2246           flex-direction: column;
2247   text-align: left; }
2248   h1 + .work,
2249   h2 + .work,
2250   h3 + .work,
2251   p + .work {
2252     margin-top: 4.8rem; }
2253   .work li {
2254     -webkit-box-flex: 1;
2255         -ms-flex: 1;
2256             flex: 1;
2257     list-style: none;
2258     margin: 0;
2259     position: relative; }
2260   .work p {
2261     margin-bottom: 0;
2262     -webkit-transition: .3s;
2263     transition: .3s; }
2264   .work li a {
2265     display: block;
2266     float: left;
2267     height: 100%;
2268     padding: 2.4rem 0;
2269     width: 100%; }
2270   .work li p {
2271     padding-left: 1.2rem; }
2272   .work li.work-label p {
2273     padding-left: 0; }
2274   .work li a:hover p:first-child {
2275     padding-left: 1.6rem; }
2276   .work li p:last-child {
2277     position: absolute;
2278     right: 1.2rem;
2279     top: 2.4rem; }
2280   .work li.work-label p:last-child {
2281     right: 0;
2282     top: 0; }
2283   .work-label {
2284     float: left;
2285     font-weight: 600;
2286     padding: 0 0 2.4rem;
2287     width: 100%; }
2288   .work-title {
2289     display: block;
2290     padding-right: 1.2rem;
2291     width: 75%; }
2292
2293 @media (min-width: 768px) {
2294   .work-label p,
2295   .work li p {
2296     float: left;
2297     margin-right: 2%;
2298     width: 25%; }
2299   .work li.work-label p:last-child,
2300   .work li p:last-child {
2301     float: right;
2302     margin-right: 0;
2303     padding-right: 1.2rem;
2304     position: relative;
2305     right: auto;
2306     text-align: right;
2307     top: auto; }
2308   .work li p.work-date {
2309     width: 120px; } }
2310
2311 @media (max-width: 768px) {
2312   .work-client,
2313   .work-label .work-services {
2314     clip: rect(1px, 1px, 1px, 1px);
2315     height: 1px;
2316     overflow: hidden;
2317     position: absolute;
2318     width: 1px; } }
2319
2320 /*===========================================
2321 9. Table of contents
2322 ============================================= */
2323 .toc,
2324 .toc ol > li:before,
2325 .chapter {
2326   position: relative;
2327   z-index: 2; }
2328
2329 .toc ol {
2330   counter-reset: item;
2331   position: relative; }
2332   .toc ol > li:before {
2333     content: counters(item, ".") ". ";
2334     display: table-cell;
2335     padding-right: .8rem;
2336     width: 2.4rem; }
2337   .toc ol li li:before {
2338     content: counters(item, ".") " "; }
2339
2340 .toc li {
2341   counter-increment: item;
2342   display: table;
2343   font-weight: 400;
2344   margin-bottom: .8rem;
2345   margin-left: 0;
2346   -webkit-transition: .3s;
2347   transition: .3s;
2348   width: 100%; }
2349   .toc li li {
2350     font-weight: 300;
2351     margin-bottom: 0;
2352     margin-left: 0; }
2353   .toc li .toc-page:before {
2354     content: '';
2355     display: block;
2356     left: 0;
2357     margin-top: 1.8rem;
2358     position: absolute;
2359     right: 4rem; }
2360   .toc li > a {
2361     display: inline-block;
2362     width: 100%; }
2363   .toc li a:hover span {
2364     font-weight: 600; }
2365   .toc li a:hover .toc-page:before {
2366     border-bottom-width: 2px; }
2367
2368 .chapter {
2369   display: inline-block;
2370   font-size: 1.8rem;
2371   line-height: 3.2rem;
2372   padding-right: .8rem; }
2373
2374 .toc-page {
2375   float: right; }
2376
2377 /*===========================================
2378 10. Cards
2379 ============================================= */
2380 [class*='card-'],
2381 [class*='card-'] > a {
2382   clear: both;
2383   display: -webkit-box;
2384   display: -ms-flexbox;
2385   display: flex;
2386   -webkit-box-orient: horizontal;
2387   -webkit-box-direction: normal;
2388       -ms-flex-direction: row;
2389           flex-direction: row;
2390   position: relative; }
2391
2392 .fullscreen [class*='card-'],
2393 .fullscreen [class*='card-'] > a {
2394   min-height: 100vh; }
2395
2396 [class*='card-'] figure img,
2397 [class*='card-'] figure iframe {
2398   display: block;
2399   margin: 0 auto; }
2400
2401 [class*='card-'] figure figcaption {
2402   bottom: 0;
2403   font-size: 1.4rem;
2404   left: 0;
2405   line-height: 2.4rem;
2406   padding: .8rem 2.4rem;
2407   position: absolute;
2408   z-index: 2; }
2409   [class*='card-'] figure figcaption svg {
2410     font-size: 1rem; }
2411
2412 @media (min-width: 768px) {
2413   [class*='card'][class*='bg-'] figure,
2414   .fullscreen [class*='card'] figure {
2415     max-height: 100%;
2416     min-width: 380px;
2417     text-align: center;
2418     vertical-align: middle; }
2419   [class*='card-'][class*='bg-'] figure img,
2420   [class*='card-'][class*='bg-'] figure iframe,
2421   .fullscreen [class*='card-'] figure img,
2422   .fullscreen [class*='card-'] figure iframe {
2423     height: 100%;
2424     left: 0;
2425     -o-object-fit: cover;
2426        object-fit: cover;
2427     position: absolute;
2428     top: 0;
2429     width: 100%;
2430     z-index: 1; } }
2431
2432 .flex-content,
2433 [class*='card'] blockquote {
2434   padding: 2.4rem;
2435   position: relative; }
2436
2437 [class*='card-'] .flex-content,
2438 [class*='card-'] blockquote {
2439   display: -webkit-box;
2440   display: -ms-flexbox;
2441   display: flex;
2442   -webkit-box-orient: vertical;
2443   -webkit-box-direction: normal;
2444       -ms-flex-direction: column;
2445           flex-direction: column;
2446   -webkit-box-pack: center;
2447       -ms-flex-pack: center;
2448           justify-content: center; }
2449
2450 .flex-content p {
2451   position: relative; }
2452
2453 @media (min-width: 768px) {
2454   .card-50 figure,
2455   .card-50 blockquote,
2456   .card-50 .flex-content {
2457     width: 50%; }
2458   .card-30 figure,
2459   .card-70 .flex-content,
2460   .card-70 blockquote {
2461     width: 30%; }
2462   .card-40 figure,
2463   .card-60 .flex-content,
2464   .card-60 blockquote {
2465     width: 40%; }
2466   .card-60 figure,
2467   .card-40 .flex-content,
2468   .card-40 blockquote {
2469     width: 60%; }
2470   .card-70 figure,
2471   .card-30 .flex-content,
2472   .card-30 blockquote {
2473     width: 70%; }
2474   [class*='card']:nth-child(odd) figure {
2475     -webkit-box-ordinal-group: 1;
2476         -ms-flex-order: 0;
2477             order: 0; }
2478   [class*='card']:nth-child(even) figure {
2479     -webkit-box-ordinal-group: 2;
2480         -ms-flex-order: 1;
2481             order: 1; }
2482   .flex-content,
2483   [class*='card'] blockquote {
2484     padding: 4.8rem; }
2485   .fullscreen [class*='card'] .flex-content,
2486   .fullscreen [class*='card'] blockquote {
2487     padding: 6.4rem; } }
2488
2489 @media (max-width: 767px) {
2490   [class*='card-'],
2491   [class*='card-'] > a {
2492     -webkit-box-orient: vertical;
2493     -webkit-box-direction: normal;
2494         -ms-flex-flow: column;
2495             flex-flow: column; }
2496   .card figure,
2497   .card header {
2498     width: 100%; } }
2499
2500 /*=========================================
2501 11. Quotes
2502 =========================================== */
2503 blockquote {
2504   display: inline-block;
2505   position: relative; }
2506   blockquote p {
2507     font-size: 2.4rem;
2508     line-height: 4rem; }
2509     blockquote p:last-child {
2510       margin-bottom: 3.2rem; }
2511
2512 /* -- Interviews dl.text-interview -- */
2513 dd blockquote p:last-child {
2514   margin-bottom: 0; }
2515
2516 cite {
2517   display: block;
2518   text-align: center; }
2519   cite:before {
2520     content: '\2014   \2009';
2521     margin-right: 6px; }
2522
2523 cite span {
2524   display: block; }
2525
2526 /* -- A big Blockquote -- */
2527 /* .wall will be deprecated soon. Use .text-quote ;) */
2528 .text-quote,
2529 .wall {
2530   /* Versatility: blockquote, p, h2... */
2531   position: relative; }
2532   .text-quote:before,
2533   .wall:before {
2534     content: '\201C';
2535     font-family: arial, sans-serif;
2536     font-size: 12rem;
2537     height: 5.6rem;
2538     left: -.8rem;
2539     line-height: 1;
2540     position: absolute;
2541     text-align: center;
2542     top: -4rem;
2543     width: 5.6rem; }
2544   @media (min-width: 768px) {
2545     .text-quote,
2546     .wall {
2547       padding-left: 6.4rem; }
2548       .text-quote p,
2549       .wall p {
2550         font-size: 3.2rem;
2551         line-height: 4.8rem; }
2552       .text-quote:before,
2553       .wall:before {
2554         left: .8rem;
2555         top: -1.6rem; } }
2556
2557 /*=========================================
2558 12. Avatars - uifaces.com
2559 =========================================== */
2560 cite img,
2561 img[class*='avatar-'] {
2562   display: inline-block;
2563   margin-right: 6px;
2564   vertical-align: middle; }
2565
2566 img[class*='avatar-'] {
2567   border-radius: 50%; }
2568
2569 img.avatar-40 {
2570   height: 40px;
2571   width: 40px; }
2572
2573 img.avatar-48 {
2574   height: 48px;
2575   width: 48px; }
2576
2577 img.avatar-56 {
2578   height: 56px;
2579   width: 56px; }
2580
2581 img.avatar-64 {
2582   height: 64px;
2583   width: 64px; }
2584
2585 img.avatar-72 {
2586   height: 72px;
2587   width: 72px; }
2588
2589 img.avatar-80 {
2590   height: 80px;
2591   width: 80px; }
2592
2593 /*=========================================
2594 13. Tables
2595 =========================================== */
2596 table {
2597   margin-bottom: 3.2rem;
2598   margin-top: 3.2rem; }
2599
2600 td,
2601 th,
2602 thead {
2603   border-spacing: 0;
2604   padding: .7rem 2.4rem; }
2605
2606 thead th,
2607 th {
2608   cursor: default;
2609   font-weight: 600;
2610   text-align: left;
2611   text-transform: uppercase;
2612   white-space: nowrap; }
2613
2614 thead,
2615 td.goals {
2616   font-weight: 600;
2617   text-shadow: none; }
2618
2619 tr > td {
2620   font-weight: 400; }
2621
2622 /*=========================================
2623 14. Forms
2624 =========================================== */
2625 form {
2626   text-align: left; }
2627   form + p,
2628   form input + p,
2629   form textarea + p {
2630     margin-top: .8rem; }
2631
2632 input[type='text'],
2633 input[type='email'],
2634 input[type='tel'],
2635 input[type='url'],
2636 input[type='search'],
2637 input[type='password'] {
2638   -webkit-appearance: none;
2639      -moz-appearance: none;
2640           appearance: none;
2641   border-radius: 0; }
2642
2643 input,
2644 button,
2645 select {
2646   display: inline-block;
2647   font-size: 1.6rem;
2648   font-weight: 400;
2649   height: 4.8rem;
2650   margin: 0;
2651   padding: .7rem;
2652   position: relative;
2653   width: 100%; }
2654
2655 input[type='radio'],
2656 input[type='checkbox'] {
2657   height: auto;
2658   padding: 4px;
2659   width: auto; }
2660
2661 button[type='submit'],
2662 textarea {
2663   width: 100%; }
2664
2665 textarea {
2666   padding: .7rem; }
2667
2668 button {
2669   cursor: pointer;
2670   text-align: center;
2671   width: auto; }
2672
2673 .button {
2674   cursor: pointer;
2675   display: inline-block;
2676   font-size: 1.8rem;
2677   font-weight: 400;
2678   line-height: 4.8rem;
2679   min-width: 16rem;
2680   padding: 0 1.6rem;
2681   text-align: center; }
2682   .button svg {
2683     font-size: 2.4rem; }
2684
2685 .button.radius,
2686 input.radius {
2687   border-radius: 2.4rem; }
2688
2689 button,
2690 input[type='submit'] {
2691   font-weight: 400;
2692   letter-spacing: .1rem;
2693   text-transform: uppercase; }
2694
2695 .plans .button {
2696   margin-left: auto;
2697   margin-right: auto;
2698   width: 50%; }
2699
2700 .try {
2701   display: block;
2702   font-size: 1.6rem;
2703   margin-top: 1.6rem; }
2704
2705 fieldset {
2706   padding: 2.4rem; }
2707
2708 legend {
2709   border: 0;
2710   font-weight: 400;
2711   letter-spacing: .1rem;
2712   padding: 1.6rem 2.4rem;
2713   text-align: center;
2714   text-transform: uppercase;
2715   width: 100%; }
2716
2717 input:focus,
2718 textarea:focus,
2719 select:focus {
2720   border-width: 1px; }
2721
2722 a.button:hover,
2723 button[type='submit']:hover,
2724 input[type='submit']:hover {
2725   -webkit-transform: scale(1.01);
2726           transform: scale(1.01); }
2727
2728 :disabled,
2729 button:disabled:hover {
2730   cursor: not-allowed; }
2731
2732 .user input {
2733   margin-bottom: 0; }
2734   .user input[type='email'], .user input[type='search'], .user input[type='text'] {
2735     width: 100%; }
2736     @media (min-width: 500px) {
2737       .user input[type='email'], .user input[type='search'], .user input[type='text'] {
2738         float: left;
2739         width: 70%; } }
2740
2741 .user button,
2742 .user input[type='submit'] {
2743   left: 0;
2744   width: 100%; }
2745   @media (min-width: 500px) {
2746     .user button,
2747     .user input[type='submit'] {
2748       cursor: pointer;
2749       width: 30%; } }
2750
2751 /* Buttons/Badges */
2752 @media (min-width: 500px) {
2753   [class*='button'] + [class*='button'] {
2754     margin-left: 1.8rem; } }
2755
2756 @media (max-width: 499px) {
2757   [class*='button'] + [class*='button'] {
2758     margin-top: .8rem; } }
2759
2760 /*=== App Store Badges === */
2761 /* Change width and height: 216x64px, 162x48px, 135x40... */
2762 [class*='badge-'] {
2763   background-repeat: no-repeat;
2764   background-size: cover;
2765   border-radius: .6rem;
2766   display: inline-block;
2767   height: 40px;
2768   line-height: 4rem;
2769   text-indent: -4000px;
2770   width: 135px; }
2771   [class*='badge-']:hover {
2772     opacity: .7; }
2773   @media (min-width: 1024px) {
2774     [class*='badge-'] {
2775       height: 48px;
2776       line-height: 4.8rem;
2777       width: 162px; } }
2778   @media (min-width: 500px) {
2779     [class*='badge-'] + [class*='badge-'] {
2780       margin-left: 1.8rem; } }
2781   @media (max-width: 499px) {
2782     [class*='badge-'] + [class*='badge-'] {
2783       margin-top: .8rem; } }
2784
2785 .badge-ios {
2786   background-image: url("../images/bt-appstore.png"); }
2787
2788 .badge-android {
2789   background-image: url("../images/bt-playstore.png"); }
2790
2791 /*=========================================
2792 15. Longform
2793 =========================================== */
2794 /* -- Posts = .wrap.longform -- */
2795 .longform {
2796   width: 72rem;
2797   /* Why 72rem=720px?
2798   90-95 characters per line = better reading speed */
2799   /* Mobile: video full width */ }
2800   .longform .alignleft,
2801   .longform .alignright {
2802     max-width: 40%; }
2803   .longform img.aligncenter,
2804   .longform figure.aligncenter {
2805     margin-bottom: 3.2rem;
2806     margin-top: 3.2rem; }
2807   .longform ul,
2808   .longform ol {
2809     margin-bottom: 3.2rem; }
2810   .longform ul ol,
2811   .longform ol ul,
2812   .longform ul ul,
2813   .longform ol ol {
2814     margin-bottom: 0; }
2815   .longform figcaption p,
2816   .longform [class*='text-pull-'] p {
2817     font-size: 1.6rem;
2818     line-height: 2.4rem; }
2819   .longform .text-pull.embed {
2820     margin-left: -2.4rem;
2821     margin-right: -2.4rem;
2822     padding-bottom: 60.6%; }
2823   @media (min-width: 1280px) {
2824     .longform [class*='text-pull-'] {
2825       max-width: 32%; }
2826     .longform .text-pull-right {
2827       margin-right: -256px; }
2828     .longform .text-pull-left {
2829       margin-left: -256px; } }
2830   @media (min-width: 1024px) {
2831     .longform .text-quote {
2832       margin-left: -4.8rem;
2833       margin-right: -4.8rem; } }
2834
2835 /*=========================================
2836 16. SAFARI BUGS (flex-wrap)
2837 Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
2838 =========================================== */
2839 .flexblock:before,
2840 .flexblock:after,
2841 .grid:before,
2842 .grid:after,
2843 .cta:before,
2844 .cta:after {
2845   width: 0; }
2846
2847 /*==============================================
2848 18. Slides Index: Thumbnails navigation gallery
2849 ================================================ */
2850 #webslides-zoomed {
2851   -ms-flex-line-pack: start;
2852       align-content: flex-start;
2853   -webkit-box-align: start;
2854       -ms-flex-align: start;
2855           align-items: flex-start;
2856   -webkit-box-orient: horizontal;
2857   -webkit-box-direction: normal;
2858       -ms-flex-direction: row;
2859           flex-direction: row;
2860   -webkit-box-pack: start;
2861       -ms-flex-pack: start;
2862           justify-content: flex-start;
2863   min-height: 100vh;
2864   position: relative;
2865   z-index: 2; }
2866   #webslides-zoomed.disabled {
2867     left: -100000px;
2868     position: absolute; }
2869   #webslides-zoomed .slide {
2870     height: 400%;
2871     width: 400%; }
2872     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
2873       #webslides-zoomed .slide {
2874         height: 200%;
2875         width: 200%; } }
2876     @media (max-aspect-ratio: 2 / 3) {
2877       #webslides-zoomed .slide {
2878         height: 200%;
2879         width: 200%; } }
2880   @media (min-width: 1024px) {
2881     #webslides-zoomed > .wrap {
2882       padding-bottom: 12rem;
2883       padding-top: 12rem; } }
2884   #webslides-zoomed > .wrap > .grid > .column {
2885     -ms-flex-item-align: auto;
2886         align-self: auto;
2887     -webkit-box-flex: 0;
2888         -ms-flex: 0 1 auto;
2889             flex: 0 1 auto;
2890     -webkit-box-ordinal-group: 1;
2891         -ms-flex-order: 0;
2892             order: 0;
2893     position: relative;
2894     width: 25%; }
2895     @media screen and (max-width: 567px) {
2896       #webslides-zoomed > .wrap > .grid > .column {
2897         width: 100%; } }
2898     @media screen and (min-width: 568px) and (max-width: 1024px) {
2899       #webslides-zoomed > .wrap > .grid > .column {
2900         width: 50%; } }
2901     @media screen and (max-width: 567px) and (orientation: portrait) {
2902       #webslides-zoomed > .wrap > .grid > .column {
2903         width: 100%; } }
2904     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2905       border-radius: .3rem;
2906       display: inline-block;
2907       height: 25vh;
2908       overflow: hidden;
2909       position: relative;
2910       -webkit-transition: .3s;
2911       transition: .3s; }
2912       @media screen and (max-width: 567px) {
2913         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2914           height: 50vh; } }
2915       @media screen and (min-width: 568px) and (max-width: 1023px) {
2916         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2917           height: 33vh; } }
2918       @media screen and (orientation: portrait) {
2919         #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
2920           height: 50vw; } }
2921       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
2922         -webkit-transform: scale(1.02);
2923                 transform: scale(1.02);
2924         z-index: 2; }
2925       #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom.current {
2926         -webkit-transform: scale(1.08);
2927                 transform: scale(1.08); }
2928     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
2929       background: transparent;
2930       cursor: pointer;
2931       height: 100%;
2932       position: absolute;
2933       width: 100%; }
2934   #webslides-zoomed .column > .wrap-zoom > .slide {
2935     clip: rect(0 auto auto 0);
2936     display: -webkit-box !important;
2937     display: -ms-flexbox !important;
2938     display: flex !important;
2939     left: 0;
2940     position: absolute;
2941     top: 0;
2942     -webkit-transform: scale(0.25) translate(-150%, -150vh);
2943             transform: scale(0.25) translate(-150%, -150vh); }
2944     @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
2945       #webslides-zoomed .column > .wrap-zoom > .slide {
2946         -webkit-transform: scale(0.5) translate(-50%, -50%);
2947                 transform: scale(0.5) translate(-50%, -50%); } }
2948     @media (max-aspect-ratio: 2 / 3) {
2949       #webslides-zoomed .column > .wrap-zoom > .slide {
2950         -webkit-transform: scale(0.5) translate(-50%, -50%);
2951                 transform: scale(0.5) translate(-50%, -50%); } }
2952   #webslides-zoomed .column {
2953     opacity: 0;
2954     -webkit-transform: scale(1.2);
2955             transform: scale(1.2);
2956     -webkit-transition: opacity .4s, -webkit-transform .4s;
2957     transition: opacity .4s, -webkit-transform .4s;
2958     transition: opacity .4s, transform .4s;
2959     transition: opacity .4s, transform .4s, -webkit-transform .4s;
2960     -webkit-transition-delay: .2s;
2961             transition-delay: .2s; }
2962   #webslides-zoomed.in .column {
2963     opacity: 1;
2964     -webkit-transform: scale(1);
2965             transform: scale(1); }
2966
2967 .text-slide-number {
2968   display: inline-block;
2969   margin: .8rem auto;
2970   text-align: center; }
2971
2972 #webslides {
2973   -webkit-transition: -webkit-filter .3s;
2974   transition: -webkit-filter .3s;
2975   transition: filter .3s;
2976   transition: filter .3s, -webkit-filter .3s; }
2977   #webslides.disabled, #webslides.zooming {
2978     position: fixed;
2979     width: 100%;
2980     z-index: 0; }
2981   #webslides.disabled {
2982     /*
2983     filter: blur(10px);
2984     transform: scale(1.1);
2985     */
2986     /* Blur makes scroll no accesible */
2987     width: calc(100% - 10px); }
2988
2989 /*=========================================
2990 17. PRINT
2991 =========================================== */
2992 @media print {
2993   @page {
2994     margin: .5cm;
2995     size: A4 landscape; }
2996   * {
2997     background: transparent !important;
2998     color: #000 !important;
2999     -webkit-filter: none !important;
3000             filter: none !important;
3001     text-shadow: none !important; }
3002   html,
3003   body,
3004   #webslides {
3005     height: auto !important;
3006     overflow: auto !important;
3007     width: auto !important; }
3008   #webslides {
3009     overflow-x: auto !important;
3010     overflow-y: auto !important; }
3011   section,
3012   .slide {
3013     display: -webkit-box !important;
3014     display: -ms-flexbox !important;
3015     display: flex !important;
3016     height: auto !important; }
3017   section * {
3018     -webkit-animation: none;
3019             animation: none; }
3020   table,
3021   figure {
3022     page-break-inside: avoid; }
3023   #counter,
3024   #navigation {
3025     display: none; } }
3026
3027 /*=========================================
3028 19. Colors
3029 =========================================== */
3030 /* -- Disable elastic scrolling/bounce:
3031 webslides.js will add .ws-ready automatically. Don't worry :) -- */
3032 body {
3033   background-color: #f7f9fb;
3034   color: #333; }
3035
3036 :focus {
3037   -webkit-box-shadow: 0 0 2px #96bbee;
3038           box-shadow: 0 0 2px #96bbee; }
3039
3040 svg {
3041   fill: currentColor; }
3042
3043 [class*='bg-'] a,
3044 [class*='bg-gradient-'] a {
3045   color: #bce; }
3046
3047 .bg-brown a {
3048   color: #c23; }
3049
3050 a,
3051 .bg-white a,
3052 .bg-light a,
3053 .bg-gradient-white a {
3054   color: #44d; }
3055
3056 a:hover {
3057   color: #3af; }
3058
3059 .flexblock li > a,
3060 [class*='bg-'] li > a,
3061 [class*='bg-gradient-'] li > a,
3062 article header a {
3063   color: inherit; }
3064
3065 hr {
3066   background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%); }
3067
3068 hr:after {
3069   background-color: rgba(255, 255, 255, 0.8);
3070   color: #333; }
3071
3072 abbr,
3073 acronym {
3074   border-bottom: 1px dotted #f7f9fb; }
3075
3076 mark,
3077 ins {
3078   background-color: rgba(221, 238, 255, 0.8);
3079   color: inherit; }
3080
3081 ::-moz-selection {
3082   background-color: rgba(221, 238, 255, 0.8); }
3083
3084 ::-webkit-selection {
3085   background-color: rgba(221, 238, 255, 0.8); }
3086
3087 ::selection {
3088   background-color: rgba(221, 238, 255, 0.8); }
3089
3090 pre {
3091   background: #fff;
3092   border: 1px solid rgba(0, 20, 80, 0.1);
3093   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
3094           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08); }
3095
3096 pre:hover {
3097   -webkit-box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
3098           box-shadow: 0 8px 16px rgba(0, 40, 160, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); }
3099
3100 code,
3101 [class*='bg-'] pre {
3102   background-color: rgba(255, 255, 255, 0.09); }
3103
3104 .bg-white code {
3105   background: rgba(0, 20, 80, 0.03); }
3106
3107 /*================================================
3108 Slides - Backgrounds <section class="bg-primary">
3109 ================================================== */
3110 /*3 Corp Colors*/
3111 .bg-primary {
3112   background-color: #44d; }
3113
3114 .bg-secondary {
3115   background-color: #67d; }
3116
3117 .bg-light {
3118   background-color: #f7f9fb; }
3119
3120 .bg-black {
3121   background-color: #111; }
3122
3123 .bg-black-blue {
3124   background-color: #123; }
3125
3126 .bg-blue {
3127   background-color: #346; }
3128
3129 .bg-brown {
3130   background-color: #f9f8f2; }
3131
3132 .bg-gray {
3133   background-color: #d5d9e2; }
3134
3135 .bg-green {
3136   background-color: #077; }
3137
3138 .bg-purple {
3139   background-color: #62b; }
3140
3141 .bg-red {
3142   background-color: #c23; }
3143
3144 .bg-white {
3145   background-color: #fff; }
3146
3147 .bg-facebook {
3148   background-color: #3b5998; }
3149
3150 [class*='bg-'] .bg-white {
3151   color: #333;
3152   text-shadow: none; }
3153
3154 /* BG Apple Keynote*/
3155 .bg-apple {
3156   background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(50%, #1a2028), to(#293845));
3157   background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%); }
3158
3159 /*Font Color*/
3160 .bg-trans-dark,
3161 .bg-trans-gradient,
3162 .bg-primary,
3163 .bg-secondary,
3164 .bg-blue,
3165 .bg-green,
3166 .bg-purple,
3167 .bg-red,
3168 .bg-facebook,
3169 .bg-apple,
3170 [class*='bg-black'],
3171 [class*='bg-gradient-'] {
3172   color: #fff;
3173   text-shadow: 0 1px 0 #013; }
3174
3175 .bg-light p {
3176   color: #456; }
3177
3178 .bg-brown p {
3179   color: #666; }
3180
3181 /*Transparent/Opacity*/
3182 .bg-trans-dark {
3183   background: rgba(0, 0, 0, 0.8); }
3184
3185 .bg-trans-light {
3186   background: rgba(0, 0, 0, 0.2); }
3187
3188 /*Covers/Longforms...*/
3189 .bg-trans-gradient {
3190   background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), to(transparent));
3191   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); }
3192
3193 /*Horizontal Gradient*/
3194 .bg-gradient-h {
3195   background: linear-gradient(134deg, #32b 0, #62b 100%); }
3196
3197 /*Vertical Gradient*/
3198 .bg-gradient-v {
3199   background: -webkit-gradient(linear, left bottom, left top, from(#62b), to(#32b));
3200   background: linear-gradient(to top, #62b 0%, #32b 100%); }
3201
3202 /*Radial Gradient*/
3203 .bg-gradient-r {
3204   background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); }
3205
3206 /*White Gradient (vertical)*/
3207 .bg-gradient-white {
3208   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f4f6), to(#fff));
3209   background: linear-gradient(180deg, #f2f4f6 0, #fff 100%);
3210   color: #333;
3211   text-shadow: none; }
3212
3213 /*Gray Gradient (horizontal)*/
3214 .bg-gradient-gray {
3215   background: -webkit-gradient(linear, left top, right top, color-stop(0, #f7f9fb), to(#dee2e6));
3216   background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
3217   color: #333;
3218   text-shadow: none; }
3219
3220 /*Border/Frame*/
3221 .frame {
3222   border: 0.8rem solid #fff; }
3223
3224 [class*='background'].frame {
3225   border-width: .2rem; }
3226
3227 /*Layer/Box Shadow*/
3228 .shadow,
3229 .pre {
3230   position: relative; }
3231
3232 .shadow:before,
3233 .shadow:after {
3234   -webkit-box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
3235           box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); }
3236
3237 /*============================
3238 TYPOGRAPHY
3239 ============================== */
3240 /* -- Horizontal separator  -- */
3241 .text-separator:before {
3242   background-color: rgba(170, 0, 0, 0.8); }
3243
3244 /* -- Pull Quote (Right/Left)  -- */
3245 [class*='text-pull-'] {
3246   border-top: 4px solid rgba(0, 0, 0, 0.5); }
3247
3248 img[class*='text-pull-'],
3249 figure[class*='text-pull-'] {
3250   border-top: 0; }
3251
3252 /* -- Context  -- */
3253 [class*='bg-'] .text-context:before {
3254   background-color: #fff; }
3255
3256 .text-context:before,
3257 .bg-white .text-context:before {
3258   background-color: rgba(0, 20, 80, 0.2); }
3259
3260 /* -- Text shadow  -- */
3261 .text-shadow {
3262   text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
3263
3264 /* -- time, ampersands, prepositions (for, of...), symbols...
3265 [class*='card-'] time,
3266 h1 span {
3267   color: #abd;
3268 }
3269
3270 /* -- <pre> comment  -- */
3271 .code-comment {
3272   color: rgba(70, 170, 130, 0.9);
3273   text-shadow: none; }
3274
3275 /*=========================================
3276 Header/Nav
3277 =========================================== */
3278 header[role='banner'] {
3279   background-color: #fff; }
3280
3281 .logo a {
3282   color: inherit; }
3283
3284 nav[role='navigation'] li.active a {
3285   background-color: #555;
3286   color: #fff; }
3287
3288 nav[role='navigation'] li a {
3289   background-color: rgba(50, 50, 50, 0.9);
3290   color: #fff; }
3291   nav[role='navigation'] li a:hover {
3292     background-color: rgba(50, 50, 50, 0.7); }
3293
3294 nav li.twitter a:hover {
3295   background-color: #1da1f3; }
3296
3297 nav li.facebook a:hover {
3298   background-color: #3b5998; }
3299
3300 nav li.linkedin a:hover {
3301   background-color: #1683bb; }
3302
3303 nav li.dribbble a:hover {
3304   background-color: #ea4c89; }
3305
3306 nav li.github a:hover {
3307   background-color: #60b044; }
3308
3309 nav li.email a:hover {
3310   background-color: #dd4b39; }
3311
3312 /*===================================================
3313 .flexblock li hover/active
3314 ===================================================== */
3315 .flexblock li.active a,
3316 .metrics li:hover,
3317 .specs li:hover,
3318 .reasons li:hover {
3319   background-color: rgba(0, 20, 80, 0.03); }
3320
3321 /*=========================================
3322 Features & Clients List
3323 =========================================== */
3324 .features li,
3325 .clients li {
3326   background-color: rgba(255, 255, 255, 0.9); }
3327
3328 [class*='bg-'] .features li,
3329 [class*='bg-'] .clients li {
3330   background-color: rgba(255, 255, 255, 0.1); }
3331
3332 .features li:hover,
3333 .clients li:hover {
3334   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08);
3335           box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); }
3336
3337 /*============================
3338 .flexblock with border
3339 ============================== */
3340 .border {
3341   border-bottom: 1px solid rgba(0, 20, 80, 0.1);
3342   border-right: 1px solid rgba(0, 20, 80, 0.1); }
3343
3344 .border li {
3345   border-left: 1px solid rgba(0, 20, 80, 0.1);
3346   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3347
3348 .flexblock.border li li {
3349   border: 0; }
3350
3351 /*===========================================
3352 flexblock.steps
3353 ============================================= */
3354 .steps li:nth-child(1) {
3355   background-color: #e8eef7; }
3356
3357 .steps li:nth-child(2) {
3358   background-color: #dde5f3; }
3359
3360 .steps li:nth-child(3) {
3361   background-color: #cdd8ec; }
3362
3363 .steps li:nth-child(4) {
3364   background-color: #bbcdec; }
3365
3366 .process {
3367   border-bottom: 15px solid transparent;
3368   border-top: 15px solid transparent; }
3369
3370 .steps li:hover,
3371 .steps.blink li:hover > a {
3372   background-color: #b8cef7; }
3373
3374 @media (min-width: 1024px) {
3375   .process.step-2 {
3376     border-left-color: #e8eef7; }
3377   .process.step-3 {
3378     border-left-color: #dde5f3; }
3379   .process.step-4 {
3380     border-left-color: #cdd8ec; }
3381   .steps li:hover + li [class*='step-'] {
3382     border-left-color: #b8cef7; } }
3383
3384 /*=========================================================
3385 Items: You can use for settings, drag&drop, close/delete...
3386 =========================================================== */
3387 .specs li:after {
3388   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)));
3389   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
3390
3391 .specs li:last-child:after {
3392   background: none; }
3393
3394 /*=========================================================
3395 Why/Steps/Motivation/Reasons -  Decimal/Numbers
3396 =========================================================== */
3397 .reasons li:after {
3398   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)));
3399   background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); }
3400
3401 .reasons li:last-child:after {
3402   background: none; }
3403
3404 /*=========================================
3405 Overlays
3406 =========================================== */
3407 .overlay {
3408   background-color: rgba(0, 0, 0, 0.2); }
3409
3410 li:hover .overlay {
3411   background-color: rgba(0, 0, 0, 0.1); }
3412
3413 .overlay,
3414 .overlay a {
3415   color: #fff;
3416   text-shadow: 0 1px 0 #111; }
3417
3418 /*=========================================
3419 Gallery li+.overlay+image
3420 =========================================== */
3421 .gallery li {
3422   background-color: rgba(0, 20, 80, 0.06);
3423   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
3424           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03); }
3425
3426 .gallery li figcaption {
3427   background-color: #fff; }
3428
3429 .flexblock.gallery li:hover {
3430   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
3431           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
3432
3433 .gallery li footer {
3434   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3435
3436 .gallery li a {
3437   color: #333;
3438   text-shadow: none; }
3439
3440 .flesblock.gallery li a footer {
3441   color: #aaa; }
3442
3443 /*Arrow */
3444 .gallery li figcaption:before {
3445   border: 0.8rem solid #000;
3446   border-color: transparent transparent #fff #fff; }
3447
3448 /*=========================================
3449 Plans / Pricing
3450 =========================================== */
3451 .plans > li div,
3452 .flexblock.plans li:hover div {
3453   background-color: #fff; }
3454
3455 .plans > li:hover,
3456 .plans > li:nth-child(2) {
3457   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
3458           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
3459
3460 .plans:hover li:nth-child(2):not(:hover) {
3461   -webkit-box-shadow: none;
3462           box-shadow: none; }
3463
3464 .plans li h2 {
3465   background-color: rgba(0, 20, 80, 0.5);
3466   color: #fff; }
3467
3468 .plans ul li {
3469   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3470   .plans ul li:last-child {
3471     border-bottom: 0; }
3472
3473 .plans > li > a {
3474   color: #333;
3475   text-shadow: none; }
3476
3477 /*============================
3478 Activity/CV/Timeline/News
3479 ============================== */
3480 .activity li {
3481   border-top: 0.1rem solid rgba(0, 20, 80, 0.1); }
3482
3483 .activity li:hover {
3484   background-color: rgba(0, 20, 80, 0.02); }
3485
3486 /*=========================================
3487 Resume/Work/CV/Portfolio
3488 =========================================== */
3489 .work-label,
3490 .work li a {
3491   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3492
3493 .work li:nth-child(odd) > a {
3494   background-color: rgba(0, 20, 80, 0.03); }
3495
3496 .work li a:hover {
3497   background-color: rgba(0, 20, 80, 0.04); }
3498
3499 /*===========================================
3500 Clients / Services / Logos...
3501 ============================================= */
3502 .clients.border figcaption {
3503   border-top: 1px solid rgba(0, 20, 80, 0.1); }
3504
3505 /*====================
3506 LOGOS
3507 ====================== */
3508 /* --- Images (black logo/image) --- */
3509 img.blacklogo {
3510   background: none;
3511   -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
3512           filter: grayscale(100%) brightness(10%) contrast(100%); }
3513
3514 /* --- Images (gray logo/image) --- */
3515 img.graylogo {
3516   -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
3517           filter: grayscale(100%) brightness(10%) contrast(10%); }
3518
3519 /* --- Images (white Logo/Image) --- */
3520 img.whitelogo {
3521   -webkit-filter: brightness(0) invert(1);
3522           filter: brightness(0) invert(1); }
3523
3524 /* --- Logo/Images Hover --- */
3525 li:hover img.blacklogo,
3526 li:hover img.graylogo,
3527 img.blacklogo:hover,
3528 img.graylogo:hover {
3529   background: none;
3530   -webkit-filter: grayscale(0%);
3531           filter: grayscale(0%);
3532   -webkit-transition: all .6s ease;
3533   transition: all .6s ease; }
3534
3535 /*=========================================================
3536 Cards
3537 =========================================================== */
3538 [class*='card-'] > a {
3539   color: inherit; }
3540
3541 /* ---  card ul specs --- */
3542 .description > li {
3543   border-bottom: 1px solid rgba(0, 20, 80, 0.1); }
3544
3545 .description > li:last-child {
3546   border-bottom: 0; }
3547
3548 /*== Figure Background === */
3549 [class*='card-'][class*='bg-'] figure {
3550   background-color: rgba(0, 20, 80, 0.06); }
3551
3552 /*== Ficaption Cards === */
3553 [class*='card'] figcaption,
3554 [class*='card'] figcaption a {
3555   background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2)));
3556   background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
3557   color: #fff; }
3558
3559 /*===CTA (Call to Action - Numbers, Price, Promo...)  ===== */
3560 @media (min-width: 768px) {
3561   .cta .benefit {
3562     -o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
3563        border-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.4)), to(transparent)) 1 100%;
3564        border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
3565     border-left-width: 1px;
3566     border-style: solid; } }
3567
3568 /*=========================================
3569 Tables
3570 =========================================== */
3571 table td,
3572 th,
3573 thead {
3574   border: 1px solid rgba(0, 0, 0, 0.5); }
3575
3576 thead {
3577   background-color: rgba(0, 0, 0, 0.3); }
3578
3579 tr:nth-child(even) > td {
3580   background: rgba(0, 0, 0, 0.1); }
3581
3582 tr > td {
3583   border-top: 1px solid rgba(0, 0, 0, 0.5); }
3584
3585 td:hover,
3586 tr:nth-child(even) > td:hover {
3587   background-color: rgba(255, 255, 255, 0.5); }
3588
3589 /*============================
3590 Browser (Screenshots)
3591 ============================== */
3592 .browser {
3593   border: 1px solid rgba(0, 20, 80, 0.1); }
3594
3595 .browser:hover {
3596   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
3597           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); }
3598
3599 /*=== Topbar === */
3600 .browser:before {
3601   background-color: rgba(0, 20, 80, 0.1);
3602   border-bottom: 1px solid rgba(0, 20, 80, 0.2);
3603   color: rgba(255, 255, 255, 0.9); }
3604
3605 .browser:hover:before {
3606   background-color: rgba(0, 20, 80, 0.12);
3607   color: #fff; }
3608
3609 /*=========================================
3610 Forms
3611 =========================================== */
3612 input,
3613 textarea {
3614   background-color: #fafbfc; }
3615
3616 input:focus,
3617 textarea:focus {
3618   background-color: #fff;
3619   -webkit-box-shadow: 0 0 5px #51cbee;
3620           box-shadow: 0 0 5px #51cbee; }
3621
3622 input:focus::-moz-placeholder {
3623   color: #ddd; }
3624
3625 input:focus::-webkit-input-placeholder {
3626   color: #ddd; }
3627
3628 a.button,
3629 [class*='badge-'],
3630 button[type='submit'],
3631 input {
3632   -webkit-box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
3633           box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3); }
3634
3635 button,
3636 input,
3637 select,
3638 textarea,
3639 button[type='submit'],
3640 input[type='submit'],
3641 .button,
3642 .button:hover,
3643 button[type='submit']:hover,
3644 input[type='submit']:hover {
3645   border: 1px solid #44d; }
3646
3647 button[type='submit'],
3648 input[type='submit'],
3649 .button,
3650 .button:hover,
3651 button[type='submit']:hover,
3652 input[type='submit']:hover {
3653   background-color: #44d;
3654   color: #fff;
3655   text-shadow: 0 1px 0 #123; }
3656
3657 .button:active,
3658 button[type='submit']:active,
3659 input[type='submit']:active {
3660   background-color: #17d; }
3661
3662 .ghost,
3663 .ghost:hover {
3664   background: none;
3665   color: inherit;
3666   text-shadow: none; }
3667
3668 .bg-primary select,
3669 .bg-primary textarea,
3670 .bg-primary .button,
3671 .bg-primary button,
3672 .bg-primary button:hover,
3673 .bg-primary input,
3674 [class*='bg-gradient-'] .button,
3675 [class*='bg-'] a.button.ghost {
3676   border-color: #fff; }
3677
3678 [class*='bg-'] a.button {
3679   color: #fff; }
3680
3681 .bg-white a.button.ghost,
3682 .bg-gradient-white a.button.ghost {
3683   border: 1px solid #44d;
3684   color: #333; }
3685
3686 :disabled,
3687 button:disabled:hover {
3688   background-color: #eee;
3689   border-color: #eee;
3690   color: #ccc; }
3691
3692 fieldset {
3693   background-color: rgba(0, 20, 80, 0.2);
3694   border: 1px solid #44d; }
3695
3696 legend {
3697   background-color: rgba(0, 0, 0, 0.6);
3698   color: #fff; }
3699
3700 /* Inputs/Buttons - hover */
3701 input:hover,
3702 select:hover {
3703   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
3704           box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
3705
3706 /* App Store Badges */
3707 [class*='badge-'] {
3708   background-color: #000;
3709   border: 1px solid #345; }
3710
3711 form .flexblock li:hover {
3712   background-color: rgba(0, 0, 0, 0.05); }
3713
3714 /*============================
3715 Table of Contents
3716 ============================== */
3717 .toc,
3718 .toc ol > li:before,
3719 .chapter {
3720   background-color: #f7f9fb; }
3721
3722 .toc li .toc-page:before {
3723   border-bottom: 1px dotted rgba(0, 0, 0, 0.9); }
3724
3725 /*============================
3726 Slides (Counter/Arrows)
3727 ============================== */
3728 #counter,
3729 #navigation a {
3730   color: #abc; }
3731
3732 #webslides:hover #navigation a:hover {
3733   background-color: rgba(0, 10, 40, 0.8);
3734   color: #fff; }
3735
3736 /*============================
3737 Footer
3738 ============================== */
3739 footer[role='contentinfo'] {
3740   background-color: #fff; }
3741
3742 /*============================
3743 Slides Index
3744 ============================== */
3745 #webslides-zoomed {
3746   background: rgba(0, 10, 40, 0.8); }
3747
3748 #webslides-zoomed .column > .wrap-zoom {
3749   background-color: #f7f9fb;
3750   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
3751           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
3752   color: #333; }
3753   #webslides-zoomed .column > .wrap-zoom:hover {
3754     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
3755             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
3756   #webslides-zoomed .column > .wrap-zoom.current {
3757     border: 0.6rem solid rgba(0, 20, 255, 0.2); }
3758
3759 .text-slide-number {
3760   color: #abc; }