github.com/tooploox/oya@v0.0.21-0.20230524103240-1cda1861aad6/docs/css/oya-2495bc.webflow.css (about)

     1  .w-layout-grid {
     2    display: -ms-grid;
     3    display: grid;
     4    grid-auto-columns: 1fr;
     5    -ms-grid-columns: 1fr 1fr;
     6    grid-template-columns: 1fr 1fr;
     7    -ms-grid-rows: auto auto;
     8    grid-template-rows: auto auto;
     9    grid-row-gap: 16px;
    10    grid-column-gap: 16px;
    11  }
    12  
    13  .top-line {
    14    position: absolute;
    15    left: 0%;
    16    top: 0%;
    17    right: auto;
    18    bottom: auto;
    19    width: 100%;
    20    max-height: 10px;
    21    min-height: 10px;
    22    background-color: #b9eef1;
    23  }
    24  
    25  .container {
    26    position: relative;
    27  }
    28  
    29  .logo-container {
    30    width: 160px;
    31    height: 153px;
    32    margin-top: -1px;
    33    background-image: url('../images/logo-highlight.svg');
    34    background-position: 0px 0px;
    35    background-size: 160px 153px;
    36  }
    37  
    38  .image {
    39    margin-top: 78px;
    40  }
    41  
    42  .sub-title {
    43    width: 720px;
    44    margin-top: 26px;
    45    opacity: 1;
    46    font-family: 'Roboto Mono', sans-serif;
    47    color: hsla(206.4, 58.14%, 8.43%, 0.60);
    48    font-size: 16px;
    49    line-height: 28px;
    50    font-weight: 400;
    51  }
    52  
    53  .sub-title.full-width {
    54    width: 100%;
    55  }
    56  
    57  .title {
    58    width: 720px;
    59    margin-top: 100px;
    60    background-color: transparent;
    61    font-family: 'Roboto Mono', sans-serif;
    62    color: #091722;
    63    font-size: 24px;
    64    line-height: 42px;
    65    font-weight: 700;
    66    text-decoration: none;
    67  }
    68  
    69  .cta-buttons {
    70    display: -webkit-box;
    71    display: -webkit-flex;
    72    display: -ms-flexbox;
    73    display: flex;
    74    margin-top: 36px;
    75  }
    76  
    77  .cta-button {
    78    display: -webkit-box;
    79    display: -webkit-flex;
    80    display: -ms-flexbox;
    81    display: flex;
    82    height: 44px;
    83    padding-right: 20px;
    84    padding-left: 12px;
    85    -webkit-box-pack: center;
    86    -webkit-justify-content: center;
    87    -ms-flex-pack: center;
    88    justify-content: center;
    89    border-radius: 6px;
    90    background-color: #3717e8;
    91  }
    92  
    93  .cta-button.github-button {
    94    overflow: hidden;
    95    min-width: 0px;
    96    -webkit-box-flex: 0;
    97    -webkit-flex: 0 0 auto;
    98    -ms-flex: 0 0 auto;
    99    flex: 0 0 auto;
   100    text-decoration: none;
   101    cursor: pointer;
   102  }
   103  
   104  .cta-button.doc-button {
   105    overflow: hidden;
   106    margin-left: 16px;
   107    padding-right: 12px;
   108    padding-left: 20px;
   109    background-color: #b9eef1;
   110    text-decoration: none;
   111    cursor: pointer;
   112  }
   113  
   114  .github-button-text {
   115    display: -webkit-box;
   116    display: -webkit-flex;
   117    display: -ms-flexbox;
   118    display: flex;
   119    margin-left: 14px;
   120    -webkit-box-orient: vertical;
   121    -webkit-box-direction: normal;
   122    -webkit-flex-direction: column;
   123    -ms-flex-direction: column;
   124    flex-direction: column;
   125    -webkit-box-pack: center;
   126    -webkit-justify-content: center;
   127    -ms-flex-pack: center;
   128    justify-content: center;
   129    font-family: 'Roboto Mono', sans-serif;
   130    color: #fff;
   131    font-size: 14px;
   132    font-weight: 700;
   133    text-decoration: none;
   134  }
   135  
   136  .documentation-button-text {
   137    display: -webkit-box;
   138    display: -webkit-flex;
   139    display: -ms-flexbox;
   140    display: flex;
   141    margin-right: 14px;
   142    -webkit-box-orient: vertical;
   143    -webkit-box-direction: normal;
   144    -webkit-flex-direction: column;
   145    -ms-flex-direction: column;
   146    flex-direction: column;
   147    -webkit-box-pack: center;
   148    -webkit-justify-content: center;
   149    -ms-flex-pack: center;
   150    justify-content: center;
   151    font-family: 'Roboto Mono', sans-serif;
   152    color: #305b5d;
   153    font-size: 14px;
   154    font-weight: 700;
   155    text-decoration: none;
   156  }
   157  
   158  .how-to-install {
   159    margin-top: 100px;
   160  }
   161  
   162  .heading {
   163    opacity: 0.6;
   164    font-family: 'Roboto Mono', sans-serif;
   165    color: #091722;
   166    font-size: 18px;
   167    font-weight: 400;
   168  }
   169  
   170  .heading.h3 {
   171    margin-top: 0px;
   172    margin-bottom: 0px;
   173  }
   174  
   175  .heading.h2 {
   176    margin-top: 8px;
   177    margin-bottom: 42px;
   178    opacity: 1;
   179    font-size: 30px;
   180  }
   181  
   182  .heading.h1 {
   183    background-color: hsla(249.1866028708134, 81.96%, 50.00%, 0.05);
   184    opacity: 1;
   185    color: #3717e8;
   186    font-size: 22px;
   187    line-height: 50px;
   188    font-weight: 700;
   189  }
   190  
   191  .code-block {
   192    display: block;
   193    min-height: 54px;
   194    padding-top: 12px;
   195    padding-bottom: 12px;
   196    padding-left: 15px;
   197    -webkit-box-orient: vertical;
   198    -webkit-box-direction: normal;
   199    -webkit-flex-direction: column;
   200    -ms-flex-direction: column;
   201    flex-direction: column;
   202    -webkit-box-pack: center;
   203    -webkit-justify-content: center;
   204    -ms-flex-pack: center;
   205    justify-content: center;
   206    -webkit-box-align: start;
   207    -webkit-align-items: flex-start;
   208    -ms-flex-align: start;
   209    align-items: flex-start;
   210    border-radius: 6px;
   211    background-color: #21415a;
   212    cursor: pointer;
   213  }
   214  
   215  .code {
   216    display: inline;
   217    color: #f8e71c;
   218    line-height: 36px;
   219  }
   220  
   221  .code.yellow {
   222    margin-right: 0px;
   223    margin-left: 2px;
   224    font-family: 'Roboto Mono', sans-serif;
   225    font-weight: 400;
   226  }
   227  
   228  .code.white {
   229    margin-right: 0px;
   230    margin-left: 2px;
   231    font-family: 'Roboto Mono', sans-serif;
   232    color: #fff;
   233    font-weight: 400;
   234  }
   235  
   236  .code.blue {
   237    margin-right: 0px;
   238    margin-left: 2px;
   239    font-family: 'Roboto Mono', sans-serif;
   240    color: #b9eef1;
   241    font-weight: 400;
   242  }
   243  
   244  .code.gray {
   245    margin-right: 5px;
   246    margin-left: 2px;
   247    font-family: 'Roboto Mono', sans-serif;
   248    color: hsla(206.3157894736842, 18.06%, 64.20%, 1.00);
   249    font-weight: 400;
   250  }
   251  
   252  .features {
   253    margin-top: 100px;
   254  }
   255  
   256  .column {
   257    display: -webkit-box;
   258    display: -webkit-flex;
   259    display: -ms-flexbox;
   260    display: flex;
   261    padding-right: 30px;
   262    padding-left: 30px;
   263    -webkit-box-orient: vertical;
   264    -webkit-box-direction: normal;
   265    -webkit-flex-direction: column;
   266    -ms-flex-direction: column;
   267    flex-direction: column;
   268    -webkit-box-align: start;
   269    -webkit-align-items: flex-start;
   270    -ms-flex-align: start;
   271    align-items: flex-start;
   272  }
   273  
   274  .column.first {
   275    padding-right: 30px;
   276    padding-left: 10px;
   277  }
   278  
   279  .column.last {
   280    padding-right: 10px;
   281  }
   282  
   283  .features-title {
   284    margin-top: 10px;
   285    margin-bottom: 22px;
   286    -webkit-box-flex: 0;
   287    -webkit-flex: 0 auto;
   288    -ms-flex: 0 auto;
   289    flex: 0 auto;
   290    font-family: 'Roboto Mono', sans-serif;
   291    color: #471dee;
   292    font-size: 18px;
   293    font-weight: 700;
   294  }
   295  
   296  .features-icon {
   297    margin-bottom: 40px;
   298  }
   299  
   300  .features-content {
   301    -webkit-box-flex: 0;
   302    -webkit-flex: 0 auto;
   303    -ms-flex: 0 auto;
   304    flex: 0 auto;
   305    opacity: 0.6;
   306    font-family: 'Roboto Mono', sans-serif;
   307    color: #091722;
   308    font-size: 16px;
   309    line-height: 28px;
   310    font-weight: 400;
   311  }
   312  
   313  .code-snippets {
   314    margin-top: 100px;
   315  }
   316  
   317  .text-block {
   318    margin-top: 28px;
   319    margin-bottom: 10px;
   320    margin-left: 20px;
   321    font-family: 'Roboto Mono', sans-serif;
   322    color: #21415a;
   323    line-height: 28px;
   324    font-weight: 700;
   325  }
   326  
   327  .code-line {
   328    display: block;
   329    -webkit-box-align: center;
   330    -webkit-align-items: center;
   331    -ms-flex-align: center;
   332    align-items: center;
   333  }
   334  
   335  .goals {
   336    display: none;
   337    margin-top: 100px;
   338  }
   339  
   340  .goal-row {
   341    display: -webkit-box;
   342    display: -webkit-flex;
   343    display: -ms-flexbox;
   344    display: flex;
   345    padding-top: 16px;
   346    padding-bottom: 16px;
   347    padding-left: 4px;
   348    -webkit-box-align: center;
   349    -webkit-align-items: center;
   350    -ms-flex-align: center;
   351    align-items: center;
   352  }
   353  
   354  .goal-text {
   355    margin-left: 22px;
   356    font-family: 'Roboto Mono', sans-serif;
   357    color: #091722;
   358    font-size: 16px;
   359    line-height: 28px;
   360  }
   361  
   362  .goal-line {
   363    max-height: 1px;
   364    min-height: 1px;
   365    background-color: #091722;
   366    opacity: 0.1;
   367  }
   368  
   369  .tagline {
   370    margin-top: 150px;
   371  }
   372  
   373  .tagline-heading {
   374    text-align: center;
   375  }
   376  
   377  .team {
   378    margin-top: 100px;
   379  }
   380  
   381  .grid {
   382    grid-column-gap: 28px;
   383    grid-row-gap: 30px;
   384  }
   385  
   386  .team-member.color-a {
   387    display: -webkit-box;
   388    display: -webkit-flex;
   389    display: -ms-flexbox;
   390    display: flex;
   391    background-color: #3717e8;
   392  }
   393  
   394  .team-member.color-b {
   395    display: -webkit-box;
   396    display: -webkit-flex;
   397    display: -ms-flexbox;
   398    display: flex;
   399    background-color: #b9eef1;
   400  }
   401  
   402  .team-photo {
   403    max-height: 180px;
   404    max-width: 180px;
   405  }
   406  
   407  .team-info {
   408    display: -webkit-box;
   409    display: -webkit-flex;
   410    display: -ms-flexbox;
   411    display: flex;
   412    width: 100%;
   413    padding-left: 30px;
   414    -webkit-box-orient: vertical;
   415    -webkit-box-direction: normal;
   416    -webkit-flex-direction: column;
   417    -ms-flex-direction: column;
   418    flex-direction: column;
   419    -webkit-box-pack: center;
   420    -webkit-justify-content: center;
   421    -ms-flex-pack: center;
   422    justify-content: center;
   423  }
   424  
   425  .team-memberr-name {
   426    font-family: 'Roboto Mono', sans-serif;
   427    color: #fff;
   428    font-size: 30px;
   429    line-height: 28px;
   430  }
   431  
   432  .team-memberr-name.color-b {
   433    color: #305b5d;
   434  }
   435  
   436  .team-memberr-position {
   437    margin-top: 8px;
   438    margin-bottom: 10%;
   439    font-family: 'Roboto Mono', sans-serif;
   440    color: #fff;
   441    font-size: 14px;
   442    line-height: 28px;
   443  }
   444  
   445  .team-memberr-position.color-b {
   446    color: #305b5d;
   447  }
   448  
   449  .team-member-social-icon {
   450    width: 24px;
   451    margin-right: 12px;
   452  }
   453  
   454  .team-member-socials {
   455    display: -webkit-box;
   456    display: -webkit-flex;
   457    display: -ms-flexbox;
   458    display: flex;
   459    -webkit-box-align: center;
   460    -webkit-align-items: center;
   461    -ms-flex-align: center;
   462    align-items: center;
   463  }
   464  
   465  .testimonial {
   466    margin-top: 100px;
   467  }
   468  
   469  .testimonial-content {
   470    display: -webkit-box;
   471    display: -webkit-flex;
   472    display: -ms-flexbox;
   473    display: flex;
   474    -webkit-box-align: start;
   475    -webkit-align-items: flex-start;
   476    -ms-flex-align: start;
   477    align-items: flex-start;
   478  }
   479  
   480  .testimonial-quote {
   481    margin-left: 24px;
   482    opacity: 0.6;
   483    font-family: 'Roboto Mono', sans-serif;
   484    color: #091722;
   485    line-height: 28px;
   486    text-align: left;
   487  }
   488  
   489  .quote-mark {
   490    margin-top: 4px;
   491  }
   492  
   493  .testimonial-person {
   494    display: -webkit-box;
   495    display: -webkit-flex;
   496    display: -ms-flexbox;
   497    display: flex;
   498    -webkit-box-pack: end;
   499    -webkit-justify-content: flex-end;
   500    -ms-flex-pack: end;
   501    justify-content: flex-end;
   502    -webkit-box-align: center;
   503    -webkit-align-items: center;
   504    -ms-flex-align: center;
   505    align-items: center;
   506  }
   507  
   508  .image-2 {
   509    width: 36px;
   510  }
   511  
   512  .text-block-2 {
   513    margin-left: 16px;
   514    font-family: 'Roboto Mono', sans-serif;
   515    color: #21415a;
   516    line-height: 28px;
   517  }
   518  
   519  .footer {
   520    height: 60vh;
   521    margin-top: 150px;
   522    background-color: #3717e8;
   523  }
   524  
   525  .pattern {
   526    position: absolute;
   527    left: auto;
   528    top: 8%;
   529    right: 5%;
   530    bottom: auto;
   531    display: block;
   532    max-width: 50%;
   533  }
   534  
   535  .footer-container {
   536    display: -webkit-box;
   537    display: -webkit-flex;
   538    display: -ms-flexbox;
   539    display: flex;
   540    height: 100%;
   541    -webkit-box-orient: vertical;
   542    -webkit-box-direction: normal;
   543    -webkit-flex-direction: column;
   544    -ms-flex-direction: column;
   545    flex-direction: column;
   546    -webkit-box-pack: center;
   547    -webkit-justify-content: center;
   548    -ms-flex-pack: center;
   549    justify-content: center;
   550  }
   551  
   552  .footer-section-title {
   553    margin-bottom: 30px;
   554    font-family: 'Roboto Mono', sans-serif;
   555    color: #fff;
   556    font-size: 20px;
   557    line-height: 28px;
   558  }
   559  
   560  .footer-link {
   561    display: -webkit-box;
   562    display: -webkit-flex;
   563    display: -ms-flexbox;
   564    display: flex;
   565    margin-bottom: 12px;
   566    font-family: 'Roboto Mono', sans-serif;
   567    color: #b9eef1;
   568    font-size: 14px;
   569    line-height: 28px;
   570    text-decoration: none;
   571  }
   572  
   573  .footer-copyright {
   574    margin-top: 100px;
   575  }
   576  
   577  .footer-copyright-text {
   578    margin-bottom: 12px;
   579    font-family: 'Roboto Mono', sans-serif;
   580    color: #fff;
   581    font-size: 16px;
   582  }
   583  
   584  .footer-rights-reserved {
   585    opacity: 0.5;
   586    font-family: 'Roboto Mono', sans-serif;
   587    color: #fff;
   588    font-size: 16px;
   589  }
   590  
   591  .footer-link-text {
   592    opacity: 0.75;
   593    font-family: 'Roboto Mono', sans-serif;
   594    color: #b9eef1;
   595    font-size: 14px;
   596    line-height: 28px;
   597  }
   598  
   599  .footer-link-arrow {
   600    margin-left: 2px;
   601    opacity: 0;
   602  }
   603  
   604  .underlined-link {
   605    border-bottom: 2px dotted hsla(251.51785714285714, 89.60%, 50.98%, 1.00);
   606    color: #3d12f2;
   607  }
   608  
   609  .button-github-icon {
   610    max-width: 24px;
   611  }
   612  
   613  .cta-packs {
   614    display: -webkit-box;
   615    display: -webkit-flex;
   616    display: -ms-flexbox;
   617    display: flex;
   618    margin-top: 42px;
   619    padding-left: 20px;
   620    -webkit-box-align: center;
   621    -webkit-align-items: center;
   622    -ms-flex-align: center;
   623    align-items: center;
   624  }
   625  
   626  .cta-packs.site-packs {
   627    margin-top: 36px;
   628    padding-left: 0px;
   629  }
   630  
   631  .cta-packs-description {
   632    margin-left: 30px;
   633    -webkit-box-flex: 0;
   634    -webkit-flex: 0 auto;
   635    -ms-flex: 0 auto;
   636    flex: 0 auto;
   637    opacity: 0.6;
   638    font-family: 'Roboto Mono', sans-serif;
   639    color: #091722;
   640    font-size: 14px;
   641    line-height: 28px;
   642    font-weight: 400;
   643  }
   644  
   645  .work-in-progress {
   646    opacity: 0.4;
   647    color: #091722;
   648  }
   649  
   650  .code-wrapper {
   651    position: relative;
   652  }
   653  
   654  .code-tooltip {
   655    position: absolute;
   656    left: auto;
   657    top: auto;
   658    right: 10px;
   659    bottom: 10px;
   660    z-index: 1;
   661    display: block;
   662    width: 104px;
   663    height: 19px;
   664    border-radius: 3px;
   665    background-color: hsla(0, 0%, 100%, .3);
   666    opacity: 0;
   667    font-family: 'Roboto Mono', sans-serif;
   668    color: #fff;
   669    font-size: 10px;
   670    text-align: center;
   671  }
   672  
   673  .pack {
   674    position: relative;
   675    display: block;
   676    width: 100%;
   677    min-height: 98px;
   678    margin-top: 20px;
   679    padding: 14px 20px;
   680    -webkit-box-orient: vertical;
   681    -webkit-box-direction: normal;
   682    -webkit-flex-direction: column;
   683    -ms-flex-direction: column;
   684    flex-direction: column;
   685    -webkit-box-pack: center;
   686    -webkit-justify-content: center;
   687    -ms-flex-pack: center;
   688    justify-content: center;
   689    border-radius: 6px;
   690    background-color: rgba(9, 23, 34, .03);
   691    color: hsla(206.4, 58.14%, 8.43%, 0.03);
   692  }
   693  
   694  .all-packs {
   695    margin-top: 100px;
   696  }
   697  
   698  .pack-name-line {
   699    display: -webkit-box;
   700    display: -webkit-flex;
   701    display: -ms-flexbox;
   702    display: flex;
   703  }
   704  
   705  .pack-name {
   706    margin-right: 8px;
   707    font-family: 'Roboto Mono', sans-serif;
   708    color: hsla(249.42857142857147, 82.68%, 49.80%, 1.00);
   709    font-size: 18px;
   710    line-height: 28px;
   711    font-weight: 700;
   712  }
   713  
   714  .pack-version {
   715    font-family: 'Roboto Mono', sans-serif;
   716    color: hsla(249.42857142857147, 82.68%, 49.80%, 1.00);
   717    line-height: 28px;
   718    font-weight: 400;
   719  }
   720  
   721  .pack-description {
   722    margin-bottom: 0px;
   723    opacity: 1;
   724    font-family: 'Roboto Mono', sans-serif;
   725    color: hsla(206.4, 58.14%, 8.43%, 0.60);
   726    font-size: 14px;
   727    line-height: 28px;
   728    font-weight: 400;
   729  }
   730  
   731  .pack-link {
   732    display: inline-block;
   733    margin-top: 4px;
   734    margin-bottom: 0px;
   735    opacity: 1;
   736    font-family: 'Roboto Mono', sans-serif;
   737    color: hsla(206.4, 51.02%, 9.61%, 0.50);
   738    font-size: 12px;
   739    line-height: 14px;
   740    font-weight: 700;
   741    text-decoration: underline;
   742  }
   743  
   744  .bold-text {
   745    text-decoration: underline;
   746  }
   747  
   748  .link-block {
   749    -webkit-box-ordinal-group: 1;
   750    -webkit-order: 0;
   751    -ms-flex-order: 0;
   752    order: 0;
   753    -webkit-box-flex: 0;
   754    -webkit-flex: 0 auto;
   755    -ms-flex: 0 auto;
   756    flex: 0 auto;
   757    text-decoration: none;
   758  }
   759  
   760  .pack-tooltip {
   761    position: absolute;
   762    left: auto;
   763    top: auto;
   764    right: 10px;
   765    bottom: 10px;
   766    z-index: 1;
   767    display: block;
   768    padding: 3px 8px;
   769    border-radius: 3px;
   770    background-color: hsla(0, 0%, 100%, .2);
   771    opacity: 0;
   772    font-family: 'Roboto Mono', sans-serif;
   773    color: #fff;
   774    font-size: 10px;
   775    line-height: 13px;
   776    text-align: center;
   777    cursor: pointer;
   778  }
   779  
   780  .link {
   781    text-decoration: none;
   782  }
   783  
   784  .snackbar {
   785    position: fixed;
   786    left: auto;
   787    top: 20px;
   788    right: 20px;
   789    bottom: auto;
   790    z-index: 1;
   791    display: none;
   792    min-height: 42px;
   793    padding-right: 18px;
   794    padding-left: 18px;
   795    -webkit-box-align: center;
   796    -webkit-align-items: center;
   797    -ms-flex-align: center;
   798    align-items: center;
   799    border-radius: 6px;
   800    background-color: hsla(206.4, 58.14%, 8.43%, 0.90);
   801    opacity: 0;
   802    font-family: 'Roboto Mono', sans-serif;
   803    color: #fff;
   804    font-size: 12px;
   805    text-align: center;
   806  }
   807  
   808  .github-icon {
   809    position: absolute;
   810    left: auto;
   811    top: 14px;
   812    right: 14px;
   813    bottom: auto;
   814    width: 20px;
   815    height: 20px;
   816    color: hsla(206.4, 58.14%, 8.43%, 0.15);
   817  }
   818  
   819  .html-embed {
   820    width: 20px;
   821    height: 20px;
   822  }
   823  
   824  .link-2 {
   825    color: #fff;
   826    text-decoration: none;
   827  }
   828  
   829  @media (max-width: 991px) {
   830    .container {
   831      padding-right: 5px;
   832      padding-left: 5px;
   833    }
   834    .heading.h1 {
   835      text-align: center;
   836    }
   837    .text-block {
   838      margin-top: 28px;
   839    }
   840    .code-line {
   841      -webkit-box-orient: horizontal;
   842      -webkit-box-direction: normal;
   843      -webkit-flex-direction: row;
   844      -ms-flex-direction: row;
   845      flex-direction: row;
   846      -webkit-flex-wrap: wrap;
   847      -ms-flex-wrap: wrap;
   848      flex-wrap: wrap;
   849      -webkit-box-align: start;
   850      -webkit-align-items: flex-start;
   851      -ms-flex-align: start;
   852      align-items: flex-start;
   853    }
   854    .tagline-heading {
   855      display: block;
   856      margin-right: 20px;
   857      margin-left: 20px;
   858      text-align: center;
   859    }
   860    .grid {
   861      display: -ms-grid;
   862      display: grid;
   863      -webkit-box-orient: vertical;
   864      -webkit-box-direction: normal;
   865      -webkit-flex-direction: column;
   866      -ms-flex-direction: column;
   867      flex-direction: column;
   868      -webkit-box-align: center;
   869      -webkit-align-items: center;
   870      -ms-flex-align: center;
   871      align-items: center;
   872      grid-auto-columns: 1fr;
   873      grid-column-gap: 10px;
   874      grid-row-gap: 12px;
   875      -ms-grid-columns: 1fr 1fr;
   876      grid-template-columns: 1fr 1fr;
   877      -ms-grid-rows: auto auto;
   878      grid-template-rows: auto auto;
   879    }
   880    .footer-container {
   881      padding-right: 5px;
   882      padding-left: 5px;
   883    }
   884    .cta-packs {
   885      padding-left: 0px;
   886    }
   887  }
   888  
   889  @media (max-width: 767px) {
   890    .container {
   891      overflow: hidden;
   892      padding-right: 0px;
   893      padding-left: 0px;
   894      text-align: center;
   895    }
   896    .logo-container {
   897      display: inline-block;
   898    }
   899    .sub-title {
   900      width: 100%;
   901      padding: 5px 40px;
   902      background-color: #fff;
   903      text-align: center;
   904    }
   905    .title {
   906      width: 100%;
   907      padding: 5px 40px;
   908      background-color: #fff;
   909      text-align: center;
   910    }
   911    .cta-buttons {
   912      -webkit-box-orient: vertical;
   913      -webkit-box-direction: normal;
   914      -webkit-flex-direction: column;
   915      -ms-flex-direction: column;
   916      flex-direction: column;
   917      -webkit-box-align: center;
   918      -webkit-align-items: center;
   919      -ms-flex-align: center;
   920      align-items: center;
   921    }
   922    .cta-button.doc-button {
   923      margin-top: 30px;
   924      margin-left: 0px;
   925    }
   926    .code-block {
   927      padding-right: 15px;
   928      -webkit-flex-wrap: nowrap;
   929      -ms-flex-wrap: nowrap;
   930      flex-wrap: nowrap;
   931      border-radius: 0px;
   932    }
   933    .code.white {
   934      overflow: visible;
   935      -webkit-box-flex: 0;
   936      -webkit-flex: 0 auto;
   937      -ms-flex: 0 auto;
   938      flex: 0 auto;
   939    }
   940    .column {
   941      margin-bottom: 60px;
   942      -webkit-box-align: center;
   943      -webkit-align-items: center;
   944      -ms-flex-align: center;
   945      align-items: center;
   946    }
   947    .code-snippets {
   948      margin-top: 40px;
   949    }
   950    .text-block {
   951      margin-left: 0px;
   952    }
   953    .code-line {
   954      overflow: scroll;
   955      width: 100%;
   956      -webkit-box-orient: horizontal;
   957      -webkit-box-direction: normal;
   958      -webkit-flex-direction: row;
   959      -ms-flex-direction: row;
   960      flex-direction: row;
   961      -webkit-flex-wrap: wrap;
   962      -ms-flex-wrap: wrap;
   963      flex-wrap: wrap;
   964      -webkit-box-flex: 0;
   965      -webkit-flex: 0 auto;
   966      -ms-flex: 0 auto;
   967      flex: 0 auto;
   968      text-align: left;
   969    }
   970    .goals {
   971      margin-right: 20px;
   972      padding-left: 20px;
   973    }
   974    .goal-text {
   975      text-align: left;
   976    }
   977    .grid {
   978      display: -webkit-box;
   979      display: -webkit-flex;
   980      display: -ms-flexbox;
   981      display: flex;
   982      -webkit-box-align: stretch;
   983      -webkit-align-items: stretch;
   984      -ms-flex-align: stretch;
   985      align-items: stretch;
   986    }
   987    .team-info {
   988      -webkit-box-align: start;
   989      -webkit-align-items: flex-start;
   990      -ms-flex-align: start;
   991      align-items: flex-start;
   992    }
   993    .testimonial-content {
   994      -webkit-box-orient: vertical;
   995      -webkit-box-direction: normal;
   996      -webkit-flex-direction: column;
   997      -ms-flex-direction: column;
   998      flex-direction: column;
   999      -webkit-box-align: center;
  1000      -webkit-align-items: center;
  1001      -ms-flex-align: center;
  1002      align-items: center;
  1003    }
  1004    .testimonial-quote {
  1005      margin-top: 20px;
  1006      margin-right: 24px;
  1007      margin-left: 24px;
  1008    }
  1009    .testimonial-person {
  1010      margin-top: 10px;
  1011      -webkit-box-pack: center;
  1012      -webkit-justify-content: center;
  1013      -ms-flex-pack: center;
  1014      justify-content: center;
  1015    }
  1016    .footer {
  1017      height: auto;
  1018    }
  1019    .pattern {
  1020      top: 15%;
  1021      display: block;
  1022      max-width: 100%;
  1023      opacity: 1;
  1024    }
  1025    .footer-link {
  1026      -webkit-box-pack: center;
  1027      -webkit-justify-content: center;
  1028      -ms-flex-pack: center;
  1029      justify-content: center;
  1030    }
  1031    .footer-copyright {
  1032      margin-top: 20px;
  1033      margin-bottom: 40px;
  1034      text-align: center;
  1035    }
  1036    .columns {
  1037      margin-top: 10%;
  1038      text-align: center;
  1039    }
  1040    .footer-column {
  1041      margin-bottom: 40px;
  1042    }
  1043    .cta-packs {
  1044      -webkit-box-orient: vertical;
  1045      -webkit-box-direction: normal;
  1046      -webkit-flex-direction: column;
  1047      -ms-flex-direction: column;
  1048      flex-direction: column;
  1049    }
  1050    .cta-packs-description {
  1051      margin-top: 20px;
  1052      margin-right: 40px;
  1053      margin-left: 40px;
  1054    }
  1055    .pack {
  1056      padding-top: 24px;
  1057      padding-bottom: 24px;
  1058      text-align: left;
  1059    }
  1060    .pack-description {
  1061      width: 100%;
  1062      padding-top: 5px;
  1063      padding-bottom: 5px;
  1064      text-align: left;
  1065    }
  1066    .pack-link {
  1067      width: 100%;
  1068      padding-top: 5px;
  1069      padding-bottom: 5px;
  1070      text-align: left;
  1071    }
  1072  }
  1073  
  1074  @media (max-width: 479px) {
  1075    .sub-title {
  1076      padding-right: 20px;
  1077      padding-left: 20px;
  1078    }
  1079    .title {
  1080      padding-right: 20px;
  1081      padding-left: 20px;
  1082    }
  1083    .code.white {
  1084      text-align: left;
  1085    }
  1086    .goal-row {
  1087      padding-top: 40px;
  1088      padding-bottom: 40px;
  1089      padding-left: 0px;
  1090      -webkit-box-orient: vertical;
  1091      -webkit-box-direction: normal;
  1092      -webkit-flex-direction: column;
  1093      -ms-flex-direction: column;
  1094      flex-direction: column;
  1095    }
  1096    .goal-text {
  1097      margin-top: 20px;
  1098      margin-left: 0px;
  1099      text-align: center;
  1100    }
  1101    .tagline {
  1102      margin-top: 60px;
  1103    }
  1104    .team-member.color-a {
  1105      -webkit-box-orient: vertical;
  1106      -webkit-box-direction: normal;
  1107      -webkit-flex-direction: column;
  1108      -ms-flex-direction: column;
  1109      flex-direction: column;
  1110    }
  1111    .team-member.color-b {
  1112      -webkit-box-orient: vertical;
  1113      -webkit-box-direction: normal;
  1114      -webkit-flex-direction: column;
  1115      -ms-flex-direction: column;
  1116      flex-direction: column;
  1117    }
  1118    .team-photo {
  1119      max-height: 100px;
  1120      max-width: 100px;
  1121      margin-top: 20px;
  1122      -webkit-align-self: center;
  1123      -ms-flex-item-align: center;
  1124      -ms-grid-row-align: center;
  1125      align-self: center;
  1126    }
  1127    .team-info {
  1128      margin-top: 20px;
  1129      margin-bottom: 40px;
  1130      padding-left: 0px;
  1131      -webkit-box-orient: vertical;
  1132      -webkit-box-direction: normal;
  1133      -webkit-flex-direction: column;
  1134      -ms-flex-direction: column;
  1135      flex-direction: column;
  1136      -webkit-box-align: center;
  1137      -webkit-align-items: center;
  1138      -ms-flex-align: center;
  1139      align-items: center;
  1140    }
  1141    .team-memberr-name.color-b {
  1142      font-size: 24px;
  1143    }
  1144    .team-memberr-position.color-a {
  1145      margin-top: 4px;
  1146      margin-bottom: 5%;
  1147    }
  1148    .team-memberr-position.color-b {
  1149      margin-top: 4px;
  1150      margin-bottom: 5%;
  1151      font-size: 12px;
  1152    }
  1153    .testimonial-person {
  1154      margin-top: 20px;
  1155      -webkit-box-orient: vertical;
  1156      -webkit-box-direction: normal;
  1157      -webkit-flex-direction: column;
  1158      -ms-flex-direction: column;
  1159      flex-direction: column;
  1160    }
  1161    .text-block-2 {
  1162      margin-top: 10px;
  1163      margin-left: 0px;
  1164    }
  1165    .footer {
  1166      margin-top: 60px;
  1167    }
  1168    .pattern {
  1169      top: 20%;
  1170    }
  1171    .footer-copyright-text {
  1172      margin-right: 20px;
  1173      margin-left: 20px;
  1174      font-size: 12px;
  1175    }
  1176    .footer-rights-reserved {
  1177      font-size: 12px;
  1178    }
  1179    .cta-packs {
  1180      margin-top: 60px;
  1181    }
  1182    .cta-packs-description {
  1183      font-size: 12px;
  1184    }
  1185    .code-tooltip {
  1186      display: none;
  1187    }
  1188    .pack-name-line {
  1189      -webkit-box-orient: vertical;
  1190      -webkit-box-direction: normal;
  1191      -webkit-flex-direction: column;
  1192      -ms-flex-direction: column;
  1193      flex-direction: column;
  1194      -webkit-box-pack: center;
  1195      -webkit-justify-content: center;
  1196      -ms-flex-pack: center;
  1197      justify-content: center;
  1198      -webkit-box-align: center;
  1199      -webkit-align-items: center;
  1200      -ms-flex-align: center;
  1201      align-items: center;
  1202      text-align: center;
  1203    }
  1204    .pack-name {
  1205      margin-right: 0px;
  1206    }
  1207    .pack-description {
  1208      line-height: 20px;
  1209      text-align: center;
  1210    }
  1211    .pack-link {
  1212      font-size: 16px;
  1213      line-height: 28px;
  1214      text-align: center;
  1215    }
  1216    .pack-tooltip {
  1217      display: none;
  1218    }
  1219  }
  1220