v2.css
1 body{ 2 font-family: 'Roboto', sans-serif !important; 3 } 4 header{ 5 position:relative; 6 } 7 8 .offcanvas-collapse { 9 position: fixed; 10 height: 100%; 11 z-index: 999; 12 top: 0; /* Height of navbar */ 13 bottom: 0; 14 right: 100%; 15 left:-300px; 16 width: 300px; 17 padding-right: 1rem; 18 padding-left: 1rem; 19 overflow-y: auto; 20 visibility: hidden; 21 background-color: #01264D; 22 transition-timing-function: ease-in-out; 23 transition-duration: .3s; 24 transition-property: left, visibility; 25 } 26 27 .offcanvas-collapse { 28 align-items:start; 29 -moz-background-clip: padding; /* Firefox 3.6 */ 30 -webkit-background-clip: padding; /* Safari 4? Chrome 6? */ 31 background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ 32 border-right:5px solid rgba(0, 0, 0, 0.2); 33 } 34 35 /* Makes the nav visibile with the open class */ 36 .offcanvas-collapse.open { 37 left: 0; 38 visibility: visible; 39 } 40 41 42 .navbar-expand-lg .navbar-nav { 43 -ms-flex-direction: column; 44 flex-direction: column; 45 } 46 47 48 .nav-scroller { 49 position: relative; 50 z-index: 2; 51 height: 2.75rem; 52 overflow-y: hidden; 53 } 54 55 .nav-scroller .nav { 56 display: -ms-flexbox; 57 display: flex; 58 -ms-flex-wrap: nowrap; 59 flex-wrap: nowrap; 60 padding-bottom: 1rem; 61 margin-top: -1px; 62 overflow-x: auto; 63 color: rgba(255, 255, 255, .75); 64 text-align: center; 65 white-space: nowrap; 66 -webkit-overflow-scrolling: touch; 67 } 68 .u-link-ghost { 69 color: #fff !important; 70 } 71 .c-navigation__trigger { 72 background: transparent; 73 border: 0; 74 } 75 .c-icon { 76 display: inline-block; 77 fill: currentColor; 78 height: 24px; 79 stroke-width: 0; 80 stroke: currentColor; 81 vertical-align: baseline; 82 width: 24px; 83 } 84 .mobileMenu li{ 85 padding:1.5rem 0; 86 } 87 .mobileMenu li a{ 88 font-size: 18px; 89 color: #FFFFFF; 90 transition: color .2s ease; 91 } 92 .mobileMenu li a:hover{ 93 font-size: 18px; 94 color: #FAB266; 95 transition: color .2s ease; 96 text-decoration:none; 97 } 98 .mobileMenu li a img{ 99 max-width: 45px; 100 opacity:1; 101 transition: opacity .2s ease; 102 } 103 .mobileMenu li a img:hover{ 104 opacity:.6; 105 transition: opacity .2s ease; 106 } 107 .mainNav{ 108 list-style-type: none; 109 } 110 .mainNav li{ 111 display:inline-block; 112 padding:0 2rem; 113 } 114 .mainNav li.social { 115 padding: 0 1rem; 116 } 117 .mainNav li:nth-child(5){ 118 padding: 0 1rem 0 2rem !important; 119 } 120 .mainNav li a{ 121 font-size: 18px; 122 color: #FFFFFF; 123 transition: color .2s ease; 124 } 125 .mainNav li a:hover{ 126 font-size: 18px; 127 color: #FAB266; 128 transition: color .2s ease; 129 text-decoration:none; 130 } 131 .mainNav li a img:hover{ 132 opacity:.6; 133 transition: opacity .2s ease; 134 } 135 .mainNav li a img{ 136 max-width:45px; 137 opacity:1; 138 transition: opacity .2s ease; 139 } 140 .top-logo{ 141 display: block; 142 height: 100px; 143 width: 300px; 144 background: url(../images/logo.svg) no-repeat; 145 background-size: 100%; 146 color: transparent; 147 font-size: 0; 148 line-height: 0; 149 } 150 .logo-negative{ 151 background: url(../images/Embark_Logo-01-01.svg) no-repeat; 152 } 153 154 header{ 155 /* background-image:url(../images/Hero.jpg); */ 156 background-size:cover; 157 background-repeat: no-repeat; 158 padding:3rem 0; 159 position: relative; 160 } 161 162 .orange-cta-lg{ 163 font-family: 'Roboto', sans-serif; 164 font-size: 18px; 165 font-weight:700; 166 color: #FFFFFF; 167 text-align: center; 168 height: 52px; 169 width: 196.11px; 170 border-radius: 5px; 171 padding: .9rem 2rem; 172 background-color: #FAB266; 173 transition:.2s ease; 174 border: 1px solid transparent; 175 } 176 .orange-cta-lg:hover { 177 transition:.2s ease; 178 color: #FAB266; 179 background-color:transparent; 180 text-decoration:none; 181 border: 1px solid #FAB266; 182 } 183 .pos-rel{ 184 position: relative; 185 } 186 .c-header__background { 187 height: 100%; 188 left: 0; 189 opacity:1; 190 position: absolute; 191 top: 0; 192 width: 100%; 193 background-image: url(../images/Hero.jpg); 194 background-position: center right; 195 background-repeat: no-repeat; 196 background-size: cover; 197 } 198 .inner-header{ 199 padding: 9rem 0px 12rem 0px; 200 } 201 .inner-header h1{ 202 font-family: 'Roboto', sans-serif; 203 font-weight: bold; 204 font-size: 58px; 205 color: #FFFFFF; 206 text-align: left; 207 line-height: 45px; 208 } 209 .inner-header h2 { 210 font-family: 'Roboto', sans-serif; 211 font-size: 24px; 212 color: #FFFFFF; 213 text-align: left; 214 line-height: 24px; 215 margin-top: 1.5rem; 216 margin-bottom: 3rem; 217 } 218 .floating-astro { 219 position: absolute; 220 z-index: 9; 221 left: 3%; 222 bottom: -12.5rem; 223 -webkit-transform: translatey(0px); 224 transform: translatey(0px); 225 -webkit-animation: float 6s ease-in-out infinite; 226 animation: float 6s ease-in-out infinite; 227 max-width: 400px; 228 } 229 .footer-link-cols { 230 padding: 4rem 0 3rem 0; 231 } 232 .footer-link-cols a{ 233 color: #FFFFFF; 234 font-family: 'Roboto', sans-serif; 235 font-size: 18px; 236 font-weight: bold; 237 line-height: 21px; 238 transition: .2s ease; 239 opacity: 1; 240 } 241 .footer-link-cols a:hover{ 242 transition: .2s ease; 243 opacity: .6; 244 text-decoration: none; 245 } 246 .footer-link-cols ul li{ 247 margin-bottom:1.2rem; 248 } 249 .footer-link-cols ul{ 250 margin-top:2rem !important; 251 } 252 .footer-link-cols .footer-widget .social-footer{ 253 list-style-type: none; 254 margin:0; 255 padding:0; 256 } 257 .footer-link-cols .footer-widget .social-footer li a img{ 258 max-width:35px; 259 margin-right:1rem; 260 } 261 .footer-link-cols .footer-widget .widget-header{ 262 font-size: 18px; 263 color: #5D7D97; 264 font-family: 'Roboto', sans-serif; 265 } 266 .footer-link-cols .footer-widget .links-footer{ 267 list-style-type: none; 268 margin:0; 269 padding:0; 270 } 271 .two-cols{ 272 columns: 2; 273 -webkit-columns: 2; 274 -moz-columns: 2; 275 } 276 @-webkit-keyframes float { 277 0% { 278 -webkit-transform: translatey(0px); 279 transform: translatey(0px); 280 } 281 50% { 282 -webkit-transform: translatey(-20px); 283 transform: translatey(-20px); 284 } 285 100% { 286 -webkit-transform: translatey(0px); 287 transform: translatey(0px); 288 } 289 } 290 291 @keyframes float { 292 0% { 293 -webkit-transform: translatey(0px); 294 transform: translatey(0px); 295 } 296 50% { 297 -webkit-transform: translatey(-20px); 298 transform: translatey(-20px); 299 } 300 100% { 301 -webkit-transform: translatey(0px); 302 transform: translatey(0px); 303 } 304 } 305 306 307 308 309 310 @-webkit-keyframes float2 { 311 0% { 312 -webkit-transform: translatey(0px); 313 transform: translatey(0px); 314 } 315 50% { 316 -webkit-transform: translatey(-20px); 317 transform: translatey(-20px); 318 } 319 100% { 320 -webkit-transform: translatey(0px); 321 transform: translatey(0px); 322 } 323 } 324 325 @keyframes float2 { 326 0% { 327 -webkit-transform: translatey(0px); 328 transform: translatey(0px); 329 } 330 50% { 331 -webkit-transform: translatey(-20px); 332 transform: translatey(-20px); 333 } 334 100% { 335 -webkit-transform: translatey(0px); 336 transform: translatey(0px); 337 } 338 } 339 .right-tool{ 340 background-image: url(../images/rt-bg.jpg); 341 background-size:cover; 342 padding: 6rem 0 0rem 0; 343 height: 100vh; 344 position:relative; 345 } 346 .righttool { 347 display: flex; 348 align-items: center; 349 justify-content: center; 350 flex-direction: column; 351 width: 100%; 352 text-align: center; 353 min-height: 100vh; 354 padding: 6rem 0 6rem 0; 355 background-image: url(../images/rt-bg.jpg); 356 background-size:cover; 357 align-items: center; 358 position:relative; 359 } 360 .explore-more{ 361 position: absolute; 362 bottom: 0; 363 left: 0; 364 right: 0; 365 overflow: hidden; 366 padding-bottom: 3rem; 367 } 368 .right-tool-header { 369 font-size: 76px; 370 line-height: 76px; 371 font-weight: bold; 372 color: #0B476D; 373 max-width: 500px; 374 margin: 0 auto; 375 } 376 .right-tool-sub { 377 font-size: 24px; 378 color: #080E1A; 379 text-align: center; 380 max-width: 500px; 381 margin: 2rem auto 0 auto; 382 } 383 .right-tool-logos { 384 margin-top: 6rem; 385 margin-bottom: 5rem; 386 } 387 .scroll{} 388 .scroll img{ 389 opacity:.41; 390 } 391 .scroll p { 392 font-size: 12px; 393 font-style: italic; 394 margin-top: 10px; 395 color: rgba(2, 2, 2, 0.41); 396 letter-spacing: 0; 397 text-align: center; 398 } 399 .explore-image:before { 400 content: ''; 401 width: 100%; 402 height: 100%; 403 background-color: #FFF !important; 404 position: absolute; 405 top: 0; 406 bottom: 0; 407 left: 0; 408 right: 0; 409 z-index: 0; 410 } 411 .explore-image img { 412 position: relative; 413 z-index: 1; 414 max-width: 560px; 415 margin: 0 auto; 416 display: block; 417 padding: 6rem 0; 418 } 419 .explore-more-blocks{ 420 background-image:url(../images/BG_Stars.jpg); 421 background-position: center right; 422 background-size: cover; 423 background-attachment: fixed; 424 background-repeat: no-repeat; 425 426 } 427 .white-cta-lg { 428 font-family: 'Roboto', sans-serif; 429 font-size: 18px; 430 font-weight: 700; 431 color: #FAB266; 432 text-align: center; 433 height: 52px; 434 width: 196.11px; 435 border-radius: 5px; 436 padding: .9rem 2rem; 437 background-color: #FFF; 438 transition:.2s ease; 439 border:1px solid transparent; 440 } 441 .white-cta-lg:hover{ 442 text-decoration: none; 443 transition:.2s ease; 444 background-color:transparent; 445 border:1px solid #FFF; 446 color: #FFF; 447 } 448 .explore-content { 449 -webkit-animation: float2 6s ease-in-out; 450 animation: float2 6s ease-in-out; 451 margin: 0 auto; 452 max-width: 575px; 453 padding-right: 3rem; 454 } 455 .explore-content h3{ 456 font-weight:bold; 457 font-size: 50px; 458 color: #FFFFFF; 459 line-height: 50px; 460 margin-bottom: 2.5rem; 461 } 462 .explore-content p{ 463 font-size: 24px; 464 color: #547E99; 465 margin-bottom: 4rem; 466 } 467 .start { 468 background-image: url(../images/JoinCommunity_Embark.jpg); 469 background-size: cover; 470 min-height: 695px; 471 height:100vh; 472 position: relative; 473 /* margin-top: -47px; */ 474 z-index: 99; 475 } 476 .start h2 { 477 max-width: 374px; 478 color: #FFFFFF; 479 font-family: 'Roboto', sans-serif; 480 font-size: 76px; 481 font-weight: bold; 482 line-height: 80px; 483 } 484 .start p { 485 max-width: 517px; 486 color: #FFFFFF; 487 font-family: 'Roboto', sans-serif; 488 font-size: 24px; 489 line-height: 28px; 490 margin: 1.5rem 0 4rem 0; 491 } 492 493 #eci { 494 padding: 4rem 0; 495 position: relative; 496 } 497 .companiesHeader { 498 font-family: 'Roboto', sans-serif; 499 font-size: 24px; 500 font-weight: bold; 501 letter-spacing: 1.8px; 502 line-height: 28px; 503 color: #0B476D; 504 text-align: center; 505 margin-top: 5rem; 506 margin-bottom: 3rem; 507 } 508 #questions{ 509 background-image: url(../images/SpacePlanetAsteroids_BG.jpg); 510 background-repeat: no-repeat; 511 background-size: cover; 512 background-position: center; 513 position: relative; 514 width: 100%; 515 height: 900px; 516 } 517 .content { 518 display: -webkit-box; 519 display: -moz-box; 520 display: -ms-flexbox; 521 display: -moz-flex; 522 display: -webkit-flex; 523 display: flex; 524 -webkit-flex-direction: column; 525 -ms-flex-direction: column; 526 flex-direction: column; 527 -webkit-justify-content: center; 528 justify-content: center; 529 position: absolute; 530 top: 0; 531 bottom: 0; 532 left: 30px; 533 right: 30px; 534 } 535 .content h2 { 536 color: #FFFFFF; 537 font-family: 'Roboto', sans-serif; 538 font-size: 76px; 539 font-weight: bold; 540 line-height: 80px; 541 max-width: 386px; 542 margin-bottom: 4rem; 543 } 544 .updates { 545 /* background-image: linear-gradient(180deg, #00173D 0%, #5D7D97 88%); */ 546 padding: 3.5rem 0; 547 position: relative; 548 z-index: 999; 549 } 550 .signupLabel { 551 color: #0B476D; 552 font-family: 'Roboto', sans-serif; 553 font-size: 24px; 554 line-height: 28px; 555 margin-right: 1rem; 556 } 557 .subEmailInput { 558 width: 253px !important; 559 color: #080E1A !important; 560 font-family: 'Roboto', sans-serif; 561 font-size: 18px !important; 562 line-height: 21px !important; 563 background-color: rgba(174,206,227,0.5) !important; 564 border: 0 !important; 565 border-radius: 2px !important; 566 height: 40px; 567 } 568 .btn-sub { 569 width: 193px; 570 border-radius: 2px; 571 background-color: #FAB266; 572 height: 40px; 573 border: 0; 574 text-transform: uppercase; 575 color: white; 576 font-family: 'Roboto', sans-serif; 577 font-size: 18px; 578 font-weight: bold; 579 line-height: 21px; 580 } 581 .rocket-ship img{ 582 position: absolute; 583 z-index: -5; 584 bottom: 0; 585 width: 100%; 586 bottom: -107px; 587 } 588 .subForm { 589 max-width: 725px; 590 margin: 0 auto 0 auto; 591 } 592 footer { 593 background-color: #01264D; 594 position: relative; 595 z-index: 999; 596 } 597 .footer-astro { 598 position: absolute; 599 bottom: 0; 600 top: 18rem; 601 max-width: 42%; 602 left: 6%; 603 -webkit-transform: translatey(0px); 604 transform: translatey(0px); 605 -webkit-animation: float 6s ease-in-out infinite; 606 animation: float 6s ease-in-out infinite; 607 } 608 .disable-desktop{ 609 display: none; 610 } 611 .disable-mobile{ 612 display: block; 613 } 614 @media only screen and (max-width: 1200px) { 615 .explore-content { 616 padding-right: 1rem; 617 padding-left: 2rem; 618 } 619 } 620 @media only screen and (max-width: 1170px) { 621 .rocket-ship img{ 622 bottom: -79px; 623 } 624 } 625 @media only screen and (max-width: 1024px) { 626 .footer-astro { 627 left: 1%; 628 } 629 #questions { 630 height: 700px; 631 } 632 .explore-content { 633 padding-right: 1rem; 634 padding-left: 2rem; 635 } 636 } 637 @media only screen and (max-width: 991px) { 638 .explore-more { 639 position: relative; 640 } 641 .right-tool { 642 height: 100%; 643 position: relative; 644 } 645 .subEmailInput { 646 width: 239px !important; 647 } 648 .content h2 { 649 font-size: 65px; 650 line-height: 64px; 651 } 652 .explore-content h3 { 653 font-size: 40px; 654 } 655 .explore-content p { 656 font-size: 20px; 657 } 658 .explore-content { 659 padding-right: 1rem; 660 padding-left: 2rem; 661 } 662 } 663 @media only screen and (max-width: 840px) { 664 .rocket-ship img{ 665 bottom: -55px; 666 } 667 } 668 @media only screen and (max-width: 768px) { 669 .footer-widget{ 670 text-align:center; 671 } 672 .two-cols { 673 columns: 1; 674 -webkit-columns: 1; 675 -moz-columns: 1; 676 } 677 .c-header__background { 678 background-position: bottom; 679 } 680 .floating-astro { 681 left: 10%; 682 bottom: -7.5rem; 683 max-width: 270px; 684 } 685 .explore-content { 686 margin: 0 auto; 687 max-width: 100%; 688 padding-right: 3rem; 689 padding-left: 3rem; 690 } 691 .explore-content p { 692 font-size: 20px; 693 } 694 .signupLabel { 695 font-size: 18px; 696 } 697 .explore-content { 698 padding: 4rem 1rem 5rem 1rem; 699 } 700 .signupLabel { 701 margin-right: 0rem; 702 width: 100%; 703 text-align: center; 704 margin: 0 auto !important; 705 display: block !important; 706 margin-bottom: 3rem !important; 707 } 708 #questions { 709 height: 500px; 710 } 711 .footer-astro { 712 display: none; 713 } 714 } 715 @media only screen and (max-width: 767px) { 716 .disable-desktop{ 717 display: block; 718 } 719 .disable-mobile{ 720 display: none; 721 } 722 } 723 @media only screen and (max-width: 600px) { 724 .rocket-ship img{ 725 bottom: 0; 726 } 727 .c-header__background { 728 background-position: center; 729 } 730 .inner-header h1 { 731 font-size: 48px; 732 } 733 .inner-header h2 { 734 font-size: 20px; 735 line-height: 30px; 736 } 737 .floating-astro { 738 bottom: -7.5rem; 739 max-width: 200px; 740 } 741 .right-tool-header { 742 font-size: 48px; 743 line-height: 56px; 744 } 745 .right-tool-sub { 746 font-size: 20px; 747 } 748 .explore-image img { 749 padding: 2rem; 750 } 751 .explore-content { 752 padding: 4rem 1rem 5rem 1rem; 753 } 754 .start h2 { 755 font-size: 48px; 756 line-height: 52px; 757 } 758 .start p { 759 font-size: 20px; 760 line-height: 26px; 761 } 762 .explore-more-blocks { 763 background-image: url(../images/BG_Stars.jpg); 764 background-position: center right; 765 background-size: auto; 766 background-attachment: fixed; 767 background-repeat: repeat; 768 } 769 .container-text { 770 padding-bottom: 88%; 771 } 772 .content h2 { 773 font-size: 50px; 774 line-height: 49px; 775 } 776 .footer-astro { 777 display: none; 778 } 779 .signupLabel { 780 width: 100%; 781 margin:0; 782 } 783 .subForm .form-group{ 784 width:100%; 785 } 786 .subEmailInput { 787 width: 100% !important; 788 display: block !important; 789 } 790 .btn-sub { 791 display: block !important; 792 width: 100%; 793 } 794 .explore-content h3 { 795 font-size: 42px; 796 } 797 #questions{ 798 height: 400px; 799 } 800 } 801 @media only screen and (max-width: 375px) { 802 .c-header__background { 803 background-position: center; 804 } 805 .inner-header h1 { 806 font-size: 48px; 807 } 808 .inner-header h2 { 809 font-size: 20px; 810 line-height: 30px; 811 } 812 .floating-astro { 813 bottom: -7.5rem; 814 max-width: 200px; 815 } 816 .right-tool-header { 817 font-size: 48px; 818 line-height: 56px; 819 } 820 .right-tool-sub { 821 font-size: 20px; 822 } 823 .explore-image img { 824 padding: 2rem; 825 } 826 .explore-content { 827 padding: 4rem 1rem 5rem 1rem; 828 } 829 .start h2 { 830 font-size: 48px; 831 line-height: 52px; 832 } 833 .start p { 834 font-size: 20px; 835 line-height: 26px; 836 } 837 .explore-more-blocks { 838 background-image: url(../images/BG_Stars.jpg); 839 background-position: center right; 840 background-size: auto; 841 background-attachment: fixed; 842 background-repeat: repeat; 843 } 844 .container-text { 845 padding-bottom: 88%; 846 } 847 .content h2 { 848 font-size: 50px; 849 line-height: 49px; 850 } 851 .footer-astro { 852 display: none; 853 } 854 .subForm .form-group{ 855 width:100%; 856 } 857 .subEmailInput { 858 width: 100% !important; 859 display: block !important; 860 } 861 .btn-sub { 862 display: block !important; 863 width: 100%; 864 } 865 .explore-content h3 { 866 font-size: 42px; 867 } 868 #questions{ 869 height: 400px; 870 } 871 } 872 .onlyMobile{ 873 display:none; 874 } 875 .onlyDesktop{ 876 display:block; 877 } 878 @media (max-width:1200px){ 879 .mainNav li { 880 padding: 0 1.5rem; 881 } 882 } 883 @media (max-width:991px){ 884 .onlyMobile{ 885 display:block; 886 } 887 .onlyDesktop{ 888 display:none; 889 } 890 } 891 892 .text-gray-blue { 893 color:#5D7D97 !important; 894 } 895 896 .meet-the-team-heading { 897 color:#0B476D !important; 898 font-weight: 800; 899 font-size: 50px 900 } 901 902 .hover-shadow:hover{ 903 text-decoration: none; 904 } 905 906 .gradient-hex { 907 margin-top: -700px; 908 }