/* Customized Variables in bootstrap: Please modify this if you make changes ------------------------------------------------------------------------- @sansFontFamily = 'Open Sans', sans-serif @baseLineHeight=28px, @textColor = rgb(37,37,37) @linkColor = rgb(0,165,217) @linkHoverColor = @linkColor @blue = rgb(0,165,217) (loyal3 blue default for links) @gridColumnWidth = 70px @gridGutterWidth = 10px @headingsFontWeight = 600 */ /*** Useful Information ***/ /* L3 Buttons Class: class="btn btn-info" ()*/ /* LOYAL3 Variables */ /* ------------------------------------ */ /* Colors */ /* Font Sizes */ /* Static Variables Used for all SSP brands */ /* Static Variables Used for all IPO brands */ /* nav variables */ /* content borders */ /* Widths */ /************************************ * Compute the select box container width so it will automatically compensate for changes **/ /* LOYAL3 Mixins */ /* ------------------------------------ */ /****************************** * Mixin for customButtons ***********************************************/ /* Responsive General Sass Mixing function */ /* Add class to toggle responsive features */ .t-enormous, .t-.giant, .t-huge, .t-big, .t-headline, .t-small-headline, .t-huge-body, .t-large-body, .t-body, .t-small-body, .t-note, .tooltip .tooltip-inner, .tooltip .with-popover-tooltip .popover h3.popover-title, .with-popover-tooltip .popover .tooltip h3.popover-title, .popover .popover-title { font-weight: 400; line-height: normal; color: #333333; margin: 0; } .t-enormous { font-size: 70px; } .t-giant { font-size: 60px; } .t-huge { font-size: 50px; } .t-big { font-size: 40px; } .t-headline { font-size: 30px; } .t-small-headline { font-size: 25px; } .t-huge-body { font-size: 20px; } .t-large-body { font-size: 16px; } .t-body { font-size: 14px; } .t-small-body { font-size: 13px; } .t-note, .tooltip .tooltip-inner, .tooltip .with-popover-tooltip .popover h3.popover-title, .with-popover-tooltip .popover .tooltip h3.popover-title, .popover .popover-title { font-size: 12px; color: #7f7f7f; } /* MODULES */ .modal .modal-footer .btn, #home-page .signup-or-browse-stocks-button, #home-page .browse-stocks-button, #home-page .ipos-button { border-radius: 4px; border: solid 1px #cccccc; cursor: pointer; padding: 14px; line-height: normal; height: 50px; font-size: 15px; font-weight: 400; text-align: center; box-sizing: border-box; background-color: white; color: #4c4c4c; text-shadow: none; box-shadow: none; background-image: none; text-decoration: none; } .modal .modal-footer .btn.btn-info, #home-page .signup-or-browse-stocks-button, #home-page .browse-stocks-button, #home-page .ipos-button { background-color: #00a5d9; border: 1px solid #07a5d8; color: white; } .modal .modal-footer .btn.btn-danger { background-color: #de3d42; /*border: $darkBlueButtonBorder;*/ color: white; } /* ICONS */ /* LAYOUT */ /* NOTIFICATION BANNERS */ /** Tables **/ /* Common modals styles */ html, body { height: 100%; } body.modal-shown { overflow-y: scroll; position: fixed; width: 100%; } .modal form { margin: 0; } .modal .modal-header h3 { font-size: 16px; font-weight: 600; text-align: center; text-transform: capitalize; } .modal .modal-body { padding: 20px 40px 0; } @media (max-width: 768px) { .modal .modal-body { padding: 20px 20px 0; } } .modal .modal-body .checkbox-and-label { display: flex; display: -webkit-flex; } .modal .modal-body .checkbox-and-label input[type="checkbox"] { width: 100px; } .modal .modal-body iframe { width: 100%; height: 300px; } .modal .modal-footer { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; text-align: center; border: none; background: white; padding: 20px 40px 40px; } @media (max-width: 768px) { .modal .modal-footer { padding: 20px; } } .modal .modal-footer .btn { width: 100%; } .modal .modal-footer .btn.btn-info { border-color: #00a5d9; } .modal .modal-footer .btn.btn-danger { border: none; } .modal .modal-footer div + a { display: block; margin: 20px 0 0; } .modal .modal-footer .btn + a, .modal .modal-footer form + a { display: block; margin: 20px 0 0; } .modal .modal-footer .t-note, .modal .modal-footer .tooltip .tooltip-inner, .tooltip .modal .modal-footer .tooltip-inner, .modal .modal-footer .popover .popover-title, .popover .modal .modal-footer .popover-title { margin: 20px 0 0; } .modal.video-modal { border: none; width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; margin-left: 0; } .modal.video-modal.fade.in { top: 0; } .modal.video-modal .modal-body { overflow: hidden; padding: 0; height: 100%; max-height: 100%; } .modal.video-modal .modal-footer { display: none; } .modal.video-modal .embed-container { position: relative; height: 0; overflow: hidden; max-width: 100%; height: auto; padding-bottom: 56.25%; } .modal.video-modal .embed-container.aspect2351 { padding-bottom: 43.1%; } .modal.video-modal .embed-container iframe, .modal.video-modal .embed-container object, .modal.video-modal .embed-container embed { width: 100%; height: 100%; } .modal.video-modal .vimeo-container, .modal.video-modal .video-modal-border, .modal.video-modal .l3-videoid-macro, .modal.video-modal .embed-container { height: 100%; padding-bottom: 0; } .modal.video-modal video { object-fit: cover; } .modal.video-modal .vimeo-close { background: url("/images/icons/video-close.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; overflow: hidden; border-radius: 50px; color: #000000; z-index: 99999; display: block; padding: 0; position: absolute; left: 25px; top: 25px; width: 50px; height: 50px; } @media (max-width: 768px) { .responsive .modal { z-index: 1042; } } @media (max-width: 768px) { #modal-tooltip { border: none; border-radius: 0; height: 100%; left: 0; margin: 0; overflow: scroll; top: 0; width: 100%; } } #modal-tooltip .modal-title { text-align: center; text-transform: capitalize; } #updated-filings-modal .modal-header { border-bottom: none; } #updated-filings-modal .modal-header h3 { font-size: 18px; } #updated-filings-modal .company-filings-window { border: none; } .tooltip .tooltip-inner, .tooltip .with-popover-tooltip .popover h3.popover-title, .with-popover-tooltip .popover .tooltip h3.popover-title { text-align: left; background: white; border: 1px solid #00a5d9; padding: 20px; max-width: 250px; } .tooltip .tooltip-inner h3, .tooltip .with-popover-tooltip .popover h3.popover-title h3, .with-popover-tooltip .popover .tooltip h3.popover-title h3 { font-size: 14px; margin: 0; } .tooltip.top .tooltip-arrow { border-top-color: #00a5d9; } .tooltip.tooltip.right .tooltip-arrow { border-right-color: #00a5d9; } .tooltip.tooltip.left .tooltip-arrow { border-left-color: #00a5d9; } .tooltip.tooltip.bottom .tooltip-arrow { border-bottom-color: #00a5d9; } #tooltip-with-image .tooltip-inner, #tooltip-with-image .with-popover-tooltip .popover h3.popover-title, .with-popover-tooltip .popover #tooltip-with-image h3.popover-title { max-width: 400px; } .popover .popover-title { text-align: left; background: white; border: 1px solid #00a5d9; padding: 20px; max-width: 250px; } .with-popover-tooltip .popover { border: 0; margin: 0; padding: 0; } .with-popover-tooltip .popover .arrow { border-right-color: #efefef; } .with-popover-tooltip .popover .arrow:after { border-right-color: #efefef; } .with-popover-tooltip .popover.top .arrow { border-right-color: transparent; } .with-popover-tooltip .popover.top .arrow:after { border-right-color: transparent; border-top-color: #efefef; } .with-popover-tooltip .popover h3.popover-title { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin: 0; overflow: hidden; } .popover.popover-hoverin { padding: 0; border: 0; } .chat-button { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; position: fixed; right: 0; margin: 19% 0 0; cursor: pointer; display: block; z-index: 10000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .chat-button:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } @media (max-width: 768px) { .chat-button { display: none; } } body { font-family: 'Open Sans', sans-serif; color: #333333; font-size: 18px; line-height: 30px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } #home-page { /***************************** Global ****************************/ /***************************** Headline ****************************/ /***************************** 3 Features *****************************/ /***************************** Invest in Stocks ****************************/ /***************************** Participate in IPOs ****************************/ /***************************** Account Security & Protection ****************************/ /***************************** 3 Quotes ****************************/ } #home-page .container-960 { max-width: 960px; margin: 0 auto; } #home-page .container-700 { max-width: 700px; margin: 0 auto; text-align: center; } #home-page h1 { font-size: 46px; margin: 0; line-height: 62px; } #home-page h2 { font-size: 33px; margin: 0; line-height: 45px; } #home-page h3 { font-size: 26px; margin: 0; } #home-page h4 { font-size: 16px; margin: 0 0 15px 0; line-height: 22px; } #home-page .white { color: #ffffff; } #home-page .gray { color: #808080; } #home-page .opacity75 { opacity: 0.75; } #home-page .light { font-weight: 300; } #home-page .regular { font-weight: 400; } #home-page .semibold { font-weight: 600; } #home-page .bold { font-weight: 700; } #home-page .extrabold { font-weight: 800; } #home-page .center { text-align: center; } @media (max-width: 960px) { #home-page .container-960 { text-align: center; } #home-page .mobile-padding { padding-left: 20px; padding-right: 20px; } } #home-page .headline-bg { background: url(/css/images/static/home_page/homepage-hero-image.jpg) center center no-repeat; background-size: cover; height: 500px; display: flex; align-items: center; justify-content: center; } @media (min-width: 960px) and (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page .headline-bg { background-image: url(/css/images/static/home_page/homepage-hero-image@2x.jpg); } } @media (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page .headline-bg { background-image: url(/css/images/static/home_page/homepage-hero-image@2x.jpg); } } #home-page .headline-container { max-width: 960px; position: relative; text-align: center; } @media (max-width: 768px) { #home-page .headline-container { max-width: 100%; } } #home-page .subheadline { max-width: 500px; margin: 20px auto; color: #ffffff; font-weight: 400; line-height: 36px; } #home-page .signup-or-browse-stocks-button { background-color: #eb8300; border: none; display: block; width: 300px; font-weight: 400; font-size: 18px; margin: 25px auto 0; } @media (max-width: 768px) { #home-page .signup-or-browse-stocks-button { width: 90%; margin: 35px auto 0; } } #home-page .features-bg { width: 100%; background: #00a5d9; padding: 30px 0; } #home-page .features { display: inline-block; max-width: 275px; text-align: center; margin-left: 55px; } #home-page .features:first-child { margin-left: 0px; } #home-page .features-icon { background: center no-repeat; background-size: contain; width: 50px; height: 50px; margin: 0 auto; } #home-page #features-no-fees { background-image: url(/css/images/static/home_page/zero-fees-white.png); } #home-page #features-invest10 { background-image: url(/css/images/static/home_page/invest-with-10-white.png); } #home-page #features-ipos { background-image: url(/css/images/static/home_page/chart-white.png); } #home-page .features-title { font-size: 17px; font-weight: 600; color: #ffffff; margin-top: 10px; } #home-page .features-description { font-size: 14px; font-weight: 400; line-height: 24px; color: #ffffff; margin: 5px 0 0 0; } #home-page .question-mark-tooltip-link .question-mark-image { background: url(/css/images/static/home_page/question-mark-white.png) no-repeat; background-size: contain; width: 22px; height: 22px; display: inline-block; vertical-align: middle; margin-top: -4px; } #home-page .why-no-fees-tooltip-text { font-size: 12px; font-weight: 400; line-height: 18px; color: #808080; } #home-page .tooltip.left { margin-left: -10px; } #home-page .tooltip-inner, #home-page .with-popover-tooltip .popover h3.popover-title, .with-popover-tooltip .popover #home-page h3.popover-title { border-color: #0084ad; } #home-page .tooltip.right .tooltip-arrow { border-right-color: #ffffff; } #home-page .tooltip.left .tooltip-arrow { border-left-color: #ffffff; } @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page #features-no-fees { background-image: url(/css/images/static/home_page/zero-fees-white@2x.png); } #home-page #features-invest10 { background-image: url(/css/images/static/home_page/invest-with-10-white@2x.png); } #home-page #features-ipos { background-image: url(/css/images/static/home_page/chart-white@2x.png); } #home-page .question-mark-tooltip-link .question-mark-image { background-image: url(/css/images/static/home_page/question-mark-white@2x.png); } } @media (max-width: 768px) { #home-page .features-bg { padding: 60px 0; } #home-page .features { margin: 40px auto 0; display: block; } #home-page .features:first-child { margin: 0 auto; } } #home-page .stocks-bg { width: 100%; background: #ffffff; padding: 100px 0; } #home-page .stocks-content-container { display: inline-block; max-width: 560px; vertical-align: top; } #home-page .homepage-stock-calculator { background: url(/css/images/static/home_page/homepage-stock-calculator.png) no-repeat; background-size: contain; width: 560px; height: 101px; margin: 25px 0 5px; } @media (max-width: 960px) { #home-page .homepage-stock-calculator { background: url(/css/images/static/home_page/homepage-stock-calculator-mobile.png) no-repeat center; width: 100%; height: 275px; background-size: contain; } } @media (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page .homepage-stock-calculator { background-image: url(/css/images/static/home_page/homepage-stock-calculator-mobile@2x.png); } } @media (min-width: 960px) and (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page .homepage-stock-calculator { background-image: url(/css/images/static/home_page/homepage-stock-calculator@2x.png); background-size: contain; } } #home-page .ios-app { display: inline-block; background: url(/css/images/static/home_page/homepage-iphone.png) no-repeat right top; background-size: 245px 500px; width: 395px; height: 500px; } @media (max-width: 960px) { #home-page .ios-app { display: none; background-image: none; } } @media (min-width: 960px) and (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page .ios-app { background-image: url(/css/images/static/home_page/homepage-iphone@2x.png); } } #home-page .browse-stocks-button { background-color: #00a5d9; color: #FFFFFF; border: none; display: block; width: 100%; font-weight: 400; font-size: 18px; margin: 30px auto 0; } @media (max-width: 768px) { #home-page .browse-stocks-button { width: 90%; margin: 30px auto 0; } } @media (max-width: 960px) { #home-page .stocks-bg { padding-top: 60px; padding-bottom: 60px; } #home-page .stocks-content-container { max-width: 100%; text-align: center; } } #home-page .ipos-bg { width: 100%; background: #0084ad; padding: 100px 0; position: relative; -moz-box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.25); } #home-page .ipos-content-container { display: inline-block; max-width: 560px; margin-left: 143px; vertical-align: top; } #home-page .ipo-numbers-big-container { display: inline-block; margin-top: -14px; } #home-page .ipo-numbers-container { padding: 9px 20px; } #home-page .ipo-numbers { font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; margin: 0; line-height: 65px; } #home-page .ipo-label { font-size: 14px; font-weight: 600; opacity: 0.75; margin: 0; line-height: 19px; } #home-page #ipo-participants { border-top: solid 1px #7fc1d3; border-bottom: solid 1px #7fc1d3; } #home-page .ipo-note { margin-top: 15px; opacity: 0.75; font-size: 12px; } #home-page .ipos-button { background-color: #ffffff; color: #00a5d9; border: none; display: block; width: 100%; font-weight: 400; font-size: 18px; margin-top: 40px; } @media (max-width: 768px) { #home-page .ipos-button { width: 90%; min-width: 300px; margin: 40px auto 0; } } @media (max-width: 960px) { #home-page .ipos-bg { padding-top: 60px; padding-bottom: 60px; } #home-page .ipos-content-container { max-width: 100%; text-align: center; left: 0; margin: 0; } #home-page .ipo-numbers-big-container { width: 100%; margin: 60px auto 0; } #home-page .ipo-numbers-container { display: inline-block; text-align: center; padding: 0; } #home-page .ipo-numbers-container:last-child { width: 100%; padding-top: 20px; border-top: 1px solid #7fc1d3; } #home-page #ipo-participants { border: none; margin-left: 30px; padding-bottom: 20px; } } #home-page .security-protection-bg { background: url(/css/images/static/home_page/pattern_low_contrast_linen.png) repeat; width: 100%; padding: 80px 0; } #home-page #security-lock-icon { background: url(/css/images/static/home_page/homepage-lock.png) center no-repeat; width: 100%; height: 100px; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page #security-lock-icon { background-image: url(/css/images/static/home_page/homepage-lock@2x.png); background-size: contain; } } #home-page .security-headline { color: #ffffff; font-weight: 700; margin-top: 30px; } #home-page .security-body-text { font-size: 22px; font-weight: 300; color: #ffffff; margin-top: 30px; line-height: 38px; } #home-page .security-body-text a { color: #00a5d9; text-decoration: none; } #home-page .security-body-text a:hover { text-decoration: underline; } @media (max-width: 960px) { #home-page .security-body-text { font-size: 18px; line-height: 30px; } } #home-page .quotes-bg { width: 100%; background: #ffffff; padding: 80px 0; } #home-page .quote-container { display: inline-block; max-width: 280px; text-align: center; margin-left: 75px; vertical-align: top; } #home-page .quote-container:first-child { margin-left: 0px; } #home-page .quote-icon { background: center no-repeat; background-size: contain; width: 200px; height: 50px; margin: 0 auto; } #home-page #quotes-NYT { background-image: url(/css/images/static/home_page/homepage-NYT.png); } #home-page #quotes-BI { background-image: url(/css/images/static/home_page/homepage-BI.png); } #home-page #quotes-WSJ { background-image: url(/css/images/static/home_page/homepage-WSJ.png); } @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { #home-page #quotes-NYT { background-image: url(/css/images/static/home_page/homepage-NYT@2x.png); } #home-page #quotes-BI { background-image: url(/css/images/static/home_page/homepage-BI@2x.png); } #home-page #quotes-WSJ { background-image: url(/css/images/static/home_page/homepage-WSJ@2x.png); } } #home-page .quote { font-size: 20px; font-weight: 300; font-style: italic; color: #333333; margin-top: 20px; } @media (max-width: 768px) { #home-page .quotes-bg { padding: 60px 0; } #home-page .quote-container { margin: 40px auto 0; display: block; } #home-page .quote-container:first-child { margin: 0 auto; } } #home-page div.tax-forms-banner { background: #0084ad; color: white; font-size: 16px; line-height: 16px; padding: 20px; text-align: center; } #home-page div.tax-forms-banner h5 { color: white; font-size: 16px; font-weight: 600; line-height: 20px; margin: 0 0 10px; } #home-page div.tax-forms-banner h5 a, #home-page div.tax-forms-banner h5 a:hover { color: white; } #home-page div.tax-forms-banner h6 { font-size: 13px; font-weight: 400; line-height: 16px; margin: 0; } #home-page div.tax-forms-banner h6.tax-form-disclaimer { font-weight: bold; font-style: italic; }