body{ font-family: 'Roboto', sans-serif !important; } .top-logo{ display: block; height: 50px; width: 136px; background: url(../img/logo.svg) no-repeat; background-size: 100%; color: transparent; font-size: 0; line-height: 0; } .logo-negative{ background: url(../img/logo-negative.svg) no-repeat; } header{ /* background-image:url(../img/Hero.jpg); */ background-size:cover; background-repeat: no-repeat; padding:3rem 0; position: relative; } .orange-cta-lg{ font-family: 'Roboto', sans-serif; font-size: 18px; font-weight:700; color: #FFFFFF; text-align: center; height: 52px; width: 196.11px; border-radius: 5px; padding: .9rem 2rem; background-color: #FAB266; } .pos-rel{ position: relative; } .c-header__background { height: 100%; left: 0; opacity:1; position: absolute; top: 0; width: 100%; background-image: url(../img/Hero.jpg); background-position: center right; background-repeat: no-repeat; background-size: cover; } .inner-header{ padding: 9rem 0px 12rem 0px; } .inner-header h1{ font-family: 'Roboto', sans-serif; font-weight: bold; font-size: 58px; color: #FFFFFF; text-align: left; line-height: 45px; } .inner-header h2 { font-family: 'Roboto', sans-serif; font-size: 24px; color: #FFFFFF; text-align: left; line-height: 24px; margin-top: 1.5rem; margin-bottom: 3rem; } .floating-astro { position: absolute; z-index: 9; left: 3%; bottom: -12.5rem; -webkit-transform: translatey(0px); transform: translatey(0px); -webkit-animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite; max-width: 400px; } @-webkit-keyframes float { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } @keyframes float { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } @-webkit-keyframes float2 { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } @keyframes float2 { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0px); transform: translatey(0px); } } .right-tool{ background-image: url(../images/rt-bg.jpg); background-size:cover; padding: 4rem 0 3rem 0; } .right-tool-header { font-size: 76px; line-height: 76px; font-weight: bold; color: #0B476D; max-width: 500px; margin: 0 auto; } .right-tool-sub { font-size: 24px; color: #080E1A; text-align: center; max-width: 500px; margin: 2rem auto 0 auto; } .right-tool-logos { margin-top: 6rem; margin-bottom: 5rem; } .scroll{} .scroll img{} .scroll p{ font-size: 12px; font-style: italic; margin-top:10px; color: #020202; letter-spacing: 0; text-align: center; } .explore-image:before { content: ''; width: 100%; height: 100%; background-color: #EAECEF !important; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; } .explore-image img { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; display: block; padding: 6rem 0; } .explore-more-blocks{ background-image:url(../images/BG_Stars.jpg); background-position: center right; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .white-cta-lg { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 700; color: #FAB266; text-align: center; height: 52px; width: 196.11px; border-radius: 5px; padding: .9rem 2rem; background-color: #FFF; } .explore-content { -webkit-animation: float2 6s ease-in-out; animation: float2 6s ease-in-out; margin: 0 auto; max-width: 575px; padding-right: 3rem; } .explore-content h3{ font-weight:bold; font-size: 50px; color: #FFFFFF; line-height: 50px; margin-bottom: 2.5rem; } .explore-content p{ font-size: 24px; color: #547E99; margin-bottom: 4rem; } .start { background-image: url(../images/JoinCommunity_Embark.jpg); background-size: cover; height: 695px; position: relative; /* margin-top: -47px; */ } .start h2 { max-width: 374px; color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 76px; font-weight: bold; line-height: 80px; } .start p { max-width: 517px; color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 28px; margin: 1.5rem 0 4rem 0; } #eci { background-color: white; padding: 4rem 0; position: relative; margin-top: -24px; } .companiesHeader { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: bold; letter-spacing: 1.8px; line-height: 28px; color: #0B476D; text-align: center; margin-top: 5rem; margin-bottom: 3rem; } #questions{ background-image: url(../images/SpacePlanetAsteroids_BG.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; width: 100%; height: 900px; } .content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; position: absolute; top: 0; bottom: 0; left: 30px; right: 30px; } .content h2 { color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 76px; font-weight: bold; line-height: 80px; max-width: 386px; margin-bottom: 4rem; } .updates { /* background-image: linear-gradient(180deg, #00173D 0%, #5D7D97 88%); */ padding: 3.5rem 0; position: relative; z-index: 999; } .signupLabel { color: #0B476D; font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 28px; margin-right: 1rem; } .subEmailInput { width: 253px !important; color: #080E1A !important; font-family: 'Roboto', sans-serif; font-size: 18px !important; line-height: 21px !important; background-color: rgba(174,206,227,0.5) !important; border: 0 !important; border-radius: 2px !important; height: 40px; } .btn-sub { width: 193px; border-radius: 2px; background-color: #FAB266; height: 40px; border: 0; text-transform: uppercase; color: white; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; line-height: 21px; } .rocket-ship img{ position: absolute; z-index: 9; bottom: 0; width: 100%; } .subForm { max-width: 725px; margin: 0 auto 0 auto; } footer { background-color: #5D7D97; position: relative; z-index: 999; } .footer-links { padding-bottom: 2rem; padding-top: 2rem; } .footer-links ul { list-style-type: none; padding: 0; margin: 0; text-align: center; } .footer-links ul li { display: inline; padding: 0 36px; vertical-align: middle; padding-top: 1rem; } .footer-links ul li a { color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; line-height: 21px; } .footer-astro { position: absolute; bottom: 0; top: 18rem; max-width: 42%; left: 6%; } .disable-desktop{ display: none; } .disable-mobile{ display: block; } @media only screen and (max-width: 1024px) { .footer-astro { left: 1%; } #questions { height: 700px; } } @media only screen and (max-width: 991px) { .subEmailInput { width: 239px !important; } .content h2 { font-size: 65px; line-height: 64px; } } @media only screen and (max-width: 768px) { .c-header__background { background-position: bottom; } .floating-astro { left: 10%; bottom: -7.5rem; max-width: 270px; } .explore-content { margin: 0 auto; max-width: 100%; padding-right: 3rem; padding-left: 3rem; } .explore-content p { font-size: 20px; } .signupLabel { font-size: 18px; } .explore-content { padding: 4rem 1rem 5rem 1rem; } .signupLabel { margin-right: 0rem; width: 100%; text-align: center; margin: 0 auto !important; display: block !important; margin-bottom: 3rem !important; } #questions { height: 500px; } .footer-astro { display: none; } } @media only screen and (max-width: 767px) { .disable-desktop{ display: block; } .disable-mobile{ display: none; } } @media only screen and (max-width: 600px) { .c-header__background { background-position: center; } .inner-header h1 { font-size: 48px; } .inner-header h2 { font-size: 20px; line-height: 30px; } .floating-astro { bottom: -7.5rem; max-width: 200px; } .right-tool-header { font-size: 48px; line-height: 56px; } .right-tool-sub { font-size: 20px; } .explore-image img { padding: 2rem; } .explore-content { padding: 4rem 1rem 5rem 1rem; } .start h2 { font-size: 48px; line-height: 52px; } .start p { font-size: 20px; line-height: 26px; } .explore-more-blocks { background-image: url(../images/BG_Stars.jpg); background-position: center right; background-size: auto; background-attachment: fixed; background-repeat: repeat; } .container-text { padding-bottom: 88%; } .content h2 { font-size: 50px; line-height: 49px; } .footer-astro { display: none; } .footer-links ul li { display: block; } .signupLabel { width: 100%; margin:0; } .subForm .form-group{ width:100%; } .subEmailInput { width: 100% !important; display: block !important; } .btn-sub { display: block !important; width: 100%; } .explore-content h3 { font-size: 42px; } #questions{ height: 400px; } } @media only screen and (max-width: 375px) { .c-header__background { background-position: center; } .inner-header h1 { font-size: 48px; } .inner-header h2 { font-size: 20px; line-height: 30px; } .floating-astro { bottom: -7.5rem; max-width: 200px; } .right-tool-header { font-size: 48px; line-height: 56px; } .right-tool-sub { font-size: 20px; } .explore-image img { padding: 2rem; } .explore-content { padding: 4rem 1rem 5rem 1rem; } .start h2 { font-size: 48px; line-height: 52px; } .start p { font-size: 20px; line-height: 26px; } .explore-more-blocks { background-image: url(../images/BG_Stars.jpg); background-position: center right; background-size: auto; background-attachment: fixed; background-repeat: repeat; } .container-text { padding-bottom: 88%; } .content h2 { font-size: 50px; line-height: 49px; } .footer-astro { display: none; } .footer-links ul li { display: block; } .subForm .form-group{ width:100%; } .subEmailInput { width: 100% !important; display: block !important; } .btn-sub { display: block !important; width: 100%; } .explore-content h3 { font-size: 42px; } #questions{ height: 400px; } }