:root { --color-primary: #ffb400; --color-secondary: #ffb400; --bg-nav: #000; --color-nav: #fff; --bg-nav-mobile: #2f3b3a; --bg-nav-active: #394746; --txt-nav-mobile: #fff; --bg-body: #000000; --color-body: #fff; --bg-body-login: #956f3a; --bg-footer: #141414; --color-footer: #fff; --color-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: "Cabin", Georgia, Times, "Times New Roman", serif; font-weight: 400; } strong { font-weight: 600; } .genC1 { color: var(--color-primary)!important; } .genC2 { color: var(--color-secondary)!important; } .genPad1 { padding-top: 6rem; padding-bottom: 6rem;} #fullWrp { margin: 0 auto; min-height: 100%; background: var(--bg-body); position: relative; } svg path,svg shape,svg linearGradient { shape-rendering: geometricPrecision; } .FntMeta { font-family: "Metamorphous", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400!important; } .genTitle1 { font-family: "Cabin", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 700; font-size: 150px; -webkit-text-stroke: 2px #fff; text-stroke: 2px #fff; color: rgba(0,0,0,0.0); text-transform: uppercase; letter-spacing: -0.01em; } .genTitle2 { font-family: "Cabin", Georgia, Times, "Times New Roman", serif; font-weight: 700; font-size: 48px; text-shadow: 0 0 0.35em rgba(0,0,0,0.4); padding: 0.3em 0; } .genTxt1 { font-size: 24px; line-height: 1.5em; } .sepBar { background: url("../images/seperator.png") repeat-x center center ; background-size: auto 100%; height: 1.1rem; box-shadow: 0 0 2rem -2px rgba(20, 20, 20, 0.85); } .sepBar2 { background-image: url("../images/seperator_alt.png"); } @media all and (max-width: 1184px) { .genTitle1 { font-size: 102px; } .genTitle2 { font-size: 34.5px; } .genTxt1 { font-size: 17.5px; } } @media all and (max-width: 767px) { .genTitle1 { font-size: 12.29vw; } .genTitle2 { font-size: 4.5vw; } .genTxt1 { font-size: 3.2vw; } } /* logo -----------------------------*/ #mainLogo { display: block; width: 147px; max-width: 147px; text-align: center; position: relative; } #mainLogo a { display: inline-block; white-space: nowrap; font-size: 77.5px; line-height: 77.5px; text-indent: -8000px; background: url("../images/main_logo_2x.png") no-repeat center center; background-size: contain; color: #fff; position: relative; z-index: 1; width: 100%; } @media all and (max-width: 1469px) { #mainLogo { width: 120px; max-width: 120px; } } @media all and (max-width: 767px) { #mainLogo a { font-size: 4.8rem;} } @media all and (max-width: 667px) { #mainLogo { /*margin-left: 44px; display: inline-block; width: auto;*/ } } @media all and (max-width: 576px) { .nav-hamburger + #mainLogo { margin-left: 54px!important; } } /* Main Header --------------------------------------------------------------*/ #mainHdr { z-index: 2; background: var(--bg-nav); padding: 0 0; position: relative; z-index: 20; } #fullWrp .introHeader { background: none!important; position: absolute; left: 0; top: 0; width: 100%; } #mainHdrBg { position: absolute; left: 0; top: 0; width: 100%; height :100%; z-index: -1; overflow: hidden; } #mainHdr .nav-hamburger { display: none; } #mainHdr .ctr { padding: 0 2rem; margin: 0 auto; } #mainLogo { z-index: 10; position: relative; } #mainHdr .mainHdrOpt li { position: relative; } #mainNav .site-nav li a { color: var(--color-nav); font-family: "Metamorphous", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; } #mainNav .site-nav li a:hover { color: var(--color-nav); } #mainSignNav { display: flex; justify-content: flex-end; height: 56px; align-items: center; white-space: nowrap; font-size: 15px; font-weight: 700; text-transform: uppercase; float: right; position: relative; top: -1px; letter-spacing: 0em; } #mainSignNav a:last-child { margin-left: 0; } #mainSignNav a { color: #fff; } #mainSignNav a.btn { padding: 1em 2em 1em 2em; font-size: 1em; } #mainLogo .planType { position: absolute; top: 0; line-height: 1.45em; background: var(--bg-nav-mobile); padding: 0 0.55em;color: #fff; font-size: 12.48px; left: 104%; text-indent: 0; text-transform: uppercase; } #mainHdr .btmHdr { background: #142978; padding: 15px 0; font-size: 16px; color: #fff; position: relative; z-index: 10; } @media all and (max-width: 1469px) { #mainHdr .topHdr .ctr { display: flex; align-items: center; justify-content: space-between; } #mainHdr .mainHdrOpt li span.bonus { font-size: 11.5px; } #mainSignNav a:last-child { margin-left: 0; } .nav-hamburger + #mainLogo { margin: 0 0 0 61px; width: 147px; } } @media all and (max-width: 1360px) { #mainHdr .mainHdrOpt li span.bonus { font-size: 10.5px; } } @media all and (max-width: 960px) { #mainHdr .btmHdr { line-height: 1.1em; text-align: center; } #mainHdr .btmHdr .ctr { max-width: 26em; } } @media all and (max-width: 680px) { .nav-hamburger + #mainLogo { margin: 0 0 0 50px; width: 126px; } #mainHdrBg:after { left: 110px; } } @media all and (max-width: 572px) { #mainLogo .planType { display: none;} #mainHdr .btmHdr .ctr { font-size: 14px; line-height: 1.1em;} #mainSignNav { font-size: 14px; } #mainSignNav a .hdSm { display: none; } } @media all and (max-width: 440px) { .nav-hamburger + #mainLogo { margin: 0 0 0 40px!important; width: 34vw; } #mainHdrBg:after { left: calc(62vw - 176px); } #mainHdr .btmHdr .ctr { font-size: 12px; line-height: 1.1em;} #mainSignNav a:last-child { margin-left: 0; } #mainSignNav a.btn { padding: 0.65em 1.1em; } } @media all and (max-width: 364px) { #mainSignNav { font-size: 12px!important; } } /* Main Menu --------------------------------------------------------------*/ #mainHdr ul { list-style: none; margin: 0 auto; padding: 0; } @media all and (min-width: 1470px) { #mainHdr #mainNav { display: flex; justify-content: space-between; align-items: center; font-weight: 400; text-transform: none; font-size: 15px; line-height: 1.2em; max-width: 540px; width: 100%; padding: 0 30px; margin: 0 auto; letter-spacing: 0.01em; } #mainHdr #mainNav .site-nav { width: 100%; } #mainHdr .topHdr { padding: 25px 0; position: relative; z-index: 1; } #mainHdr .topHdr .ctr { display: flex; align-items: center; justify-content: space-between; } #mainHdr .topHdr .date { display: block; position: absolute; left: 3rem; top: 50%; margin-top: -0.5em; font-size: 15px; line-height: 1em; } #mainHdr .mainHdrOpt { width: 100%; display: flex; justify-content: space-between; align-items: center; list-style: none; } #mainHdr .mainHdrMem { max-width: 540px; margin: 0 auto; padding: 0; } #mainNav .site-nav .dropDown { position: absolute; top: 5px; left: 0; z-index: 1000; display: none; float: left; min-width: 168px; padding-top: 28px; cursor: pointer; } #mainNav .site-nav .dropDown ul { padding: 3px 0; margin: 0.125rem 0 0; font-size: 14px; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: 0.25rem; } #mainNav .site-nav .dropDown li a { padding: 3px 6px; font-weight: normal; font-size: 12.8px; line-height: 1.9em; display: block; white-space: nowrap; } #mainNav .site-nav .dropDown li a:hover { background: #eee; } #mainNav .site-nav .dropDown ul a:before { content: ' '; display: inline-block; height: 1.9em; width: 1.9em; margin-right: 0.4em; background-size: contain!important; background-position: center center; background-repeat: no-repeat; vertical-align: top ; } #mainNav .site-nav .dropDown ul.pdfConv a:before { background-image: url("../images/main_ico_convert_pdf.svg");} #mainNav .site-nav .dropDown ul.audioConv a:before { background-image: url("../images/main_ico_convert_audio.svg");} #mainNav .site-nav .dropDown ul.videoConv a:before { background-image: url("../images/main_ico_convert_video.svg");} #mainNav .site-nav li.dropElm > a:after { content: ' '; border: solid var(--bg-nav-mobile); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; vertical-align: top; position: relative; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 8px; position: relative; top: 0.2em; } #mainNav .site-nav li.dropElm:hover .dropDown { display: block; } #mainNav .site-nav li.hideLg { display: none!important; } } @media all and (min-width: 1611px) { #mainHdr #mainNav { max-width: 540px; } } @media all and (max-width: 1469px) { #mainHdr .topHdr { padding: 15px 0; } #mainHdr .topHdr .date { display: none; } /*burger icon + animation*/ #mainHdr .nav-hamburger { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; display: block; height: 35px; margin-bottom: auto; margin-top: auto; outline: medium none; padding: 0; position: relative; transition: all 0.3s ease-in-out 0s; width: 30px; position: absolute; left: 2rem; top: 24px; } .nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: var(--color-nav); transition: all 0.3s ease-in-out 0s; } .nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: var(--color-nav); } .nav-hamburger::before, .nav-hamburger::after { content: ""; height: 2px; left: 0; position: absolute; top: 50%; transform-origin: 50% 50% 0; width: 100%; } .nav-hamburger span { height: 2px; left: 0; overflow: hidden; position: absolute; text-indent: 200%; top: 50%; width: 100%; cursor: pointer; } .nav-hamburger::before { transform: translate3d(0px, -10px, 0px); } .nav-hamburger::after { transform: translate3d(0px, 10px, 0px); } .menuOpen .nav-hamburger span { background-color: var(--txt-nav-mobile); opacity: 0; } .menuOpen .nav-hamburger::before { background-color: var(--txt-nav-mobile); transform: rotate3d(0, 0, 1, 45deg); } .menuOpen .nav-hamburger::after { background-color: var(--txt-nav-mobile); transform: rotate3d(0, 0, 1, -45deg); } .nav-hamburger { position: absolute; left: 0; top: 14px; z-index: 1001; cursor: pointer; } #mainNav .site-nav { display: block; top: 0; bottom: -100vh ; left: 0; right: 0; overflow-y: auto; position: absolute; padding: 0; box-shadow: 0 -30px 0 0 var(--bg-nav-mobile); } #mainNav .site-nav ul, #site-menu .site-nav li { margin: 0; padding: 0; } #mainNav .site-nav li { padding: 0; display: block; text-align: left; } #mainNav .site-nav li:first-child { margin-top: 86px; } #mainNav .site-nav li a { background: var(--bg-nav-mobile); display: block; padding: 16px 20px 16px 20px!important; color: var(--txt-nav-mobile)!important; font-size: 14px; line-height: 16px; -webkit-transition:0ms ease-out all; transition: 0ms ease-out all; text-align: center; border-bottom: solid 1px rgba(255,255,255,0.15); text-align:left; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; } #mainNav .site-nav li a span.bonus { position: static; display: inline; vertical-align: top; margin-left: 0.4em; } #mainNav .site-nav li:first-child a { border-top: solid 1px rgba(255,255,255,0.2); } #mainNav .site-nav li a.cur, #mainNav .site-nav li a.cur:active { outline: none; color: var(--txt-nav-mobile); background:var(--bg-nav-active); } #mainNav .site-nav li a:active { background:var(--bg-nav-active); } #mainNav .site-nav li li a { border-top: 0!important; padding-left: 32px!important;} #mainNav .site-nav li.dropElm> a:after { content: ' '; border: solid #fff; border-width: 0 2px 2px 0; display: block; padding: 2px; width: 0.25em; height: 0.25em; vertical-align: middle; position: relative; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 20px; top: 17px; } #mainNav .site-nav li li:first-child { margin: 0;} #mainNav .site-nav li .dropDown { display: none; } #mainNav .site-nav li.dropOpen > a:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); top: 22px;} #mainNav .site-nav li.dropOpen .dropDown { display: block; } /* open menu -----------------------------*/ #mainNav { background:var(--bg-nav-mobile); color: #fff; display: block!important; max-width: 300px; top: 0; box-shadow: -1000vh 900vh 0 1000vh var(--bg-nav-mobile), -1000vh 900vh 20px 1000vh rgba(0,0,0, 0.4); position: absolute; left: 0; width: 100%; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; -webkit-transform: translateX(-500px); transform: translateX(-500px); transform: translate3d(-500px, 0, 0); -webkit-transform: translate3d(-500px, 0, 0); pointer-events: none; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; will-change: transform; } .menuOpen #mainNav { -webkit-transform: translateX(0); transform: translateX(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); pointer-events: auto; } } /* //// //// Mainpage //// --------------------------------------------------------------*/ /* Main Intro --------------------------------------------------------------*/ #mainCont { overflow-x: hidden; } #mainIntro { display: flex; justify-content: flex-start; align-items: center; background: #000 url("../images/main_intro_bg_xl.jpg") no-repeat center center; background-size: cover; height: 55.41vw; min-height: 740px; color: #fff; text-align: left; position: relative; } /*#mainIntro:before { content: ' '; display: block; left: 0; top: 0; position: absolute; right: 0; bottom: 0; background: rgba(0,0,0,0.7); box-shadow: inset 0 0 15vw 0 rgba(0,0,0,0.9); }*/ #mainIntro .FrmCtr2 { z-index: 2; padding-top: 18rem; padding-bottom: 18rem; position: relative; z-index: 2; flex-grow: 1; } #mainIntro .ln1 { font-size: 102px; line-height: 1em; padding: 0 0 0em 0; display: block; max-width: 6.7em; text-transform: none; letter-spacing: -0.025em; text-transform: uppercase; } #mainIntro .ln2 { font-size: 25px; line-height: 1.6em; padding: 1em 0 1.2em 0; font-weight: 400; display: block; max-width: 40em; letter-spacing: -0.025em; } #mainIntro .btnWrp { padding: 16px 0 0 0;} #mainIntro .btnWrp .btn:first-child { margin-right: 4.8rem; } @media all and (max-width: 1184px) { #mainIntro { min-height: auto; height: auto; padding-top: 61px; padding-bottom: 0px; } #mainIntro .FrmCtr2 { padding-top: 8.4rem; padding-bottom: 8.4rem; } #mainIntro .ln1 { font-size: 59px; } #mainIntro .ln2 { font-size: 22px; } } @media all and (max-width: 767px) { #mainIntro .ln1 { font-size: 8.6vw; } #mainIntro .ln2 { font-size: 3vw; } } @media all and (max-width: 572px) { #mainIntro { min-height: 80vw; } #mainIntro .ln1 { font-size: 9.2vw; } } /* Main Mid --------------------------------------------------------------*/ #mainMid { background: #fff;} #mainMid .itm { display: flex; padding: 18.7em 0; } #mainMid .FrmCtr { max-width: 1421px; display: flex; justify-content: space-between; align-items: flex-start; } #mainMid .itm:nth-child(even) { background: #000000; color: #fff; } #mainMid .itm:nth-child(even) .FrmCtr { flex-direction: row-reverse; } #mainMid .itm { display: flex; } #mainMid .bg1 { background: url("../images/main_mid_bg_01.jpg") no-repeat center center; background-size: cover; } #mainMid .itm .tmb { width: 50%; max-width: 69.6em; } #mainMid .itm .cont { min-width: 65.4em; max-width: 65.4em; padding-left: 4rem; } #mainMid .itm:nth-child(even) .cont { padding-left: 0; padding-right: 4rem; } #mainMid .itm .ln1 { font-size: 6em; line-height: 1.2em; letter-spacing: -0.025em; text-transform: uppercase; } #mainMid .itm .ln2 { font-size: 2em; line-height: 1.6em; padding: 0.8em 0 0.4em 0; } #mainMid .itm .btn { font-size: 2.3em!important; } @media all and (max-width: 1461px) { #mainMid .itm { font-size: 0.684vw; } } @media all and (max-width: 992px) { #mainMid .itm { display: flex; padding: 12em 0; } } @media all and (max-width: 767px) { #mainMid .FrmCtr, #mainMid .itm:nth-child(even) .FrmCtr { flex-direction: column; } #mainMid .itm { font-size: 1rem; padding: 6rem 0; } #mainMid .itm .tmb, #mainMid .itm .cont { min-width: 100%; width: 100%; max-width: 100%; padding: 0; } #mainMid .itm .cont { padding-top: 4rem;} #mainMid .itm .ln1 { font-size: 5.66em; } } /* Main btm --------------------------------------------------------------*/ #mainBtm { padding-top: 45%; background: url("../images/main_btm_tiles_bg.jpg") no-repeat center center ; background-size: cover; } /* Main Footer --------------------------------------------------------------*/ #mainFtr { background: var(--bg-footer); color: var(--color-footer); font-weight: 400; text-transform: normal; padding: 6rem 0; } #mainFtr .row { display: flex; justify-content: center; align-items: center; max-width: none; } #ftrNav { display: block; font-size: 16px; margin-bottom: 0; max-width: 64em; padding-top: 6px; font-weight: 400; text-align: center; } #ftrNav li { display: inline; line-height: 1.8em; } #ftrNav li:before { content: '•'; } #ftrNav li:first-child:before { display: none; } #ftrNav li a { color: var(--color-footer); margin: 0 0.72em; } #ftrNav li a:hover { text-decoration: underline; } #mainFtr .logo { width: 25.2rem; } @media all and (max-width: 1350px) { #mainFtr .row { flex-direction: column; justify-content: center; } #mainFtr .logo { margin-bottom: 2.6rem; } #ftrNav { margin: auto auto; font-size: 14px; max-width: 31em; text-align: center; } #ftrNav li a { margin: 0 0.5em; } #ftrNav li span { display: none; } #ftrNav li:nth-child(5):before { display: none; } } @media all and (max-width: 572px) { #mainFtr { padding: 0; } #mainFtr .logo { width: 25.2rem; } #ftrNav { font-size: 1.5rem; } } /* //// //// Login //// --------------------------------------------------------------*/ #loginCont { background: var(--bg-body-login); display: flex; justify-content: center; align-items: center; padding: 6rem 0; min-height: calc(100vh - 448px); } #loginCont .loginForm { background: #000; padding: 16px; color: #fff;max-width: 356px; margin: 0 auto; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #loginCont .title { font-size: 20px; text-align: center; padding:4px 0 20px 0; font-weight: bold; } #loginCont p { position: relative; } #loginCont p label { font-size: 16px; line-height: 1.5em; } #loginCont p input { background: none #fbfbfb!important; color: #000!important; font-size: 16px!important; height: 2.54em!important; } #loginCont .msg {font-size: 12px; line-height: 1.2em; width: 100%; display: block; padding: 0 0 10px 0; text-align: center; } #loginCont .keep label { padding-left: 0; font-size: 13px; text-align: left; line-height: 1.2em; width: auto; display: block; padding: 0.5em 0; } #loginCont .keep label input { float: left; width: 1em!important; height: 1em!important; display: block; margin-right: 0.4em; vertical-align: top; position: relative; top: -0.1em; } #loginCont p label.error, #loginCont p small.error { float: left; font-size: 11px; padding: 2px 0 0 0; color: #fa2700; } #loginCont .creat { padding-left: 0; font-size: 13px; line-height: 1.2em; width: 100%; display: block; padding: 0.5em 0; text-align: center; } #loginCont .creat a { color: rgba(255,255,255,0.75) } #loginCont .creat a:hover { color: #fff; } #loginCont p.tos { text-align: center; font-size: 11px; line-height: 1.2em; width: 100%; display: block; padding: 0; color: rgba(255,255,255,0.75) } @media all and (max-width: 1024px) { #loginCont { min-height: calc(100vh - 368px); } } @media all and (max-width: 1024px) { #loginCont { min-height: calc(100vh - 368px); } } @media (max-width: 479px) { #loginCont { min-height: calc(100vh - 48.8rem); } #loginCont .title { font-size: 18px; text-align: center; padding:3px 0 19px 0; } } #loginCont .passsWrp { position: relative; display: block; } #loginCont .passwordToggle { position: absolute; right: 0; top: 1px; height: 40.63px; width: 40.63px; display: flex; justify-content: center; align-items: center; } #loginCont .passwordToggle svg { width: 44%; height: 100%; } #loginCont .passwordToggle svg path { fill: #919191; } #loginCont .passwordToggle svg .st1 { display: none; } #loginCont input[type=text] + .passwordToggle svg .st0 { display: none; } #loginCont input[type=text] + .passwordToggle svg .st1 { display: block; } /* //// //// 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: "Cabin", Georgia, Times, "Times New Roman", serif; 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; } }