main.css
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 font: inherit; 7 vertical-align: baseline; } 8 9 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 10 display: block; } 11 12 body { 13 line-height: 1; } 14 15 ol, ul { 16 list-style: none; } 17 18 blockquote, q { 19 quotes: none; } 20 21 blockquote:before, blockquote:after { 22 content: ""; 23 content: none; } 24 25 q:before, q:after { 26 content: ""; 27 content: none; } 28 29 table { 30 border-collapse: collapse; 31 border-spacing: 0; } 32 33 div { 34 box-sizing: border-box; } 35 36 /* ---------------------------------------------------------------------------------------------------- 37 38 Super Form Reset 39 40 A couple of things to watch out for: 41 42 - IE8: If a text input doesn't have padding on all sides or none the text won't be centered. 43 - The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders. 44 - You NEED to set the font-size and family on all form elements 45 - Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs 46 - You can style the upload button in webkit using ::-webkit-file-upload-button 47 - ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out. 48 - IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block. 49 - By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs 50 51 ----------------------------------------------------------------------------------------------------*/ 52 input, 53 label, 54 select, 55 button, 56 textarea { 57 margin: 0; 58 border: 0; 59 padding: 0; 60 display: inline-block; 61 vertical-align: middle; 62 white-space: normal; 63 background: none; 64 line-height: 1; 65 /* Browsers have different default form fonts */ 66 font-size: 13px; 67 font-family: Arial; } 68 69 /* Remove the stupid outer glow in Webkit */ 70 input:focus { 71 outline: 0; } 72 73 /* Box Sizing Reset 74 -----------------------------------------------*/ 75 /* All of our custom controls should be what we expect them to be */ 76 input, 77 textarea { 78 -webkit-box-sizing: content-box; 79 -moz-box-sizing: content-box; 80 box-sizing: content-box; } 81 82 /* These elements are usually rendered a certain way by the browser */ 83 button, 84 input[type=reset], 85 input[type=button], 86 input[type=submit], 87 input[type=checkbox], 88 input[type=radio], 89 select { 90 -webkit-box-sizing: border-box; 91 -moz-box-sizing: border-box; 92 box-sizing: border-box; } 93 94 /* Text Inputs 95 -----------------------------------------------*/ 96 /* Button Controls 97 -----------------------------------------------*/ 98 input[type=checkbox], 99 input[type=radio] { 100 width: 13px; 101 height: 13px; } 102 103 /* File Uploads 104 -----------------------------------------------*/ 105 /* Search Input 106 -----------------------------------------------*/ 107 /* Make webkit render the search input like a normal text field */ 108 input[type=search] { 109 -webkit-appearance: textfield; 110 -webkit-box-sizing: content-box; } 111 112 /* Turn off the recent search for webkit. It adds about 15px padding on the left */ 113 ::-webkit-search-decoration { 114 display: none; } 115 116 /* Buttons 117 -----------------------------------------------*/ 118 button, 119 input[type="reset"], 120 input[type="button"], 121 input[type="submit"] { 122 /* Fix IE7 display bug */ 123 overflow: visible; 124 width: auto; } 125 126 /* IE8 and FF freak out if this rule is within another selector */ 127 ::-webkit-file-upload-button { 128 padding: 0; 129 border: 0; 130 background: none; } 131 132 /* Textarea 133 -----------------------------------------------*/ 134 textarea { 135 /* Move the label to the top */ 136 vertical-align: top; 137 /* Turn off scroll bars in IE unless needed */ 138 overflow: auto; } 139 140 /* Selects 141 -----------------------------------------------*/ 142 select[multiple] { 143 /* Move the label to the top */ 144 vertical-align: top; } 145 146 @font-face { 147 font-family: PostGrotesk-Medium; 148 src: url(../fonts/PostGrotesk-Medium.eot); 149 src: url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/PostGrotesk-Medium.woff) format("woff"), url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); 150 font-weight: 400; 151 font-style: normal; } 152 153 @font-face { 154 font-family: PostGrotesk-Book; 155 src: url(../fonts/PostGrotesk-Book.eot); 156 src: url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"), url(../fonts/PostGrotesk-Book.woff) format("woff"), url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); 157 font-weight: 400; 158 font-style: normal; } 159 160 .header { 161 position: fixed; 162 display: flex; 163 justify-content: space-between; 164 width: 1200px; 165 height: 56px; 166 left: 50%; 167 top: 0; 168 margin: 32px 0 0 -600px; 169 z-index: 998; } 170 171 .header-left { 172 display: flex; 173 align-items: center; } 174 175 .logo { 176 display: block; 177 width: 56px; 178 height: 56px; 179 border-radius: 50%; 180 background-color: #FFFFFF; 181 background-image: url(../img/logo-blue.svg); 182 background-size: 24px; 183 background-position: center; 184 background-repeat: no-repeat; } 185 186 .main-nav { 187 display: flex; 188 align-items: center; 189 margin-left: 32px; } 190 191 .main-nav li { 192 margin: 16px; } 193 194 .main-nav li:first-child { 195 margin-left: 0; } 196 197 .main-nav li:last-child { 198 margin-right: 0; } 199 200 .header a:hover { 201 opacity: .8; } 202 203 .header a:visited { 204 color: #FFFFFF; } 205 206 .header .social-link a:hover { 207 opacity: 1; } 208 209 .header a.logo:hover { 210 opacity: 1; } 211 212 .main-nav a { 213 color: #FFFFFF; 214 text-decoration: none; } 215 216 .secondary-nav { 217 display: flex; 218 align-items: center; 219 margin-left: 32px; } 220 221 .secondary-nav a { 222 color: #FFFFFF; 223 text-decoration: none; } 224 225 .secondary-nav li { 226 margin: 16px; } 227 228 .secondary-nav li.social-link { 229 margin: 8px; } 230 231 .secondary-nav li.social-link a { 232 display: block; 233 width: 40px; 234 height: 40px; 235 background-color: rgba(0, 0, 0, 0.1); 236 border-radius: 50%; 237 background-size: 24px; 238 background-position: center; 239 background-repeat: no-repeat; } 240 241 .secondary-nav li.social-link a:hover { 242 background-color: rgba(0, 0, 0, 0.2); } 243 244 .secondary-nav li.social-link.social-link--twitter a { 245 background-image: url(../img/icon-twitter.svg); } 246 247 .secondary-nav li.social-link.social-link--github a { 248 background-image: url(../img/icon-github.svg); } 249 250 .secondary-nav li:first-child { 251 margin-left: 0; } 252 253 .secondary-nav li:last-child { 254 margin-right: 0; } 255 256 @media (max-width: 1248px) { 257 .header { 258 width: 100%; 259 left: 0; 260 top: 0; 261 margin: 32px 0 0 0; 262 padding: 0 24px; } } 263 264 @media (max-width: 710px) { 265 .header { 266 margin-top: 24px; } 267 .main-nav { 268 display: none; } 269 .secondary-nav li { 270 margin-right: 12px; } 271 .secondary-nav li.social-link { 272 margin-left: 2px; } } 273 274 .wrap { 275 position: fixed; 276 left: 0; 277 top: 0; 278 right: 0; 279 bottom: 0; 280 z-index: 1; 281 width: 100%; 282 height: 100%; 283 background-color: #4360DF; } 284 285 .pattern { 286 position: fixed; 287 left: 0; 288 top: 0; 289 right: 0; 290 bottom: 0; 291 z-index: 1; 292 width: 100%; 293 height: 100%; 294 background-image: url("../img/pattern.png"); } 295 296 .home-cover { 297 background-color: transparent; 298 width: 100%; 299 height: 600px; } 300 301 .home-cover.no-pattern { 302 background-image: none; } 303 304 .intro { 305 position: fixed; 306 top: 280px; 307 left: 50%; 308 margin: 0 0 0 -270px; 309 display: flex; 310 align-items: center; 311 flex-direction: column; 312 padding: 0px 0 32px; 313 color: #FFFFFF; 314 text-align: center; 315 width: 540px; 316 z-index: 4; } 317 318 .intro h1 { 319 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 320 font-size: 30px; 321 padding: 0 0 12px 0; } 322 323 .intro p { 324 font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 325 font-size: 16px; 326 line-height: 25px; 327 opacity: .6; 328 padding: 0 0 16px 0; } 329 330 .intro-buttons { 331 display: flex; } 332 333 .intro .button { 334 margin: 0 6px; 335 width: 194px; 336 padding: 10px 0 9px; } 337 338 @media (max-width: 710px) { 339 .intro { 340 width: 100%; 341 margin: 0; 342 left: 0; 343 top: 150px; 344 padding: 0 24px; } 345 .intro h1 { 346 font-size: 22px; 347 line-height: 26px; 348 padding: 0 0 4px 0; } 349 .intro-buttons { 350 flex-direction: column; } 351 .intro .button { 352 width: 220px; 353 margin: 0 0 12px 0; } 354 .home-cover { 355 height: 440px; } } 356 357 .swarms { 358 position: absolute; 359 left: 24px; 360 top: 24px; 361 width: 250px; 362 height: 250px; } 363 364 .swarm { 365 position: absolute; } 366 367 .swarm:nth-child(1) { 368 left: 0; 369 top: 0; 370 width: 90px; 371 height: 90px; } 372 373 .swarm:nth-child(2) { 374 left: 180px; 375 top: 100px; 376 width: 70px; 377 height: 70px; } 378 379 .swarm:nth-child(3) { 380 left: 24px; 381 top: 150px; 382 width: 86px; 383 height: 86px; } 384 385 .circle { 386 position: absolute; 387 transform: translate3d(0, 0, 0); 388 transition: transform 1.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 1s ease; 389 opacity: 0; 390 transform: scale(0.1); } 391 392 .circle .circle-inner { 393 position: absolute; 394 left: 0; 395 top: 0; 396 right: 0; 397 bottom: 0; 398 border-radius: 50%; 399 border-radius: 50%; 400 background-color: #4360DF; 401 animation-timing-function: ease; 402 animation-iteration-count: infinite; } 403 404 .circle .circle-inner { 405 animation-duration: 3.4s; 406 animation-name: float; } 407 408 .circle.circle--big .circle-inner { 409 animation-duration: 3.4s; 410 background-color: #E8ECFB; 411 animation-name: pulsate; } 412 413 /* Swarm #1 */ 414 .swarm:nth-child(1) .circle.circle--big { 415 width: 90px; 416 height: 90px; 417 transition-delay: .1s; } 418 419 .swarm:nth-child(2) .circle.circle--big .circle-inner { 420 animation-delay: .1s; } 421 422 .swarm:nth-child(1) .circle:nth-child(2) { 423 position: absolute; 424 left: 20px; 425 top: 20px; 426 width: 11px; 427 height: 11px; 428 transition-delay: .2s; 429 transform: translate3d(-10px, -10px, 0) scale(0.1); } 430 431 .swarm:nth-child(1) .circle:nth-child(2) .circle-inner { 432 animation-delay: 1.1s; } 433 434 .swarm:nth-child(1) .circle:nth-child(3) { 435 position: absolute; 436 left: 33px; 437 top: 43px; 438 width: 17px; 439 height: 17px; 440 transition-delay: .22s; 441 transform: translate3d(-10px, 20px, 0) scale(0.1); } 442 443 .swarm:nth-child(1) .circle:nth-child(3) .circle-inner { 444 animation-delay: 1.6s; } 445 446 .swarm:nth-child(1) .circle:nth-child(4) { 447 position: absolute; 448 left: 70px; 449 top: 38px; 450 width: 21px; 451 height: 21px; 452 transition-delay: .24s; 453 transform: translate3d(20px, 10px, 0) scale(0.1); } 454 455 .swarm:nth-child(1) .circle:nth-child(4) .circle-inner { 456 animation-delay: 2.1s; } 457 458 .swarm:nth-child(1) .circle:nth-child(5) { 459 position: absolute; 460 left: 86px; 461 top: -6px; 462 width: 20px; 463 height: 20px; 464 transition-delay: .44s; 465 transform: translate3d(30px, -30px, 0) scale(0.1); } 466 467 .swarm:nth-child(1) .circle:nth-child(6) { 468 position: absolute; 469 left: -28px; 470 top: 40px; 471 width: 14px; 472 height: 14px; 473 transition-delay: .54s; 474 transform: translate3d(-30px, 10px, 0) scale(0.1); } 475 476 .swarm:nth-child(1) .circle:nth-child(6) .circle-inner { 477 animation-delay: 2.3s; } 478 479 .swarm:nth-child(1) .circle:nth-child(7) { 480 position: absolute; 481 left: 8px; 482 top: 100px; 483 width: 12px; 484 height: 12px; 485 transition-delay: .64s; 486 transform: translate3d(-30px, 30px, 0) scale(0.1); } 487 488 /* Swarm #2 */ 489 .swarm:nth-child(2) .circle.circle--big { 490 width: 70px; 491 height: 70px; 492 transition-delay: .5s; } 493 494 .swarm:nth-child(2) .circle.circle--big .circle-inner { 495 animation-delay: .6s; } 496 497 .swarm:nth-child(2) .circle:nth-child(2) { 498 position: absolute; 499 left: -17px; 500 top: 7px; 501 width: 29px; 502 height: 29px; 503 transition-delay: .6s; 504 transform: translate3d(0, 0, 0) scale(0.1); } 505 506 .swarm:nth-child(2) .circle:nth-child(2) .circle-inner { 507 animation-delay: 1.1s; } 508 509 .swarm:nth-child(2) .circle:nth-child(3) { 510 position: absolute; 511 left: 31px; 512 top: 14px; 513 width: 9px; 514 height: 9px; 515 transition-delay: .62s; 516 transform: translate3d(0px, -10px, 0) scale(0.1); } 517 518 .swarm:nth-child(2) .circle:nth-child(3) .circle-inner { 519 animation-delay: 2.1s; } 520 521 .swarm:nth-child(2) .circle:nth-child(4) { 522 position: absolute; 523 left: 20px; 524 top: 34px; 525 width: 19px; 526 height: 19px; 527 transition-delay: .64s; 528 transform: translate3d(-5px, 20px, 0) scale(0.1); } 529 530 .swarm:nth-child(2) .circle:nth-child(4) .circle-inner { 531 animation-delay: 3.1s; } 532 533 .swarm:nth-child(2) .circle:nth-child(5) { 534 position: absolute; 535 left: 45px; 536 top: 32px; 537 width: 12px; 538 height: 12px; 539 transition-delay: .66s; 540 transform: translate3d(16px, -5px, 0) scale(0.1); } 541 542 .swarm:nth-child(2) .circle:nth-child(6) { 543 position: absolute; 544 left: -20px; 545 top: -30px; 546 width: 16px; 547 height: 16px; 548 transition-delay: .86s; 549 transform: translate3d(-20px, -30px, 0) scale(0.1); } 550 551 .swarm:nth-child(2) .circle:nth-child(7) { 552 position: absolute; 553 left: 74px; 554 top: 66px; 555 width: 15px; 556 height: 15px; 557 transition-delay: 1.06s; 558 transform: translate3d(38px, 30px, 0) scale(0.1); } 559 560 /* Swarm #3 */ 561 .swarm:nth-child(3) .circle.circle--big { 562 width: 86px; 563 height: 86px; 564 transition-delay: .7s; } 565 566 .swarm:nth-child(3) .circle.circle--big .circle-inner { 567 animation-delay: 1.1s; } 568 569 .swarm:nth-child(3) .circle:nth-child(2) { 570 position: absolute; 571 left: 49px; 572 top: 19px; 573 width: 12px; 574 height: 12px; 575 transition-delay: .8s; 576 transform: translate3d(0, -15px, 0) scale(0.1); } 577 578 .swarm:nth-child(3) .circle:nth-child(2) .circle-inner { 579 animation-delay: .1s; } 580 581 .swarm:nth-child(3) .circle:nth-child(3) { 582 position: absolute; 583 left: 18px; 584 top: 27px; 585 width: 18px; 586 height: 18px; 587 transition-delay: .82s; 588 transform: translate3d(-20px, -10px, 0) scale(0.1); } 589 590 .swarm:nth-child(3) .circle:nth-child(3) .circle-inner { 591 animation-delay: .4s; } 592 593 .swarm:nth-child(3) .circle:nth-child(4) { 594 position: absolute; 595 left: 42px; 596 top: 45px; 597 width: 12px; 598 height: 12px; 599 transition-delay: .84s; 600 transform: translate3d(0, 20px, 0) scale(0.1); } 601 602 .swarm:nth-child(3) .circle:nth-child(4) .circle-inner { 603 animation-delay: .5s; } 604 605 .swarm:nth-child(3) .circle:nth-child(5) { 606 position: absolute; 607 left: 62px; 608 top: 51px; 609 width: 30px; 610 height: 30px; 611 transition-delay: .86s; 612 transform: translate3d(10px, 10px, 0) scale(0.1); } 613 614 .swarm:nth-child(3) .circle:nth-child(6) { 615 position: absolute; 616 left: -20px; 617 top: 20px; 618 width: 12px; 619 height: 12px; 620 transition-delay: 1.06s; 621 transform: translate3d(-20px, 0, 0) scale(0.1); } 622 623 .swarm:nth-child(3) .circle:nth-child(7) { 624 position: absolute; 625 left: 8px; 626 top: 100px; 627 width: 12px; 628 height: 12px; 629 transition-delay: 1.26s; 630 transform: translate3d(-10px, 40px, 0) scale(0.1); } 631 632 .swarm:nth-child(3) .circle:nth-child(8) { 633 position: absolute; 634 left: 96px; 635 top: 8px; 636 width: 14px; 637 height: 14px; 638 transition-delay: 1.46s; 639 transform: translate3d(10px, -10px, 0) scale(0.1); } 640 641 .section--shown .circle.circle--big { 642 transform: translate3d(0, 0, 0) scale(1) !important; } 643 644 .section--shown .circle { 645 transform: scale(1) !important; 646 opacity: 1 !important; } 647 648 .section--shown .circle.circle--transparent { 649 opacity: .1 !important; } 650 651 @keyframes pulsate { 652 0% { 653 transform: scale(1); } 654 50% { 655 transform: scale(1.4); } 656 100% { 657 transform: scale(1); } } 658 659 @keyframes float { 660 0% { 661 transform: translate3d(0, 0, 0); } 662 50% { 663 transform: translate3d(0, -10px, 0); } 664 100% { 665 transform: translate3d(0, 0, 0); } } 666 667 .bubbles-wrap { 668 width: 300px; 669 height: 300px; 670 position: relative; 671 transform: translate3d(0, 0, 0); } 672 673 .bubbles-wrap .bubbles { 674 position: absolute; 675 left: -75px; 676 top: -75px; 677 width: 450px; 678 height: 450px; 679 transform: translate3d(0, 0, 0); } 680 681 @media (max-width: 640px) { 682 .bubbles-wrap { 683 width: 260px; 684 height: 260px; } 685 .bubbles-wrap .bubbles { 686 transform: scale(0.86); 687 left: -100px; 688 top: -35px; } } 689 690 .areas { 691 position: absolute; 692 width: 292px; 693 height: 292px; } 694 695 .area { 696 position: absolute; 697 left: 50%; 698 top: 50%; 699 z-index: 99; 700 transform: translate3d(0, 0, 0); 701 transition: transform 1.6s cubic-bezier(0.25, 0.46, 0, 1.105), opacity 1s ease; 702 opacity: 0; 703 transform: scale(0.1); } 704 705 .area-inner { 706 position: absolute; 707 width: 100%; 708 height: 100%; 709 border: 5px solid #E4E8FB; 710 border-radius: 50%; 711 animation-timing-function: linear; 712 animation-iteration-count: infinite; 713 animation-duration: 13.4s; 714 animation-name: rotate; } 715 716 .section--shown .area { 717 transform: scale(1); 718 opacity: 1; } 719 720 .area-dot { 721 position: absolute; 722 width: 16px; 723 height: 16px; 724 background-color: #435CE7; 725 border-radius: 50%; 726 border: 4px solid #FFFFFF; } 727 728 .area-logo { 729 position: absolute; 730 left: 50%; 731 top: 50%; 732 margin: -26px 0 0 -26px; 733 width: 52px; 734 height: 52px; 735 background-image: url("../img/logo-flat.svg"); 736 background-size: 52px; 737 z-index: 100; } 738 739 .area:nth-child(2) { 740 width: 112px; 741 height: 112px; 742 margin: -56px 0 0 -56px; } 743 744 .area:nth-child(2) .area-dot { 745 left: 6px; 746 top: 4px; } 747 748 .area:nth-child(2) .area-inner { 749 animation-delay: .2s; } 750 751 .area:nth-child(3) { 752 width: 172px; 753 height: 172px; 754 margin: -86px 0 0 -86px; 755 transition-delay: .1s; } 756 757 .area:nth-child(3) .area-dot { 758 left: 126px; 759 top: 9px; } 760 761 .area:nth-child(3) .area-inner { 762 animation-delay: .4s; } 763 764 .area:nth-child(4) { 765 width: 232px; 766 height: 232px; 767 margin: -116px 0 0 -116px; 768 transition-delay: .2s; } 769 770 .area:nth-child(4) .area-dot { 771 left: 126px; 772 top: 214px; } 773 774 .area:nth-child(4) .area-inner { 775 animation-delay: .6s; } 776 777 .area:nth-child(5) { 778 width: 292px; 779 height: 292px; 780 margin: -146px 0 0 -146px; 781 transition-delay: .3s; } 782 783 .area:nth-child(5) .area-dot { 784 left: 248px; 785 top: 218px; } 786 787 .area:nth-child(6) .area-inner { 788 animation-delay: .8s; } 789 790 @keyframes rotate { 791 0% { 792 transform: rotate(0deg); } 793 100% { 794 transform: rotate(360deg); } } 795 796 @media (max-width: 640px) { 797 .areas { 798 position: absolute; 799 left: -16px; 800 top: 0px; 801 transform: scale(0.9); } } 802 803 .positions { 804 width: 900px; 805 margin: 0 auto; } 806 807 .positions-wrap { 808 margin: 0 0 0 0; 809 display: flex; 810 flex-wrap: wrap; } 811 812 .positions-item { 813 display: flex; 814 width: 100%; 815 position: relative; 816 margin: 0 0 24px 0; 817 width: 100%; 818 border-color: #E0E3E6; 819 border-style: solid; 820 cursor: pointer; } 821 822 .positions-item:last-child { 823 margin-bottom: 0; } 824 825 .positions-item-inner { 826 display: flex; 827 position: relative; 828 width: 100%; 829 flex-direction: column; 830 justify-content: space-between; 831 background-color: #FFFFFF; 832 border-radius: 12px; 833 z-index: 200; } 834 835 .positions-item:hover .positions-arrow { 836 background-color: rgba(67, 96, 223, 0.14); } 837 838 .positions-item:hover { 839 z-index: 998; } 840 841 .positions-item:hover .positions-item-background { 842 transform: scale(1.01); 843 box-shadow: 0 4px 13px 0 rgba(193, 201, 208, 0.57); } 844 845 .positions-item-top { 846 position: relative; 847 padding: 24px 64px 24px 24px; } 848 849 .positions-arrow { 850 display: block; 851 position: absolute; 852 width: 24px; 853 height: 24px; 854 right: 16px; 855 top: 50%; 856 margin: -12px 0 0 0; 857 border-radius: 50%; 858 background-color: rgba(67, 96, 223, 0.1); 859 background-image: url(../img/link-arrow.svg); 860 background-size: 24px; 861 background-position: center; 862 background-repeat: no-repeat; } 863 864 .positions-item h2 { 865 font-size: 18px; 866 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 867 padding: 0 0 4px 0; } 868 869 .positions-item h2 span { 870 color: #8D99A4; } 871 872 .positions-item:hover h2 { 873 color: #4360DF; } 874 875 .positions-item p { 876 font-size: 24px; 877 font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 878 color: #8D99A4; 879 font-size: 16px; 880 line-height: 24px; } 881 882 .reward { 883 padding: 16px 24px; 884 border-top: 1px solid #E8EBED; 885 border-radius: 0 0 12px 12px; 886 display: flex; 887 align-items: center; } 888 889 .reward .reward-amount { 890 display: block; 891 background-color: rgba(67, 96, 223, 0.1); 892 color: #4360df; 893 padding: 6px 14px 5px; 894 margin: 0 12px 0 0; 895 border-radius: 8px; 896 letter-spacing: 1px; 897 font-size: 14px; 898 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 899 transition: all .2s ease; } 900 901 .positions-item p.reward-description { 902 display: block; 903 font-size: 16px; 904 line-height: 22px; 905 padding: 0 0 0 0; } 906 907 @media (max-width: 948px) { 908 .positions { 909 width: 100%; 910 margin: 0 auto; } 911 .positions-item { 912 margin: 0 0 12px 0; 913 height: auto; } } 914 915 @media (max-width: 760px) { 916 .positions-arrow { 917 margin: 0; 918 top: 24px; } 919 .positions-item-top { 920 padding-right: 48px; } 921 .reward-description { 922 margin: 0 0 0 0; } } 923 924 /* People */ 925 .people { 926 display: flex; 927 flex-wrap: wrap; 928 width: 900px; 929 margin: 0 auto; } 930 931 .person { 932 height: 200px; 933 width: 33.333%; 934 padding: 0 12px; 935 margin: 0 0 24px 0; } 936 937 .person h3 { 938 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 939 font-size: 18px; 940 line-height: 24px; 941 margin: 0 0 6px 0; } 942 943 .person.person--extra h3 { 944 color: #4360DF; } 945 946 .person .button { 947 position: absolute; 948 bottom: 24px; 949 left: 24px; 950 display: block; 951 background-color: rgba(67, 96, 223, 0.1); 952 color: #4360df; } 953 954 .person .button:hover { 955 background-color: rgba(67, 96, 223, 0.2); } 956 957 .person p { 958 font-size: 16px; 959 line-height: 20px; 960 color: #8D99A4; } 961 962 .person-inner { 963 position: relative; 964 height: 200px; 965 background-color: #FFFFFF; 966 border-radius: 12px; 967 width: 100%; 968 padding: 24px; } 969 970 .person-image { 971 position: absolute; 972 left: 24px; 973 bottom: 24px; 974 width: 70px; 975 height: 70px; 976 border-radius: 50%; 977 background-color: #eef2f5; 978 background-size: cover; 979 background-position: center; } 980 981 .person--denis { 982 background-image: url("../img/denis.png"); } 983 984 .person--pat { 985 background-image: url("../img/pat.png"); } 986 987 .person--hester { 988 background-image: url("../img/hester2.jpg"); } 989 990 .person--euge { 991 background-image: url("../img/euge.png"); } 992 993 .person--andrei { 994 background-image: url("../img/andrei.png"); } 995 996 .person--maciej { 997 background-image: url("../img/maciej.jpg"); } 998 999 .person--philip { 1000 background-image: url("../img/philip.png"); } 1001 1002 .person--simon { 1003 background-image: url("../img/simon.png"); } 1004 1005 .person--gheorghe { 1006 background-image: url("../img/gheorghe.jpeg"); } 1007 1008 .person--john { 1009 background-image: url("../img/john.jpg"); } 1010 1011 .person:nth-child(1), 1012 .person:nth-child(4), 1013 .person:nth-child(7) { 1014 padding-left: 0; } 1015 1016 .person:nth-child(3), 1017 .person:nth-child(6), 1018 .person:nth-child(9) { 1019 padding-right: 0; } 1020 1021 .person:nth-child(7), 1022 .person:nth-child(8), 1023 .person:nth-child(9) { 1024 margin: 0 0 0 0; } 1025 1026 @media (max-width: 948px) { 1027 .people { 1028 width: 100%; 1029 padding: 0; } 1030 .person { 1031 height: 220px; 1032 width: 33.333%; 1033 padding: 0 6px; 1034 margin: 0 0 12px 0; } 1035 .person-inner { 1036 height: 220px; } } 1037 1038 @media (max-width: 760px) { 1039 .person { 1040 width: 50%; } 1041 .person:nth-child(odd) { 1042 padding-left: 0; 1043 padding-right: 6px; } 1044 .person:nth-child(even) { 1045 padding-right: 0; 1046 padding-left: 6px; } 1047 .person:nth-last-child(1), 1048 .person:nth-last-child(2) { 1049 margin: 0 0 0 0; } } 1050 1051 @media (max-width: 540px) { 1052 .person { 1053 width: 100%; 1054 margin: 0 0 12px 0; 1055 padding: 0; 1056 height: 190px; } 1057 .person-inner { 1058 height: 190px; } 1059 .person:nth-child(odd), 1060 .person:nth-child(even) { 1061 margin: 0 0 12px 0; 1062 padding: 0; } 1063 .person:last-child { 1064 margin: 0 0 0 0; 1065 padding: 0; } } 1066 1067 .blog-posts { 1068 display: flex; 1069 flex-wrap: wrap; 1070 width: 900px; 1071 margin: 0 auto; } 1072 1073 .blog-post { 1074 height: 300px; 1075 width: 33.333%; 1076 padding: 0 12px; 1077 margin: 0 0 0 0; } 1078 1079 .blog-post h3 { 1080 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1081 font-size: 18px; 1082 line-height: 24px; 1083 margin: 0 0 6px 0; } 1084 1085 .blog-post p { 1086 font-size: 16px; 1087 line-height: 20px; 1088 color: #8D99A4; } 1089 1090 .blog-post span { 1091 display: block; 1092 position: absolute; 1093 left: 24px; 1094 bottom: 24px; 1095 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1096 text-decoration: none; 1097 font-size: 14px; 1098 text-transform: uppercase; 1099 letter-spacing: 1px; 1100 color: #8D99A4; 1101 line-height: 24px; } 1102 1103 a.blog-post-inner:hover span { 1104 color: #4360DF; 1105 opacity: 1; 1106 transform: translate3d(0, 0, 0); } 1107 1108 a.blog-post-inner { 1109 display: block; 1110 text-decoration: none; 1111 height: 240px; 1112 position: relative; 1113 background-color: #FFFFFF; 1114 border-radius: 12px; 1115 width: auto; 1116 padding: 24px; } 1117 1118 a.blog-post-inner h3 { 1119 color: #000000; } 1120 1121 a.blog-post-inner p { 1122 color: #8D99A4; } 1123 1124 a.blog-post-inner:hover h3 { 1125 color: #4360DF; } 1126 1127 .blog-post:nth-child(1) { 1128 padding-left: 0; } 1129 1130 .blog-post:nth-child(3) { 1131 padding-right: 0; } 1132 1133 @media (max-width: 948px) { 1134 .blog-posts { 1135 width: 100%; } 1136 .blog-post { 1137 height: auto; 1138 width: 100%; 1139 padding: 0; 1140 margin: 0 0 12px 0; } 1141 .blog-post:last-child { 1142 margin-bottom: 0; } 1143 a.blog-post-inner { 1144 height: auto; } 1145 .blog-post span { 1146 position: static; 1147 margin: 24px 0 0 0; 1148 color: #4360DF; } } 1149 1150 .social-blocks { 1151 display: flex; 1152 flex-wrap: wrap; 1153 width: 900px; 1154 margin: 0 auto 24px; } 1155 1156 .social-block { 1157 width: 33.333%; 1158 padding: 0 12px; 1159 margin: 0 0 0 0; 1160 cursor: pointer; } 1161 1162 .social-block:nth-child(1) { 1163 padding-left: 0; } 1164 1165 .social-block:nth-child(3) { 1166 padding-right: 0; } 1167 1168 .social-block p { 1169 text-decoration: none; 1170 font-size: 16px; 1171 line-height: 20px; 1172 color: #8D99A4; } 1173 1174 a.social-block-inner { 1175 display: flex; 1176 align-items: flex-start; 1177 flex-direction: column; 1178 justify-content: space-between; 1179 height: 240px; 1180 box-sizing: border-box; 1181 position: relative; 1182 background-color: #FFFFFF; 1183 border-radius: 12px; 1184 padding: 24px; 1185 text-decoration: none; } 1186 1187 a.social-block-inner .social-block-logo svg path { 1188 fill: #8D99A4; } 1189 1190 a.social-block-inner:hover .social-block-logo svg path { 1191 fill: #4360DF; } 1192 1193 @media (max-width: 948px) { 1194 .social-blocks { 1195 width: 100%; 1196 margin: 0 auto 12px; } 1197 .social-block { 1198 width: 100%; 1199 height: auto; 1200 padding: 0; 1201 margin: 0 0 12px 0; } 1202 a.social-block-inner { 1203 height: auto; 1204 padding: 24px 24px 24px 24px; } 1205 .social-block-logo { 1206 margin-bottom: 16px; } 1207 .social-block:last-child { 1208 margin: 0; } } 1209 1210 .overlay { 1211 position: fixed; 1212 top: 0; 1213 left: 0; 1214 width: 100%; 1215 height: 100%; 1216 background-color: rgba(120, 135, 148, 0.6); 1217 z-index: 999; 1218 box-sizing: border-box; 1219 overflow: auto; 1220 opacity: 0; 1221 transform: translate3d(0, 0, 0) scale(1); 1222 visibility: hidden; 1223 transition: visibility .5s linear 0s, opacity .2s ease; } 1224 1225 .overlay.overlay--shown { 1226 transition-delay: 0s; 1227 visibility: visible; 1228 opacity: 1; 1229 transform: translate3d(0, 0, 0) scale(1); } 1230 1231 .popup { 1232 box-sizing: border-box; 1233 width: 900px; 1234 margin: 132px auto 40px; 1235 background-color: white; 1236 border-radius: 10px; 1237 padding: 0px; 1238 position: relative; 1239 box-shadow: 0 3px 7px 0 rgba(175, 192, 202, 0.41); 1240 opacity: 0; 1241 transform: translate3d(0, 15px, 0) scale(0.96); 1242 visibility: hidden; 1243 transition-delay: .2s; 1244 transition: visibility 0.5s linear 0s, opacity 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425); } 1245 1246 .popup a { 1247 color: #57A7ED; 1248 text-decoration: none; } 1249 1250 .popup.popup--shown { 1251 transition-delay: 0s; 1252 visibility: visible; 1253 opacity: 1; 1254 transform: translate3d(0, 0, 0) scale(1); } 1255 1256 .popup__steps { 1257 font-size: 14px; 1258 color: #97A4AD; 1259 padding: 32px 0 4px 32px; } 1260 1261 .popup__title { 1262 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1263 font-size: 22px; 1264 line-height: 23px; 1265 padding: 0 0 12px 32px; } 1266 1267 .popup__text { 1268 font-size: 18px; 1269 line-height: 26px; 1270 padding: 0 32px 24px 32px; 1271 color: #70808D; } 1272 1273 .popup__text h5 { 1274 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1275 font-size: 14px; 1276 text-transform: uppercase; 1277 letter-spacing: 1px; 1278 color: #49555F; 1279 margin: 16px 0 0 0; } 1280 1281 .popup__text h3 { 1282 font-size: 18px; 1283 color: #000000; 1284 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1285 padding: 8px 0 4px 0; } 1286 1287 .popup__text p { 1288 padding: 0 0 8px 0; } 1289 1290 h3.terms-header { 1291 font-size: 18px; 1292 line-height: 26px; 1293 padding: 0 32px 8px 32px; 1294 color: #000000; 1295 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } 1296 1297 .popup__button { 1298 position: absolute; 1299 top: -56px; 1300 width: 42px; 1301 height: 42px; 1302 background-color: #ffffff; 1303 border-radius: 50%; 1304 opacity: .7; 1305 cursor: pointer; 1306 transition: opacity .2s ease; } 1307 1308 .popup__button:hover { 1309 opacity: 1; } 1310 1311 .popup__button:hover { 1312 opacity: 1; } 1313 1314 .popup__button::after { 1315 content: ""; 1316 display: block; 1317 position: absolute; 1318 top: 13px; 1319 left: 13px; 1320 width: 16px; 1321 height: 16px; 1322 background-size: 16px; 1323 background-repeat: no-repeat; } 1324 1325 .popup__button.popup__button--close { 1326 right: 0; } 1327 1328 .popup__button.popup__button--close::after { 1329 background-image: url(../img/icon-close.svg); } 1330 1331 .popup__button.popup__button--minimize { 1332 right: 54px; } 1333 1334 .popup__button.popup__button--minimize::after { 1335 background-image: url(../img/icon-minimize.svg); } 1336 1337 .popup__buttons a { 1338 margin: 0 10px 0 0; } 1339 1340 .terms { 1341 background: #F6F9FA; 1342 border: 1px solid #E7ECEE; 1343 border-radius: 10px; 1344 height: 320px; 1345 overflow: scroll; 1346 font-size: 16px; 1347 line-height: 22px; 1348 color: #49555F; 1349 padding: 16px 16px 16px 24px; 1350 margin: 0 32px 0 32px; 1351 counter-reset: paragraph; } 1352 1353 .terms h6 { 1354 padding-top: 15px; 1355 padding-bottom: 10px; 1356 font-weight: 600; } 1357 1358 .terms a { 1359 color: #57a7ed; } 1360 1361 .terms strong { 1362 font-weight: 700; } 1363 1364 .terms ul { 1365 padding: 0 0 25px 0; 1366 list-style-type: circle; } 1367 1368 .terms ul li { 1369 margin-left: 15px; 1370 padding-bottom: 5px; } 1371 1372 .address-wrap { 1373 padding: 0 0 32px 0; } 1374 1375 .address__row { 1376 display: flex; 1377 background: #F6F9FA; 1378 border: 1px solid #E7ECEE; 1379 border-bottom: 0; 1380 border-radius: 10px; 1381 margin: 0 32px 0 32px; } 1382 1383 .address__row:first-child { 1384 border-radius: 10px 10px 0 0; } 1385 1386 .address__row:last-child { 1387 border-radius: 0 0 10px 10px; 1388 border-bottom: 1px solid #E7ECEE; } 1389 1390 .address__column { 1391 width: 100%; 1392 padding: 24px; } 1393 1394 .address__column.address__column--half { 1395 width: 50%; } 1396 1397 .address__column.address__column--third { 1398 width: 33.3%; 1399 border-right: 1px solid #E7ECEE; } 1400 1401 .address__column.address__column--highlighted { 1402 background-color: #D7F4E8; 1403 border-color: #B7EBD5; } 1404 1405 .address__column.address__column--half:first-child { 1406 border-right: 1px solid #E7ECEE; } 1407 1408 .address__column.address__column--third:last-child { 1409 border-right: 0; } 1410 1411 .address__label { 1412 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1413 font-size: 14px; 1414 color: #A5B0B9; 1415 letter-spacing: 1px; 1416 text-transform: uppercase; 1417 padding: 0 0 8px 0; } 1418 1419 .address__column--highlighted .address__label { 1420 color: #37C68A; } 1421 1422 .address__label strong { 1423 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } 1424 1425 .address__value { 1426 font-size: 21px; 1427 color: #545F69; } 1428 1429 .address__column--highlighted .address__value { 1430 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1431 color: #37C68A; } 1432 1433 .terms p { 1434 padding: 0 0 18px 0; } 1435 1436 .terms p:last-child { 1437 padding: 0 0 0 0; } 1438 1439 .checkbox-wrap { 1440 position: relative; 1441 padding: 12px 32px; 1442 display: flex; 1443 align-items: center; 1444 justify-content: flex-start; } 1445 1446 .checkbox-inner { 1447 position: relative; 1448 width: 24px; 1449 height: 24px; 1450 margin: 0 16px 0 0; } 1451 1452 input[type=checkbox] { 1453 visibility: hidden; 1454 width: 24px; 1455 height: 24px; } 1456 1457 .checkbox-wrap label { 1458 cursor: pointer; 1459 position: absolute; 1460 width: 24px; 1461 height: 24px; 1462 top: 0; 1463 left: 0; 1464 background-color: #FFF; 1465 border: 1px solid #CED5D7; 1466 border-radius: 5px; 1467 transition: border-color .2s ease, background-color .2s ease; } 1468 1469 .checkbox-wrap label:after { 1470 content: ""; 1471 opacity: 0; 1472 position: absolute; 1473 width: 16px; 1474 height: 16px; 1475 background-image: url(../img/icon-checkbox.svg); 1476 background-size: 16px; 1477 top: 4px; 1478 left: 4px; 1479 transform: scale(0.8); 1480 transition: transform .3s ease, opacity .2s ease; } 1481 1482 .checkbox-wrap input[type=checkbox]:checked + label:after { 1483 opacity: 1; 1484 transform: scale(1); } 1485 1486 .checkbox-wrap input[type=checkbox]:checked + label { 1487 background-color: #57A7ED; 1488 border-color: #57A7ED; } 1489 1490 .checkbox-wrap input[type=checkbox]:disabled + label { 1491 background-color: #F6F9FA; 1492 border-color: #E7ECEE; } 1493 1494 .pseudo-label { 1495 font-size: 16px; 1496 color: #49555F; 1497 line-height: 24px; } 1498 1499 .popup__footer { 1500 padding: 24px 32px 24px 32px; 1501 margin: 0 0 0 0; } 1502 1503 .popup__footer-title { 1504 text-align: left; 1505 font-size: 16px; 1506 padding: 0 0 24px 0; } 1507 1508 .input-wrap { 1509 width: 100%; 1510 display: flex; 1511 align-items: center; 1512 justify-content: space-between; 1513 position: relative; } 1514 1515 .button.button--apply { 1516 background-color: #4360df; 1517 color: #ffffff; } 1518 1519 .button.button--apply:hover { 1520 background-color: rgba(67, 96, 223, 0.8); 1521 color: #ffffff; } 1522 1523 .button.button--recommend { 1524 background-color: rgba(67, 96, 223, 0.1); 1525 color: #4360df; } 1526 1527 .button.button--recommend:hover { 1528 background-color: rgba(67, 96, 223, 0.2); 1529 color: #4360df; } 1530 1531 .tooltip { 1532 display: none; 1533 position: absolute; 1534 font-size: 14px; 1535 line-height: 17px; 1536 color: #FFFFFF; 1537 background-color: rgba(74, 92, 105, 0.8); 1538 padding: 12px; 1539 text-align: center; 1540 width: 220px; 1541 border-radius: 8px; 1542 top: -72px; 1543 right: 10px; 1544 opacity: 0; 1545 transform: translate3d(0, -8px, 0) scale(1); 1546 visibility: hidden; 1547 transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease; } 1548 1549 .tooltip.tooltip--shown { 1550 transition-delay: 0s; 1551 visibility: visible; 1552 opacity: 1; 1553 transform: translate3d(0, 0, 0) scale(1); } 1554 1555 .tooltip::after { 1556 content: ""; 1557 position: absolute; 1558 width: 0; 1559 height: 0; 1560 border-style: solid; 1561 border-width: 5px 6px 0 6px; 1562 border-color: rgba(74, 92, 105, 0.8) transparent transparent transparent; 1563 bottom: -5px; 1564 left: 50%; 1565 margin: 0 0 0 -4px; } 1566 1567 .popup-name-field { 1568 text-align: left; 1569 background-color: transparent; 1570 color: #49555F; 1571 width: 200px; 1572 padding: 0 0; 1573 margin: 0 24px 0 0; 1574 font-family: 'PostGrotesk-Book', sans-serif; 1575 box-sizing: border-box; 1576 height: 45px; 1577 line-height: 45px; 1578 border-radius: 0; 1579 border-bottom: 1px solid #D2DDE1; 1580 transition: background-color .2s ease, border-color .2s ease, border-width .2s ease; 1581 font-weight: 400; 1582 font-size: 16px; } 1583 1584 .popup-name-field::-webkit-input-placeholder { 1585 color: #AEB5BA; } 1586 1587 .popup-name-field:focus { 1588 border-color: #CED5D7; } 1589 1590 @media (max-width: 960px) { 1591 .overlay { 1592 padding: 0 24px; 1593 box-sizing: border-box; } 1594 .popup { 1595 width: 100%; } 1596 .address__row { 1597 margin: 0 16px 0 16px; 1598 flex-wrap: wrap; } 1599 .address__column { 1600 padding: 16px; } 1601 .address__column.address__column--long { 1602 overflow: scroll; } 1603 .address__column.address__column--half, 1604 .address__column.address__column--third { 1605 width: 100%; 1606 border-right: 0; 1607 border-bottom: 1px solid #E7ECEE; } 1608 .address__column.address__column--half:first-child { 1609 border-right: 0; 1610 border-bottom: 1px solid #E7ECEE; } 1611 .address__column.address__column--third:last-child { 1612 border-bottom: none; } 1613 .address__label { 1614 padding: 0 0 4px 0; } 1615 .address__value { 1616 font-size: 18px; } } 1617 1618 @media (max-width: 600px) { 1619 .overlay { 1620 padding: 0 16px; } 1621 .popup { 1622 margin: 96px auto 64px; } 1623 .popup__steps { 1624 padding: 18px 0 4px 16px; } 1625 .popup__title { 1626 font-size: 20px; 1627 padding: 0 0 12px 16px; } 1628 .popup__text { 1629 font-size: 16px; 1630 line-height: 24px; 1631 padding: 0 16px 16px 16px; } 1632 .terms { 1633 margin: 0 16px 0 16px; 1634 padding: 12px 12px 12px 24px; 1635 height: 220px; } 1636 .checkbox-wrap { 1637 padding: 8px 16px; 1638 align-items: flex-start; } 1639 .checkbox-inner { 1640 margin: 3px 16px 0 0; } 1641 .popup__footer { 1642 padding: 16px 16px 18px 16px; } 1643 .input-wrap { 1644 align-items: center; 1645 justify-content: center; } 1646 .button.button--apply { 1647 width: 100%; 1648 text-align: center; 1649 margin-right: 6px; } 1650 .button.button--recommend { 1651 width: 100%; 1652 text-align: center; 1653 margin-left: 6px; } 1654 .button.button--recommend span { 1655 display: none; } 1656 .tooltip { 1657 right: 50%; 1658 top: auto; 1659 bottom: -68px; 1660 z-index: 200; 1661 margin: 0 -110px 0 0; 1662 transform: translate3d(0, 8px, 0) scale(1); } 1663 .tooltip::after { 1664 bottom: auto; 1665 top: -5px; 1666 border-width: 0 6px 5px 6px; 1667 border-color: transparent transparent rgba(74, 92, 105, 0.8) transparent; } 1668 .popup__footer-title { 1669 padding: 0 0 12px 0; } 1670 .popup-name-field { 1671 margin: 0 16px 12px 16px; 1672 width: 100%; } 1673 .button.button--agree { 1674 width: 100%; } 1675 .address-wrap { 1676 padding: 0 0 16px 0; } 1677 .address-wrap__inner { 1678 text-align: left; 1679 margin: 0 16px 0 16px; 1680 padding: 12px; 1681 font-size: 16px; 1682 overflow: scroll; } } 1683 1684 .footer { 1685 width: 100%; 1686 display: flex; 1687 justify-content: center; 1688 background-color: #262A39; 1689 position: relative; 1690 z-index: 998; 1691 margin-top: 10vh; } 1692 1693 .footer-inner { 1694 display: flex; 1695 flex-direction: column; 1696 align-items: center; 1697 justify-content: space-between; 1698 width: 1024px; } 1699 1700 .footer-logo-wrap { 1701 width: 317px; 1702 display: flex; 1703 text-align: center; } 1704 1705 .footer-logo-wrap__inner { 1706 width: 100%; 1707 display: flex; 1708 flex-direction: column; 1709 justify-content: space-between; 1710 align-items: center; 1711 padding: 32px 0 75px 0; } 1712 1713 a.footer-logo { 1714 display: block; 1715 width: 52px; 1716 height: 52px; 1717 background-size: 52px; 1718 background-image: url(../img/footer-logo.svg); } 1719 1720 a.footer-logo:hover { 1721 opacity: .8; } 1722 1723 .footer-address { 1724 color: #FFFFFF; 1725 padding: 20px 0 0 0; 1726 opacity: .5; } 1727 1728 .footer-table { 1729 width: 317px; 1730 display: flex; 1731 justify-content: space-between; } 1732 1733 .footer-table__column { 1734 box-sizing: border-box; 1735 padding: 56px 0; } 1736 1737 .footer-header { 1738 color: #FFFFFF; 1739 opacity: .5; 1740 font-size: 17px; 1741 margin: 0 0 40px 0; } 1742 1743 .footer-link { 1744 height: 32px; 1745 line-height: 32px; 1746 font-size: 16px; 1747 margin: 0 0 15px 0; } 1748 1749 .footer-link a { 1750 text-decoration: none; 1751 display: flex; 1752 align-items: center; } 1753 1754 .footer-icon { 1755 display: inline-block; 1756 width: 32px; 1757 height: 32px; 1758 background-color: rgba(255, 255, 255, 0.1); 1759 border-radius: 50%; 1760 margin: 0 15px 0 0; 1761 background-repeat: no-repeat; 1762 background-size: 24px; 1763 background-position: center; } 1764 1765 .footer-link--fb .footer-icon { 1766 background-image: url(../img/icon_fb.svg); } 1767 1768 .footer-link--tw .footer-icon { 1769 background-image: url(../img/icon_tw2.svg); } 1770 1771 .footer-link--sl .footer-icon { 1772 background-image: url(../img/icon_sl2.svg); } 1773 1774 .footer-link--gh .footer-icon { 1775 background-image: url(../img/icon_gh2.svg); } 1776 1777 .footer-link--rd .footer-icon { 1778 background-image: url(../img/icon_rd2.svg); } 1779 1780 .footer-link--yt .footer-icon { 1781 background-image: url(../img/icon_yt.svg); } 1782 1783 .footer-link a { 1784 color: #FFFFFF; } 1785 1786 .footer-link a:hover { 1787 opacity: .8; } 1788 1789 .language-switcher { 1790 font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1791 color: #FFFFFF; 1792 -webkit-appearance: none; 1793 font-size: 16px; 1794 line-height: 32px; 1795 padding: 0 24px 0 0; 1796 background-image: url(../img/icon_dropdown-white.svg); 1797 background-size: 24px; 1798 background-repeat: no-repeat; 1799 background-position: right center; } 1800 1801 .language-switcher:focus { 1802 outline: none; } 1803 1804 @media (max-width: 1140px) { 1805 .footer-inner { 1806 width: 820px; 1807 justify-content: space-around; } 1808 .footer-logo-wrap { 1809 width: 200px; } } 1810 1811 @media (max-width: 767px) { 1812 .footer { 1813 border-top: 0px; } 1814 .footer.footer--page { 1815 border-top: 0px solid #4A5C69; } 1816 .footer-inner { 1817 padding: 30px 0 0 0; 1818 flex-direction: column; } 1819 .footer-table { 1820 flex-direction: column; 1821 align-items: center; 1822 justify-content: center; } 1823 .footer-table__column { 1824 text-align: center; 1825 padding: 10px 16px; } 1826 .footer-logo-wrap { 1827 width: auto; 1828 order: 2; } 1829 .footer-header { 1830 margin: 0 0 10px 0; } 1831 .footer-logo-wrap__inner { 1832 width: 100%; 1833 padding: 32px 0 40px 0; 1834 align-items: center; 1835 text-align: center; } 1836 .footer-link { 1837 text-align: center; 1838 height: 24px; 1839 line-height: 24px; 1840 margin: 0 0 10px 0; } 1841 .footer-link a { 1842 justify-content: center; 1843 text-align: center; } 1844 .footer-icon { 1845 display: none; } } 1846 1847 body { 1848 font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1849 font-weight: 400; 1850 font-size: 15px; 1851 line-height: 25px; 1852 color: #000000; 1853 text-rendering: optimizeLegibility; 1854 -webkit-font-smoothing: antialiased; 1855 background-color: #EEF2F5; } 1856 1857 .home-wrap { 1858 background-color: #EEF2F5; 1859 position: relative; 1860 z-index: 5; 1861 width: 1200px; 1862 border-radius: 12px; 1863 margin: 0 auto; 1864 position: relative; 1865 align-content: center; 1866 display: flex; 1867 flex-direction: column; } 1868 1869 @media (max-width: 1248px) { 1870 .home-wrap { 1871 width: 100%; 1872 background-color: transparent; 1873 padding: 0 24px; } } 1874 1875 @media (max-width: 996px) { 1876 .home-wrap { 1877 padding: 0 12px; 1878 overflow: hidden; } } 1879 1880 .button, a.button { 1881 display: block; 1882 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1883 text-decoration: none; 1884 font-size: 14px; 1885 text-transform: uppercase; 1886 letter-spacing: 1px; 1887 color: #FFFFFF; 1888 line-height: 24px; 1889 padding: 10px 32px 9px; 1890 border-radius: 22px; 1891 background-color: rgba(0, 0, 0, 0.1); } 1892 1893 .button.button--secondary { 1894 background-color: rgba(255, 255, 255, 0.1); } 1895 1896 .button:hover, a.button:hover { 1897 background-color: rgba(0, 0, 0, 0.2); } 1898 1899 .button.button--secondary:hover, a.button.button--secondary:hover { 1900 background-color: rgba(255, 255, 255, 0.2); } 1901 1902 .section-header { 1903 margin: 0 auto; 1904 width: 900px; 1905 padding: 100px 0 32px 0; } 1906 1907 .section-header h2 { 1908 font-size: 26px; 1909 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1910 padding: 0 0 8px 0; } 1911 1912 .section-header p { 1913 font-size: 16px; 1914 width: 592px; 1915 color: #8D99A4; 1916 line-height: 24px; } 1917 1918 @media (max-width: 948px) { 1919 .section-header { 1920 width: 100%; 1921 padding: 42px 0 16px 0; } 1922 .section-header h2 { 1923 font-size: 22px; 1924 padding: 0 0 4px 0; } 1925 .section-header p { 1926 width: 100%; } } 1927 1928 .inner-header { 1929 margin: 0 auto; 1930 display: flex; 1931 align-items: center; 1932 flex-direction: column; 1933 width: 480px; 1934 padding: 70px 0 32px 0; 1935 text-align: center; } 1936 1937 .inner-header h2 { 1938 font-size: 26px; 1939 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1940 padding: 0 0 8px 0; } 1941 1942 .inner-header p { 1943 font-size: 16px; 1944 color: #8D99A4; 1945 line-height: 24px; } 1946 1947 .sections { 1948 width: 1200px; 1949 display: flex; 1950 align-items: center; 1951 flex-direction: column; 1952 margin: 0 auto; 1953 background-color: #FFFFFF; 1954 border-radius: 12px; } 1955 1956 .section { 1957 width: 900px; 1958 height: 460px; 1959 display: flex; 1960 align-items: center; 1961 justify-content: space-between; } 1962 1963 .section:last-child { 1964 border-bottom: none; } 1965 1966 .section__text { 1967 width: 360px; 1968 text-align: left; } 1969 1970 .section__text h2 { 1971 font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1972 font-size: 24px; 1973 line-height: 30px; 1974 color: #000000; 1975 margin: 0 0 8px 0; } 1976 1977 .section__text .text { 1978 font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 1979 font-size: 16px; 1980 line-height: 25px; 1981 color: #8D99A4; } 1982 1983 .section__image { 1984 position: relative; 1985 width: 300px; 1986 height: 300px; } 1987 1988 .section-link-wrap { 1989 display: flex; 1990 align-items: center; 1991 margin: 16px 0 0 0; } 1992 1993 a.section-link { 1994 display: block; 1995 color: #4360DF; 1996 text-decoration: none; 1997 padding: 0 10px 0 0; } 1998 1999 a.section-link-icon { 2000 display: block; 2001 width: 24px; 2002 height: 24px; 2003 border-radius: 50%; 2004 background-color: rgba(67, 96, 223, 0.1); 2005 background-image: url(../img/link-arrow.svg); 2006 background-size: 24px; 2007 background-position: center; 2008 background-repeat: no-repeat; } 2009 2010 .section__text .text:hover a.section-link-icon { 2011 opacity: 1; 2012 transform: scale(1); } 2013 2014 .section-link-wrap:hover a.section-link-icon { 2015 background-color: rgba(67, 96, 223, 0.14); } 2016 2017 .section:nth-child(odd) .section__text { 2018 order: 1; } 2019 2020 .section:nth-child(odd) .section__image { 2021 order: 0; } 2022 2023 @media (max-width: 1248px) { 2024 .sections { 2025 width: 100%; } 2026 .section { 2027 width: 900px; } } 2028 2029 @media (max-width: 996px) { 2030 .inner-header { 2031 padding: 32px 24px 32px; 2032 width: 420px; } 2033 .inner-header h2 { 2034 font-size: 22px; } 2035 .section { 2036 width: 100%; 2037 height: 580px; 2038 padding: 0 24px; 2039 flex-direction: column; 2040 padding: 0; 2041 border-bottom: 1px solid #E7E5EB; } 2042 .section__text { 2043 width: 420px; 2044 text-align: center; 2045 padding: 16px 24px 32px; } 2046 .section__text h2 { 2047 font-size: 20px; 2048 line-height: 24px; 2049 margin: 0 0 4px 0; } 2050 .section-link-wrap { 2051 justify-content: center; } 2052 a.section-link-icon { 2053 opacity: 1; 2054 transform: scale(1); } 2055 .section .section__text { 2056 order: 1; } 2057 .section .section__image { 2058 order: 0; 2059 margin: 36px 0 0 0; } } 2060 2061 @media (max-width: 640px) { 2062 .inner-header { 2063 padding: 32px 24px 32px; 2064 width: 100%; } 2065 .inner-header h2 { 2066 font-size: 22px; } 2067 .section__text { 2068 width: 100%; 2069 padding: 16px 32px 32px; } 2070 .section__image { 2071 width: 260px; 2072 height: 300px; 2073 margin: 12px 0 0 0; } }