:root { --color-primary: #2ffff8; --color-secondary: #e73d09; --bg-nav: #5b1414 url(../images/main_header_bg_2x.jpg) no-repeat center center; --color-nav: #fff; --bg-body: #000; --color-body: #fff; --bg-body-login: #000; --bg-footer: #181818; --txt-footer: #fff; --txt-footer-hover: #fff; } /* //// //// Easing general purpose //// --------------------------------------------------------------*/ .easeOut { -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* //// //// Default Font //// --------------------------------------------------------------*/ html, body { height: 100%; min-height: 100%; } body { font-family: "Montserrat", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400; } strong { font-weight: 600; } .genC1 { color: var(--color-primary)!important; } .genC2 { color: var(--color-secondary)!important; } .genPad1 { padding-top: 7.6rem; padding-bottom: 7.6rem;} .FntMs { font-family: "BadGr", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700; } .FntAve { font-family: "Ave", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500; } #fullWrp { margin: 0 auto; min-height: 100%; background: var(--bg-body); position: relative; overflow-y: hidden; } .genTitle01 { font-size: 16px; line-height: 1.2em; font-weight: 600; color: var(--color-primary); letter-spacing: 0.025em; padding-bottom: 1em; } svg path,svg shape,svg linearGradient { shape-rendering: geometricPrecision; } /* logo -----------------------------*/ #mainLogo { float: left; } #mainLogo a { display: block; background: url(../images/main_logo_2x.png) no-repeat left center; background-size: contain!important; width: 306px; height: 89px; white-space: nowrap; text-indent: -8000px; margin-left: -4px; } @media all and (max-width: 1024px) { #mainLogo a { background-size: contain; height: 58px; } } @media all and (max-width: 480px) { #mainLogo a { max-width: 25.1rem; height: 5.8rem;} } /* Main Header --------------------------------------------------------------*/ #mainHdr { z-index: 12; background: var(--bg-nav); background-size: cover; } .introHeader {position: absolute; left: 0; top: 0; width: 100%; background: none!important; } #mainHdr .ctr { padding: 0 20px; margin: 0 auto; position: relative; display: flex; justify-content: space-between; align-items: center; } #mainHdr { padding: 25px 0; } .nav-hamburger { display: none!important; } #mainLogo { margin: 0; display: block; float: left; position: relative; z-index: 10; } #mainNav { display: block; margin: 0 ; float: right; margin-right: 0; margin-left: auto; } #mainNav .site-nav { display: flex; justify-items: flex-start; padding: 18px 0 18px 0; } #mainNav .site-nav li { display: inline; white-space: nowrap; font-size: 28px; line-height: 65px; padding: 0px 1em; font-weight: 400; letter-spacing: 0; letter-spacing: 0.075em; } #mainNav .site-nav li:last-child { padding: 0; } #mainNav .site-nav li a { color: #fff; position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-transform: uppercase; font-family: "BadGr", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400; } @media all and (min-width: 1240px) { #mainHdr .ctr { padding: 0 3rem; } } @media all and (max-width: 1024px) { #mainHdr { padding: 8px 0; } #mainNav .site-nav { padding: 10px 0 10px 0; } #mainNav .site-nav li { font-size: 22px!important; } } @media (max-width: 572px) { #mainNav .site-nav li { font-size:18px!important; padding: 0px 12px 0 0; line-height: 50px; } } @media all and (max-width: 479px) { #mainNav .site-nav li { font-size: 13px!important; } } /* //// //// Mainpage //// --------------------------------------------------------------*/ /* Main Intro --------------------------------------------------------------*/ #mainIntro { display: flex; justify-content: center; align-items: center; background: #fff url("../images/main_intro_bg_xl.jpg") no-repeat center center; background-size: cover; height: 37.44vw ; min-height: 674px; color: #fff; text-align: center; position: relative; } #mainIntro .FrmCtr2 { z-index: 2; padding-top: 6rem; padding-bottom: 6rem; position: relative; z-index: 2; max-width: 1436px; width: 100%; box-sizing: border-box; } #mainIntro .mainLogo { display: block; margin: 0 auto; background: url("../images/main_logo_2x.png") no-repeat center center; background-size: contain; width: 146px; text-indent: -8000px; padding: 0 ; line-height: 20px; } #mainIntro .mainLogo:after { content: ' '; display: block; padding-top: calc(108.56% - 20px); } #mainIntro .ln1 { max-width: 1101px; margin: 0 auto; padding: 0; } #mainIntro .ln1 .txt { text-indent: -40000px; white-space: nowrap; display: block; margin: 0 auto; padding-top: 33.33%; background: url("../images/main_intro_txt_2x.png") no-repeat center center; background-size: contain; position: relative; } #mainIntro .ln1 .txt:before { content: ' '; display: block; width: 99.8183%; padding-top: 31.57%; background: url("../images/main_intro_txt_bg_xl.png"); background-size: contain; left: 0; top: 14%; z-index: -2; position: absolute; } #mainIntro .ln1 span.grad { display: inline-block; background: -webkit-linear-gradient(#ffffff 0%, #c1ddf9 92%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; padding: 0.015em; z-index: 22; } #mainIntro .ln1 span.grad:after { content: attr(data-text); display: block; position: absolute; left: 0; top: 0; z-index: -2; padding: 0.25em;} #mainIntro .ln1 .un { position: relative; display: inline-block; background: -webkit-linear-gradient(#f5f2f5, #c7e3ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.25em; margin: 0 -0.25em; } #mainIntro .ln1 .un:after { content: ' '; border-top: solid 0.045em #c8e3ff; position: absolute; bottom: -0.1em; left: 0.25em; right: 0.25em; box-shadow: 1px 1px 0 0 #000; } #mainIntro .ln2 { font-size: 24px; line-height: 0.9em; padding: 0.45em 0; text-shadow: 0.5em 0.5em 0 #000; display: block; max-width: 37em; } #mainIntro .ln2 .un { position: relative; display: inline-block; } #mainIntro .ln2 .un:after { content: ' '; border-top: solid 2px #fff; position: absolute; bottom: -0.1em; width: 100%; left: 0; } #mainIntro .ln3 { font-size: 28px; line-height: 1.1em; padding: 0; display: block; max-width: 40em; text-transform: none; letter-spacing: 0.075em; font-weight: 400; text-shadow: 0.14em 0.14em 0 #000; } #mainIntro .btnWrp { padding: 16px 0; position: relative; } #mainIntro .btnWrp:after { content: ' '; display: block; z-index: -1; position: absolute; left: 0; top: 100px; bottom: 100px; width: 100; } #mainIntro .info { font-size: 14px; line-height: 1.2em; position: relative; display: inline-block; color: #000; text-shadow: 0 1px 0 #000; } #mainIntro .info:after { content: ' '; display: inline-block; bottom: -2px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.4); position: absolute; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } #mainIntro .info:hover:after { background: rgba(255,255,255,0.9); } @media all and (min-width: 768px) and (max-width: 1800px) { #mainIntro { background-size: 1800px auto!important; background-position: center bottom; } } @media all and (max-width: 1540px) { #mainIntro .ln1 { font-size: 160px; } #mainIntro .ln3 { font-size: 28px; } } @media all and (max-width: 1124px) { #mainIntro .FrmCtr2 { padding-top: 12.4rem; padding-bottom: 12.4rem; } #mainIntro .mainLogo { width: 12.98vw; } #mainIntro .ln1 { font-size: 14.23vw; padding-top: 0.4em; } #mainIntro .ln2 { font-size: 3.5vw; } #mainIntro .ln3 { font-size: 3.19vw; } } @media all and (max-width: 767px) { #mainIntro { background-size: cover!important; background-position: center bottom!important; } } @media all and (max-width: 572px) { #mainIntro { min-height: 87vw; padding-top: 7.6rem; } #mainIntro .FrmCtr2 { padding-top: 8.4rem; padding-bottom: 8.4rem; } #mainIntro .mainLogo { width: 18.98vw; } #mainIntro .ln1 { font-size: 18.6vw; padding-top: 0; max-width: 13em; } #mainIntro .ln2 { font-size: 3.8vw; } #mainIntro .ln3 { font-size: 4.7vw; padding: 0.2em 0 1.2em 0; line-height: 1.1em; max-width: 15em; } } /* Main Footer --------------------------------------------------------------*/ #mainFtr { background: var(--bg-footer); color: var(--txt-footer); box-shadow: 0 9000px 0 9000px var(--bg-footer); font-family: "Montserrat", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans!important; font-weight: 600; position: relative; } #mainFtr:after { content: ' '; background: url("../images/main_ftr_bg.jpg") no-repeat top center; background-size: 100%; display: block; position: absolute; height: 160vw; min-height :100%; left: 0; top: 0; width: 100%; } #ftrNav { display: block; font-size: 13px; margin-bottom: 2.4rem; padding-bottom: 0; position: relative; z-index: 2; } #ftrNav li { display: inline; } #ftrNav li a { color: var(--txt-footer); margin: 0 0.72em; } #ftrNav li a:hover { color: var(--txt-footer-hover); text-decoration: underline; } #mainFtr .logo { width: 15.2rem; margin-bottom: 3rem; position: relative; z-index: 2; } #mainFtr .copy { font-size: 13px; line-height: 1.75em; padding-bottom: 0; margin-bottom: 0; position: relative; z-index: 2; } @media all and (min-width: 768px) and (max-width: 1800px) { #mainFtr:after {background-size: 1800px auto!important; } } @media all and (max-width: 1199px) { #ftrNav { margin-left: auto; margin-right: auto; max-width: 34em; } #ftrNav li span { display: none; } #ftrNav li a { margin: 0 0.5em; } } @media all and (max-width: 767px) { #mainFtr:after { background-size: 130vw!important; background-position: center top!important; } } @media all and (max-width: 676px) { #ftrNav { font-size: 2.419vw; } #ftrNav li { line-height: 1.4em; } #mainFtr .copy { font-size: 2.419vw; } } /* //// //// Login //// --------------------------------------------------------------*/ /* Form --------------------------------------------------------------*/ #loginWrp { background: #000000; display: flex; justify-content: flex-start; align-content: stretch; } #loginFormBg { flex-grow: 1 ; display: flex; justify-content: center; align-items: stretch; padding: 6rem 2rem; } #loginForm { padding: 4rem; max-width: 370px; background: #fff; color: #414141; border-radius: 5px; text-align: center; } #loginForm .formTitle { font-size: 24px; line-height: 1.3em; font-weight: 700; padding-bottom: 0.55em; } #loginForm .formSubtitle { color: #6b6b6b; font-size: 15.2px; font-weight: 400; line-height: 1.13em; margin-bottom: 0; } #loginForm .btmForm { padding-top: 20px; } #loginForm .formWrp p { padding-bottom: 15px; text-align: left; } #loginForm p textarea { min-height: 7.1em; width: 100%!important; max-width: 100%; } #loginForm .inputIco { position: relative; display: block; } #loginForm .inputIco input { padding-right:40.63px;} #loginForm .passwordToggle { position: absolute; right: 0; top: 24px; height: 40.63px; width: 40.63px; display: flex; justify-content: center; align-items: center; } #loginForm .passwordToggle svg { width: 44%; height: 100%; } #loginForm .passwordToggle svg path { fill: #919191; } #loginForm .passwordToggle svg .st1 { display: none; } #loginForm input[type=text] + .passwordToggle svg .st0 { display: none; } #loginForm input[type=text] + .passwordToggle svg .st1 { display: block; } #loginForm label .cards { float: right; white-space: nowrap; } #loginForm label img { display: inline; vertical-align: top; height: 21.4px!important; width: auto!important; margin-left: 2px; } #loginForm .cvvInfo { background-color: var(--color-primary); color: #fff; display: block; position: absolute; right: 10px; top: 12px; width: 1.2em; height: 1.2em; line-height: 1.2em; font-size: 14px; font-weight: 500; text-align: center; z-index: 40; border-radius: 3px; } #loginForm .cvvInfo:hover { background-color: #277add; } #loginForm .passwordStrength { font-size: 11px; line-height: 1.2em; color:#919191; clear: both; } #loginForm .passwordStrength svg { width: 1.2em; height: 1.2em; margin-right: 0.4em; position: relative; top: 0.2em; } #loginForm .tos { font-size: 12px; padding: 14px 0 20px 0; clear: both; } #loginForm .tos input[type="checkbox"] { position: relative; display: inline-block; vertical-align: top; width: 1.05em!important; height: 1.05em!important; font-size: 1.05em!important; top: 0.225em; } #loginForm .tos a {color: var(--color-primary); } #loginForm .tos a:hover { text-decoration: underline; } #loginForm .keep label { font-size: 15px; text-align: left; line-height: 1em; width: auto; display: block; padding: 0.5em 0; } #loginForm .keep label input { float: left; width: 1em!important; height: 1em!important; display: block; margin: 0 0.4em 0 0; vertical-align: top; position: relative; top: 0em; } #loginForm .formWrp p.creat { font-size: 15px; line-height: 1.2em; width: 100%; display: block; padding: 15px 0 0 0; text-align: center; } #loginForm .formWrp p.creat a { color: var(--color-secondary); } @media all and (max-width:1240px){ } @media all and (max-width:980px){ #loginWrp { background: #fff; } #loginFormBg { align-items: center; padding: 6rem 2rem; flex-direction: column; } } @media all and (max-width:576px){ #loginForm .formTitle { font-size: 20px; adding-bottom: 0.2em; } #loginForm .buttonSoc { height: 36px; line-height: 36px; } #loginForm .buttonSoc span { display: none; } #loginForm .buttonSoc svg { margin: 0 auto; } } @media all and (max-width:472px){ #loginForm { padding: 2rem; } } @media all and (max-width:364px){ #loginForm .formSubtitle {font-size: 12.5px; } #loginForm .passwordStrength { font-size: 10.5px; } #loginForm .tos { font-size: 11px;} } /* Selected Plan --------------------------------------------------------------*/ #loginFormBg .col { margin-left: 20px; } #loginFormBg .plan { border: 0; justify-content: center; } #loginFormBg .plan .plan__body { flex-grow:0; } #loginFormBg .plan__body .plan-chosen-period { margin-bottom: 0; } @media all and (max-width:980px){ #loginFormBg .col { margin-left: 0px; } } /* //// //// Privacy & tos //// --------------------------------------------------------------*/ #innerCont { background: var(--bg-body-login); color: var(--color-body); display: flex; justify-content: center; align-items: center; padding: 6rem 0; min-height: calc(100vh - 448px); } @media all and (max-width: 1024px) { #innerCont { min-height: calc(100vh - 368px); } } @media all and (max-width: 1024px) { #innerCont { min-height: calc(100vh - 368px); } } @media (max-width: 479px) { #innerCont { min-height: calc(100vh - 48.8rem); } } /* Tos Phone Header --------------------------------------------------------------*/ .tosHdr #mainLogo { flex-grow: 1; } .tosHdr #mainLogo a { max-width: 24.6rem; } #mainNav .tosNav li { font-size: 12px!important; line-height: 30px; } #mainNav .tosNav li a { font-family: "Montserrat", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400; } #mainNav .tosNav li svg { width: 1.6em; height: 30px; vertical-align: top; } @media all and (max-width: 1200px) { #mainNav .tosNav { flex-direction: column; text-align: right; padding-left: 15px; } #mainNav .tosNav li { font-size: 13px!important; padding: 0; line-height: 20px; letter-spacing: -0.025em; } #mainNav .tosNav li svg { height: 20px; } } @media (max-width: 479px) { #mainNav .tosNav li { font-size: 11px!important; line-height: 16px; } #mainNav .tosNav li svg { height: 16px; } } @media (max-width: 394px) { #mainNav .tosNav li { font-size: 2.65vw!important; line-height: 1.77em; } #mainNav .tosNav li svg { height: 1.77em; } }