/ css / embark.css
embark.css
   1  *,
   2  *:before,
   3  *:after {
   4    -webkit-box-sizing: inherit;
   5            box-sizing: inherit; }
   6  
   7  html {
   8    -webkit-box-sizing: border-box;
   9            box-sizing: border-box;
  10    background-color: #fff;
  11    font-size: 10px;
  12    font-weight: normal;
  13    text-rendering: optimizeLegibility; }
  14  
  15  body {
  16    margin: 0;
  17    padding: 16px;
  18    color: #080E1A;
  19    font-family: Roboto, sans-serif;
  20    font-size: 18px;
  21    font-weight: 400;
  22    line-height: 1.45;
  23    -webkit-font-smoothing: antialiased;
  24    -moz-osx-font-smoothing: grayscale; }
  25    @media screen and (min-width: 767px) {
  26      body {
  27        padding: 0; } }
  28  
  29  input,
  30  textarea,
  31  select {
  32    display: block;
  33    margin: 0;
  34    padding: 12px 8px;
  35    width: 100%;
  36    border: 1px solid #D6D9DE;
  37    border-radius: 5px;
  38    background-color: #fff;
  39    color: #080E1A;
  40    font-family: Roboto, sans-serif;
  41    font-size: 18px;
  42    line-height: 1; }
  43    input:focus,
  44    textarea:focus,
  45    select:focus {
  46      outline: transparent;
  47      border-color: get-brand(primary); }
  48    input:disabled,
  49    textarea:disabled,
  50    select:disabled {
  51      cursor: not-allowed;
  52      color: #6E7786; }
  53  
  54  input[type="color"] {
  55    padding: 0; }
  56  
  57  input[type="search"] {
  58    padding: 16px 32px;
  59    -webkit-appearance: none;
  60    border-radius: 150px; }
  61  
  62  textarea {
  63    resize: none; }
  64  
  65  fieldset {
  66    margin: 0;
  67    padding: 0;
  68    border: none; }
  69  
  70  legend {
  71    font-weight: 700; }
  72  
  73  label {
  74    color: #6E7786;
  75    font-weight: 700;
  76    text-transform: uppercase; }
  77  
  78  h1,
  79  h2,
  80  h3,
  81  h4,
  82  h5,
  83  h6 {
  84    margin: 0;
  85    font-weight: 700;
  86    line-height: 1.45; }
  87  
  88  h1 {
  89    font-size: 3rem; }
  90    @media screen and (min-width: 767px) {
  91      h1 {
  92        font-size: 4.8rem; } }
  93  
  94  h2 {
  95    font-size: 2.4rem; }
  96    @media screen and (min-width: 767px) {
  97      h2 {
  98        font-size: 3.6rem; } }
  99  
 100  h3 {
 101    font-size: 2.4rem; }
 102    @media screen and (min-width: 767px) {
 103      h3 {
 104        font-size: 3rem; } }
 105  
 106  h4,
 107  h5,
 108  h6 {
 109    font-size: 1.8rem; }
 110  
 111  a {
 112    cursor: pointer;
 113    color: #FAB266;
 114    text-decoration: none; }
 115    a:hover {
 116      color: #FBBE7D; }
 117    a:focus {
 118      text-decoration: underline; }
 119  
 120  img {
 121    height: auto;
 122    max-width: 100%;
 123    width: auto; }
 124  
 125  ul, ol {
 126    margin: 0;
 127    padding: 0;
 128    margin-left: 16px; }
 129  
 130  table {
 131    width: 100%;
 132    table-layout: fixed;
 133    border: 1px solid #D6D9DE;
 134    border-collapse: collapse;
 135    word-wrap: break-word;
 136    margin-top: 16px; }
 137  
 138  th,
 139  td {
 140    padding: 8px;
 141    border-left: 1px solid #D6D9DE;
 142    border-top: 1px solid #D6D9DE; }
 143    th:first-child,
 144    td:first-child {
 145      border-left: 0; }
 146  
 147  thead td,
 148  thead th {
 149    border-top: 0; }
 150  
 151  button {
 152    cursor: pointer;
 153    margin: 0;
 154    padding: 0;
 155    -moz-appearance: none;
 156         appearance: none;
 157    -webkit-appearance: none;
 158    border: none;
 159    background: transparent;
 160    color: #080E1A;
 161    font-family: Roboto, sans-serif;
 162    font-size: 18px;
 163    line-height: 1; }
 164  
 165  p {
 166    margin: 0; }
 167  
 168  .o-distance {
 169    margin-top: 32px; }
 170    @media screen and (min-width: 767px) {
 171      .o-distance {
 172        margin-top: 64px; } }
 173  
 174  .o-distance-s {
 175    margin-top: 8px; }
 176  
 177  .o-distance-m {
 178    margin-top: 16px; }
 179  
 180  .o-distance-l {
 181    margin-top: 32px; }
 182  
 183  .o-distance-xl {
 184    margin-top: 64px; }
 185  
 186  .o-distance-xxl {
 187    margin-top: 64px; }
 188    @media screen and (min-width: 767px) {
 189      .o-distance-xxl {
 190        margin-top: 128px; } }
 191  
 192  .o-container {
 193    max-width: 980px;
 194    margin-left: auto;
 195    margin-right: auto; }
 196  
 197  .o-container-medium {
 198    max-width: 700px;
 199    margin-left: auto;
 200    margin-right: auto; }
 201  
 202  .o-center {
 203    -webkit-box-pack: center;
 204        -ms-flex-pack: center;
 205            justify-content: center;
 206    text-align: center; }
 207  
 208  .o-container-center {
 209    margin-left: auto;
 210    margin-right: auto; }
 211  
 212  .o-flex {
 213    margin: 0;
 214    padding: 0;
 215    list-style: none;
 216    display: -webkit-box;
 217    display: -ms-flexbox;
 218    display: flex;
 219    -webkit-box-orient: horizontal;
 220    -webkit-box-direction: normal;
 221        -ms-flex-direction: row;
 222            flex-direction: row; }
 223    .o-flex__item {
 224      margin-left: 16px; }
 225      .o-flex__item:first-child {
 226        margin-left: 0; }
 227  
 228  .o-flex-center {
 229    -webkit-box-align: center;
 230        -ms-flex-align: center;
 231            align-items: center; }
 232  
 233  .o-flex-space-between {
 234    -webkit-box-pack: justify;
 235        -ms-flex-pack: justify;
 236            justify-content: space-between; }
 237  
 238  .o-nowrap {
 239    -ms-flex-wrap: nowrap !important;
 240        flex-wrap: nowrap !important; }
 241  
 242  .o-row {
 243    margin-top: get-stack-spacing(m); }
 244  
 245  [class*="o-grid__column-"] {
 246    margin-top: 32px;
 247    margin-left: 32px; }
 248  
 249  .o-grid {
 250    display: -webkit-box;
 251    display: -ms-flexbox;
 252    display: flex;
 253    -webkit-box-orient: horizontal;
 254    -webkit-box-direction: normal;
 255        -ms-flex-direction: row;
 256            flex-direction: row;
 257    -ms-flex-wrap: wrap;
 258        flex-wrap: wrap;
 259    margin-left: -32px;
 260    margin-top: -32px; }
 261    .o-grid__column--1-1 {
 262      width: calc(100% - 32px); }
 263    .o-grid__column--1-4 {
 264      width: calc(25% - 32px); }
 265    .o-grid__column--1-5 {
 266      width: calc(20% - 32px); }
 267    .o-grid__column--1-2 {
 268      width: calc(50% - 32px); }
 269    .o-grid__column--3-4 {
 270      width: calc(75% - 32px); }
 271    .o-grid__column--1-3 {
 272      width: calc(33.333% - 32px); }
 273    .o-grid__column--2-3 {
 274      width: calc(66.666% - 32px); }
 275    @media screen and (min-width: 600px) {
 276      .o-grid__column--medium-1-2 {
 277        width: calc(50% - 32px); } }
 278    @media screen and (min-width: 767px) {
 279      .o-grid__column--medium-1-3 {
 280        width: calc(33.33% - 32px); } }
 281    @media screen and (min-width: 600px) {
 282      .o-grid__column--medium-2-3 {
 283        width: calc(66.666% - 32px); } }
 284    @media screen and (min-width: 767px) {
 285      .o-grid__column--large-1-2 {
 286        width: calc(50% - 32px); } }
 287    @media screen and (min-width: 767px) {
 288      .o-grid__column--large-1-3 {
 289        width: calc(33.33% - 32px); } }
 290    @media screen and (min-width: 767px) {
 291      .o-grid__column--large-2-3 {
 292        width: calc(66.666% - 32px); } }
 293    @media screen and (min-width: 767px) {
 294      .o-grid__column--large-1-4 {
 295        width: calc(25% - 32px); } }
 296    @media screen and (min-width: 767px) {
 297      .o-grid__column--large-1-5 {
 298        width: calc(20% - 32px); } }
 299  
 300  .o-head-up {
 301    position: relative; }
 302    .o-head-up__item {
 303      position: absolute; }
 304    .o-head-up__item--top-left {
 305      left: 8px;
 306      top: 8px; }
 307    .o-head-up__item--top-right {
 308      right: 8px;
 309      top: 8px; }
 310    .o-head-up__item--middle-right {
 311      right: 8px;
 312      top: 50%;
 313      -webkit-transform: translateY(-50%);
 314              transform: translateY(-50%); }
 315  
 316  .c-header {
 317    padding: 16px 16px 32px;
 318    position: relative;
 319    background-color: #0D3E62;
 320    color: #AECEE3; }
 321    @media screen and (min-width: 767px) {
 322      .c-header {
 323        padding: 32px 32px 128px; } }
 324    .c-header__content {
 325      position: relative;
 326      z-index: 10; }
 327    .c-header__background {
 328      height: 100%;
 329      left: 0;
 330      opacity: .3;
 331      position: absolute;
 332      top: 0;
 333      width: 100%;
 334      background-image: url(../../assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg);
 335      background-position: center right;
 336      background-repeat: no-repeat;
 337      background-size: cover; }
 338      @media screen and (min-width: 600px) {
 339        .c-header__background {
 340          opacity: 1; } }
 341    .c-header input {
 342      border-color: #547E99;
 343      background-color: rgba(84, 126, 153, 0.85);
 344      color: #fff; }
 345      .c-header input::-webkit-input-placeholder {
 346        color: #fff; }
 347      .c-header input:-moz-placeholder {
 348        color: #fff; }
 349      .c-header input::-moz-placeholder {
 350        color: #fff; }
 351      .c-header input:-ms-input-placeholder {
 352        color: #fff; }
 353    .c-header__top {
 354      -webkit-box-align: center;
 355          -ms-flex-align: center;
 356              align-items: center;
 357      display: -webkit-box;
 358      display: -ms-flexbox;
 359      display: flex;
 360      -webkit-box-orient: horizontal;
 361      -webkit-box-direction: normal;
 362          -ms-flex-direction: row;
 363              flex-direction: row;
 364      -webkit-box-pack: justify;
 365          -ms-flex-pack: justify;
 366              justify-content: space-between; }
 367    .c-header__body {
 368      margin-top: 32px;
 369      max-width: 600px; }
 370      @media screen and (min-width: 767px) {
 371        .c-header__body {
 372          margin-top: 64px; } }
 373    .c-header .c-title,
 374    .c-header .c-subtitle {
 375      text-shadow: 0 0 25px rgba(0, 0, 0, 0.6); }
 376  
 377  .c-header--compact {
 378    padding-bottom: 50px; }
 379    .c-header--compact .c-header__background {
 380      opacity: .4; }
 381  
 382  .c-footer {
 383    padding: 16px;
 384    background-image: url(../../assets/images/rocket-start.svg);
 385    background-position: bottom right;
 386    background-size: 100%;
 387    background-repeat: no-repeat;
 388    background-color: #0D3E62; }
 389    @media screen and (min-width: 767px) {
 390      .c-footer {
 391        padding: 32px; } }
 392    .c-footer__top {
 393      -webkit-box-align: center;
 394          -ms-flex-align: center;
 395              align-items: center;
 396      display: -webkit-box;
 397      display: -ms-flexbox;
 398      display: flex;
 399      -webkit-box-orient: vertical;
 400      -webkit-box-direction: normal;
 401          -ms-flex-direction: column;
 402              flex-direction: column; }
 403      @media screen and (min-width: 600px) {
 404        .c-footer__top {
 405          -webkit-box-orient: horizontal;
 406          -webkit-box-direction: normal;
 407              -ms-flex-direction: row;
 408                  flex-direction: row; } }
 409      .c-footer__top__title {
 410        margin-bottom: 16px;
 411        margin-right: 32px; }
 412        @media screen and (min-width: 600px) {
 413          .c-footer__top__title {
 414            margin-bottom: 0; } }
 415    .c-footer__body {
 416      margin-top: 16px; }
 417    .c-footer__bottom {
 418      margin-top: 64px; }
 419    .c-footer .two-columns {
 420      columns: 2;
 421      -webkit-columns: 2;
 422      -moz-columns: 2; }
 423    .c-footer .o-grid__column--1-1 {
 424      text-align: center; }
 425    @media screen and (min-width: 480px) {
 426      .c-footer .o-grid__column--1-1 {
 427        text-align: left; } }
 428  
 429  .o-heading {
 430    max-width: 600px;
 431    margin: 0 auto; }
 432    .o-heading__subtitle {
 433      margin-top: 8px; }
 434    .o-heading__footer {
 435      margin-top: 16px; }
 436  
 437  .o-list-bare {
 438    margin: 0;
 439    padding: 0;
 440    list-style: none;
 441    margin-top: 8px; }
 442    .o-list-bare .o-list-bare__child {
 443      margin: 0;
 444      padding: 0;
 445      list-style: none;
 446      margin-top: 16px; }
 447      .o-list-bare .o-list-bare__child .o-list-bare__item {
 448        margin-left: 1em;
 449        line-height: 1.3; }
 450    .o-list-bare__item {
 451      margin-top: 16px;
 452      line-height: 1.3; }
 453      .o-list-bare__item:first-child {
 454        margin-top: 0; }
 455  
 456  .o-ellipsis {
 457    overflow: hidden;
 458    text-overflow: ellipsis;
 459    white-space: nowrap; }
 460  
 461  .o-list-inline {
 462    margin: 0;
 463    padding: 0;
 464    list-style: none;
 465    -webkit-box-align: center;
 466        -ms-flex-align: center;
 467            align-items: center;
 468    display: -webkit-box;
 469    display: -ms-flexbox;
 470    display: flex;
 471    -webkit-box-orient: horizontal;
 472    -webkit-box-direction: normal;
 473        -ms-flex-direction: row;
 474            flex-direction: row;
 475    -ms-flex-wrap: wrap;
 476        flex-wrap: wrap;
 477    margin-left: -32px;
 478    margin-top: -8px; }
 479    .o-list-inline__item {
 480      display: inline-block;
 481      margin-left: 32px;
 482      margin-top: 8px;
 483      vertical-align: middle; }
 484  
 485  @media screen and (min-width: 767px) {
 486    .o-guided-content {
 487      max-width: 980px;
 488      margin-left: auto;
 489      margin-right: auto;
 490      position: relative; } }
 491  
 492  @media screen and (min-width: 1160px) {
 493    .o-guided-content {
 494      max-width: 1160px; } }
 495  
 496  @media screen and (min-width: 767px) {
 497    .o-guided-content__wrapper {
 498      display: -webkit-box;
 499      display: -ms-flexbox;
 500      display: flex;
 501      -webkit-box-orient: horizontal;
 502      -webkit-box-direction: normal;
 503          -ms-flex-direction: row;
 504              flex-direction: row;
 505      -ms-flex-wrap: wrap;
 506          flex-wrap: wrap; } }
 507  
 508  .o-guided-content__guide {
 509    left: 0;
 510    height: 100%;
 511    position: fixed;
 512    top: 0;
 513    width: 300px;
 514    z-index: 20;
 515    -webkit-transform: translateX(-100%);
 516            transform: translateX(-100%);
 517    -webkit-transition: -webkit-transform .3s;
 518    transition: -webkit-transform .3s;
 519    transition: transform .3s;
 520    transition: transform .3s, -webkit-transform .3s; }
 521    @media screen and (min-width: 767px) {
 522      .o-guided-content__guide {
 523        height: auto;
 524        -ms-flex-preferred-size: 300px;
 525            flex-basis: 300px;
 526        -webkit-box-flex: 0;
 527            -ms-flex-positive: 0;
 528                flex-grow: 0;
 529        margin-right: 32px;
 530        padding-right: 32px;
 531        position: static;
 532        width: 300px;
 533        border-right: 1px solid #D6D9DE;
 534        -webkit-transform: none;
 535                transform: none; } }
 536    .o-guided-content__guide.is-active {
 537      -webkit-transform: translateX(0);
 538              transform: translateX(0); }
 539  
 540  .o-guided-content__content {
 541    margin-top: 16px; }
 542    @media screen and (min-width: 767px) {
 543      .o-guided-content__content {
 544        margin-top: 0;
 545        width: calc(100% - 350px); } }
 546    @media screen and (min-width: 1160px) {
 547      .o-guided-content__content {
 548        width: calc(100% - 560px); } }
 549    .o-guided-content__content h2, .o-guided-content__content h3, .o-guided-content__content p, .o-guided-content__content ul {
 550      margin-top: 16px; }
 551    .o-guided-content__content a {
 552      font-weight: bold; }
 553  
 554  .o-guided-content__addition {
 555    display: none; }
 556    @media screen and (min-width: 1160px) {
 557      .o-guided-content__addition {
 558        font-size: 0.9em;
 559        bottom: 0;
 560        display: block;
 561        -ms-flex-preferred-size: 220px;
 562            flex-basis: 220px;
 563        -webkit-box-flex: 0;
 564            -ms-flex-positive: 0;
 565                flex-grow: 0;
 566        left: 100%;
 567        padding: 16px;
 568        width: 220px; } }
 569  
 570  .o-overlap {
 571    margin-bottom: 30%; }
 572    @media screen and (min-width: 1023px) {
 573      .o-overlap {
 574        margin-bottom: 400px; } }
 575    .o-overlap__image {
 576      margin-bottom: -30%; }
 577      @media screen and (min-width: 1023px) {
 578        .o-overlap__image {
 579          margin-bottom: -400px; } }
 580  
 581  .o-buttonbar {
 582    display: -webkit-box;
 583    display: -ms-flexbox;
 584    display: flex;
 585    -webkit-box-orient: vertical;
 586    -webkit-box-direction: normal;
 587        -ms-flex-direction: column;
 588            flex-direction: column;
 589    margin-top: 16px; }
 590    @media screen and (min-width: 600px) {
 591      .o-buttonbar {
 592        -webkit-box-orient: horizontal;
 593        -webkit-box-direction: normal;
 594            -ms-flex-direction: row;
 595                flex-direction: row;
 596        margin-left: -32px; } }
 597    .o-buttonbar__item {
 598      margin-top: 8px; }
 599      @media screen and (min-width: 600px) {
 600        .o-buttonbar__item {
 601          margin-left: 32px;
 602          margin-top: 0; } }
 603  
 604  .o-media {
 605    display: -webkit-box;
 606    display: -ms-flexbox;
 607    display: flex;
 608    -webkit-box-orient: vertical;
 609    -webkit-box-direction: normal;
 610        -ms-flex-direction: column;
 611            flex-direction: column; }
 612    @media screen and (min-width: 1023px) {
 613      .o-media {
 614        -webkit-box-orient: horizontal;
 615        -webkit-box-direction: normal;
 616            -ms-flex-direction: row;
 617                flex-direction: row; } }
 618    .o-media__asset {
 619      margin-top: -175px;
 620      -webkit-box-ordinal-group: 2;
 621          -ms-flex-order: 1;
 622              order: 1; }
 623      @media screen and (min-width: 1023px) {
 624        .o-media__asset {
 625          bottom: -200px;
 626          margin-top: 0;
 627          -webkit-box-ordinal-group: initial;
 628              -ms-flex-order: initial;
 629                  order: initial;
 630          position: absolute;
 631          right: 0;
 632          width: 70%;
 633          -webkit-transform: translateX(25%);
 634                  transform: translateX(25%); } }
 635    .o-media__body {
 636      -webkit-box-ordinal-group: 3;
 637          -ms-flex-order: 2;
 638              order: 2; }
 639      @media screen and (min-width: 1023px) {
 640        .o-media__body {
 641          -webkit-box-ordinal-group: initial;
 642              -ms-flex-order: initial;
 643                  order: initial;
 644          padding-right: 32px;
 645          width: 50%; } }
 646  
 647  .o-standard-page h2, .o-standard-page h3, .o-standard-page p, .o-standard-page ul, .o-standard-page .c-notification {
 648    margin-top: 16px; }
 649  
 650  .o-standard-page h1, .o-standard-page h2, .o-standard-page h3 {
 651    font-weight: 500; }
 652  
 653  .o-standard-page h1, .o-standard-page h2, .o-standard-page h3, .o-standard-page h4 {
 654    border-bottom: 1px dotted #D6D9DE;
 655    padding-bottom: 0.1em;
 656    padding-top: 0.2em; }
 657    .o-standard-page h1:hover .icon, .o-standard-page h2:hover .icon, .o-standard-page h3:hover .icon, .o-standard-page h4:hover .icon {
 658      display: inline-block; }
 659    .o-standard-page h1 a .icon, .o-standard-page h2 a .icon, .o-standard-page h3 a .icon, .o-standard-page h4 a .icon {
 660      display: none; }
 661  
 662  .o-standard-page h1 {
 663    font-size: 3.4rem; }
 664  
 665  .o-standard-page h2 {
 666    font-size: 2.6rem; }
 667  
 668  .o-standard-page h3 {
 669    font-size: 2.2rem; }
 670  
 671  .o-standard-page h4 {
 672    margin-top: 1em; }
 673  
 674  .o-standard-page p {
 675    line-height: 1.5; }
 676  
 677  .o-standard-page p code, .o-standard-page li code {
 678    background: #f0f0f0;
 679    padding: 0.05em 0.2em;
 680    border-radius: 0.15em;
 681    border: 1px solid #e0e0e0; }
 682  
 683  .o-standard-page li {
 684    margin-top: 16px; }
 685  
 686  .c-icon {
 687    display: inline-block;
 688    fill: currentColor;
 689    height: 24px;
 690    stroke-width: 0;
 691    stroke: currentColor;
 692    vertical-align: baseline;
 693    width: 24px; }
 694  
 695  .c-icon--xs {
 696    height: 16px;
 697    width: 16px; }
 698  
 699  .c-icon--s {
 700    height: 24px;
 701    width: 24px; }
 702  
 703  .c-icon--m {
 704    height: 32px;
 705    width: 32px; }
 706  
 707  .c-icon--l {
 708    height: 48px;
 709    width: 48px; }
 710  
 711  .c-icon--xl {
 712    height: 64px;
 713    width: 64px; }
 714  
 715  .c-button {
 716    cursor: pointer;
 717    display: inline-block;
 718    padding: 16px 32px;
 719    vertical-align: top;
 720    -webkit-appearance: none;
 721    -moz-appearance: none;
 722    border-radius: 5px;
 723    border: 1px solid transparent;
 724    border-radius: 5px;
 725    background: #FAB266;
 726    color: #fff;
 727    font-size: 1.8rem;
 728    font-weight: bold;
 729    line-height: 1;
 730    text-align: center;
 731    text-decoration: none;
 732    text-transform: uppercase; }
 733    .c-button:hover {
 734      border-color: #FAB266;
 735      background-color: transparent;
 736      color: #FAB266; }
 737    .c-button:focus {
 738      text-decoration: none; }
 739  
 740  .c-button--quite {
 741    border-color: #547E99;
 742    background-color: #547E99;
 743    color: #fff; }
 744    .c-button--quite:hover {
 745      border-color: #AECEE3;
 746      background-color: transparent;
 747      color: #AECEE3; }
 748  
 749  .c-button--destructive {
 750    border-color: #E73B3B;
 751    background-color: #E73B3B;
 752    color: #fff; }
 753    .c-button--destructive:hover {
 754      border-color: #E73B3B;
 755      background-color: transparent;
 756      color: #E73B3B; }
 757  
 758  .c-button--ghost {
 759    border-color: #fff;
 760    background-color: #fff;
 761    color: #FAB266; }
 762  
 763  .c-button--plain {
 764    border-color: transparent;
 765    background-color: transparent;
 766    color: #FAB266; }
 767  
 768  .c-button--minion {
 769    padding: 8px 16px;
 770    font-size: 1.8rem; }
 771  
 772  .c-button--stateless {
 773    cursor: default;
 774    background-color: #547E99;
 775    font-weight: normal;
 776    text-transform: initial; }
 777    .c-button--stateless:hover {
 778      border-color: #547E99;
 779      background-color: #547E99;
 780      color: #fff; }
 781  
 782  .c-button--squared {
 783    padding: 8px;
 784    line-height: 0; }
 785    .c-button--squared .c-icon {
 786      display: block;
 787      line-height: 0; }
 788  
 789  .c-box {
 790    overflow: hidden;
 791    padding: 24px 20px;
 792    position: relative;
 793    border-radius: 5px;
 794    border: 1px solid #D6D9DE;
 795    border-radius: 0;
 796    background-repeat: no-repeat;
 797    background-position: top center;
 798    background-size: 100%; }
 799    @media screen and (min-width: 767px) {
 800      .c-box {
 801        padding: 48px 40px;
 802        background-size: 1228px 340px; } }
 803    .c-box:focus {
 804      text-decoration: none; }
 805    .c-box__title {
 806      margin-top: 16px; }
 807    .c-box__subtitle {
 808      margin-top: 4px; }
 809    .c-box__footer {
 810      margin-top: 16px; }
 811    .c-box__body {
 812      position: relative;
 813      z-index: 10; }
 814    .c-box__overlay {
 815      height: 100%;
 816      left: 0;
 817      opacity: .6;
 818      position: absolute;
 819      top: 0;
 820      width: 100%;
 821      z-index: 5;
 822      border-radius: 5px;
 823      background: #000; }
 824    .c-box__offset {
 825      position: absolute;
 826      right: 16px;
 827      top: 16px; }
 828    .c-box--universe .c-box {
 829      color: #fff; }
 830      .c-box--universe .c-box .u-link-uniform {
 831        color: #fff !important; }
 832  
 833  .c-box--edgy {
 834    border-radius: 0; }
 835  
 836  .c-box--cover {
 837    display: -webkit-box;
 838    display: -ms-flexbox;
 839    display: flex;
 840    -webkit-box-orient: vertical;
 841    -webkit-box-direction: normal;
 842        -ms-flex-direction: column;
 843            flex-direction: column;
 844    -webkit-box-pack: end;
 845        -ms-flex-pack: end;
 846            justify-content: flex-end;
 847    border: 0;
 848    background-position: center;
 849    background-repeat: no-repeat;
 850    background-size: cover;
 851    color: #fff; }
 852  
 853  .c-box--spot {
 854    background-color: #007e7f;
 855    background-image: linear-gradient(62deg, #003e65 0%, #51b988 100%);
 856    color: #fff; }
 857  
 858  .c-box--whisper {
 859    background-color: #fff;
 860    color: #6E7786; }
 861  
 862  .c-box--dark {
 863    background-color: #0D3E62;
 864    color: #AECEE3; }
 865  
 866  .c-box--universe {
 867    background-color: #080E1A;
 868    color: #6E7786; }
 869  
 870  .c-box--visible {
 871    overflow: visible; }
 872  
 873  .c-box--unframed {
 874    padding: 0;
 875    border: none; }
 876  
 877  .c-title {
 878    font-size: 4.8rem;
 879    line-height: 1; }
 880    @media screen and (min-width: 767px) {
 881      .c-title {
 882        font-size: 5.8rem; } }
 883  
 884  .c-category-title {
 885    font-size: 1.8rem;
 886    font-weight: 700;
 887    text-transform: uppercase; }
 888  
 889  .c-section-title {
 890    font-size: 3.6rem;
 891    line-height: 1; }
 892    @media screen and (min-width: 767px) {
 893      .c-section-title {
 894        font-size: 4.8rem; } }
 895  
 896  .c-subtitle {
 897    font-size: 1.8rem; }
 898    @media screen and (min-width: 767px) {
 899      .c-subtitle {
 900        font-size: 2.4rem; } }
 901  
 902  .c-title-level-2 {
 903    font-size: 3rem;
 904    font-weight: 700; }
 905  
 906  .c-title-level-3 {
 907    font-size: 2.4rem;
 908    font-weight: 700; }
 909  
 910  .c-body-title {
 911    font-size: 18px;
 912    font-weight: 700; }
 913  
 914  .c-meta {
 915    font-size: 1.8rem; }
 916  
 917  .c-link {
 918    position: relative;
 919    font-weight: 700; }
 920    .c-link:before {
 921      content: '';
 922      height: 2px;
 923      margin-top: 2px;
 924      position: absolute;
 925      top: 100%;
 926      width: 100%;
 927      background: #FAB266; }
 928    .c-link:hover:before, .c-link:focus:before {
 929      display: none; }
 930  
 931  .c-link--ghost {
 932    color: #fff; }
 933    .c-link--ghost:before {
 934      background-color: #fff; }
 935  
 936  .c-tag {
 937    -webkit-box-align: center;
 938        -ms-flex-align: center;
 939            align-items: center;
 940    display: -webkit-inline-box;
 941    display: -ms-inline-flexbox;
 942    display: inline-flex;
 943    -webkit-box-orient: horizontal;
 944    -webkit-box-direction: normal;
 945        -ms-flex-direction: row;
 946            flex-direction: row;
 947    padding: 8px;
 948    border-radius: 5px;
 949    color: #fff;
 950    font-size: 1.5rem;
 951    font-weight: bold;
 952    line-height: .8; }
 953    .c-tag__value {
 954      margin-left: 8px; }
 955  
 956  .c-tag--light {
 957    background-color: #547E99; }
 958  
 959  .c-avatar {
 960    height: 80px;
 961    width: 80px;
 962    border-radius: 150px; }
 963  
 964  .c-avatar-small {
 965    height: 40px;
 966    width: 40px;
 967    border-radius: 150px; }
 968  
 969  .c-notification {
 970    padding: 16px;
 971    border: 1px solid #D6D9DE;
 972    border-radius: 5px; }
 973    .c-notification p:first-child {
 974      margin-top: 0; }
 975    .c-notification a {
 976      border-bottom: 1px solid #080E1A;
 977      color: #080E1A; }
 978      .c-notification a:hover {
 979        border-bottom: 0; }
 980  
 981  .c-notification--danger {
 982    border-color: #E73B3B;
 983    background: #FADFD8; }
 984  
 985  .c-notification--success {
 986    border-color: #90CCBC;
 987    background: #EBF5EF; }
 988  
 989  .c-notification--info {
 990    border-color: #9DB2E5;
 991    background: #CFDFF4; }
 992  
 993  .c-navigation {
 994    height: 100%;
 995    position: fixed;
 996    left: 0;
 997    top: 0;
 998    width: 320px;
 999    z-index: 20;
1000    background: #fff;
1001    -webkit-transform: translateX(-100%);
1002            transform: translateX(-100%);
1003    -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
1004    transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
1005    transition: transform 0.3s, box-shadow 0.3s;
1006    transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s; }
1007    @media screen and (min-width: 767px) {
1008      .c-navigation {
1009        height: auto;
1010        position: static;
1011        width: auto;
1012        background: transparent;
1013        -webkit-box-shadow: none;
1014                box-shadow: none;
1015        -webkit-transform: none;
1016                transform: none; } }
1017    .c-navigation.is-active {
1018      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
1019              box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
1020      -webkit-transform: translateX(0);
1021              transform: translateX(0); }
1022      @media screen and (min-width: 767px) {
1023        .c-navigation.is-active {
1024          -webkit-box-shadow: none;
1025                  box-shadow: none; } }
1026    .c-navigation__list {
1027      margin: 0;
1028      padding: 0;
1029      list-style: none; }
1030      @media screen and (min-width: 767px) {
1031        .c-navigation__list {
1032          -webkit-box-align: center;
1033              -ms-flex-align: center;
1034                  align-items: center;
1035          display: -webkit-box;
1036          display: -ms-flexbox;
1037          display: flex;
1038          -webkit-box-orient: horizontal;
1039          -webkit-box-direction: normal;
1040              -ms-flex-direction: row;
1041                  flex-direction: row; } }
1042    .c-navigation__item {
1043      padding-bottom: 16px;
1044      padding-top: 16px;
1045      border-top: 1px solid #D6D9DE; }
1046      @media screen and (min-width: 767px) {
1047        .c-navigation__item {
1048          margin-left: 16px;
1049          padding-bottom: 0;
1050          padding-top: 0;
1051          border-top: 0; } }
1052      .c-navigation__item:first-child {
1053        padding-top: 0;
1054        border-top: 0; }
1055    .c-navigation__trigger {
1056      background: transparent;
1057      border: 0; }
1058    .c-navigation__close {
1059      background: transparent;
1060      border: 0; }
1061      @media screen and (min-width: 767px) {
1062        .c-navigation__close {
1063          display: none; } }
1064    .c-navigation__anchor {
1065      display: block;
1066      color: #080E1A; }
1067      @media screen and (min-width: 767px) {
1068        .c-navigation__anchor {
1069          color: #fff; } }
1070      .c-navigation__anchor.is-active {
1071        font-weight: bold; }
1072    .c-navigation__header {
1073      -webkit-box-align: center;
1074          -ms-flex-align: center;
1075              align-items: center;
1076      display: -webkit-box;
1077      display: -ms-flexbox;
1078      display: flex;
1079      -webkit-box-orient: horizontal;
1080      -webkit-box-direction: normal;
1081          -ms-flex-direction: row;
1082              flex-direction: row;
1083      -webkit-box-pack: justify;
1084          -ms-flex-pack: justify;
1085              justify-content: space-between;
1086      padding: 16px;
1087      border-bottom: 1px solid #D6D9DE; }
1088      @media screen and (min-width: 767px) {
1089        .c-navigation__header {
1090          display: none; } }
1091    .c-navigation__body {
1092      padding: 16px; }
1093      @media screen and (min-width: 767px) {
1094        .c-navigation__body {
1095          margin-top: 8px;
1096          padding: 0;
1097          line-height: 1; } }
1098    .c-navigation__subnav {
1099      padding-left: 16px; }
1100  
1101  .c-checklist {
1102    margin: 0;
1103    padding: 0;
1104    list-style: none;
1105    color: #6E7786; }
1106    .c-checklist__item {
1107      display: -webkit-box;
1108      display: -ms-flexbox;
1109      display: flex;
1110      -webkit-box-orient: horizontal;
1111      -webkit-box-direction: normal;
1112          -ms-flex-direction: row;
1113              flex-direction: row;
1114      margin-top: 16px;
1115      padding-top: 4px; }
1116    .c-checklist__circle {
1117      display: block;
1118      height: 32px;
1119      margin-right: 16px;
1120      margin-top: -4px;
1121      position: relative;
1122      width: 32px;
1123      border-radius: 150px;
1124      background: #AECEE3; }
1125      .c-checklist__circle .c-checklist__icon {
1126        height: 16px;
1127        left: 50%;
1128        position: absolute;
1129        top: 50%;
1130        width: 16px;
1131        color: #547E99;
1132        -webkit-transform: translate(-50%, -50%);
1133                transform: translate(-50%, -50%); }
1134  
1135  .c-guide {
1136    overflow: auto;
1137    background: #fff; }
1138    .c-guide__header {
1139      display: -webkit-box;
1140      display: -ms-flexbox;
1141      display: flex;
1142      -webkit-box-orient: horizontal;
1143      -webkit-box-direction: normal;
1144          -ms-flex-direction: row;
1145              flex-direction: row;
1146      -webkit-box-pack: justify;
1147          -ms-flex-pack: justify;
1148              justify-content: space-between;
1149      padding: 16px;
1150      border-bottom: 1px solid #D6D9DE; }
1151    .c-guide__body {
1152      overflow: auto;
1153      padding: 16px; }
1154    .c-guide a.is-active {
1155      font-weight: bold; }
1156    .c-guide.is-active {
1157      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
1158              box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
1159  
1160  .highlight {
1161    margin-left: 0;
1162    margin-right: 0;
1163    margin-top: 1em;
1164    margin-bottom: 0;
1165    display: block;
1166    overflow: auto; }
1167    .highlight.hljs, .highlight .hljs {
1168      border-radius: 0.3em; }
1169    .highlight .hljs {
1170      margin-top: 0;
1171      margin-bottom: 0; }
1172    .highlight table {
1173      display: block;
1174      width: 100%;
1175      border: 0; }
1176    .highlight tbody,
1177    .highlight tr,
1178    .highlight td {
1179      display: block;
1180      padding: 0;
1181      border: 0; }
1182  
1183  figure.highlight {
1184    margin-top: 0; }
1185  
1186  .c-meta {
1187    font-size: 1.5rem;
1188    position: relative; }
1189    .c-meta a {
1190      font-weight: normal;
1191      color: #0D3E62; }
1192      .c-meta a .c-icon {
1193        vertical-align: middle; }
1194  
1195  .c-logo {
1196    display: block;
1197    height: 50px;
1198    width: 136px;
1199    background: url(../../assets/images/logo.svg) no-repeat;
1200    background-size: 100%;
1201    color: transparent;
1202    font-size: 0;
1203    line-height: 0; }
1204    .c-logo--negative {
1205      background-image: url(../../assets/images/logo-negative.svg); }
1206  
1207  .u-list-reset {
1208    margin: 0;
1209    padding: 0;
1210    list-style: none; }
1211  
1212  .u-hidden {
1213    display: none; }
1214  
1215  .u-hidden-until-medium {
1216    display: none; }
1217    @media screen and (min-width: 600px) {
1218      .u-hidden-until-medium {
1219        display: inherit; } }
1220  
1221  .u-hidden-until-large {
1222    display: none; }
1223    @media screen and (min-width: 767px) {
1224      .u-hidden-until-large {
1225        display: inherit; } }
1226  
1227  @media screen and (min-width: 600px) {
1228    .u-hidden-medium-up {
1229      display: none; } }
1230  
1231  @media screen and (min-width: 767px) {
1232    .u-hidden-large-up {
1233      display: none; } }
1234  
1235  .u-text-normal {
1236    color: #080E1A !important;
1237    text-decoration: none; }
1238  
1239  .u-text-death {
1240    color: #6E7786 !important; }
1241  
1242  .u-text-light {
1243    color: #547E99 !important; }
1244  
1245  .u-text-ghost {
1246    color: #fff !important; }
1247  
1248  .u-text-danger {
1249    color: #E73B3B !important; }
1250  
1251  .u-link {
1252    color: #FAB266 !important; }
1253    .u-link:hover, .u-link:focus {
1254      color: #FBBE7D !important; }
1255  
1256  .u-link-uniform {
1257    color: #080E1A !important; }
1258    .u-link-uniform:hover, .u-link-uniform:focus, .u-link-uniform.is-active {
1259      color: #FBBE7D !important; }
1260  
1261  .u-link-ghost {
1262    color: #fff !important; }
1263    .u-link-ghost:hover, .u-link-ghost:focus {
1264      color: #AECEE3 !important; }
1265  
1266  pre {
1267    position: relative; }
1268  
1269  pre .c-button {
1270    position: absolute;
1271    right: 8px;
1272    top: 8px; }