@import url(/bower_components/Skeleton/css/skeleton.css); .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } @font-face { font-family: 'michroma'; font-display: auto; src: local("michroma"), url(https://fonts.googleapis.com/css?family=Michroma&display=swap); } .wrapper { margin-top: 0 !important; } .push { display: none; } .lightboxForm .alert { position: relative; margin: 0 auto; left: 0; top: 0; transform: none; } .alert { position: absolute; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); position: fixed; z-index: 10; width: 500px; padding: 20px; background: rgba(255, 255, 255, 0.9); color: black; font-weight: bold; text-transform: uppercase; top: 110px; } .alert .close { position: absolute; top: 5px; right: 5px; cursor: pointer; color: #000; font-size: 17px; } .alert li { list-style: none; margin-bottom: 4px; } .alert ul, .alert li { margin-bottom: 0; } .alert.alert-success { color: #6DB4CB; border-bottom: 4px solid #6DB4CB; } .alert.alert-danger { color: #d30000; border-bottom: 4px solid #d30000; } @media (max-width: 875px) { .alert { width: 100%; top: 131px; text-align: center; } } body, html { height: auto; } body { background: url('../../images/longlanding/mobileBg.jpg?1563287261'); background-size: cover; margin: 0; overflow-x: hidden; width: 100vw; } @media screen and (min-width: 36em) { body { background: url('../../images/longlanding/desktopBg.jpg?1563287260') center no-repeat; background-size: cover; } } p { font-size: 12px; font-family: 'open sans'; } @media screen and (min-width: 36em) { p { font-size: 15px; } } @media screen and (min-width: 90em) { p { font-size: 18px; } } @media screen and (min-width: 125em) { p { font-size: 22px; } } @media screen and (min-width: 160em) { p { font-size: 26px; } } h1, h2, h3, a { font-family: michroma, 'open sans'; } h1 { margin-top: 0; letter-spacing: 1px; word-spacing: 1px; } .title { width: 80%; margin: 0 auto; z-index: 2; } @media screen and (min-width: 48em) { .title { margin: 0; width: 50%; } } @media screen and (min-width: 90em) { .title { width: 40%; } } .title p { text-align: center; color: #bababa; text-shadow: 0px 5px 20px #000; line-height: 120%; margin-top: 2%; } .title h1 { color: #fff; padding: 5px; border: 1px solid #ec1813; font-size: 11px; text-align: center; } @media screen and (min-width: 23.4375em) { .title h1 { font-size: 13px; } } @media screen and (min-width: 26.5625em) { .title h1 { font-size: 15px; } } @media screen and (min-width: 36em) { .title h1 { font-size: 20px; } } @media screen and (min-width: 48em) { .title h1 { font-size: 17px; } } @media screen and (min-width: 64em) { .title h1 { border: 1.5px solid #ec1813; font-size: 20px; } } @media screen and (min-width: 90em) { .title h1 { font-size: 25px; } } @media screen and (min-width: 125em) { .title h1 { font-size: 30px; } } @media screen and (min-width: 160em) { .title h1 { font-size: 40px; } } .left::before, .right::before { content: "\00a0"; display: block; background-color: #ec1813; height: 1px; position: relative; } @media screen and (min-width: 36em) { .left::before, .right::before { top: 18px; } } @media screen and (min-width: 48em) { .left::before, .right::before { top: 16px; } } @media screen and (min-width: 64em) { .left::before, .right::before { top: 18px; height: 2px; } } @media screen and (min-width: 90em) { .left::before, .right::before { right: 50%; top: 21px; } } @media screen and (min-width: 160em) { .left::before, .right::before { top: 27px; right: 50%; } } @media screen and (min-width: 48em) { .left { float: left; margin-left: 7% !important; } } @media screen and (min-width: 90em) { .left { margin-left: 15%; } } .left::before { width: 15%; right: 15%; top: 13px; } @media screen and (min-width: 26.5625em) { .left::before { top: 15px; } } @media screen and (min-width: 90em) { .left::before { width: 18%; right: 18%; top: 22px; } } @media screen and (min-width: 125em) { .left::before { top: 25px; } } @media screen and (min-width: 160em) { .left::before { top: 30px; } } @media screen and (min-width: 48em) { .right { float: right; margin-right: 7%; } } @media screen and (min-width: 90em) { .right { margin-right: 15%; } } .right::before { width: 12.5%; left: 100%; top: 12px; } @media screen and (min-width: 26.5625em) { .right::before { top: 14px; } } @media screen and (min-width: 48em) { .right::before { width: 14%; } } @media screen and (min-width: 90em) { .right::before { width: 37.5%; top: 18px; } } @media screen and (min-width: 125em) { .right::before { top: 22px; } } @media screen and (min-width: 160em) { .right::before { width: 37.5%; } } .nav { overflow: hidden; background-color: #fff; width: 100vw; position: fixed; height: 40px; z-index: 11; top: -20%; } @media screen and (min-width: 36em) { .nav { top: -20%; height: 50px; } } @media screen and (min-width: 64em) { .nav { height: 60px; } } @media screen and (min-width: 90em) { .nav { height: 70px; } } @media screen and (min-width: 125em) { .nav { height: 75px; } } .fullLogo { display: none; } @media screen and (min-width: 36em) { .fullLogo { margin: 0 auto; height: 75%; display: inline; vertical-align: middle; padding-top: 5px; margin-top: 3px; } } @media screen and (min-width: 64em) { .fullLogo { margin-top: 3px; height: 95%; margin-left: 25%; } } @media screen and (min-width: 90em) { .fullLogo { margin-top: 8px; height: 100%; } } @media screen and (min-width: 125em) { .fullLogo { height: 110%; margin-left: 50%; margin-top: 10px; } } .navLogo { height: 50px; float: left; text-align: center; margin-left: 29%; } @media screen and (min-width: 36em) { .navLogo { margin-left: 30%; } } @media screen and (min-width: 48em) { .navLogo { margin-left: 44%; } } @media screen and (min-width: 64em) { .navLogo { margin-left: 42%; } } @media screen and (min-width: 90em) { .navLogo { margin-left: 43%; } } @media screen and (min-width: 160em) { .navLogo { margin-left: 46%; } } @media screen and (min-width: 107.5em) { .navLogo { margin-left: 44%; } } @media screen and (min-width: 125em) { .navLogo { margin-left: 45%; } } .icon { margin: 0 auto; height: 86%; } @media screen and (min-width: 36em) { .icon { display: none; } } .navSignup { float: right; font-size: 8px; text-decoration: none; color: #fff; padding-top: 15px; background-color: #ec1813; height: 100%; width: auto; white-space: nowrap; text-align: center; padding-left: 1px; padding-right: 1px; cursor: pointer; } @media screen and (min-width: 23.4375em) { .navSignup { font-size: 9px; padding-top: 14px; } } @media screen and (min-width: 26.5625em) { .navSignup { font-size: 10px; } } @media screen and (min-width: 36em) { .navSignup { font-size: 12px; padding-top: 19px; } .navSignup:hover { text-shadow: 0 0 10px #fff; box-shadow: 0 0 50px #ec1813; color: #fff; } } @media screen and (min-width: 48em) { .navSignup { font-size: 12px; padding: 19px 30px 0 20px; } } @media screen and (min-width: 64em) { .navSignup { padding-top: 21px; font-size: 15px; } } @media screen and (min-width: 90em) { .navSignup { font-size: 17px; padding-top: 26px; } } @media screen and (min-width: 107.5em) { .navSignup { font-size: 19px; padding-top: 25px; } } @media screen and (min-width: 125em) { .navSignup { font-size: 24px; padding-top: 25px; } } .link-to-site { position: fixed; top: 0px; background-color: #000; width: 100%; color: #fff; z-index: 401; display: block; padding: 6px 5px 3px 5px; margin: 0; } .link-to-site .continue { float: left; font-size: 10px; text-decoration: none; color: #fff; height: 100%; line-height: 1; text-align: center; font-family: 'open sans'; margin-top: 1px; } @media screen and (min-width: 26.5625em) { .link-to-site .continue { font-size: 11px; } } @media screen and (min-width: 36em) { .link-to-site .continue { font-size: 12px; padding-left: 4px; } } @media screen and (min-width: 90em) { .link-to-site .continue { font-size: 13px; padding-top: 2px; } } .link-to-site .continue:hover { color: #ec1813; } #languages { font-size: 9px; margin: 0 auto; text-decoration: none; color: #fff; list-style: none; float: right; font-family: 'open-sans'; } @media screen and (min-width: 36em) { #languages { font-size: 11px; } } @media screen and (min-width: 90em) { #languages { font-size: 13px; } } #languages li { position: relative; padding-right: 6px; background-color: black; list-style: none; margin: 0; } #languages li ul { position: absolute; top: 100%; left: -12px; z-index: 401; padding: 3px; margin: 0; line-height: 130%; } #languages li ul li { list-style: none; background-color: #000; text-align: left; padding-left: 10px; } #languages li a { color: #fff; text-decoration: none; } #languages li a::after { content: ''; position: absolute; top: 50%; right: -6em; margin-top: -12px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #dFeEFF; border-top-color: rgba(255, 255, 255, 0.5); } #splashpage #sign-up { background: none; } .darkOverlay { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; z-index: 500; overflow-y: scroll; height: 100%; } .darkOverlay .lightboxForm { margin: 0 auto; font-family: 'Open Sans', sans-serif; margin-top: 20%; } .darkOverlay .lightboxForm img { width: 100%; } .darkOverlay .lightboxForm h1 { display: none; } @media screen and (min-width: 48em) { .darkOverlay .lightboxForm { margin-top: 0; } } .darkOverlay .lightboxForm.contestEnter, .darkOverlay .lightboxForm.contestOver { color: #fff; margin-top: 20% !important; } .darkOverlay .lightboxForm.contestEnter img.logoWhite, .darkOverlay .lightboxForm.contestOver img.logoWhite { margin-bottom: 30px; } .darkOverlay .lightboxForm.contestEnter p, .darkOverlay .lightboxForm.contestOver p { margin-bottom: 0; text-align: center; font-size: 22px; } .darkOverlay .lightboxForm.contestEnter a, .darkOverlay .lightboxForm.contestOver a { color: #d30000; font-family: inherit; } .darkOverlay .lightboxForm.contestEnter form, .darkOverlay .lightboxForm.contestOver form { text-align: center; } .darkOverlay .lightboxForm.contestEnter form input[type="checkbox"], .darkOverlay .lightboxForm.contestOver form input[type="checkbox"] { margin-bottom: 0; } .darkOverlay .lightboxForm.contestEnter form input[type="email"], .darkOverlay .lightboxForm.contestOver form input[type="email"] { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; width: 100%; background: transparent; border-left: 0; border-top: 0; border-right: 0; margin: 20px 0; } .darkOverlay .lightboxForm.contestOver .submit-btn { text-align: center; display: block; margin: 20px; } .darkOverlay .lightboxForm.contestOver .submit-btn a { color: #fff; border: none; } .darkOverlay .lightboxForm.contestOver .submit-btn a:hover { color: #fff; } .darkOverlay .lightboxForm .highlightCheckbox { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid #fff; display: inline-block; margin: 20px 0; padding: 20px; font-size: 18px; } .darkOverlay .lightboxForm .readRulesBox { width: 60%; margin: 0 auto; margin-bottom: 30px; } @media (max-width: 875px) { .darkOverlay .lightboxForm .readRulesBox { width: 100%; } } .darkOverlay .lightboxForm .signupContent { width: 100%; color: white; top: 0; } .darkOverlay .lightboxForm .signupContent #signupPlatforms { margin: 0 auto; display: grid; grid-template-columns: 230px 230px; text-align: center; width: 460px; grid-column-gap: 10px; grid-row-gap: 10px; } @media (max-width: 875px) { .darkOverlay .lightboxForm .signupContent #signupPlatforms { width: 100%; display: block; } } .darkOverlay .lightboxForm .signupContent #signupPlatforms a { width: 230px; height: 230px; position: relative; font-family: inherit; display: flex; align-items: center; justify-content: center; text-align: center; } .darkOverlay .lightboxForm .signupContent #signupPlatforms a img { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: auto; } @media (max-width: 875px) { .darkOverlay .lightboxForm .signupContent #signupPlatforms a { width: 100%; display: block; } } .darkOverlay .lightboxForm .signupContent #signupPlatforms a .platName { color: white; text-align: center; display: block; text-transform: uppercase; font-size: 19px; position: absolute; bottom: 30px; width: 100%; } .darkOverlay .lightboxForm .signupContent #signupPlatforms a.pc { background: #212121; } .darkOverlay .lightboxForm .signupContent #signupPlatforms a.ps4 { background: #034169; } .darkOverlay .lightboxForm .signupContent #signupPlatforms a.xb1 { background: #005400; } .darkOverlay .lightboxForm .signupContent #signupPlatforms a.swi { background: #d30000; } .darkOverlay .lightboxForm .signupContent .pcSignup { display: none; } .darkOverlay .lightboxForm .signupContent .g-recaptcha { width: 310px; margin: 20px auto; } .darkOverlay .lightboxForm .signupContent fieldset#opt-in-newsletter, .darkOverlay .lightboxForm .signupContent fieldset#agree, .darkOverlay .lightboxForm .signupContent fieldset#contest, .darkOverlay .lightboxForm .signupContent fieldset#read-rules { width: 80%; margin: 0 auto; margin-bottom: 8px; line-height: 18px; } .darkOverlay .lightboxForm .signupContent input::-webkit-input-placeholder { color: white; } .darkOverlay .lightboxForm .signupContent input[type="text"], .darkOverlay .lightboxForm .signupContent input[type="email"], .darkOverlay .lightboxForm .signupContent input[type="password"] { background: transparent; border: none; border-bottom: 1px solid white; color: #fff; border-radius: 0 !important; } .container { padding: 0; width: 90%; } #submit-btn button, .submit-btn { background: #d30000; border: none !important; color: #fff !important; font-size: 14px; font-weight: lighter; display: inline-block; padding: 0 35px; height: 38px; line-height: 38px; text-transform: uppercase; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; word-spacing: 5px; -moz-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } #submit-btn button .button-wrap, #submit-btn button .button, #submit-btn button input[type="submit"], .submit-btn .button-wrap, .submit-btn .button, .submit-btn input[type="submit"] { display: block; -moz-transform: skewX(25deg); -ms-transform: skewX(25deg); -webkit-transform: skewX(25deg); transform: skewX(25deg); } .content { padding-top: 20px; } #submit-btn { text-align: center; } #submit-btn .button-wrap { -moz-transform: skewX(0deg); -ms-transform: skewX(0deg); -webkit-transform: skewX(0deg); transform: skewX(0deg); } .consoleLoginBtns { text-align: center; } .consoleLoginBtns a { width: 32%; height: 45px; padding-top: 8px; min-width: 130px; display: inline-block; text-align: center; } .consoleLoginBtns a img { width: auto !important; margin-top: 6px; } @media (max-width: 600px) { .consoleLoginBtns a { width: 100%; } } .consoleLoginBtns a.ps4Btn { background-color: #274368; } .consoleLoginBtns a.xb1Btn { background-color: #2f5212; } .consoleLoginBtns a.swiBtn { background-color: #e70012; position: relative; top: 1px; margin-bottom: 50px; } form fieldset label.error { color: red; margin-bottom: 10px; font-weight: 100; } form #email label, form #confirm-email label, form #alias label, form #password label, form #confirm-password label { display: none; } form #opt-in-newsletter label, form #contest label, form #agree label, form #read-rules label { display: inline; margin-bottom: .5rem; font-weight: 100; } form #opt-in-newsletter label a, form #contest label a, form #agree label a, form #read-rules label a { color: #fff; text-decoration: underline; font-family: inherit; text-decoration-color: #fff; } form #opt_in_newsletter_check { margin-bottom: 0; } form #agreed { margin-bottom: 0 !important; } input.error { border: 1px solid red !important; } .consoleLines { margin: 15px 0; } .consoleLines .contentHeaderText { color: white; text-align: center; position: relative; top: -17px; text-transform: uppercase; font-size: 24px; } .consoleLines.contentHeaderContain .contentHeaderLines { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; width: 22% !important; height: 3px; float: left; } @media (max-width: 875px) { .consoleLines.contentHeaderContain .contentHeaderLines { display: none; } } .consoleLines .contentLineRight { float: right !important; } .section1 { background: url('../../images/longlanding/mobile-masthead-short.jpg?1612301547') no-repeat top; background-size: contain; text-align: center; z-index: 10; position: relative; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } @media screen and (min-width: 40em) { .section1 { background-size: cover; } } @media screen and (min-width: 48em) { .section1 { background: none !important; } } .section1.tennocon2019.cgi { background: url('../../images/longlanding/tennocon2019/mobile-bg.png?1563287261') no-repeat center; background-size: cover; } @media screen and (min-width: 36em) { .section1.tennocon2019.cgi { background: url('../../images/longlanding/tennocon2019/tablet-bg.png?1563287261') no-repeat center; background-size: cover; } } .section1.tennocon2019.railj { background: url('../../images/longlanding/tennocon2019/railjack-mobile-bg.png?1563287261') no-repeat center; background-size: cover; } @media screen and (min-width: 36em) { .section1.tennocon2019.railj { background: url('../../images/longlanding/tennocon2019/railjack-tablet-bg.png?1563287261') no-repeat center; background-size: cover; } } .section1.tennocon2019 .logoSlogan { margin-bottom: 20px !important; } .section1.tennocon2019 .logoSlogan .text { display: block; color: #fff; text-decoration: none; font-family: inherit; font-weight: bold; font-size: 14px; text-transform: uppercase; } @media screen and (min-width: 36em) { .section1.tennocon2019 .logoSlogan .text { font-size: 21px; } } @media screen and (min-width: 56em) { .section1.tennocon2019 .logoSlogan .text { font-size: 23px; } } @media screen and (min-width: 64em) { .section1.tennocon2019 .logoSlogan .text { font-size: 22px; } } @media screen and (min-width: 90em) { .section1.tennocon2019 .logoSlogan .text { font-size: 25px; } } @media screen and (min-width: 125em) { .section1.tennocon2019 .logoSlogan .text { font-size: 34px; } } @media screen and (min-width: 160em) { .section1.tennocon2019 .logoSlogan .text { font-size: 42px; } } .section1.tennocon2019 .logoSlogan .text span { color: #d30000; } .section1.tennocon2019 .logoSlogan img { width: 90%; } @media screen and (min-width: 26.5625em) { .section1.tennocon2019 .logoSlogan img { width: 80%; } } @media screen and (min-width: 36em) { .section1.tennocon2019 .logoSlogan img { width: 70%; } } @media screen and (min-width: 48em) { .section1.tennocon2019 .logoSlogan img { width: 45%; } } @media screen and (min-width: 64em) { .section1.tennocon2019 .logoSlogan img { width: 35%; } } @media screen and (min-width: 90em) { .section1.tennocon2019 .logoSlogan img { width: 25%; } } .section1.tennocon2019 .lensFlare { margin-top: 1%; } @media screen and (min-width: 48em) { .section1.tennocon2019 .lensFlare { margin-top: 2%; } } .section1.tennocon2019 .playFreeNow { display: inline-block; margin: 0 auto; font-size: 14px; } @media screen and (min-width: 36em) { .section1.tennocon2019 .playFreeNow { font-size: 21px; } } @media screen and (min-width: 90em) { .section1.tennocon2019 .playFreeNow { font-size: 22px; } } @media screen and (min-width: 125em) { .section1.tennocon2019 .playFreeNow { font-size: 30px; } } .section1.tennocon2019 .haveAccount { margin-top: 5px; display: block; font-size: 11px; height: auto; font-family: 'Open Sans',sans-serif; color: #fff; } @media screen and (min-width: 36em) { .section1.tennocon2019 .haveAccount { font-size: 13px; } } @media screen and (min-width: 90em) { .section1.tennocon2019 .haveAccount { font-size: 14px; margin-top: 2px; } } @media screen and (min-width: 125em) { .section1.tennocon2019 .haveAccount { font-size: 18px; margin-top: 3px; } } .logoSlogan { margin-bottom: 30px; } @media screen and (min-width: 48em) { .logoSlogan { margin-bottom: 16px; z-index: 50; position: inherit; } } @media screen and (min-width: 90em) { .logoSlogan { margin-bottom: 30px; } } @media screen and (min-width: 125em) { .logoSlogan { margin-bottom: 43px; } } @media screen and (min-width: 160em) { .logoSlogan { margin-bottom: 50px; } } .logoSlogan img { width: 80%; margin-top: 50vh; } @media screen and (min-width: 36em) { .logoSlogan img { width: 60%; } } @media screen and (min-width: 48em) { .logoSlogan img { width: 50%; margin-top: 26%; } } @media screen and (min-width: 64em) { .logoSlogan img { width: 35%; } } @media screen and (min-width: 90em) { .logoSlogan img { margin-top: 26%; } } @media screen and (min-width: 140em) { .logoSlogan img { width: 25%; } } .logoSlogan.static { z-index: 0 !important; margin-bottom: 30px; width: 100%; } @media screen and (min-width: 48em) { .logoSlogan.static { z-index: 50; position: inherit; } } .logoSlogan.static img { width: 75%; margin-top: 10%; } @media screen and (min-width: 36em) { .logoSlogan.static img { width: 55%; margin-top: 5%; } } @media screen and (min-width: 48em) { .logoSlogan.static img { width: 50%; } .logoSlogan.static img.long { width: 30%; } } @media screen and (min-width: 72em) { .logoSlogan.static img { width: 30%; } } @media screen and (min-width: 120em) { .logoSlogan.static img { margin-top: 2%; } } .playFreeNow { font-size: 12px; text-decoration: none; color: #fff; padding: 10px 35px; background-color: #ec1813; -moz-transition: box-shadow 0.5s, text-shadow 0.5s; -o-transition: box-shadow 0.5s, text-shadow 0.5s; -webkit-transition: box-shadow 0.5s, text-shadow 0.5s; transition: box-shadow 0.5s, text-shadow 0.5s; cursor: pointer; } @media screen and (min-width: 36em) { .playFreeNow { font-size: 21px; padding: 10px 60px 10px 60px; } } @media screen and (min-width: 48em) { .playFreeNow { font-size: 21px; padding: 7px 45px 7px 45px; } } @media screen and (min-width: 56em) { .playFreeNow { padding: 7px 55px 7px 55px; } } @media screen and (min-width: 64em) { .playFreeNow { padding: 8px 70px 8px 70px; } } @media screen and (min-width: 90em) { .playFreeNow { font-size: 29px; padding: 10px 80px 10px 80px; } } @media screen and (min-width: 125em) { .playFreeNow { font-size: 28px; padding: 15px 120px 15px 120px; } } @media screen and (min-width: 160em) { .playFreeNow { font-size: 34px; padding: 15px 130px 15px 130px; } } .playFreeNow:hover { text-shadow: 0 0 10px #fff; box-shadow: 0 0 50px #ec1813; color: #fff; } .haveAccount { text-decoration: none; color: #fff; font-size: 9px; display: block; margin-top: 20px; height: auto; margin-bottom: 15px; } @media screen and (min-width: 36em) { .haveAccount { font-size: 14px; margin-top: 7px; margin-bottom: 4%; } } @media screen and (min-width: 90em) { .haveAccount { font-size: 16px; margin-top: 11px; margin-bottom: 2%; } } @media screen and (min-width: 125em) { .haveAccount { font-size: 16px; margin-top: 15px; } } @media screen and (min-width: 160em) { .haveAccount { font-size: 21px; margin-top: 20px; margin-bottom: 1%; } } .haveAccount:hover { color: #ec1813; } .watchTrailer { text-align: center; margin-top: 15px; } @media screen and (min-width: 36em) { .watchTrailer { margin-top: 20px; margin-bottom: 20px; } } @media screen and (min-width: 48em) { .watchTrailer { display: none; } } .watchTrailer a { text-decoration: none; font-size: 20px; color: #fff; } .watchTrailer img { vertical-align: bottom; margin-right: 5px; } .gameDesc { color: #fff; width: 80%; margin: 0 auto; clear: both; font-weight: bold; line-height: 120%; z-index: 11; position: relative; } @media screen and (min-width: 48em) { .gameDesc { line-height: 125%; width: 56%; margin-top: -20px; margin-bottom: 20px; } } @media screen and (min-width: 56em) { .gameDesc { width: 47%; } } @media screen and (min-width: 77em) { .gameDesc { width: 46%; } } @media screen and (min-width: 90em) { .gameDesc { width: 41%; margin-top: -10px; margin-bottom: 30px; line-height: 174%; } } @media screen and (min-width: 125em) { .gameDesc { line-height: 200%; } } @media screen and (min-width: 160em) { .gameDesc { margin-top: -10px; margin-bottom: 40px; line-height: 222%; } } .gameDesc .gameDescCopy { margin: 10px auto 0; width: 100%; } .gameDesc .gameDescCopy p { margin-bottom: 0; } @media screen and (min-width: 160em) { .gameDesc .gameDescCopy { margin-top: 30px; margin-bottom: 30px; } } .scrollIndicator { filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(165deg) brightness(102%) contrast(100%); animation: bounce 1.5s infinite ease-in-out; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } } .lightbox { background-color: rgba(0, 0, 0, 0.8); z-index: 450; position: fixed; width: 100%; height: 100%; text-align: center; display: none; } .lightbox iframe { border: none; margin-top: 50%; } .close { margin-top: 3%; text-align: left; cursor: pointer; margin-left: 4%; } @media screen and (min-width: 36em) { .close { margin-top: 2%; margin-left: 3%; } } @media screen and (min-width: 90em) { .close { margin-top: 1.5%; margin-left: 2%; } } .close img { width: 5%; vertical-align: middle; margin-right: 3px; } @media screen and (min-width: 36em) { .close img { width: 3%; } } @media screen and (min-width: 64em) { .close img { width: 2%; } } @media screen and (min-width: 90em) { .close img { width: 1.8%; } } @media screen and (min-width: 125em) { .close img { width: 1%; } } .close p { color: #fff; display: inline; font-size: 15px; vertical-align: middle; } @media screen and (min-width: 90em) { .close p { font-size: 18px; } } .keyartItems { cursor: default; display: none; } @media screen and (min-width: 48em) { .keyartItems { display: block; } } .gradient { width: 100vw; height: 100vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #000000 100%); position: absolute; top: 0; left: 0; overflow: hidden; } .videoBackground { z-index: -10; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100vw; height: 100vh; } @media (min-aspect-ratio: 16 / 9) { .videoBackground { /* height = 100 * (9 / 16) = 56.25 */ height: 56.25vw; } } @media (max-aspect-ratio: 16 / 9) { .videoBackground { /* width = 100 / (9 / 16) = 177.777777 */ width: 177.78vh; } } .videoPlayer { display: none; } @media screen and (min-width: 48em) { .videoPlayer { display: inline; position: relative; overflow: hidden; width: 600px; height: 337px; } } @media screen and (min-width: 64em) { .videoPlayer { width: 820px; height: 461px; } } @media screen and (min-width: 90em) { .videoPlayer { width: 1065px; min-height: 600px; } } @media screen and (min-width: 120em) { .videoPlayer { width: 1519px; height: 853px; } } @media screen and (min-width: 125em) { .videoPlayer { width: 1570px; height: 884px; } } @media screen and (min-width: 160em) { .videoPlayer { width: 2050px; height: 1155px; } } .playButton { z-index: 50; position: inherit; } @media screen and (min-width: 48em) { .keyartShip1 { position: absolute; margin-left: 19%; width: 34%; margin-top: -48%; -moz-animation-name: move1; -webkit-animation-name: move1; animation-name: move1; -moz-animation-direction: reverse; -webkit-animation-direction: reverse; animation-direction: reverse; -moz-animation-duration: 6s; -webkit-animation-duration: 6s; animation-duration: 6s; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .keyartShip1 img { width: inherit; } @-moz-keyframes move1 { from { margin-left: 19%; margin-top: -48%; } to { margin-left: 16%; margin-top: -49%; } } @-webkit-keyframes move1 { from { margin-left: 19%; margin-top: -48%; } to { margin-left: 16%; margin-top: -49%; } } @keyframes move1 { from { margin-left: 19%; margin-top: -48%; } to { margin-left: 16%; margin-top: -49%; } } .keyartShip2 { position: absolute; margin-left: 10%; width: 39%; margin-top: -44%; -moz-animation-name: move2; -webkit-animation-name: move2; animation-name: move2; -moz-animation-direction: reverse; -webkit-animation-direction: reverse; animation-direction: reverse; -moz-animation-duration: 6s; -webkit-animation-duration: 6s; animation-duration: 6s; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .keyartShip2 img { width: inherit; } @-moz-keyframes move2 { from { margin-left: 10%; margin-top: -44%; } to { margin-left: 7%; margin-top: -45%; } } @-webkit-keyframes move2 { from { margin-left: 10%; margin-top: -44%; } to { margin-left: 7%; margin-top: -45%; } } @keyframes move2 { from { margin-left: 10%; margin-top: -44%; } to { margin-left: 7%; margin-top: -45%; } } .keyartShip3 { position: absolute; margin-left: 63%; width: 32%; margin-top: -27%; -moz-animation-name: move3; -webkit-animation-name: move3; animation-name: move3; -moz-animation-direction: reverse; -webkit-animation-direction: reverse; animation-direction: reverse; -moz-animation-duration: 6s; -webkit-animation-duration: 6s; animation-duration: 6s; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .keyartShip3 img { width: inherit; } @-moz-keyframes move3 { from { margin-left: 60%; margin-top: -22%; } to { margin-left: 63%; margin-top: -25%; } } @-webkit-keyframes move3 { from { margin-left: 60%; margin-top: -22%; } to { margin-left: 63%; margin-top: -25%; } } @keyframes move3 { from { margin-left: 60%; margin-top: -22%; } to { margin-left: 63%; margin-top: -25%; } } .lensFlare { position: absolute; top: 0; z-index: 2; margin-top: 3%; width: 100%; -moz-animation-name: glow; -webkit-animation-name: glow; animation-name: glow; -moz-animation-direction: alternate-reverse; -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; -moz-animation-duration: 6s; -webkit-animation-duration: 6s; animation-duration: 6s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .lensFlare img { width: inherit; } @-moz-keyframes glow { from { opacity: 1; } to { opacity: 0.95; } } @-webkit-keyframes glow { from { opacity: 1; } to { opacity: 0.95; } } @keyframes glow { from { opacity: 1; } to { opacity: 0.95; } } .smoke { width: 100%; mix-blend-mode: screen; opacity: 0.35; margin-top: 5%; position: absolute; left: 0; } } .keyartCharacters { width: 180%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 48em) { .keyartCharacters { width: 50%; } } @media screen and (min-width: 70em) { .keyartCharacters { width: 60%; } } @media screen and (min-aspect-ratio: 35 / 18) { .keyartCharacters { transform: translate(-50%, -13%) !important; width: 55% !important; } } .keyartCharacters.short { transform: translate(-50%, -20%); width: 140%; } @media screen and (min-width: 36em) { .keyartCharacters.short { transform: translate(-50%, -25%); width: 120%; } } @media screen and (min-aspect-ratio: 3 / 2) { .keyartCharacters.short { transform: translate(-50%, -42%); width: 60%; } } @media screen and (min-width: 130em) { .keyartCharacters.short { width: 60%; } } .keyartCharacters .leftWarframe { width: 21%; margin-right: 2%; margin-bottom: -5%; transform: translate(-35px, -40px) scale(1.03); } @media screen and (max-width: 48em) { .keyartCharacters .leftWarframe { transform: translate(-5px, -40px) scale(1.03); } } @media screen and (min-width: 60em) { .keyartCharacters .leftWarframe { transform: none; transition: all 3s ease-out; } } .keyartCharacters .leftWarframe.stage1 { transform: translate(-35px, -40px) scale(1.03); } .keyartCharacters .centerWarframe { width: 25%; margin-top: -20%; transform: translate(0px, -50px) scale(1.03); } @media screen and (max-width: 48em) { .keyartCharacters .centerWarframe { transform: translate(0px, -50px) scale(1.03); } } @media screen and (min-width: 60em) { .keyartCharacters .centerWarframe { transform: none; transition: all 3s ease-out; } } .keyartCharacters .centerWarframe.stage1 { transform: translate(0, -50px) scale(1.05); } .keyartCharacters .rightWarframe { width: 17%; margin-bottom: -5%; transform: translate(30px, -40px) scale(1.03); } @media screen and (max-width: 48em) { .keyartCharacters .rightWarframe { transform: translate(0, -40px) scale(1.03); } } @media screen and (min-width: 60em) { .keyartCharacters .rightWarframe { transform: none; transition: all 3s ease-out; } } .keyartCharacters .rightWarframe.stage1 { transform: translate(30px, -40px) scale(1.03); } .keyart { display: none; } @media screen and (min-width: 48em) { .keyart { object-fit: cover; display: block; width: 100vw; position: absolute; top: -3px; left: 0; z-index: -1; } } .keyart img { width: inherit; display: block; } .section2 { overflow-x: hidden; margin-top: 65px; clear: both; } @media screen and (min-width: 36em) { .section2 { margin-top: 85px; } } @media screen and (min-width: 48em) { .section2 { background: none; clear: both; height: auto; margin-top: 50px; } } @media screen and (min-width: 64em) { .section2 { margin-top: 50px; } } .section2 .title { position: absolute; margin-left: 10%; z-index: -5; } @media screen and (min-width: 48em) { .section2 .title { margin-top: 5%; z-index: 9; } } @media screen and (min-width: 160em) { .section2 .title { margin-top: 7%; } } .gallery { display: none; } @media screen and (min-width: 48em) { .gallery { margin-top: 22%; display: block; overflow: hidden; } } @media screen and (min-width: 64em) { .gallery { margin-top: 11%; } } .transitionTop { display: none; } @media screen and (min-width: 48em) { .transitionTop { position: absolute; width: 100%; z-index: 1; } .transitionTop img { width: 100%; margin-top: -15%; } } .transitionBot { display: none; } @media screen and (min-width: 48em) { .transitionBot { display: block; position: absolute; width: 100%; } .transitionBot img { width: 100%; margin-top: -8%; } } @media screen and (min-width: 215em) { .transitionBot img { margin-top: -3%; } } @media screen and (min-width: 240em) { .transitionBot img { margin-top: 4%; } } .galleryMobile { margin-top: 5%; } @media screen and (min-width: 48em) { .galleryMobile { display: none; } } .frameMobile { text-align: center; width: 100%; margin-top: 130px; } @media screen and (min-width: 26.5625em) { .frameMobile { margin-top: 100px; } } .frameMobile img { width: 75%; display: inline; margin-bottom: -6px; } @media screen and (min-width: 36em) { .frameMobile img { width: 50%; } } .warframeInfo { background-color: rgba(0, 0, 0, 0.3); width: 90%; margin-left: 5%; z-index: 9; } @media screen and (min-width: 26.5625em) { .warframeInfo { width: 80%; margin-left: 10%; } } @media screen and (min-width: 36em) { .warframeInfo { width: 66%; margin-left: 17%; } } @media screen and (min-width: 48em) { .warframeInfo { position: absolute; background-color: rgba(0, 0, 0, 0.7); width: 45%; padding: 8px 12px 8px 12px; float: right; margin-top: -25%; left: 41%; color: #fff; margin-left: 10%; } .warframeInfo .warframeTitle { color: #ec1813; margin: 0; font-size: 15px; } } @media screen and (min-width: 64em) { .warframeInfo { width: 40%; margin-top: -25%; } .warframeInfo .warframeTitle { font-size: 18px; } } @media screen and (min-width: 77em) { .warframeInfo { width: 33%; left: 50%; } } @media screen and (min-width: 90em) { .warframeInfo { left: 48%; margin-top: -21%; } .warframeInfo .warframeTitle { font-size: 23px; } } @media screen and (min-width: 125em) { .warframeInfo .warframeTitle { font-size: 25px; } } @media screen and (min-width: 160em) { .warframeInfo { width: 29%; left: 52%; margin-top: -19%; } .warframeInfo .warframeTitle { font-size: 40px; } } @media screen and (min-width: 215em) { .warframeInfo { margin-top: -13%; } } @media screen and (min-width: 240em) { .warframeInfo { margin-top: -6%; } } .warframeTitleMobile { color: #ec1813; margin-bottom: 0px; padding-top: 5px; text-transform: uppercase; } .warframeTitleMobile h1 { margin-bottom: 10px; } .warframeDesc { color: #fff; margin: 0; padding: 8px; line-height: 16px; } @media screen and (min-width: 26.5625em) { .warframeDesc { padding: 13px; } } @media screen and (min-width: 48em) { .warframeDesc { margin: 7px 0 5px 0; font-size: 13px; padding: 0; } } @media screen and (min-width: 90em) { .warframeDesc { font-size: 15px; } } @media screen and (min-width: 125em) { .warframeDesc { font-size: 17px; } } @media screen and (min-width: 160em) { .warframeDesc { font-size: 22px; line-height: 24px; } } @media screen and (min-width: 215em) { .warframeDesc { font-size: 27px; line-height: 36px; } } .swipeArrows { position: absolute; width: 100%; margin-top: 65%; } @media screen and (min-width: 36em) { .swipeArrows { margin-top: 50%; } } @media screen and (min-width: 48em) { .swipeArrows { display: none; } } .swipeLeft { float: left; margin-left: 4%; } .swipeRight { float: right; margin-right: 4%; } .spaceOverlay, .fadeOverlay { display: none; } @media screen and (min-width: 48em) { .spaceOverlay, .fadeOverlay { position: absolute; display: block; } } @media screen and (min-width: 48em) { .spaceOverlay { width: 100vw; top: 0; z-index: 9; margin-top: 107%; mix-blend-mode: lighten; opacity: 0.42; pointer-events: none; } .spaceOverlay img { width: 100vw; } } @media screen and (min-width: 64em) { .spaceOverlay { margin-top: 71%; } } @media screen and (min-width: 48em) { .fadeOverlay { background-color: #000; z-index: 0; width: 100vw; height: 400px; opacity: 0; } } @media screen and (min-width: 56em) { .fadeOverlay { height: 467px; } } @media screen and (min-width: 64em) { .fadeOverlay { height: 535px; } } @media screen and (min-width: 77em) { .fadeOverlay { height: 642px; } } @media screen and (min-width: 90em) { .fadeOverlay { height: 742px; } } @media screen and (min-width: 107.5em) { .fadeOverlay { height: 895px; } } @media screen and (min-width: 125em) { .fadeOverlay { height: 1052px; } } @media screen and (min-width: 142.5em) { .fadeOverlay { height: 1180px; } } @media screen and (min-width: 160em) { .fadeOverlay { height: 1322px; } } @media screen and (min-width: 48em) { .videoContainer { height: 385px; } .videoContainer .warframeVideo { width: 100%; display: block; opacity: 0; position: absolute; } } @media screen and (min-width: 56em) { .videoContainer { height: 432px; } } @media screen and (min-width: 64em) { .videoContainer { height: 503px; } } @media screen and (min-width: 77em) { .videoContainer { height: 592px; } } @media screen and (min-width: 90em) { .videoContainer { height: 717px; } } @media screen and (min-width: 107.5em) { .videoContainer { height: 836px; } } @media screen and (min-width: 125em) { .videoContainer { height: 936px; } } @media screen and (min-width: 142.5em) { .videoContainer { height: 1103px; } } @media screen and (min-width: 160em) { .videoContainer { height: 1250px; } } @media screen and (min-width: 48em) { .videoFallback { width: 100%; position: absolute; z-index: -2; } .videoFallback img { width: 100%; } } @media screen and (min-width: 48em) { .slider { margin-left: -25%; width: 100%; } .slider .slides { width: 130vw !important; height: 200px; padding: 0; margin-top: -11%; } .slider .slides .slick-slide { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: 200px !important; } .slider .slides .slick-slide > div { width: 200px !important; } .slider .slides .slick-slide .frame { width: 70% !important; text-align: center; height: 209px; display: inline-block; margin-left: -4%; } .slider .slides .slick-slide .frame img { width: 100%; } .slider .slides .slick-slide .frame .warframeBox { z-index: 5; pointer-events: none; width: 100%; height: 45%; margin-top: -94px; border-bottom: 1px solid #fff; } .slider .slides .slick-slide.slick-center { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } @media screen and (min-width: 64em) { .slider .slides { margin-top: -14%; } .slider .slides .slick-slide .frame { margin-left: -42%; } .slider .slides .slick-slide .frame .warframeBox { height: 60.5%; margin-top: -125px; } } @media screen and (min-width: 77em) { .slider .slides .slick-slide .frame { margin-left: -84%; margin-top: 12%; } } @media screen and (min-width: 90em) { .slider { margin-left: -22%; } .slider .slides .slick-slide { width: 230px !important; } .slider .slides .slick-slide > div { width: 212px !important; } .slider .slides .slick-slide .frame { margin-left: -87%; width: 85% !important; margin-top: 5%; } .slider .slides .slick-slide .frame .warframeBox { margin-top: -109px; height: 53%; } } @media screen and (min-width: 125em) { .slider { margin-left: -28%; } .slider .slides { position: absolute !important; width: 128vw !important; } .slider .slides .slick-slide .frame { margin-left: -35%; height: 211px; } .slider .slides .slick-slide .frame .warframeBox { margin-top: -140px; height: 67%; } } @media screen and (min-width: 160em) { .slider .slides { margin-top: -12%; width: 128vw !important; } .slider .slides .slick-slide .frame { height: 439px; margin-left: -58%; } .slider .slides .slick-slide .frame .warframeBox { margin-top: -148px; height: 34%; } } @media screen and (min-width: 215em) { .slider .slides { margin-top: -5%; } .slider .slides .slick-slide { display: block; padding-right: 475px; } .slider .slides .slick-slide .frame { width: 180% !important; } } @media screen and (min-width: 240em) { .slider { margin-top: 12%; } } .section3 { margin-top: 10px; clear: both; overflow-x: hidden; } @media screen and (min-width: 48em) { .section3 { height: initial; background: none; position: relative; overflow: initial; } } @media screen and (min-width: 90em) { .section3 { margin-top: 100px; } } @media screen and (min-width: 125em) { .section3 { margin-top: 30px; } } @media screen and (min-width: 215em) { .section3 { margin-top: 250px; } } .section3 h1 { font-size: 11px; } @media screen and (min-width: 23.4375em) { .section3 h1 { font-size: 11px; } } @media screen and (min-width: 26.5625em) { .section3 h1 { font-size: 12px; } } @media screen and (min-width: 36em) { .section3 h1 { font-size: 16px; } } @media screen and (min-width: 48em) { .section3 h1 { font-size: 13px; } } @media screen and (min-width: 56em) { .section3 h1 { font-size: 17px; } } @media screen and (min-width: 90em) { .section3 h1 { font-size: 19px; } } @media screen and (min-width: 103.5em) { .section3 h1 { font-size: 25px; } } @media screen and (min-width: 160em) { .section3 h1 { font-size: 34px; } } .warframeGrineer { display: inline; } .warframeGrineer .warframe { float: left; width: 80%; margin-top: 13%; opacity: 1; margin-left: 0%; } @media screen and (min-width: 48em) { .warframeGrineer .warframe { width: 38%; margin-top: -4%; position: relative; opacity: 0; margin-left: 10%; } } @media screen and (min-width: 90em) { .warframeGrineer .warframe { margin-top: 4%; margin-left: 12%; width: 33%; } } @media screen and (min-width: 160em) { .warframeGrineer .warframe { margin-left: 250px; } } .warframeGrineer .grineer { float: right; width: 66%; margin-top: 5%; display: none; } @media screen and (min-width: 48em) { .warframeGrineer .grineer { float: none; width: 47%; margin-top: 20%; position: absolute; margin-left: 52%; display: initial; } } @media screen and (min-width: 90em) { .warframeGrineer .grineer { float: none; width: 39%; margin-top: 14%; position: absolute; margin-left: 11%; } } .warframeGrineer .parkourBg { display: block; float: left; width: 180%; position: relative; margin-top: -51%; margin-left: -118px; z-index: -5; } @media screen and (min-width: 48em) { .warframeGrineer .parkourBg { right: 0; width: 100%; float: right; position: absolute; margin-top: 10%; } } @media screen and (min-width: 90em) { .warframeGrineer .parkourBg { margin-top: 0; } } .section4 { margin-top: 20%; clear: both; } @media screen and (min-width: 48em) { .section4 { margin-top: 65%; width: 100vw; height: 640px; } } @media screen and (min-width: 64em) { .section4 { margin-top: 64%; } } @media screen and (min-width: 90em) { .section4 { margin-top: 48%; } } @media screen and (min-width: 125em) { .section4 { margin-top: 50%; } } @media screen and (min-width: 160em) { .section4 { margin-top: 54%; } } .grineerEarth { display: none; } @media screen and (min-width: 48em) { .grineerEarth { display: inline; float: right; position: absolute; margin-top: 34%; right: 0; z-index: 2; width: 84%; } } @media screen and (min-width: 64em) { .grineerEarth { margin-top: 29%; width: 83%; } } @media screen and (min-width: 77em) { .grineerEarth { margin-top: 32%; } } @media screen and (min-width: 90em) { .grineerEarth { margin-top: 20%; width: 80%; } } @media screen and (min-width: 125em) { .grineerEarth { margin-top: 7%; width: 62%; } } @media screen and (min-width: 160em) { .grineerEarth { margin-top: 9%; } } @media screen and (min-width: 48em) { .grineerEarth img { width: inherit; float: right; } } @media screen and (min-width: 125em) { .grineerEarth img { width: 100%; float: right; margin-top: 20%; } } .ships { display: none; } @media screen and (min-width: 48em) { .ships { display: block; position: absolute; width: 100%; } } @media screen and (min-width: 48em) { .ships img { width: inherit; } } .shipLight { display: none; } @media screen and (min-width: 48em) { .shipLight { display: block; width: 100%; z-index: 2; margin-top: 5%; overflow: hidden; } } @media screen and (min-width: 125em) { .shipLight { margin-top: -2%; overflow: hidden; } } @media screen and (min-width: 48em) { .shipLight img { width: inherit; } } @media screen and (min-width: 64em) { .shipLight img { margin-top: -4%; margin-left: 4%; } } @media screen and (min-width: 77em) { .shipLight img { margin-left: 3%; } } @media screen and (min-width: 90em) { .shipLight img { margin-left: 6%; } } @media screen and (min-width: 125em) { .shipLight img { margin-left: 7%; } } .earth { margin-top: 10%; } @media screen and (min-width: 48em) { .earth { display: none; } } .earth img { width: 100%; float: right; } .blueSky, .grasshopper, .lisetSmall, .shipLight { position: absolute; } @media screen and (min-width: 48em) { .blueSky { margin-top: 18%; margin-left: 32%; width: 49%; } } @media screen and (min-width: 64em) { .blueSky { margin-top: 14%; margin-left: 36%; } } @media screen and (min-width: 77em) { .blueSky { margin-left: 35%; } } @media screen and (min-width: 90em) { .blueSky { margin-left: 38%; } } @media screen and (min-width: 125em) { .blueSky { margin-left: 42%; margin-top: 7%; } } @media screen and (min-width: 48em) { .grasshopper { margin-top: 35%; margin-left: 13%; width: 64%; z-index: 3; } } @media screen and (min-width: 64em) { .grasshopper { margin-top: 31%; margin-left: 17%; } } @media screen and (min-width: 77em) { .grasshopper { margin-left: 16%; } } @media screen and (min-width: 90em) { .grasshopper { margin-left: 19%; } } @media screen and (min-width: 125em) { .grasshopper { margin-left: 23%; margin-top: 26%; } } @media screen and (min-width: 48em) { .lisetSmall { margin-left: 46%; width: 46%; margin-top: 48%; z-index: 3; } } @media screen and (min-width: 64em) { .lisetSmall { margin-left: 50%; margin-top: 45%; } } @media screen and (min-width: 77em) { .lisetSmall { margin-left: 49%; } } @media screen and (min-width: 90em) { .lisetSmall { margin-left: 52%; } } @media screen and (min-width: 125em) { .lisetSmall { margin-left: 53%; margin-top: 39%; } } @media screen and (min-width: 48em) { .lisetSmall img { width: inherit; } } .section5 { background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: 450px; clear: both; height: 82vh; } @media screen and (min-width: 23.4375em) { .section5 { margin-top: 455px; } } @media screen and (min-width: 26.5625em) { .section5 { margin-top: 500px; } } @media screen and (min-width: 36em) { .section5 { margin-top: 610px; } } @media screen and (min-width: 48em) { .section5 { margin-top: 0%; background: none; background-size: auto; height: auto; } } @media screen and (min-width: 56em) { .section5 { margin-top: 24%; } } @media screen and (min-width: 64em) { .section5 { margin-top: 15%; } } @media screen and (min-width: 77em) { .section5 { margin-top: 27%; } } @media screen and (min-width: 90em) { .section5 { margin-top: 38%; } } @media screen and (min-width: 160em) { .section5 { margin-top: 48%; } } @media screen and (min-width: 215em) { .section5 { margin-top: 55%; } } @media screen and (min-width: 48em) { .section5 .title { position: absolute; float: right; right: 0; } } @media screen and (min-width: 48em) { .section5 .transitionBot { margin-top: 78%; } } @media screen and (min-width: 56em) { .section5 .transitionBot { margin-top: 65%; } } @media screen and (min-width: 64em) { .section5 .transitionBot { margin-top: 57%; } } @media screen and (min-width: 77em) { .section5 .transitionBot { margin-top: 48%; } } @media screen and (min-width: 90em) { .section5 .transitionBot { margin-top: 57%; } } @media screen and (min-width: 107.5em) { .section5 .transitionBot { margin-top: 43%; } } @media screen and (min-width: 125em) { .section5 .transitionBot { margin-top: 44%; } } @media screen and (min-width: 142.5em) { .section5 .transitionBot { margin-top: 38%; } } @media screen and (min-width: 160em) { .section5 .transitionBot { margin-top: 45%; } } @media screen and (min-width: 215em) { .section5 .transitionBot { margin-top: 25%; } } @media screen and (min-width: 240em) { .section5 .transitionBot { margin-top: 17%; } } .arsenal { display: none; } @media screen and (min-width: 48em) { .arsenal { display: block; z-index: -1; background-color: #000; width: 100vw; overflow-x: hidden; } .arsenal video { height: 643px; } } @media screen and (min-width: 90em) { .arsenal video { height: 860px; } } @media screen and (min-width: 160em) { .arsenal video { height: 1110px; } } .section6 { background-repeat: no-repeat; background-position: center; background-size: cover; height: 85vh; clear: both; position: relative; } @media screen and (min-width: 36em) { .section6 { height: 643px; overflow: hidden; padding-top: 2%; } } @media screen and (min-width: 90em) { .section6 { height: 860px; } } @media screen and (min-width: 125em) { .section6 { height: 1030px; } } @media screen and (min-width: 160em) { .section6 { height: 1400px; } } @media screen and (min-width: 240em) { .section6 { height: 2000px; } } @media screen and (min-width: 36em) { .section6 p { text-shadow: 2px 2px 2px #000; } } footer { z-index: 2; position: relative; bottom: 0px; background: #000; padding: 6% 0% 6% 0%; width: 100%; font-family: sans-serif; font-size: 12px; color: #fff; } footer .footerImgs { display: flex; flex-direction: column; margin-top: -20px; } @media screen and (min-width: 56em) { footer .footerImgs { margin-left: 6%; width: 45%; } } @media screen and (min-width: 64em) { footer .footerImgs { margin-left: 12%; width: 45%; } } @media screen and (min-width: 125em) { footer .footerImgs { margin-left: 24%; width: 45%; } } footer .footerImgs img { top: 0; transform: inherit; margin-right: 2px; } footer .footerImgs .whiteIcon { filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(165deg) brightness(102%) contrast(100%); } footer .footerImgs img { position: relative; margin: 0px 2.5px; } footer .footerImgs .logosTop img { margin-right: 5px; } @media (max-width: 550px) { footer .footerImgs .logoFlexContainer { margin-bottom: 20px; } } footer small { margin-bottom: 20px; display: block; } @media screen and (min-width: 48em) { footer small { margin-left: 4%; } } @media screen and (min-width: 56em) { footer small { margin-left: 0; } } @media screen and (min-width: 64em) { footer small { margin-left: 0; } } @media screen and (min-width: 77em) { footer small { font-size: 13px; } } @media screen and (min-width: 125em) { footer small { margin-left: 0%; } } .transitionBot2 { display: none; } @media screen and (min-width: 36em) { .transitionBot2 { display: block; position: absolute; width: 100%; bottom: -17%; } } @media screen and (min-width: 64em) { .transitionBot2 { bottom: -26%; } } @media screen and (min-width: 77em) { .transitionBot2 { bottom: -32%; } } @media screen and (min-width: 90em) { .transitionBot2 { bottom: -26%; } } @media screen and (min-width: 120em) { .transitionBot2 { bottom: -34%; } } @media screen and (min-width: 125em) { .transitionBot2 { bottom: -31%; } } @media screen and (min-width: 160em) { .transitionBot2 { bottom: -20%; } } @media screen and (min-width: 215em) { .transitionBot2 { bottom: -30%; } } @media screen and (min-width: 36em) { .transitionBot2 img { width: inherit; } } @media screen and (min-width: 48em) { .transitionTop { display: block; } .section6 .title { position: absolute; } .six.columns { width: 50%; } .footerImgs { width: 48%; float: left; } .terms { float: left; width: 52%; } } @media screen and (min-width: 56em) { .terms { width: 43%; } } @media screen and (min-width: 64em) { .six.columns { width: 41%; } .terms { width: 35%; } } @media screen and (min-width: 125em) { .six.columns { width: 32%; } .terms { width: 21%; } } @media (min-width: 550px) and (max-width: 750px) { .six.columns { width: 62% !important; } .five.columns { width: 34% !important; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-slider .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-slider .slick-list:focus { outline: none; } .slick-slider .slick-list.dragging { cursor: hand; } .slick-slider .slick-list .slick-track, .slick-slider .slick-list .slick-list { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-slider .slick-list .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-slider .slick-list .slick-track:before, .slick-slider .slick-list .slick-track:after { display: table; content: ''; } .slick-slider .slick-list .slick-track:after { clear: both; } .slick-slider .slick-list .slick-track .slick-slide { float: left; height: 100%; min-height: 1px; } .slick-slider .slick-list .slick-track .slick-slide img { display: block; } .contentHeaderContain { margin: 0 auto; display: inline-block; width: 100%; margin-top: 40px; } .contentHeaderContain h2, .contentHeaderContain p { color: #d30000; margin: 0 auto; margin-top: -9px; margin-bottom: 40px; font-size: 25px; text-transform: uppercase; text-align: center; } .contentHeaderContain h2 { margin-top: -18px; font-size: 25px; } .contentHeaderContain p { margin-top: -9px; font-size: 15px; } .contentHeaderContain .contentHeaderLines { margin-top: 25px; width: 34%; float: left; height: 3px; margin: 0 auto; border-top: 1px solid #d30000; border-bottom: 1px solid #d30000; } .contentHeaderContain .contentFooterLines { margin-top: 30px; width: 44%; float: left; } .contentHeaderContain .contentLineRight { float: right; } .contentHeaderContain .lotusLogo { height: 48px; width: 83px; margin: 0 auto; margin-top: -33px; margin-bottom: 50px; background-repeat: no-repeat; background-image: url('../../images/redLotus.png?1554154029'); } .slick-loading .slick-track, .slick-loading .slick-slide { visibility: hidden; } .slick-initialized .slick-slide { display: block; } #gdprsticky { display: none; position: relative; bottom: 0; background-color: white; z-index: 20; width: 100%; border-top: 3px solid #d30000; padding: 10px; font-size: 14px; line-height: 40px; text-align: center; } #gdprsticky p { display: inline-block; width: 60%; line-height: 16px; font-size: 14px; margin: 0; } #gdprsticky .actionBtns { display: inline; margin-left: 20px; position: relative; top: -5px; } #gdprsticky .actionBtns a { border: 3px solid #d30000; padding: 8px; margin-right: 10px; color: #d30000; text-decoration: none; font-family: 'Open-sans',sans-serif; } #gdprsticky .actionBtns a:last-child { margin-right: 0; } #gdprsticky a.close { position: absolute; top: 0; right: 40px; font-size: 20px; color: #d30000; margin: 0; text-decoration: none; } @media (max-width: 600px) { #gdprsticky { line-height: inherit; height: 160px; } #gdprsticky p { display: block; float: none; width: 100%; margin-left: 0; } #gdprsticky .actionBtns { margin-left: 0; display: block; margin-top: 30px; } #gdprsticky a.close { top: 7px; } } #gdprLightboxContainer { display: none; } .gdprLightbox { padding: 20px; } .gdprLightbox table { margin: 25px 0; border-collapse: separate; border-spacing: 1px; } .gdprLightbox table tr { height: 50px; } .gdprLightbox table tr td { padding: 8px; } .gdprLightbox table tr td.value { text-align: center; background-color: #343434; color: #fff; } .gdprLightbox p a { font-family: 'Open-sans', sans-serif; text-decoration: none; color: #d30000; } .gdprLightbox .accept { padding: 0; float: right; margin-bottom: 15px; } .gdprLightbox .accept a { font-family: 'Open-sans', sans-serif; text-decoration: none; color: #d30000; } .gdprLightbox .accept a.value { display: block; text-align: center; background-color: #343434; color: #fff; height: 50px; line-height: 50px; margin-bottom: 5px; } .gdprLightbox .turnOff a { font-family: 'Open-sans', sans-serif; text-decoration: none; color: #d30000; } body.signup #bgvid, body.signup #vidFallback { position: fixed; min-height: 100%; width: 100%; right: 0; margin: 0 auto; z-index: 1; top: 50px; object-fit: cover; } body.signup .content { padding: 20px; } body.signup #submit-btn { margin-top: 15px; } body.signup .signupContent { position: relative; margin-top: 15px; } body.signup .signupContent h1 { margin-bottom: 20px; } body.signup .signupContent #signupPlatforms { margin: 0 auto; display: grid; grid-template-columns: 230px 230px; text-align: center; width: 460px; grid-column-gap: 10px; grid-row-gap: 10px; } @media (max-width: 875px) { body.signup .signupContent #signupPlatforms { width: 100%; display: block; } } body.signup .signupContent #signupPlatforms a { width: 230px; height: 230px; position: relative; font-family: inherit; display: flex; align-items: center; justify-content: center; text-align: center; } body.signup .signupContent #signupPlatforms a img { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: auto; } @media (max-width: 875px) { body.signup .signupContent #signupPlatforms a { width: 100%; display: block; } } body.signup .signupContent #signupPlatforms a .platName { color: white; text-align: center; display: block; text-transform: uppercase; font-size: 19px; position: absolute; bottom: 30px; width: 100%; } body.signup .signupContent #signupPlatforms a.pc { background: #212121; } body.signup .signupContent #signupPlatforms a.ps4 { background: #034169; } body.signup .signupContent #signupPlatforms a.xb1 { background: #005400; } body.signup .signupContent #signupPlatforms a.swi { background: #d30000; } body.signup .signupContent .pcSignup { display: none; } body.signup .signupContent .contentHeaderContain { margin-top: 20px; margin-bottom: 20px; } body.signup .signupContent .contentHeaderContain .contentHeaderLines { width: 22%; border-color: #fff; height: 9px; } @media (max-width: 875px) { body.signup .signupContent .contentHeaderContain .contentHeaderLines { display: none; } } body.signup .signupContent .contentHeaderContain .contentHeaderText { text-align: center; position: relative; top: -12px; font-size: 21px; padding: 0 21%; } body.signup #mainText { margin-top: 15%; position: relative; z-index: 10; } @media (min-width: 1980px) { body.signup #mainText { margin-top: 20%; } } body.signup #mainText .text-content { background-color: rgba(0, 0, 0, 0.7); text-align: center; color: #fff; padding-bottom: 20px; margin-bottom: 25px; } body.signup #mainText .text-content .title { background-color: #000; font-size: 42px; padding: 30px; text-shadow: 0px 0px 40px #fff; font-family: michroma,sans-serif; } @media (max-width: 600px) { body.signup #mainText .text-content .title img { width: 100%; } } body.signup #mainText .text-content form .form-text { background: none; border-left: none; border-right: none; border-top: none; } body.signup #mainText .text-content form .form-text::placeholder { color: #fff; } body.signup #mainText .text-content form label.error { text-align: left; margin-top: -5px; } body.signup #mainText .text-content form fieldset#opt-in-newsletter label, body.signup #mainText .text-content form fieldset#agree label, body.signup #mainText .text-content form fieldset#contest label, body.signup #mainText .text-content form fieldset#read-rules label { text-align: left; margin-top: 3px; position: relative; left: 10px; margin-bottom: 15px; line-height: 17px; } body.signup #mainText .text-content form fieldset#opt-in-newsletter label a, body.signup #mainText .text-content form fieldset#agree label a, body.signup #mainText .text-content form fieldset#contest label a, body.signup #mainText .text-content form fieldset#read-rules label a { color: #fff; text-decoration: underline; } body.signup #mainText .text-content form .g-recaptcha { display: inline-block; margin: 20px auto; } body.signup #mainText .text-content p { width: 65%; margin: 0 auto; font-size: 20px; margin-bottom: 25px; line-height: 25px; } body.signup #mainText .text-content a:hover { color: #fff; } .aliasOptions .aliasOptionTitle { color: #d30000; } .aliasOptions p { margin-top: 5px; } .aliasOptions .aliasOption { font-style: italic; } .contest-box { border: white 1px solid; border-radius: 5px; background-image: url('../../images/promo/space-contest/overlay-bg_70per.png?1573508867'); margin: 0 0%; padding: 11px; } .contest-box .contest-title { font-weight: bold; font-size: 1.1em; margin: 5px 0 10px 0; } .contest-box .fancy { line-height: 0.5; text-align: center; } .contest-box .fancy span { display: inline-block; position: relative; } .contest-box .fancy span:before, .contest-box .fancy span:after { content: ""; position: absolute; height: 3px; border-bottom: 1px solid white; top: 0; width: 100%; } @media (max-width: 600px) { .contest-box .fancy span:before, .contest-box .fancy span:after { width: 25%; } } .contest-box .fancy span:before { right: 100%; margin-right: 15px; } .contest-box .fancy span:after { left: 100%; margin-left: 15px; } @media (max-width: 875px) { .contest-box { margin: 0 0; } } @media (max-width: 320px) { .contest-box { border: white 1px solid; } .contest-box .contest-title { font-size: 18px; } .contest-box #read-rules { width: 100%; } .contest-box #read-rules label { font-size: 11px; } } .lightboxVideo { background-color: rgba(0, 0, 0, 0.9); z-index: 450; position: fixed; width: 100%; height: 100%; text-align: center; display: none; } .lightboxVideo iframe { border: none; margin-top: 50%; } .lightboxVideo .clear, .lightboxOverlay .clear { clear: both; } .lightboxVideo .close, .lightboxOverlay .close { margin-top: 3%; text-align: left; cursor: pointer; margin-left: 4%; } @media screen and (min-width: 36em) { .lightboxVideo .close, .lightboxOverlay .close { margin-top: 2%; margin-left: 3%; } } @media screen and (min-width: 90em) { .lightboxVideo .close, .lightboxOverlay .close { margin-top: 1.5%; margin-left: 2%; } } .lightboxVideo .close img, .lightboxOverlay .close img { width: 5%; vertical-align: middle; margin-right: 3px; } @media screen and (min-width: 36em) { .lightboxVideo .close img, .lightboxOverlay .close img { width: 3%; } } @media screen and (min-width: 64em) { .lightboxVideo .close img, .lightboxOverlay .close img { width: 2%; } } @media screen and (min-width: 90em) { .lightboxVideo .close img, .lightboxOverlay .close img { width: 1.8%; } } @media screen and (min-width: 125em) { .lightboxVideo .close img, .lightboxOverlay .close img { width: 1%; } } .lightboxVideo .close .lightboxLogo, .lightboxOverlay .close .lightboxLogo { position: relative; transform: translateX(-50%); left: 50%; max-width: 550px; } .lightboxVideo .close p, .lightboxOverlay .close p { color: #fff; display: inline; font-size: 15px; vertical-align: middle; } @media screen and (min-width: 90em) { .lightboxVideo .close p, .lightboxOverlay .close p { font-size: 18px; } } .lightboxOverlay { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; z-index: 500; overflow-y: scroll; height: 100%; } .lightboxOverlay .lightboxForm { margin: 0 auto; font-family: 'Open Sans', sans-serif; margin-top: 20%; } .lightboxOverlay .lightboxForm .formHolder { margin-top: 35px; } .lightboxOverlay .lightboxForm img { width: 100%; } .lightboxOverlay .lightboxForm h1 { display: none; } @media screen and (min-width: 48em) { .lightboxOverlay .lightboxForm { margin-top: 0; } } .lightboxOverlay .lightboxForm.contestEnter, .lightboxOverlay .lightboxForm.contestOver { color: #fff; margin-top: 20% !important; } .lightboxOverlay .lightboxForm.contestEnter img.logoWhite, .lightboxOverlay .lightboxForm.contestOver img.logoWhite { margin-bottom: 30px; } .lightboxOverlay .lightboxForm.contestEnter p, .lightboxOverlay .lightboxForm.contestOver p { margin-bottom: 0; text-align: center; font-size: 22px; } .lightboxOverlay .lightboxForm.contestEnter a, .lightboxOverlay .lightboxForm.contestOver a { color: #d30000; font-family: inherit; } .lightboxOverlay .lightboxForm.contestEnter form, .lightboxOverlay .lightboxForm.contestOver form { text-align: center; } .lightboxOverlay .lightboxForm.contestEnter form input[type="checkbox"], .lightboxOverlay .lightboxForm.contestOver form input[type="checkbox"] { margin-bottom: 0; } .lightboxOverlay .lightboxForm.contestEnter form input[type="email"], .lightboxOverlay .lightboxForm.contestOver form input[type="email"] { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; width: 100%; background: transparent; border-left: 0; border-top: 0; border-right: 0; margin: 20px 0; } .lightboxOverlay .lightboxForm.contestOver .submit-btn { text-align: center; display: block; margin: 20px; } .lightboxOverlay .lightboxForm.contestOver .submit-btn a { color: #fff; border: none; } .lightboxOverlay .lightboxForm.contestOver .submit-btn a:hover { color: #fff; } .lightboxOverlay .lightboxForm .highlightCheckbox { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid #fff; display: inline-block; margin: 20px 0; padding: 20px; font-size: 18px; } .lightboxOverlay .lightboxForm .readRulesBox { width: 60%; margin: 0 auto; margin-bottom: 30px; } @media (max-width: 875px) { .lightboxOverlay .lightboxForm .readRulesBox { width: 100%; } } .lightboxOverlay .lightboxForm .signupContent { width: 100%; color: white; top: 0; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms { margin: 0 auto; display: grid; grid-template-columns: 230px 230px; text-align: center; width: 460px; grid-column-gap: 10px; grid-row-gap: 10px; } @media (max-width: 875px) { .lightboxOverlay .lightboxForm .signupContent #signupPlatforms { width: 100%; display: block; } } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a { width: 230px; height: 230px; position: relative; font-family: inherit; display: flex; align-items: center; justify-content: center; text-align: center; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a img { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: auto; } @media (max-width: 875px) { .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a { width: 100%; display: block; } } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a .platName { color: white; text-align: center; display: block; text-transform: uppercase; font-size: 19px; position: absolute; bottom: 30px; width: 100%; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a.pc { background: #212121; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a.ps4 { background: #034169; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a.xb1 { background: #005400; } .lightboxOverlay .lightboxForm .signupContent #signupPlatforms a.swi { background: #d30000; } .lightboxOverlay .lightboxForm .signupContent .pcSignup { display: none; } .lightboxOverlay .lightboxForm .signupContent .g-recaptcha { width: 310px; margin: 20px auto; } .lightboxOverlay .lightboxForm .signupContent fieldset#opt-in-newsletter, .lightboxOverlay .lightboxForm .signupContent fieldset#agree, .lightboxOverlay .lightboxForm .signupContent fieldset#contest, .lightboxOverlay .lightboxForm .signupContent fieldset#read-rules { width: 80%; margin: 0 auto; margin-bottom: 8px; line-height: 18px; } .lightboxOverlay .lightboxForm .signupContent input::-webkit-input-placeholder { color: white; } .lightboxOverlay .lightboxForm .signupContent input[type="text"], .lightboxOverlay .lightboxForm .signupContent input[type="email"], .lightboxOverlay .lightboxForm .signupContent input[type="password"] { background: transparent; border: none; border-bottom: 1px solid white; color: #fff; border-radius: 0 !important; } .lightboxOverlay .lightboxHolder { width: 80%; margin-left: 10%; } @media screen and (min-width: 48em) { .lightboxOverlay .lightboxHolder { width: 60%; margin-left: 20%; } } @media screen and (min-width: 64em) { .lightboxOverlay .lightboxHolder { width: 50%; margin-left: 25%; } } @media screen and (min-width: 90em) { .lightboxOverlay .lightboxHolder#signupLightbox, .lightboxOverlay .lightboxHolder#enterContestLightbox { width: 30%; margin-left: 35%; } } .lightboxOverlay .lightboxHolder input[type="submit"], .lightboxOverlay .lightboxHolder button { border: none; color: #fff; font-family: Michroma, sans-serif; font-size: 16px; } .lightboxOverlay .lightboxHolder .contest-box { width: 90%; margin: 20px auto; } .lightboxOverlay .lightboxHolder .contest-box div { margin-bottom: 10px; } .lightboxOverlay .lightboxHolder .submit-btn { margin-bottom: -15px !important; } .lightboxOverlay .lightboxHolder .submit-btn input { background-color: red; } @media (max-width: 600px) { .lightboxOverlay .lightboxHolder .submit-btn input { font-size: 10px; } } @media screen and (min-width: 1400px) { .lightboxOverlay .lightboxHolder#loginLightbox .contestEnter { width: 60%; margin: 0 auto; } } .lightboxOverlay .lightboxHolder#loginLightbox p { color: white; } .lightboxOverlay .lightboxHolder#loginLightbox #loginPage #mainText { margin-top: 10%; } .lightboxOverlay #submit-btn { text-align: center; } .lightboxOverlay .consoleLoginBtns { text-align: center; } .lightboxOverlay .consoleLoginBtns a { width: 32%; height: 55px; padding-top: 8px; min-width: 130px; display: inline-block; text-align: center; } .lightboxOverlay .consoleLoginBtns a img { width: auto !important; } @media (max-width: 600px) { .lightboxOverlay .consoleLoginBtns a { width: 100%; } } .lightboxOverlay .consoleLoginBtns a.ps4Btn { background-color: #274368; } .lightboxOverlay .consoleLoginBtns a.xb1Btn { background-color: #2f5212; } .lightboxOverlay .consoleLoginBtns a.swiBtn { background-color: #e70012; position: relative; top: 1px; margin-bottom: 50px; } .lightboxOverlay form fieldset label.error { color: red; margin-bottom: 10px; font-weight: 100; } .lightboxOverlay form #email label, .lightboxOverlay form #confirm-email label, .lightboxOverlay form #alias label, .lightboxOverlay form #password label, .lightboxOverlay form #confirm-password label { display: none; } .lightboxOverlay form #opt-in-newsletter label, .lightboxOverlay form #contest label, .lightboxOverlay form #agree label, .lightboxOverlay form #read-rules label { display: inline; margin-bottom: .5rem; font-weight: 100; } .lightboxOverlay form #opt-in-newsletter label a, .lightboxOverlay form #contest label a, .lightboxOverlay form #agree label a, .lightboxOverlay form #read-rules label a { color: #fff; text-decoration: underline; font-family: inherit; text-decoration-color: #fff; } .lightboxOverlay form #opt_in_newsletter_check { margin-bottom: 0; } .lightboxOverlay form #agreed { margin-bottom: 0 !important; } .lightboxOverlay input.error { border: 1px solid red !important; } .lightboxOverlay .consoleLines { margin: 15px 0; } .lightboxOverlay .consoleLines .contentHeaderText { color: white; text-align: center; position: relative; top: -17px; text-transform: uppercase; font-size: 24px; padding: 0 25%; } .lightboxOverlay .consoleLines.contentHeaderContain .contentHeaderLines { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; width: 22% !important; height: 3px; float: left; } @media (max-width: 875px) { .lightboxOverlay .consoleLines.contentHeaderContain .contentHeaderLines { display: none; } } .lightboxOverlay .consoleLines .contentLineRight { float: right !important; } .lightboxOverlay button, .lightboxOverlay .button { background: #d30000; border: none !important; color: #fff !important; font-size: 14px; font-weight: lighter; display: inline-block; padding: 0 35px; height: 38px; line-height: 38px; text-transform: uppercase; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; word-spacing: 5px; -moz-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .lightboxOverlay button .button-wrap, .lightboxOverlay .button .button-wrap { display: block; -moz-transform: skewX(25deg); -ms-transform: skewX(25deg); -webkit-transform: skewX(25deg); transform: skewX(25deg); } .lightboxOverlay button a, .lightboxOverlay .button a { display: block; width: auto; } .lightboxOverlay .lightboxLogo { position: relative; transform: translateX(-50%); left: 50%; width: 100%; max-width: 462px; } #loginPage .consoleLoginBtns a { width: 32%; height: 45px; padding-top: 8px; min-width: 130px; } #loginPage .consoleLoginBtns a.psBtn, #loginPage .consoleLoginBtns a.ps4Btn { background-color: #274368; } #loginPage .consoleLoginBtns a.xb1Btn { background-color: #2f5212; } #loginPage .consoleLoginBtns a.swiBtn { background-color: #e70012; } @media (max-width: 875px) { #loginPage .consoleLoginBtns a { margin-bottom: 5px; width: 100%; } } #loginPage .contentHeaderContain p { color: #ffffff; } body.new_login, #loginPage { color: #ffffff; } body.new_login #bgvid, body.new_login #vidFallback, #loginPage #bgvid, #loginPage #vidFallback { position: fixed; min-height: 100%; width: 100%; right: 0; margin: 0 auto; z-index: 1; top: 50px; object-fit: cover; } body.new_login #mainText, #loginPage #mainText { position: relative; z-index: 10; } body.new_login #mainText, #loginPage #mainText { margin-top: 15%; margin-bottom: 5%; } @media (min-width: 1980px) { body.new_login #mainText, #loginPage #mainText { margin-top: 20%; } } body.new_login #mainText .text-content, #loginPage #mainText .text-content { background-color: rgba(0, 0, 0, 0.7); text-align: center; color: #fff; padding-bottom: 20px; } body.new_login #mainText .text-content .title, #loginPage #mainText .text-content .title { background-color: #000; font-size: 36px; padding: 30px; text-shadow: 0px 0px 40px #fff; font-family: michroma,sans-serif; text-transform: uppercase; } body.new_login #mainText .text-content .contactImg, #loginPage #mainText .text-content .contactImg { margin: 25px 0; } body.new_login #mainText .text-content .contentHeaderContain, #loginPage #mainText .text-content .contentHeaderContain { width: 75%; } body.new_login #mainText .text-content .contentHeaderContain .contentHeaderLines, #loginPage #mainText .text-content .contentHeaderContain .contentHeaderLines { border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 6px; } body.new_login #mainText .text-content .contentHeaderContain .contentHeaderText, #loginPage #mainText .text-content .contentHeaderContain .contentHeaderText { font-size: 21px; top: -10px; position: relative; } body.new_login #mainText .text-content p, #loginPage #mainText .text-content p { width: 65%; margin: 0 auto; font-size: 20px; margin-bottom: 25px; line-height: 25px; } @media (max-width: 600px) { body.new_login .wrapper, #loginPage .wrapper { background-image: inherit; } body.new_login .wrapper .contentHeaderContain.console .contentHeaderLines, #loginPage .wrapper .contentHeaderContain.console .contentHeaderLines { display: none; } body.new_login .wrapper .contentHeaderLines, #loginPage .wrapper .contentHeaderLines { width: 30% !important; } body.new_login .wrapper #submit-login [type="submit"], #loginPage .wrapper #submit-login [type="submit"] { width: 120%; } } body.new_login #mainText .text-content p, #loginPage #mainText .text-content p { margin-bottom: 55px; line-height: 0px; } @media (max-width: 600px) { body.new_login #mainText .text-content p, #loginPage #mainText .text-content p { line-height: 22px; } } body.new_login form#loginForm, #loginPage form#loginForm { width: 50%; margin: 0 auto; } body.new_login form#loginForm input[type="text"], body.new_login form#loginForm input[type="email"], body.new_login form#loginForm input[type="password"], #loginPage form#loginForm input[type="text"], #loginPage form#loginForm input[type="email"], #loginPage form#loginForm input[type="password"] { color: #ffffff; } body.new_login form#loginForm .form-text, #loginPage form#loginForm .form-text { background: none; border-left: none; border-right: none; border-top: none; } body.new_login form#loginForm .form-text::placeholder, #loginPage form#loginForm .form-text::placeholder { color: #fff; } @media (max-width: 600px) { body.new_login form#loginForm, #loginPage form#loginForm { width: 85%; } } body.new_login form#loginForm #remember-me, #loginPage form#loginForm #remember-me { float: left; } .fixedFooter { position: fixed; z-index: 100; bottom: 0; width: 100%; } .fixedFooter .spaceContest { position: relative; bottom: 0px; width: 100%; display: none; text-align: center; color: white; background-size: cover; background-repeat: no-repeat; background-image: url('../../images/promo/space-contest/desktop-bg.png?1573508864'); padding-bottom: 60px; box-shadow: 5px 5px black; } .fixedFooter .spaceContest .close { position: absolute; margin: 0; right: 10px; top: 10px; color: white !important; text-decoration: none !important; font-family: michroma, 'open sans' !important; } .fixedFooter .spaceContest .close:hover { color: white !important; } .fixedFooter .spaceContest:before { content: ''; position: absolute; top: -9px; left: 0; right: 0; bottom: 100%; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); } @media (max-width: 320px) { .fixedFooter .spaceContest { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5); } } @media (max-width: 600px) { .fixedFooter .spaceContest { background-image: url('../../images/promo/space-contest/mobile-bg.png?1573508869'); padding-bottom: 0; height: 90px; } } .fixedFooter .spaceContest .main-text { position: absolute; font-size: 1.9em; width: 50%; letter-spacing: 3px; line-height: 1; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); text-shadow: 0px 0px 7px rgba(255, 255, 255, 0.5); } .fixedFooter .spaceContest .main-text span { display: inline-block; } .fixedFooter .spaceContest .main-text b { font-weight: bold; } @media screen and (max-width: 1400px) { .fixedFooter .spaceContest .main-text { font-size: 1.6em; } } @media screen and (max-width: 1050px) { .fixedFooter .spaceContest .main-text { font-size: 1em; width: 50%; } } @media (max-width: 875px) { .fixedFooter .spaceContest .main-text { font-size: 1em; } } @media (max-width: 600px) { .fixedFooter .spaceContest .main-text { top: 35%; width: 100%; } .fixedFooter .spaceContest .main-text span { display: block; } .fixedFooter .spaceContest .main-text span.line2 { font-size: 1.8em; } } @media (max-width: 320px) { .fixedFooter .spaceContest .main-text { font-size: 0.9em; } } .fixedFooter .spaceContest .learn-button { position: absolute; right: 4%; font-family: 'Michroma', 'open sans'; background-color: #39b0c8; transition: box-shadow 0.5s, text-shadow 0.5s; cursor: pointer; text-align: center; line-height: 1.6; font-weight: 400; padding: 5px 40px; font-size: 16px; letter-spacing: 1px; bottom: 50%; transform: translateY(50%); } .fixedFooter .spaceContest .learn-button a, .fixedFooter .spaceContest .learn-button a:hover { text-decoration: none; color: #fff; } .fixedFooter .spaceContest .learn-button:hover { text-shadow: 0 0 10px #fff; box-shadow: 0 0 50px #39b0c8; } @media (min-width: 1980px) { .fixedFooter .spaceContest .learn-button { padding: 5px 40px; } } @media screen and (max-width: 1400px) { .fixedFooter .spaceContest .learn-button { padding: 5px 16px; font-size: 12px; } } @media (max-width: 875px) { .fixedFooter .spaceContest .learn-button { padding: 5px 16px; } } @media (max-width: 600px) { .fixedFooter .spaceContest .learn-button { right: 50%; transform: translate(50%); bottom: 7%; width: 185px; padding: 3px 7% 3px 7%; } } @media (max-width: 320px) { .fixedFooter .spaceContest .learn-button { padding: 2px 7% 2px 7%; } }