/* --------------------------------------------------------------------- Modern Styles @purpose Gather all scss styles into a single style sheet for site redesign for the Home, Product, and Pricing Pages. ------------------------------------------------------------------------ */ /** Clearfix - clears floated content ========== */ /** Box Sizing - adds the appropriate prefixes to the box-sizing property ========== */ /** Transform - Applies transform prefixes ========== */ /** Gotham Font - adds the custom font family and the appropriate weight @param $fam - yes or no will or will not write out the font-family prop @param $weight - 300/Light, 400/book, 500/medium, 700/Bold, 800/Black ========== */ /** Source Sans Pro Font - adds the custom font family and the appropriate weight @param $fam - yes or no will or will not write out the font-family prop @param $weight - 300/Light, 400/book, 500/medium, 700/Bold, 800/Black ========== */ /** Background Sizing - add the browser prefixes for the background-size property ========== */ /** Border Radius - add the browser prefixes for the border-radius property ========== */ /** Transition - create transitional easing css with browser prefixes ========== */ /* BASE */ /* --------------------------------------------------------------------- RESET CSS (thanks Eric Meyer) ------------------------------------------------------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } :focus { outline: 0; } html { overflow-y: scroll; /* Always show a vertical scrollbar, even when there is no scrolling */ } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } strong, bold { font-weight: bold; } em, i { font-style: italic; } /* --------------------------------------------------------------------- HTML5 Element Reset ------------------------------------------------------------------------ */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } audio, canvas, video, progress, picture { display: inline-block; } template { display: none; } /* --------------------------------------------------------------------- Form Reset Styles ------------------------------------------------------------------------ */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type="search"] { -webkit-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } ::-moz-focus-inner { border: 0; padding: 0; } /* --------------------------------------------------------------------- Elements ------------------------------------------------------------------------ */ body { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; /* thinning out font to allow it to look more natural */ font-smoothing: antialiased; } img { max-width: 100%; height: auto; /* override WP media tool deminsions */ } a { text-decoration: none; word-wrap: break-word; } /** Legacy Carry over for headings. =========== */ h1, h2, h3, h4, h5, h6 { padding: 0.5em 0; } .top-details h2, .bottom-details h2 { padding-bottom: 0; padding-top: 0; } h1, h2, h3, h4, h5 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; color: #141314; } h1 { font-size: 40px; margin: 10px 0px 10px 0px; font-weight: 800; } h1.red { color: #c92027; } h1.white { color: white; letter-spacing: 0.045em; } h1.titanium-blue { color: #5e7b8f; } h1.titanium-dark-blue { color: #2e3741; } h2 { font-size: 35px; margin: 10px 0px 10px 0px; font-weight: 800; } h2.red { color: #c92027; } h2.white { color: white; letter-spacing: 0.045em; } h2.titanium-blue { color: #5e7b8f; } h2.titanium-dark-blue { color: #2e3741; } h3 { font-size: 24px; color: #58595b; font-weight: 800; } h3.white { color: white; letter-spacing: 0.045em; } h3.red { color: #c92027; } h4 { letter-spacing: 0.03em; font-size: 20px; font-weight: 600; color: #58595b; /*margin-top: 0; margin-bottom: 0;*/ } h4.red { color: #c92027; } h4.white { color: white; font-weight: 400; letter-spacing: 0.045em; margin-top: 0; margin-bottom: 0; } h1.circle-red { display: inline-block; margin: 1.666em 0 0; font-size: 28px; font-weight: 300; font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 32px; color: #fff; width: 58px; height: 32px; border-radius: 29px; background-color: #bd202d; } /* Resource Center */ .resource-archives .post-excerpt { font-size: 0.85em; line-height: 1.6em; } /* Blog Posts */ .blog-content .post-content code { font-family: monospace; font-size: 15px; } .blog-content .post-content ol { list-style-type:decimal; } .blog-content .post-content blockquote { margin-top: 10px; margin-bottom: 10px; margin-left: 30px; padding-left: 15px; border-left: 3px solid #ccc; } /* ALL SIZES */ /* --------------------------------------------------------------------- NO BREAKPOINT ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Masthead ------------------------------------------------------------------------ */ .admin-bar .gbCog-hd { top: 32px; } .masthead { width: 100%; background: rgba(255, 255, 255, 0.98) none no-repeat scroll 0 0; border-bottom: 1px solid #dddddd; } /** Supporting alt layout transition with easing. */ .masthead, .masthead-cont, .masthead-cont-banner, .masthead-cont-identity, .masthead-cont-action, .masthead-cont-mobile, .masthead-cont-menu { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .masthead-cont { max-width: 960px; padding: 15px 1.04167% 15px 1.04167%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; *zoom: 1; } .masthead-cont:before, .masthead-cont:after { display: table; content: ""; } .masthead-cont:after { clear: both; } .masthead-cont-banner { width: 100%; clear: both; *zoom: 1; } .masthead-cont-banner:before, .masthead-cont-banner:after { display: table; content: ""; } .masthead-cont-banner:after { clear: both; } .masthead-cont-banner-right { float: right; margin-bottom: 5px; } .masthead-cont-identity, .masthead-cont-menu { float: left; } .masthead-cont-identity { width: 6.25%; } .masthead-cont-menu { max-width: 69.58333%; margin-left: 2.08333%; } .masthead-cont-action { float: right; max-width: 22.91667%; padding-top: 9px; } /*padding-top: 19px; }*/ .masthead-cont-mobile { display: none; } /* --------------------------------------------------------------------- Main Navigation - The Navigation will be following the standard WP nav setup so it will need to be styled to fit that markup orientation. example:
------------------------------------------------------------------------ */ .mainNav { *zoom: 1; } .mainNav:before, .mainNav:after { display: table; content: ""; } .mainNav:after { clear: both; } .mainNav > * { display: block; width: 100%; } .mainNav ol, .mainNav ul, .mainNav .menu { margin: 0; padding: 0; list-style: none; } .mainNav ol, .mainNav ul, .mainNav .menu { padding-top: 10px; font-size: 0; /* remove ghost spacing for inline block elements */ } .mainNav ol > li, .mainNav ul > li, .mainNav .menu > li { display: inline-block; font-size: 14px; /* reset font-size for the text */ position: relative; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; } .mainNav ol > li + li, .mainNav ul > li + li, .mainNav .menu > li + li { margin-left: 24px; } .mainNav ol > li > a, .mainNav ul > li > a, .mainNav .menu > li > a, .mainNav ol > li > a:hover, .mainNav ul > li > a:hover, .mainNav .menu > li > a:hover { text-decoration: none; } /** Link styling for WP navigation - just text styling, layout is handled at breakpoints */ .mainNav ol > li > a, .mainNav ul > li > a, .mainNav .menu > li > a { color: #363636; font-size: 14px; text-transform: uppercase; } /** Logo Blocks **/ .logo-set { margin:0 auto; text-align: center; } .logo-block { margin:0 15px 10px; width:140px; display:inline-block; } /* --------------------------------------------------------------------- Footer ------------------------------------------------------------------------ */ .footer { display: block; /* incase the classes are used on elements that are not block elements */ margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; *zoom: 1; color: #c2c2c2; text-align: center; } .footer:before, .footer:after { display: table; content: ""; } .footer:after { clear: both; } .footer-menu, .footer-legal { display: block; /* incase the classes are used on elements that are not block elements */ width: 100%; } .footer-menu { margin: 0 0 35px; } .footer-legal { margin: 0 0 6px; } .footer-legal a { color: #ffffff; } .footer-legal a:hover { color: #ca2127; } /* --------------------------------------------------------------------- Nav List - the module will have to follow HTML structure for the Menu output from WP admin. ------------------------------------------------------------------------ */ .navList { font-size: 0; /* for removing the ghost space on line-block elements */ } .navList-item { display: inline-block; width: 25%; padding-left: 20px; padding-bottom: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: 13px; /* reset font-size because of inline-block fix */ line-height: 1.3; vertical-align: top; } .navList-item-link { display: block; margin-bottom: 14px; color: #ffffff; font-size: 13px; font-weight: 400; } /** WP Menu Styling ========== */ .navList-item ol.menu, .navList-item ul.menu { margin: 0; padding: 0; list-style: none; } /* general reset because of element specific styles */ .navList-item ol.menu li, .navList-item ul.menu li { margin-top: 0; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 400; } .navList-item a { display: block; margin-bottom: 11px; color: #ffffff; font-size: 13px; font-weight: 400; } /* Primary Menu Items */ .navList-item > ol.menu > li > a:first-child, .navList-item > ul.menu > li > a:first-child { margin-bottom: 12px; color: #ca2127; font-size: 16px; font-weight: 600; line-height: 1.2; } /* Sub Nav Resets */ /* Needed because of base legacy styling dependent on WP nav Structure */ .navList-item ol.menu ol, .navList-item ul.menu ul { display: block; width: auto; padding: 0; } .navList-item ol.menu ol > li, .navList-item ul.menu ul > li { display: block; line-height: 1.2; } /* Sub Navigation */ .navList-item ol.menu ol ol, .navList-item ul.menu ul ul { margin-left: 15px; } /* --------------------------------------------------------------------- Global Cog ------------------------------------------------------------------------ */ .gbCog, .gbCog > * { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .gbCog { padding: 0; margin: 0; } .gbCog-hd { position: fixed; z-index: 1000; top: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; /* creating a smooth transition for the product page */ } .gbCog-bd { /*position: relative;*/ z-index: 0; background-color: #ffffff; } /* --------------------------------------------------------------------- Navigation Dropdown ------------------------------------------------------------------------ */ .navDrop { margin: 0 auto; width: 251px; border-radius: 4px; background: #fff url(../media/images/select-arrow.jpg) no-repeat 100% 50%; overflow: hidden; } .navDrop-slct { width: 110%; padding: 7px 7px 8px; border: 0; background: transparent; -webkit-appearance: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; color: #898989; } /* --------------------------------------------------------------------- Mobile Menu ------------------------------------------------------------------------ */ .mobileMenu { display: block; width: 30px; height: 25px; cursor: pointer; font-size: 0; /* visually hiding text */ } .mobileMenu:before, .mobileMenu:after { /*box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;*/ content: ""; display: block; height: 5px; background: transparent; border-top: 5px solid #cccccc; } .mobileMenu:after { margin: 0; border-bottom: 5px solid #cccccc; } /* --------------------------------------------------------------------- Wrap ------------------------------------------------------------------------ */ .wrap { max-width: 960px; margin: 0 auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /** EXTENSIONS ========== */ .wrap_full { width: 100%; max-width: 100%; } .wrap_pricingHead, .wrap_pricingTable { max-width: 1080px; } .wrap_extended { max-width: 1280px; } .wrap_iPad { max-width: 980px; } /** MIXINS ========== */ .mix-wrap_light { background-color: #ffffff; } .mix-wrap_toned { background-color: #f6f6f6; /* was #f5f5f5 */ } /* --------------------------------------------------------------------- Grid ------------------------------------------------------------------------ */ /** * Grid Maths * Calculating the widths and margins as percentages for the .grid module. With * SCSS so that grid can be adjusted with ease. */ .grid { width: 100%; padding: 0; /* site gutter is accounted for with .wrap */ *zoom: 1; } .grid:before, .grid:after { display: table; content: ""; } .grid:after { clear: both; } .grid, .grid-col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .grid-col { float: left; padding: 0; margin: 0; } .grid-col + .grid-col { margin-left: 2.12766%; } [class*="mix-grid-col_push"], [class*="mix-grid-col_pull"] { position: relative; } /* grid column sizes */ .grid-col_1of12 { width: 6.38298%; } .grid-col_2of12 { width: 14.89362%; } .grid-col_3of12 { width: 23.40426%; } .grid-col_4of12 { width: 31.91489%; } .grid-col_5of12 { width: 40.42553%; } .grid-col_6of12 { width: 48.93617%; } .grid-col_7of12 { width: 57.44681%; } .grid-col_8of12 { width: 65.95745%; } .grid-col_9of12 { width: 74.46809%; } .grid-col_10of12 { width: 82.97872%; } .grid-col_11of12 { width: 91.48936%; } .grid-col_12of12 { width: 100%; } /* grid column prefixes */ .mix-grid-col_prefix1of12 { margin-left: 8.51064%; } .mix-grid-col_prefix2of12 { margin-left: 17.02128%; } .mix-grid-col_prefix3of12 { margin-left: 25.53191%; } .mix-grid-col_prefix4of12 { margin-left: 34.04255%; } .mix-grid-col_prefix5of12 { margin-left: 42.55319%; } .mix-grid-col_prefix6of12 { margin-left: 51.06383%; } .mix-grid-col_prefix7of12 { margin-left: 59.57447%; } .mix-grid-col_prefix8of12 { margin-left: 68.08511%; } .mix-grid-col_prefix9of12 { margin-left: 76.59574%; } .mix-grid-col_prefix10of12 { margin-left: 85.10638%; } .mix-grid-col_prefix11of12 { margin-left: 93.61702%; } .mix-grid-col_prefix12of12 { margin-left: 102.12766%; } /* grid column suffixes */ .mix-grid-col_suffix1of12 { margin-right: 8.51064%; } .mix-grid-col_suffix2of12 { margin-right: 17.02128%; } .mix-grid-col_suffix3of12 { margin-right: 25.53191%; } .mix-grid-col_suffix4of12 { margin-right: 34.04255%; } .mix-grid-col_suffix5of12 { margin-right: 42.55319%; } .mix-grid-col_suffix6of12 { margin-right: 51.06383%; } .mix-grid-col_suffix7of12 { margin-right: 59.57447%; } .mix-grid-col_suffix8of12 { margin-right: 68.08511%; } .mix-grid-col_suffix9of12 { margin-right: 76.59574%; } .mix-grid-col_suffix10of12 { margin-right: 85.10638%; } .mix-grid-col_suffix11of12 { margin-right: 93.61702%; } .mix-grid-col_suffix12of12 { margin-right: 102.12766%; } /* grid column push */ .mix-grid-col_push1of12 { left: 8.51064%; } .mix-grid-col_push2of12 { left: 17.02128%; } .mix-grid-col_push3of12 { left: 25.53191%; } .mix-grid-col_push4of12 { left: 34.04255%; } .mix-grid-col_push5of12 { left: 42.55319%; } .mix-grid-col_push6of12 { left: 51.06383%; } .mix-grid-col_push7of12 { left: 59.57447%; } .mix-grid-col_push8of12 { left: 68.08511%; } .mix-grid-col_push9of12 { left: 76.59574%; } .mix-grid-col_push10of12 { left: 85.10638%; } .mix-grid-col_push11of12 { left: 93.61702%; } .mix-grid-col_push12of12 { left: 102.12766%; } /* grid column pull */ .mix-grid-col_pull1of12 { left: -8.51064%; } .mix-grid-col_pull2of12 { left: -17.02128%; } .mix-grid-col_pull3of12 { left: -25.53191%; } .mix-grid-col_pull4of12 { left: -34.04255%; } .mix-grid-col_pull5of12 { left: -42.55319%; } .mix-grid-col_pull6of12 { left: -51.06383%; } .mix-grid-col_pull7of12 { left: -59.57447%; } .mix-grid-col_pull8of12 { left: -68.08511%; } .mix-grid-col_pull9of12 { left: -76.59574%; } .mix-grid-col_pull10of12 { left: -85.10638%; } .mix-grid-col_pull11of12 { left: -93.61702%; } .mix-grid-col_pull12of12 { left: -102.12766%; } /* --------------------------------------------------------------------- Sample Content - only purpose is for testing and will be removed for production ------------------------------------------------------------------------ */ .sampleCont { width: 100%; padding: 10px 10px 12px; margin: 0 0 15px; background: #7ec0ee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333333; font-size: 12px; } /* --------------------------------------------------------------------- Ribbon @type Layout @purpose Element that wraps every new section on the page. Meant to expand the full width of the available window and color that section appropriately based on the extension added to the element. @extensions .ribbon_hero - .ribbon_heroPricing - .ribbon_sceneLight - .ribbon_patternFade - .ribbon_sceneGrey - .ribbon_drkPattern - .ribbon_productApps - .ribbon_productPlatform - .ribbon_productAnalytics - .ribbon_flatColorGreyXLt - flat brand color of Extra Light Grey .ribbon_flatColorGreyLt - flat brand color of Light Grey .ribbon_flatColorGrey - flat brand color of Grey .ribbon_flatColorGreyDark - flat brand color of Dark Grey .ribbon_flatColorGreyXDark - flat brand color of Extra Dark Grey @mixins Vertical Spacing .mix-ribbon_main - for homepage hero .mix-ribbon_pricing - for the hero on the pricing page .mix-ribbon_thickTop - add more padding to the top of the section only .mix-ribbon_thickBase - add more padding to the bottom of the section only .mix-ribbon_topper - for a section in need of a considerable amount of space at the top .mix-ribbon_bar - for sectional navigation bar .mix-ribbon_features - for features section .mix-ribbon_slimTop - reduced spacoing at only the top of the section .mix-ribbon_slimBottom - reduced spacoing at only the bottom of the section Section Divider .mix-ribbon_borderBottom - a single border at only the bottom of the section .mix-ribbon_borderTop - a single border at only the top of the section ------------------------------------------------------------------------ */ .ribbon { position: relative; /* for positioning background elements */ width: 100%; padding: 35px 0; background: #ffffff none no-repeat scroll 0 0; *zoom: 1; /* used to capture margin applied to elements there in */ } .ribbon:before, .ribbon:after { display: table; content: ""; } .ribbon:after { clear: both; } /** COLOR & BG ========== */ .ribbon_hero { background: #373737 url(../media/images/homepage-hero-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_heroPricing { background: #373737 url(../media/images/pricing-hero-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_sceneLight { background: #ffffff url(../media/images/homepage-platform-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_patternFade { background: #f6f6f6 url(../media/images/pattern-fade.png) repeat-x scroll left bottom; } .ribbon_sceneGrey { background-color: #f6f6f6; /* was #f5f5f5 */ } .ribbon_drkPattern { background: #231f20 url(../media/images/footer-pattern.png) repeat scroll 0 0; } footer.ribbon_drkPattern { padding-bottom: 15px; } .ribbon_productApps { background: #f6f6f6 url(../media/images/products-apps-ti-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_productPlatform { background: #484850 url(../media/images/products-arrow-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_productAnalytics { background: #8c191b url(../media/images/products-analytics-bg.jpg) no-repeat scroll center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .ribbon_flatColorGreyXLt { background: #f6f6f6; } .ribbon_flatColorGreyLt { background: #e0e1e1; } .ribbon_flatColorGrey { background: #555555; } .ribbon_flatColorGreyDark { background: #333333; } .ribbon_flatColorGreyXDark { background: #202020; } .ribbon_flatColorBlueGrey { background: #484850; } .ribbon_flatColorBlueGreyLt { background: #d9e4eb; } /** DIVIDERS ========== */ .ribbon_borderBottom { border-bottom: 1px solid #dddddd; } .mix-ribbon_borderTop { border-top: 1px solid #dddddd; } /** SPACING ========== */ .mix-ribbon_main { padding-top: 335px; padding-bottom: 205px; } .mix-ribbon_pricing { padding-top: 247px; padding-bottom: 99px; } .mix-ribbon_thickTop { padding-top: 96px; } .mix-ribbon_thickBase { padding-top: 96px; } .mix-ribbon_topper { padding-top: 125px; } .mix-ribbon_bar { padding-top: 12px; padding-bottom: 12px; border: 1px solid #cccccc; border-width: 1px 0; opacity: .98; } .mix-ribbon_features { padding-top: 70px; padding-bottom: 85px; } .mix-ribbon_slimTop { padding-top: 55px; } .mix-ribbon_slimBottom { padding-bottom: 45px; } .mix-ribbon_noPadding { padding-top: 5px; padding-bottom: 0; } .statistics-section { background: #f6f6f6 url(../media/images/grid_noise.png) repeat top center; padding-bottom:20px; } .plus-icon /* ARROW page plus icon */ { padding:80px 0; font-size:80px; text-align: center; } /* --------------------------------------------------------------------- Ribbon Stack @type Layout @purpose Section wrapping element that creates a new stcking context and layers the background and foreground sub components appropriately within this new stacking context. @sub components .ribbonStack-bg - expands to fill entire container size .ribbonStack-fg - foreground content used to give the wrapping container its height @extensions Vertical Spacing .ribbonStack-fg_thinner - less padding at bottom .ribbonStack-fg_thin - has more padding on bottom than top .ribbonStack-fg_thick - additional padding added to the top and bottom .ribbonStack-fg_thickest - even more padding added to the top and bottom of the content @mixins Section Divider .mix-ribbonStack-fg_borderBottom - a single border at only the bottom of the section .mix-ribbonStack-fg_borderTop - a single border at only the top of the section ------------------------------------------------------------------------ */ .ribbonStack { position: relative; /* for positioning background elements */ overflow: hidden; /* clip any content larger than .ribbonStack content, bonus that it clears content */ width: 100%; background: #ffffff none no-repeat scroll 0 0; } /** SUB COMPONENTS ========== */ .ribbonStack-bg { width: 100%; /* fallback in case JS fails */ position: absolute; z-index: 0; /* must sit in the background relative to all other sub-components of .ribbonStack */ top: 0; left: 0; } .ribbonStack-bg:after { content: ""; display: block; width: 100%; height: 0; padding-bottom: 46.5%; } .ribbonStack-fg { position: relative; z-index: 20; /* must sit in the foreground relative to .ribbonStack-bg */ padding: 195px 0 96px; } .ribbonStack-bg > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ribbonStack.hyperloop .ribbonStack-bg > * { height: auto; } /** BG COLOR ========== */ .mix-ribbonStack_highlight { background: #5f6d77 none repeat scroll 0 0; } /** VERTICAL SPACING ========== */ .ribbonStack-fg_thinner { padding-top: 38px; padding-bottom: 10px; } .ribbonStack-fg_thin { padding-top: 38px; padding-bottom: 45px; } .ribbonStack-fg_hyperloop { padding-top: 128px; padding-bottom: 90px; } .ribbonStack-fg_thick { padding-top: 247px; padding-bottom: 99px; } .ribbonStack-fg_thickest { padding-top: 335px; padding-bottom: 205px; } /** DIVIDERS ========== */ .mix-ribbonStack-bg_borderBottom { border-bottom: 1px solid #dddddd; } .mix-ribbonStack-bg_borderTop { border-top: 1px solid #dddddd; } /* --------------------------------------------------------------------- Media Block @type Layout @purpose To allow a piece of media to be shifted to the right or left of the text content that is available in the same component. @sub components .media-img - the media wrapper positioned to the right or left .media-bd - static content adjusts based on the size of .media-img ------------------------------------------------------------------------ */ .media { overflow: hidden; /* clear floated children */ } .media-img { float: left; margin: 0 10px 0 0; } .media-img_icon { width: 40px; } .media-img_r { float: right; margin: 0 0 0 10px; } .media-bd { overflow: hidden; /* trigger block formatting context */ } .jw-tab-focus:focus { outline: none; /* removes blue outline around JWPlayer videos */ } /* --------------------------------------------------------------------- Start for Free Footer To style objects in the footer start for free section ------------------------------------------------------------------------ */ .startFreeFooter { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .startFreeFooter .startFree-action-split { text-align: center; } /* --------------------------------------------------------------------- Vertical Rhythm @type Layout @purpose Used exclusively to add margin at the bottom of elements to space elements vertically on the page. Spacing can be adjusted for the sm breakpoint. ------------------------------------------------------------------------ */ .vRhythm { *zoom: 1; margin: 0 0 14px; padding: 0; line-height: 1.71429; } .vRhythm:before, .vRhythm:after { display: table; content: ""; } .vRhythm:after { clear: both; } .vRhythm_loiter { margin-bottom: 0; } .vRhythm_stroll { margin-bottom: 18px; } .vRhythm_mosey { margin-bottom: 20px; } .vRhythm_shuttle { margin-bottom: 30px; } .vRhythm_jog { margin-bottom: 38px; } .vRhythm_run { margin-bottom: 55px; } .vRhythm_sprint { margin-bottom: 230px; } /** MIXINS ========== */ .mix-vRhythm_headStart { margin-top: 8px; } /* --------------------------------------------------------------------- Legal List ------------------------------------------------------------------------ */ .legalList { font-size: 0; } .legalList .menu { margin: 0; padding: 0; list-style: none; } .legalList .menu > * { display: inline; font-size: 12px; } .legalList .menu > * + * { margin-left: 10px; } /* --------------------------------------------------------------------- Horizontal List ------------------------------------------------------------------------ */ .hList { *zoom: 1; } .hList:before, .hList:after { display: table; content: ""; } .hList:after { clear: both; } .hList > * { float: left; } .hList > * + * { margin-left: 20px; } /** SPACING ========== */ .hList_tight > * + * { margin-left: 10px; } /* --------------------------------------------------------------------- Vertical List ------------------------------------------------------------------------ */ .vList { *zoom: 1; } .vList:before, .vList:after { display: table; content: ""; } .vList:after { clear: both; } .vList > * + * { margin-top: 20px; } /** SPACING ========== */ .vList_tight > * + * { margin-top: 10px; } .vList_superTight > * + * { margin-top: 5px; } /* --------------------------------------------------------------------- Title Sect ------------------------------------------------------------------------ */ .titleSect { margin: 0; padding: 0; text-align: center; } .titleSect-hd { margin-bottom: 24px; } .titleSect-bd { margin-bottom: 55px; } .titleSect-ft { margin-bottom: 0px; } /* --------------------------------------------------------------------- Section Content ------------------------------------------------------------------------ */ .sectCont { margin: 0; padding: 0; } .sectCont-hd { margin-bottom: 40px; text-align: center; } .sectCont-hd-prime { margin-bottom: 18px; } .sectCont-hd-sub { margin: 0 auto; } .sectCont-bd:last-child { margin-bottom: 0; } .mix-ribbon_noPadding .sectCont { padding-top: 35px; /*padding-bottom: 35px;*/ } /** EXTENSIONS =========== */ .sectCont-bd_jog, .sectCont-bd_jog:last-child { margin-bottom: 30px; } .sectCont-hd_left { text-align: left; } /* --------------------------------------------------------------------- Slide Content ------------------------------------------------------------------------ */ .slideCont { padding-top: 100px; } .slideCont-hd { margin-bottom: 16px; } .slideCont-bd { margin-bottom: 48px; line-height: 1.71429; } .slideCont-action { margin: 0; } /* --------------------------------------------------------------------- Boxes ------------------------------------------------------------------------ */ .box { background-color: #ffffff; } .box-hd { padding: 27px 17px 0 17px; } .box-bd { padding: 17px 17px 0 17px; line-height: 1.28571; } .box-ft { padding: 25px; } /** EXTENSIONS =========== */ .box_fixedHeight { position: relative; height: 270px; } .box-ft_fixedHeight { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 10px; } .box-ft_fixedButton { bottom:0; left: 0; right: 0; padding: 20px 10px; } /** MIXINS ========== */ .mix-box_borderT { border-top: 1px solid #dddddd; } .mix-box_borderR { border-right: 1px solid #dddddd; } .mix-box_borderL { border-left: 1px solid #dddddd; } .mix-box_standout { background-color: #b61a1c; color: white; } /* --------------------------------------------------------------------- Blocks @type Layout @purpose The class of .blocks wraps a series of child elements that are to be spaced evenly within the available space. The element .blocks will expand to fit the parent element. @extensions .blocks_2up - determines with width of the child elments based on a percentage value based on the number in the extension (_2up = 50%, _4up = 25%, etc...). @class mixins .mix-blocks_tight - decrease horizontal space between child elements .mix-blocks_jog - increase vertical space between child elments ------------------------------------------------------------------------ */ .blocks { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: 0; /* removes the ghost space between inline-block elements */ } .blocks > * { display: inline-block; padding: 0 10px; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: 14px; } /* blocks sizes */ .blocks_1up > * { width: 100%; } .blocks_2up > * { width: 50%; } .blocks_3up > * { width: 33.33333%; } .blocks_4up > * { width: 24.5%; } .blocks_5up > * { width: 20%; } .blocks_6up > * { width: 16.66667%; } .blocks_7up > * { width: 14.28571%; } .blocks_8up > * { width: 12.5%; } .blocks_9up > * { width: 11.11111%; } .blocks_10up > * { width: 10%; } .blocks_11up > * { width: 9.09091%; } .blocks_12up > * { width: 8.33333%; } /** MIXINS ========== */ /* mixin added to tighten up spacing for use on the home page 4 tile slideshow */ .mix-blocks_tight > * { padding: 0 5px; } /* adds vertical spacing for features on pricing page */ .mix-blocks_jog > * { margin-bottom: 70px; } /* --------------------------------------------------------------------- Pricing Grid ------------------------------------------------------------------------ */ .pricingGrid { display: table; width: 100%; padding: 0; } .pricingGrid-col { vertical-align: top; display: table-cell; padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .pricingGrid-col + .pricingGrid-col { border-left: 1px solid #cccccc; } .pricingGrid-col_label { display: none; } .pricingGrid-col_section { width: 33.33333%; text-align: center; } /* --------------------------------------------------------------------- InfoList ------------------------------------------------------------------------ */ .infoList-img { margin-bottom: 22px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .infoList-img_roundTop { border-radius: 15px 15px 0 0; } .infoList-img_roundTopSmall { border-radius: 5px 5px 0 0; } .infoList-img > img { display: block; height: auto; } .infoList-title { margin-bottom: 27px; } /* --------------------------------------------------------------------- Logo ------------------------------------------------------------------------ */ .logo { display: block; width: 46px; max-width: 100%; } .logo > img { max-width: 100%; } /*.axway-logo { background-color: transparent; background-image: url(../media/images/axway-logo-vert-black-text.png); background-position: left top; background-repeat: no-repeat; background-size: cover; display: block; height: 72px; width: 78px; max-width: 100%; }*/ /* --------------------------------------------------------------------- Social ------------------------------------------------------------------------ */ .social { display: block; margin: 0 auto 120px; } .social-label { display: block; margin-bottom: 16px; color: #ffffff; font-size: 16px; font-weight: 700; } .social-blocks { display: block; font-size: 0; /* removes ghost spacing on inline-block elements */ } /* extra specificity added to override wp/appcelerator styles */ .social-blocks .social-blocks-icon { position: relative; display: inline-block; width: 10%; padding: 0 0 10%; /* making sure not to include positioning */ background-image: url(../media/images/icons-social.png); background-color: #ca2127; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .social-blocks-icon + .social-blocks-icon { margin-left: 8px; } .social-blocks-icon > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; /* hide font visually */ cursor: pointer; /* forces the entire to alter cursor state */ } /** WP Menu Layout ========== */ .social-blocks > .menu { display: block; width: 300px; margin: 20px auto 0; padding: 0; list-style: 0; } /** SOCIAL ICONS ========== */ .social-blocks-icon_twitter { background-position: 0 0; } .social-blocks-icon_facebook { background-position: 0 20%; } .social-blocks-icon_googleplus { background-position: 0 40%; } .social-blocks-icon_instagram { background-position: 0 60%; } .social-blocks-icon_github { background-position: 0 80%; } .social-blocks-icon_linkedin { background-position: 0 100%; } /* --------------------------------------------------------------------- Copyright ------------------------------------------------------------------------ */ .copyright { margin-bottom: 25px; font-size: 13px; line-height: 1.53846; } /** LEGACY OVERRIDE - these styles are meant to override system styles and legacy styling ========== */ .copyright #wgt-footer-copyright { text-align: left; } /* --------------------------------------------------------------------- Hide - This module is a carry over from legacy styles. It is the only utility class being used. It has been modified to support the new breakpoints. ------------------------------------------------------------------------ */ .hide { display: none; } /* hide element at all breakPoints */ /* --------------------------------------------------------------------- Counter ------------------------------------------------------------------------ */ .counter { margin: 0; padding: 0; text-align: center; } .counter-nums { margin-bottom: 14px; color: #2f3742; font-size: 38px; font-weight: 700; line-height: 1; } .counter-desc { color: #58595b; font-size: 14px; line-height: 1.42857; } /* --------------------------------------------------------------------- Plaque ------------------------------------------------------------------------ */ .plaque { padding: 0; margin: 0; text-align: center; } .plaque-img { display: block; width: 95px; max-width: 100%; margin: 0 auto 26px auto; } .plaque-img-icon { display: block; width: 100%; padding: 0 0 100% 0; background: transparent url(../media/images/icons-platform.png) no-repeat scroll 0 0; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; font-size: 0; /* visually hide text */ } .plaque-title { margin-bottom: 16px; } .plaque-desc { margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857; } /** EXTENSIONS ========== */ .plaque-img-icon_build { background-position: 0 0; } .plaque-img-icon_test { background-position: 0 -95px; } .plaque-img-icon_connect { background-position: 0 -190px; } .plaque-img-icon_measure { background-position: 0 -285px; } /* --------------------------------------------------------------------- Showcase ------------------------------------------------------------------------ */ .showcase { width: 100%; background: transparent url(../media/images/app-banner.png) no-repeat scroll center 16px; } .showcase-icon { width: 90px; height: 90px; margin: 0 auto 45px auto; background: transparent url(../media/images/icon-appceleratorPwr.png) no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; font-size: 0; /* visually hide text */ } .showcase-btn { display: block; text-align: center; } .showcase-btn .btn { font-size: 14px; text-transform: inherit; font-weight: 700; padding: 9px 12px; } /* --------------------------------------------------------------------- Tile ------------------------------------------------------------------------ */ .tile { display: block; min-height: 375px; padding: 18px; background: #ffffff none scroll no-repeat 0 0; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .title-hd { margin-bottom: 18px; } .tile-media { border: 1px solid #e0e1e1; margin-bottom: 18px; } .tile-media > img { display: block; } .tile-desc { margin-bottom: 14px; font-size: 13px; line-height: 1.71429; text-overflow: ellipsis; } .tile-action { margin-bottom: 0; } /* --------------------------------------------------------------------- Brand Banner ------------------------------------------------------------------------ */ .brandBanner { font-size: 0; /* remove ghost spacing on inline-block elements */ text-align: center; } .brandBanner-block { display: inline-block; width: 14.28571%; padding: 0 12.5%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } .brandBanner-block-company { display: block; width: 100%; padding-bottom: 50%; background: transparent url(../media/images/icons-customers.png) no-repeat scroll 0 0; -webkit-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -o-background-size: 100%; background-size: 100%; } .brandBanner-block-company_logo1 { background-position: 0 0%; } .brandBanner-block-company_logo2 { background-position: 0 16.68%; } .brandBanner-block-company_logo3 { background-position: 0 33.36%; } .brandBanner-block-company_logo4 { background-position: 0 50.04%; } .brandBanner-block-company_logo5 { background-position: 0 66.72%; } .brandBanner-block-company_logo6 { background-position: 0 83.4%; } .brandBanner-block-company_logo7 { background-position: 0 100.08%; } /* --------------------------------------------------------------------- Cells ------------------------------------------------------------------------ */ .cell { padding: 10px; font-size: 14px; line-height: 1.28571; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .cell-sectionLabel { padding-left: 22px; color: #b61a1c; } .cell-rowLabel { padding-left: 10%; color: #464646; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 400; } .cell-rowLabel-text { display: inline; overflow: hidden; white-space: nowrap; } .cell-value { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 400; } .cell-columnLabel { color: #b61a1c; } .cell-cellLabel { margin-bottom: 10px; color: #333333; font-weight: 700; } /* Disable BRs that are used for padding height in larger screen sizes */ .cell-cellLabel br, .cell_hdg br { display: none; } /** EXTENSIONS =========== */ .cell_hdg { width: 100%; font-weight: bold; line-height: 1.42857; } .mix-cell_zebra:nth-child(odd), .mix-cell_zebraDark:nth-child(odd) { background-color: #ebebeb; } .mix-cell_zebra:nth-child(even), .mix-cell_zebraDark:nth-child(even) { background-color: #f6f6f6; } /** MIXIN ========== */ .mix-cell-rowLabel-text_wrap { white-space: normal; } /* --------------------------------------------------------------------- Pricing Table Container ------------------------------------------------------------------------ */ .pricingTable { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .pricingTable-hd { border-bottom: 3px solid #b61a1c; border-right: 1px solid #cccccc; } .pricingTable-bd-section { border-right: 1px solid #cccccc; } .pricingTable-ft { border-bottom: 3px solid #b61a1c; border-right: 1px solid #cccccc; } .feature-comparison th p { line-height: 1.42857143; } .feature-comparison .panel .media-body { padding-right: 10px; } /* --------------------------------------------------------------------- List with connected bullets ------------------------------------------------------------------------ */ .dotList { margin-left: 11px; *zoom: 1; } .dotList:before, .dotList:after { display: table; content: ""; } .dotList:after { clear: both; } #content .dotList li { list-style: none; margin: 0; } .dotList > * { padding-bottom: 17px; margin-left: 20px; position: relative; } .dotList > *:after { width: 12px; height: 12px; position: absolute; top: 3px; left: -25px; background: url(../media/images/list-disc.png); content: " "; } .dotList > *:before { position: absolute; top: 0px; left: -20px; bottom: 0; border-left: 1px solid #ca2127; content: " "; } .dotList > *:first-child:before { top: 5px; /* Prevent the border from sticking out of the top disc */ } .dotList > *:last-child:before { height: 10px; /* the last item only needs enough border to connect to the top of the disc */ } .dotList-subList { margin-left: 10px; margin-top: 10px; } /* --------------------------------------------------------------------- Video container ------------------------------------------------------------------------ */ /* distance between bottom of image and bottom of screen */ /* distance between bottom of image and bottom of iPad */ .mediaVid { margin-bottom: 60px; } .mediaVid_ipad { padding-bottom: 90%; margin-bottom: -6.25%; height: 0; position: relative; } .mediaVid-bd_ipad { padding: 8.33333% 8.85417% 20.72917% 9.89583%; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: transparent url(../media/images/products-analytics-ipad.png) no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* --------------------------------------------------------------------- Slides with tooltips ------------------------------------------------------------------------ */ .slideTool-bd { position: relative; } .slideTool-bd-bg > img { display: block; } .slideTool-bd-tt { margin-left: -16px; margin-top: -16px; position: absolute; } /* --------------------------------------------------------------------- Slide banners ------------------------------------------------------------------------ */ .slideBanner-bd { background-color: #000000; padding: 20px; opacity: .4; text-align: center; } .slideBanner-bd_red { background-color: #a34749; } /* --------------------------------------------------------------------- Tagged Media ------------------------------------------------------------------------ */ .tagMedia { position: relative; width: 100%; font-size: 0; /* remove ghost space on children that are inline-block */ text-align: center; } .tagMedia-media { display: inline-block; max-width: 100%; } .tagMedia-tag { position: absolute; left: 50%; z-index: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #808285; font-weight: 400; text-align: left; } /** INDICATORS ========== */ .tagMedia-tag:before, .tagMedia-tag:after { content: ""; position: absolute; display: block; border: 1px solid #ca2127; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* --------------------------------------------------------------------- Heading with horizontal lines extending out the sides ------------------------------------------------------------------------ */ .linedHeading { position: relative; } .linedHeading-inner { padding: 0 10px 0 10px; position: relative; background: #ffffff; } .linedHeading:before { height: 1px; position: absolute; left: 0; right: 0; top: 50%; background: #dddddd; content: " "; } /* --------------------------------------------------------------------- Links ------------------------------------------------------------------------ */ .link { color: #ca2127; text-decoration: underline; } /* --------------------------------------------------------------------- Topper Icon @type Decoration @purpose Used to reduce the maximum size of the icon being used in the Highlight Content Section on the homepage. ------------------------------------------------------------------------ */ .topperIcon { display: inline-block; max-width: 15.68627%; } /* --------------------------------------------------------------------- User Content @type Decorative @purpose Style all elements that could be placed inside of the .userContent wrapping element so that they have the appropriate look, feel, and spacing. ------------------------------------------------------------------------ */ /** .userContent - Baseline ==================== */ .userContent { position: relative; font-size: inherit; line-height: 0.58333; color: #433b35; } /** .userContent - Media ==================== */ .userContent img, .userContent audio, .userContent video, .userContent iframe { max-width: 100% !important; } /** Being used specifically for firefox where the max-width does not scale the google generated image. */ .userContent-gMapImg { width: 100%; } /** .userContent - Text (block) ==================== */ .userContent h1, .userContent h2, .userContent h3, .userContent h4, .userContent h5, .userContent h6 { margin: 0 0 20px 0; color: #202020; font-weight: 300; line-height: 0.71429; } .userContent h1 { font-size: 36px; line-height: 36/50; } .userContent h2 { font-size: 32px; line-height: 32/42; } .userContent h3 { font-size: 24px; line-height: 24/30; } .userContent h4 { font-size: 20px; line-height: 20/28; } .userContent h5 { font-size: 18px; } .userContent h6 { font-size: 16px; } .userContent h1.tightMargin, .userContent h2.tightMargin, .userContent h3.tightMargin, .userContent h4.tightMargin, .userContent h5.tightMargin, .userContent h6.tightMargin { margin: 0 0 10px 0; } .userContent p { margin: 0 0 20px 0; line-height: 0.58333; } .userContent blockquote { margin: 0 24px 20px 24px; padding: 12px; background: #e0e1e1; font-style: italic; } .userContent address { margin: 0 0 20px 0; font-style: italic; } .userContent pre { margin: 0 0 20px 0; font-family: "Lucida Console", Monaco, monospace; } /** .userContent - Text (inline) ==================== */ .userContent em, .userContent i { font-style: italic; } .userContent strong, .userContent b { font-weight: 700; } .userContent abbr, .userContent acronym { border-bottom: dotted 1px; } .userContent sub { vertical-align: sub; font-size: smaller; } .userContent sup { vertical-align: super; font-size: smaller; } .userContent u, .userContent ins { text-decoration: underline; } .userContent s, .userContent strike, .userContent del { text-decoration: line-through; } .userContent big { font-size: larger; } .userContent small { font-size: smaller; } .userContent q { font-style: italic; } .userContent q::before { content: open-quote; } .userContent q::after { content: close-quote; } .userContent q:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; } .userContent samp, .userContent tt, .userContent code, .userContent kbd { font-family: "Lucida Console", Monaco, monospace; } .userContent var, .userContent cite, .userContent dfn { font-style: italic; } .userContent ins { text-decoration: underline; } .userContent blink { text-decoration: blink; } /** .userContent - Lists ==================== */ .userContent ul, .userContent ol, .userContent dl { margin-top: 0; margin-bottom: 20px; } .userContent ul { margin: 0 0 20px 0; list-style-type: disc; } .userContent ol { margin: 0 0 20px 0; list-style-type: decimal; } .userContent dt { font-weight: 300; } .userContent li, .userContent dd { margin: 0 0 0 24px; } /* nested lists have no top/bottom margins */ .userContent ul ul, .userContent ul ol, .userContent ul dl, .userContent ol ul, .userContent ol ol, .userContent ol dl, .userContent dl ul, .userContent dl ol, .userContent dl dl { margin-top: 0; margin-bottom: 0; } /* 2 deep unordered lists use a circle */ .userContent ol ul, .userContent ul ul { list-style-type: circle; } /* 3 deep (or more) unordered lists use a square */ .userContent ol ol ul, .userContent ol ul ul, .userContent ul ol ul, .userContent ul ul ul { list-style-type: square; } /** .userContent - Horizontal Rule ==================== */ .userContent hr { margin: 0 0 20px 0; height: 1px; border: none; background: #333333; color: #333333; line-height: 1px; font-size: 1px; } /** .userContent - Tables ==================== */ .userContent table { margin: 0 0 20px 0; width: 100% !important; border-spacing: 2px; border-collapse: separate; } .userContent caption { font-size: smaller; } .userContent tr { vertical-align: middle; } .userContent tbody { vertical-align: middle; } .userContent thead { vertical-align: middle; } .userContent tfoot { vertical-align: middle; } .userContent td { padding: 2px 4px; text-align: inherit; vertical-align: inherit; } .userContent th { padding: 2px 4px; background-color: #e0e1e1; color: #ffffff; text-align: inherit; font-weight: 300; vertical-align: inherit; } /* zebra stripe */ .userContent tr.even td { background-color: #e0e1e1; } /* --------------------------------------------------------------------- Slideshow @type Layout/Interactive @purpose Handle layout and decorative components associated with the Slideshow. This includes pagination and navigational arrows for next and previous slides. ------------------------------------------------------------------------ */ .slideshow { position: relative; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .slideshow-case { position: relative; overflow: hidden; width: 100%; *zoom: 1; } .slideshow-case:before, .slideshow-case:after { display: table; content: ""; } .slideshow-case:after { clear: both; } .slideshow-case-slide { position: absolute; top: 0; left: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .slideshow-next, .slideshow-prev { position: absolute; /* vertically centering element */ top: 40%; margin-top: -23px; width: 24px; height: 46px; background: transparent url(../media/images/slider-arrows.png) no-repeat scroll 0 0; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; font-size: 0; /* visually hide text */ cursor: pointer; } .slideshow-prev { left: 0; background-position: 0 center; } .slideshow-next { right: 0; background-position: 100% center; } .slideshow-pager { width: 100%; font-size: 0; /* remove ghost space from inline */ text-align: center; /* center child elements */ } .slideshow-pager-item { display: inline-block; margin: 0; } .slideshow-pager-item + .slideshow-pager-item { margin-left: 8px; } .slideshow-pager-item-link { display: block; width: 12px; height: 12px; background: #e6e7e8 none no-repeat scroll 0 0; border-radius: 100%; cursor: pointer; text-indent: -9999px; } /** SLIDE TRANSITION ========== */ /** Starting Positions */ .slideshow-case-slide.prevSlide { left: -100%; } .slideshow-case-slide.currentSlide { left: 0; } .slideshow-case-slide.nextSlide { left: 100%; } .slideshow-case-slide.transitioning { -webkit-transition: left 1.5s ease-in-out; -moz-transition: left 1.5s ease-in-out; -o-transition: left 1.5s ease-in-out; transition: left 1.5s ease-in-out; } /** Previous Transition Ending Positions */ .slideshow-case-slide.prevSlide.transNext { left: -200%; } .slideshow-case-slide.currentSlide.transNext { left: -100%; } .slideshow-case-slide.nextSlide.transNext { left: 0; } /** Previous Transition Ending Positions */ .slideshow-case-slide.prevSlide.transPrev { left: 0; } .slideshow-case-slide.currentSlide.transPrev { left: 100%; } .slideshow-case-slide.nextSlide.transPrev { left: 200%; } /** STATES ========== */ .slideshow-case-slide.isActive { position: relative; left: 0; } /** .isActive is placed on the containing list item to match the index of the slide it is representing */ .slideshow-pager-item-link:hover, .isActive .slideshow-pager-item-link { background-color: #bfbfbf; } /* --------------------------------------------------------------------- Tooltips ------------------------------------------------------------------------ */ .tooltip { display: inline-block; position: relative; } .tooltip:hover .tooltip-text { display: block; opacity: 0.9; } .tooltip-icon { vertical-align: bottom; } .tooltip-text { display: none; line-height: 1.42857; position: absolute; width: 327px; left: 100%; top: 50%; margin-top: -35px; margin-left: 15px; padding: 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background-color: #333333; color: white; opacity: 0; z-index: 15; pointer-events: none; } .tooltip-text:before, .tooltip-text:after { position: absolute; left: -20px; content: " "; } .tooltip-text:after { margin-left: 1px; top: 25px; border-color: transparent #333333 transparent transparent; border-style: solid; border-width: 10px; } /** EXTENSIONS ========== */ .tooltip-text_left { right: 100%; left: auto; margin-left: auto; margin-right: 15px; } .tooltip-text_left:before { left: 100%; border-color: transparent transparent transparent #333333; } .tooltip-text_left:after { margin-left: -1px; border-color: transparent transparent transparent #333333; left: 100%; } /** MIXINS ========== */ .mix-tooltip-text_compact { width: 235px; padding: 18px; margin-top: -27px; } .mix-tooltip-text_compact:after { top: 18px; } .mix-tooltip-text_blueish { background-color: #2f3742; } .mix-tooltip-text_blueish:after { border-color: transparent #2f3742 transparent transparent; } .tooltip_left .mix-tooltip-text_blueish:after { border-color: transparent transparent transparent #2f3742; } .mix-tooltip-text_border { border: 1px solid #5e7c8f; } .mix-tooltip-text_border:before { border-color: transparent #5e7c8f transparent transparent; border-style: solid; border-width: 10px; } .tooltip_left .mix-tooltip-text_border:before { border-color: transparent transparent transparent #5e7c8f; border-style: solid; border-width: 10px; } /** ANIMATION ========== */ .mix-tooltip-icon_pulse { -webkit-animation-name: pulse; -webkit-animation-duration: 0.75s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate; animation-name: pulse; animation-duration: 0.75s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* --------------------------------------------------------------------- Jump Banner - This is expressly for spanning the full width of the available content area. Meant to house a scroll navigation that will change positiontions after scrolling. ------------------------------------------------------------------------ */ .jumpBanner { display: block; width: 100%; /* needed to maintain width when position changes */ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; /* creating a smooth transition for the product page */ } /** STATES ========== */ .jumpBanner.isStuck { position: fixed; z-index: 900; } /* --------------------------------------------------------------------- Scroll Menu ------------------------------------------------------------------------ */ .scrollMenu { display: block; font-size: 0; /* remove ghosted space from inline-block children */ text-align: center; } .scrollMenu-block { display: inline-block; cursor: pointer; } .scrollMenu-block-icon, .scrollMenu-block-label { display: block; vertical-align: top; } .scrollMenu-block-icon { max-width: 100%; } .scrollMenu-block-icon:before { content: ""; display: block; width: 100%; padding: 0 0 100%; border: 1px solid #ca2127; border-color: rgba(202, 33, 39, 0.2); /* for browsers that support rgba */ background: #ffffff url(../media/images/icons-scrollMenu.png) no-repeat scroll 0 0; border-radius: 100%; -webkit-background-size: 200%; -moz-background-size: 200%; -ms-background-size: 200%; -o-background-size: 200%; background-size: 200%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .scrollMenu-block-icon:before:hover { background-color: #ca2127; } .scrollMenu-block-label { color: #ca2127; font-weight: 700; line-height: 1.2; } /** ICON BG POSITION ========== */ .scrollMenu-block-icon_apps:before { background-position: 0 0; } .scrollMenu-block-icon_apis:before { background-position: 0 50%; } .scrollMenu-block-icon_anl:before { background-position: 0 100%; } /** ICON STATES ========== */ *:hover > .scrollMenu-block-icon:before, .scrollMenu-block.isActive .scrollMenu-block-icon:before { border-color: #ca2127; background-color: #ca2127; } *:hover > .scrollMenu-block-icon_apps:before, .scrollMenu-block.isActive .scrollMenu-block-icon_apps:before { background-position: 100% 0; } *:hover > .scrollMenu-block-icon_apis:before, .scrollMenu-block.isActive .scrollMenu-block-icon_apis:before { background-position: 100% 50%; } *:hover > .scrollMenu-block-icon_anl:before, .scrollMenu-block.isActive .scrollMenu-block-icon_anl:before { background-position: 100% 100%; } .scrollMenu-block.isActive .scrollMenu-block-icon { cursor: auto; } /* --------------------------------------------------------------------- Quick Link - the quicklinks will be inheriting the HTML structure of WP menus ------------------------------------------------------------------------ */ .quicklinks > * { display: block; } .quicklinks ol.menu, .quickLinks ul.menu, .quickLinks .menu { margin: 0; padding: 0; list-style: none; font-size: 0; /* remove hidden space between inline-block elements */ } /* override line height added to ul li */ .quicklinks ol.menu > li, .quickLinks ul.menu > li, .quickLinks .menu > li { line-height: 1; } .quicklinks ol.menu > li > a, .quickLinks ul.menu > li > a, .quickLinks .menu > li > a { color: #ca2127; font-size: 12px; font-weight: 400; text-decoration: none; } .quicklinks ol.menu > li > a:hover, .quickLinks ul.menu > li > a:hover, .quickLinks .menu > li > a:hover { color: #8c191b; } /** SM: Hidden Menu ========== */ .quickLinks_sm { display: none; } /* --------------------------------------------------------------------- Buttons ------------------------------------------------------------------------ */ .btn { display: inline-block; margin: 0; padding: 10px 26px; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background: #333333; color: #eeeeee; /* fallback for non rgba browsers */ color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 16px; text-align: center; text-decoration: none; text-transform: capitalize; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .btn:hover { background: #555555; color: #eeeeee; /* fallback for non rgba browsers */ color: rgba(255, 255, 255, 0.9); text-decoration: none; } /** EXTENSIONS =========== */ .btn_light { background: #e0e1e1; color: #333333; } .btn_light:hover { background: #f6f6f6; color: #333333; } .btn_standout { background: #ca2127; } .btn_standout:hover { background: #8c191b; } .btn_lined { background-color: transparent; border: 1px solid #ca2127; color: #ca2127; } .btn_lined:hover { background-color: #8c191b; color: #ffffff; } /** MIXINS ========== */ .mix-btn_small { padding: 10px 13px; font-weight: 700; font-size: 14px; } .mix-btn_large { padding: 16px 30px; font-weight: 600; } .mix-btn_fill { display: block; font-size: 14px; font-weight: 700; text-align: center; } .mix-btn_fillBig { display: block; padding: 13px 0; } .mix-btn_wider { width:96px; } /* --------------------------------------------------------------------- Get Apps ------------------------------------------------------------------------ */ .getApps { display: block; *zoom: 1; } .getApps:before, .getApps:after { display: table; content: ""; } .getApps:after { clear: both; } .getApps-label, .getApps-action { float: left; } .getApps-label { width: 26.31579%; height: 40px; margin-right: 1px; color: #666666; font-size: 14px; font-weight: 700; line-height: 40px; text-transform: uppercase; } .getApps-action { width: 72.89474%; *zoom: 1; } .getApps-action:before, .getApps-action:after { display: table; content: ""; } .getApps-action:after { clear: both; } .getApps-action-btn { float: left; width: 48.73646%; height: 0; padding-bottom: 14.44043%; background: #000000 url(../media/images/app-btns.png) no-repeat scroll 0 0; border-radius: 5px; -webkit-background-size: 200%; -moz-background-size: 200%; -ms-background-size: 200%; -o-background-size: 200%; background-size: 200%; font-size: 0; /* visually hide font */ } .getApps-action-btn + .getApps-action-btn { margin-left: 2.16606%; } .getApps-action-btn_mac { background-position: 0 0; } .getApps-action-btn_android { background-position: 100% 0; } .action-links .getApps-action-btn { background-color: transparent; height: 40px; width: 24.36823%; } /* --------------------------------------------------------------------- Back to top ------------------------------------------------------------------------ */ .toTop { display: none; position: fixed; bottom: 10px; right: 10px; } .toTop a img { width: 80%; height: 80%; } /* --------------------------------------------------------------------- Start for Free ------------------------------------------------------------------------ */ .startFree.not-signup { display: inline-block; max-width: 470px; padding: 14px; background: #eeeeee none no-repeat scroll 0 0; background-color: rgba(236, 238, 238, 0.6); border-radius: 3px; *zoom: 1; font-size: 0; /* remove the ghost space on inline-block elements */ } .startFree.not-signup:before, .startFree.not-signup:after { display: table; content: ""; } .startFree.not-signup:after { clear: both; } .startFree.not-signup, .startFree.not-signup * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .startFree.not-signup .startFree-form, .startFree.not-signup .startFree-action { /*float: left;*/ *zoom: 1; } .startFree.not-signup .startFree-form:before, .startFree.not-signup .startFree-form:after, .startFree.not-signup .startFree-action:before, .startFree.not-signup .startFree-action:after { display: table; content: ""; } .startFree.not-signup .startFree-form:after, .startFree.not-signup .startFree-action:after { clear: both; } .startFree.not-signup .startFree-form { width: 330px; max-width: 75.34247%; } .startFree.not-signup .startFree-form-field, .startFree.not-signup .startFree-form-btn { height: 37px; } .startFree.not-signup .startFree-form-field { float: left; width: 268px; max-width: 81.21212%; margin: 0; padding-left: 1.63636%; border: 0 solid transparent; background: #ffffff none repeat scroll 0 0; border-radius: 5px; color: #898989; font-size: 18px; font-weight: 400; } .startFree.not-signup .startFree-form-btn { float: right; width: 54px; max-width: 16.36364%; margin: 0 0 0 2.12121%; padding: 0 16px; border: 0 solid transparent; background: #ca2127 none repeat scroll 0 0; border-radius: 5px; color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer; } .startFree.not-signup .startFree-action { width: 108px; max-width: 24.65753%; font-size: 0; /* remove ghost space for inline-block elements */ } .startFree.not-signup .startFree-action-split, .startFree.not-signup .startFree-action-btn { float: none; display: inline-block; vertical-align: top; } .startFree.not-signup .startFree-action-split { width: 54px; max-width: 50%; height: 37px; color: #333333; font-size: 16px; font-weight: 700; line-height: 37px; } .startFree.not-signup .startFree-action-btn { width: 54px; max-width: 50%; height: 37px; background: #333333 url(../media/images/icon-github.png) no-repeat scroll center center; border-radius: 5px; font-size: 0; /* being used to visually hide the text */ } .startFree-success { display: none; font-size: 1rem; } .startFree-error { font-size: .8rem; color: red; text-align: center; } .startFreeWrapper { display: block; } .signup-startFree .startFree-form-btn, .signup-startFree .startFree-action-btn { margin: 10px auto; width: 100%; text-transform: none; vertical-align: top; padding-top: 15px; font-size: 1rem; letter-spacing: 0; } .signup-startFree .startFree-action-btn { padding: 17px 0 12px; } .signup-startFree .startFree-form-btn img, .signup-startFree .startFree-action-btn img { margin-right: 15px; } .signup-startFree .startFree-form-btn img { margin-top: -3px; } .signup-startFree .startFree-action-btn img { margin-top: -5px; } .signup-startFree .startFree-form-btn span { vertical-align: top; } .signup-startFree .startFree-form-field { border: 2px solid #d0d0d0; border-radius: 3px !important; padding: 15px 15px; } .signup-startFree .startFree-success { display: none; } .signup-startFree .startFree-action-btn span { vertical-align: top; } hr.signup-short-hr { display: inline-block; width: 35px; height: 5px; margin: 0px 10px 3px; } .signup-startFree.startFree { max-width: 400px; margin: auto; } .signup-startFree.startFree.no-git .signup-startFree .startFree-action { display: none; } .startFree.no-git .startFree-action { display: none; } .startFree.no-git .startFree-form { width: 100%; max-width: 100%; } .startFreeWrapper input.startFree-form-field::-webkit-input-placeholder{ font-size: 13pt !important; } /** STATES ========== */ .startFree .startFree-form-btn:hover, .startFree .startFree-form-btn.disabled { background-color: #8c191b; } .startFree .startFree-action-btn:hover { background-color: #202020; } /* --------------------------------------------------------------------- Headings ------------------------------------------------------------------------ */ .hdg { /* resets for overriding legacy styles */ padding: 0; margin: 0; color: #333333; font-size: 16px; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1; } /** SIZING ========== */ .hdg_1 { font-size: 36px; } .hdg_2 { font-size: 32px; } .sectCont-hd-sub .hdg_2 { line-height: 35px; } .hdg_3 { font-size: 26px; } .hdg_4 { font-size: 20px; } .hdg_5 { font-size: 18px; } .hdg_6 { font-size: 14px; } /** COLOR ========== */ .mix-hdg_light { color: #ffffff; } .mix-hdg_standout { color: #ca2127; } .mix-hdg_xtraDrk { color: #202020; } .mix-hdg_blueGrey { color: #2f3742; } /** SPACING ========== */ .mix-hdg_spaceStd { line-height: 1.66667; } .mix-hdg_spaceLoose { line-height: 1.4375; } .mix-hdg_spaceBaggy { line-height: 1.33333; } /** WEIGHT ========== */ .mix-hdg_fit { font-weight: 400; } .mix-hdg_pudgy { font-weight: 600 !important; } .mix-hdg_thick { font-weight: 700; } .mix-hdg_fluffy { font-weight: 800; } /** FONT ========== */ .mix-hdg_sourceSans { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 400; } .mix-hdg_openSans { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; } /* --------------------------------------------------------------------- Text @type Decoration @purpose Style text elements only by adjusting things like size, wieght, decoartion, and style. This should not be used as a layout elment even if child elements are inline elements. ------------------------------------------------------------------------ */ .text { font-size: inherit; } .text_bold { font-weight: 700; } .text_semibold { font-weight: 600; } /** MIXINS ========== */ .mix-text_em { font-style: italic; } .mix-text_underline { text-decoration: underline; } .mix-text_small { font-size: 13px; } .mix-text_smaller { font-size: 11px; } .mix-text_height { line-height: 1.375; } .mix-text_sourceSans { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 400; } .mix-text_group { white-space: nowrap; } /** MIXINS COLOR ========== */ .mix-text_standout { color: #ca2127; } .mix-text_quiet { color: #555555; } .mix-text_xtraDrk { color: #202020; } .mix-text_light { color: #ffffff; } /** MIXINS JUSTIFICATION ========== */ .mix-text_justCenter { text-align: center; } .mix-text_justLeft { text-align: left; } .mix-text_justRight { text-align: right; } /* --------------------------------------------------------------------- Site Overrides @type Overrides @purpose These styles ar being put in place to override legacy styles present on the Appcelerator site. ------------------------------------------------------------------------ */ .gbCog-bd #content { padding: 0; background: #ffffff none no-repeat scroll 0 0; } #wgt-footer-copyright { margin: 0; } /** Override link styles for the copyright in the Footer. */ .copyright #wgt-footer-copyright a .copyright #wgt-footer-copyright a:hover { color: inherit; text-decoration: none; } /** MODULE .slideshow ========== */ #content .slideshow-case > li, #content .slideshow-pager > li { list-style: none; margin: 0; padding: 0; } /** SCROLL TO FIXED ========== */ #scroll-to-fixed.scroll-fixed { top: 138px; } /* --------------------------------------------------------------------- Legacy Spacer @type Override @purpose Empty div that's only purpose is to add space to the top of the page so that content can be pushed down low enough that the header does not overlap. @extensions Will only change the background color for that spacer. ------------------------------------------------------------------------ */ .legacySpacer { width: 100%; height: 0; padding: 94px 0 0; margin: 0; background: #ffffff none no-repeat scroll 0 0; } .legacySpacer_transp { background-color: transparent; } .legacySpacer_greyXlt { background-color: #f6f6f6; } .legacySpacer_greyLt { background-color: #e0e1e1; } .legacySpacer_grey { background-color: #555555; } .legacySpacer_greyDrk { background-color: #333333; } .legacySpacer_greyXdrk { background-color: #202020; } .legacySpacer_redBright { background-color: #ca2127; } .legacySpacer_redDrk { background-color: #8c191b; } /* Pro Plan Pricing Page */ .red-gradient-background { /* fallback */ background-color: #c52c31; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c52c31), to(#8c191b)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #8c191b, #c52c31); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #8c191b, #c52c31); /* IE 10 */ background: -ms-linear-gradient(top, #8c191b, #c52c31); /* Opera 11.10+ */ background: -o-linear-gradient(top, #8c191b, #c52c31); width: 100%; position: relative; } .plan-special-header { width: 780px; margin: auto; } .plan-special-header-left { width: 65%; display: inline-block; vertical-align: top; } .plan-special-header-right { width: 33%; display: inline-block; vertical-align: top; } .plan-special-header .hdg_1 { margin: 10px 0; } .plan-special-header-left p { line-height: 1.5; margin: 15px 0; } .single-pricing-item { background: #fff; border-radius: 6px; padding: 20px 30px; text-align: center; } .single-pricing-item p { color: #000; } .single-pricing-item-title { font-size: 1.5rem; line-height: 1; } .single-pricing-item-price { font-size: 5.625rem; line-height: 1; font-weight: 700; } .single-pricing-item-price .dollar-sign { font-size: 3.125rem; line-height: 1.25; vertical-align: top; } .single-pricing-item-plan { font-size: 1.5rem; font-weight: 600; } .single-pricing-item-term { font-size: .8125rem; font-style: italic; margin-top: 10px; margin-bottom: 15px; } .pricing-button { margin-top: 10px; } @media (max-width: 900px) { .plan-special-header { width: 90%; margin: auto; } .plan-special-header .hdg_1 { font-size: 26px; } } @media (max-width: 650px) { /* --------------------------------------------------------------------- SMALL BREAKPOINT ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Masthead ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Main Navigation - The Navigation will be following the standard WP nav setup so it will need to be styled to fit that markup orientation. example:
------------------------------------------------------------------------ */ /** PRIMARY LINK ========== */ /** PRIMARY LINK: STATES ========== */ /** SUB NAV ========== */ /** SUB NAV: STATES ========== */ /** SUB NAV: MENU ========== */ /* --------------------------------------------------------------------- Nav List ------------------------------------------------------------------------ */ /* at the sm breakpoint the navList is not visible */ /* --------------------------------------------------------------------- Wrap ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Grid ------------------------------------------------------------------------ */ /** * Grid Maths * At the small breakpoint all grids change to a single stacked column. */ /* resets all push and pull so that it stacks naturally */ /* grid column sizes */ /* grid column sizes at SM */ /* --------------------------------------------------------------------- Ribbon @type Layout @purpose Update the sectional appearance and vertical spacing for the SM breakpoint. @extensions same as base module @mixins .mix-ribbon_isHiddenOnMobile - for hiding an entire section at the SM breakpoint. ------------------------------------------------------------------------ */ /** COLOR & BG ========== */ /** SPACING ========== */ /** MISC MIXINS ========== */ /* --------------------------------------------------------------------- NO BREAKPOINT ------------------------------------------------------------------------ */ /** MIXINS ========== */ /* --------------------------------------------------------------------- Vertical Rhythm @type Layout @purpose Used exclusively to add margin at the bottom of elements to space elements vertically on the page. Spacing can be adjusted for the sm breakpoint. All spacing extensions are prefixed with 'sm' to allow a spacing shift at the sm breakpoint. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Legal List ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Blocks @type Layout @purpose Alter margin for children of .blocks at the SM breakpoint. @extensions .blocks_sm2up - determines with width of the child elments based on a percentage value based on the number in the extension only at SM breakpoint (_sm2up = 50%, _sm4up = 25%, etc...). ------------------------------------------------------------------------ */ /* blocks sizes at SM */ /* --------------------------------------------------------------------- Slide Content ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- InfoList ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Social ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Footer for the features section on the pricing page ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Hide - Vissually hide an element at the Small breakpoint. ------------------------------------------------------------------------ */ /* hide only at the small breakpoint */ /* --------------------------------------------------------------------- Counter ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Tile ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Brand Banner ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Tagged Media ------------------------------------------------------------------------ */ /** INDICATORS ========== */ /* --------------------------------------------------------------------- Pricing Table Container ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Pricing Table Slider Container ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Slideshow ------------------------------------------------------------------------ */ /** ALTERNATE PAGER ========== */ /* --------------------------------------------------------------------- Scroll Menu ------------------------------------------------------------------------ */ /** ICON STATES ========== */ /* for mobile the hover state needs to be separated out from the isActive state class */ /* --------------------------------------------------------------------- Accordion styles and transitions @type Layout/Animation ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Tooltips ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Quick Link - the quicklinks will be inheriting the HTML structure of WP menus ------------------------------------------------------------------------ */ /** STATES ========== */ /** SM: Hidden Menu ========== */ /* --------------------------------------------------------------------- Button ------------------------------------------------------------------------ */ /** MIXINS ========== */ /* --------------------------------------------------------------------- Get Apps ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Start for Free ------------------------------------------------------------------------ */ /** STATES ========== */ /* --------------------------------------------------------------------- Headings ------------------------------------------------------------------------ */ /** SIZING ========== */ /** COLOR ========== */ /* --------------------------------------------------------------------- Breakpoint detection hack ------------------------------------------------------------------------ */ .wrap { padding: 0 20px; } .wrap_pricingTable { padding: 0; } .grid { padding: 0 20px; } .grid-col + .grid-col { margin-left: 0; } [class*="grid-col_sm"] + [class*="grid-col_sm"] { margin-left: 2.12766%; } [class*="mix-grid-col_push"], [class*="mix-grid-col_pull"] { position: relative; left: auto; right: auto; } .grid-col_1of12 { width: 100%; } .grid-col_2of12 { width: 100%; } .grid-col_3of12 { width: 100%; } .grid-col_4of12 { width: 100%; } .grid-col_5of12 { width: 100%; } .grid-col_6of12 { width: 100%; } .grid-col_7of12 { width: 100%; } .grid-col_8of12 { width: 100%; } .grid-col_9of12 { width: 100%; } .grid-col_10of12 { width: 100%; } .grid-col_11of12 { width: 100%; } .grid-col_12of12 { width: 100%; } .grid-col_sm1of12 { width: 6.38298%; } .grid-col_sm2of12 { width: 14.89362%; } .grid-col_sm3of12 { width: 23.40426%; } .grid-col_sm4of12 { width: 31.91489%; } .grid-col_sm5of12 { width: 40.42553%; } .grid-col_sm6of12 { width: 48.93617%; } .grid-col_sm7of12 { width: 57.44681%; } .grid-col_sm8of12 { width: 65.95745%; } .grid-col_sm9of12 { width: 74.46809%; } .grid-col_sm10of12 { width: 82.97872%; } .grid-col_sm11of12 { width: 91.48936%; } .grid-col_sm12of12 { width: 100%; } .ribbon_hero { background-color: #ffffff; -webkit-background-size: 150%; -moz-background-size: 150%; -ms-background-size: 150%; -o-background-size: 150%; background-size: 150%; } .mix-ribbon_main { padding-top: 77.5%; padding-bottom: 55px; } .mix-ribbon_topper { padding-top: 80px; } .mix-ribbon_pricing { padding-top: 100px; padding-bottom: 30px; } .mix-ribbon_features { padding-top: 60px; padding-bottom: 25px; } .mix-ribbon_thickTop { padding-top: 54px; } .mix-ribbon_slimTop { padding-top: 25px; } .mix-ribbon_slimBottom { padding-bottom: 25px; } .mix-ribbon_isHiddenOnMobile { display: none; } .mix-media-img_smStack { float: none; width:30%; margin: 0 auto 10px; } .vRhythm_smLoiter { margin-bottom: 0; } .vRhythm_smStroll { margin-bottom: 18px; } .vRhythm_smMosey { margin-bottom: 20px; } .vRhythm_smShuttle { margin-bottom: 30px; } .vRhythm_smJog { margin-bottom: 38px; } .vRhythm_smRun { margin-bottom: 55px; } .vRhythm_smSprint { margin-bottom: 230px; } .legalList .menu > * { font-size: 11px; } .blocks > * { margin-bottom: 28px; } .blocks_sm1up > * { width: 100%; } .blocks_sm2up > * { width: 50%; } .blocks_sm3up > * { width: 33.33333%; } .blocks_sm4up > * { width: 25%; } .blocks_sm5up > * { width: 20%; } .blocks_sm6up > * { width: 16.66667%; } .blocks_sm7up > * { width: 14.28571%; } .blocks_sm8up > * { width: 12.5%; } .blocks_sm9up > * { width: 11.11111%; } .blocks_sm10up > * { width: 10%; } .blocks_sm11up > * { width: 9.09091%; } .blocks_sm12up > * { width: 8.33333%; } .slideCont { padding-top: 10px; } .slideCont-bd { margin-bottom: 30px; } .infoList-img_roundTop { border-radius: 30px 30px 0 0; } .social { margin-bottom: 40px; } .social-label { display: block; margin-bottom: 14px; } .social-blocks-icon { width: 10.71429%; padding: 0 0 10.71429%; } .social-blocks-icon + .social-blocks-icon { margin-left: 8px; } .featureFooter { margin-top: 10px; padding-top: 30px; border-top: 1px solid #d7d7d7; } .featureFooter-desc, .featureFooter-btn { width: 100%; display: block; } .featureFooter-btn { margin: 30px 20px 0 20px; width: auto; } .hide_sm { display: none; } .counter-nums { margin-bottom: 11px; font-size: 30px; } .counter-desc { margin-bottom: 34px; font-size: 14px; line-height: 1.35714; } .tile { min-height: 154px; padding: 12px; } .title-hd { margin-bottom: 8px; } .tile-media { border: 1px solid #e0e1e1; margin-bottom: 10px; } .tile-media > img { display: block; } .tile-desc { display: none; } .tile-action { margin-bottom: 0; } .brandBanner-block { width: 33.33333%; padding: 0 10px; margin-bottom: 10px; } .tagMedia-media { width: 100%; padding: 116px 0 180px; } .tagMedia-tag { font-size: 12px; line-height: 1.71429; } .tagMedia-tag_botL { width: 186px; left: 0; top: 396px; } .tagMedia-tag_botR { width: 192px; left: auto; right: 0; top: 469px; } .tagMedia-tag_topR { width: 180px; margin-left: -90px; left: 50%; top: 1px; } .tagMedia-tag:before { width: 9px; height: 9px; border-radius: 100%; } .tagMedia-tag:after { top: auto; bottom: 125%; right: 100%; width: 0; height: 28px; border-width: 0 1px 0 0; } .tagMedia-tag_topR:before { top: 79px; left: 86px; } .tagMedia-tag_topR:after { top: 87px; left: 90px; } .tagMedia-tag_botR:before, .tagMedia-tag_botL:before { top: auto; bottom: 110%; } .tagMedia-tag_botR:before { right: 56px; } .tagMedia-tag_botR:after { right: 60px; height: 94px; } .tagMedia-tag_botL:before { left: 61px; } .tagMedia-tag_botL:after { left: 65px; } .loved-by-block { display: none; } .startFreeFooter .media-bd { text-align: center; } .plus-icon { padding:40px 0; } @media screen and (min-width: 360px) { .tagMedia-tag_botL { top: 430px; } .tagMedia-tag_botR { top: 502px; } } @media screen and (min-width: 375px) { .tagMedia-tag_botL { top: 74%; } } @media screen and (min-width: 480px) { .tagMedia-tag_botL { top: 77%; } .tagMedia-tag_botR { top: 87%; } } @media screen and (min-width: 568px) { .tagMedia-tag_botL { top: 79.5%; } .tagMedia-tag_botR { top: 89%; } } .pricingTable-ft { border-top: 1px solid #cccccc; } .pricingTableSlider { width: 100%; position: relative; overflow: hidden; } .pricingTableSlider-inner { padding: 0 20px 0 20px; width: 277%; position: relative; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } .pricingTableSlider-inner.col0 { left: 0; } .pricingTableSlider-inner.col1 { left: -88%; } .pricingTableSlider-inner.col2 { left: -176.5%; } .slideshow-next, .slideshow-prev { display: none; } .slideshow-label { display: none; } .slideshow-pager_labeled { display: inline-block; } .scrollMenu-block { margin: 0 16px; width:50px; } .scrollMenu-block-icon { width: 24px; margin: 0 auto 5px; } .scrollMenu-block-label { font-size: 10px; } *:hover > .scrollMenu-block-icon:before { border-color: #ca2127; background-color: transparent; } *:hover > .scrollMenu-block-icon_apps:before { background-position: 0 0; } *:hover > .scrollMenu-block-icon_apis:before { background-position: 0 50%; } *:hover > .scrollMenu-block-icon_anl:before { background-position: 0 100%; } .scrollMenu-block.isActive .scrollMenu-block-icon:before { border-color: #ca2127; background-color: #ca2127; } .scrollMenu-block.isActive .scrollMenu-block-icon_apps:before { background-position: 100% 0; } .scrollMenu-block.isActive .scrollMenu-block-icon_apis:before { background-position: 100% 50%; } .scrollMenu-block.isActive .scrollMenu-block-icon_anl:before { background-position: 100% 100%; } .scrollMenu-block.isActive .scrollMenu-block-icon { cursor: auto; } .accordion-bd { max-height: 0px; overflow: hidden; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .accordion-bd_isExpanded { max-height: 700px; } .tooltip { display: none; } .btn { padding: 7px 9px; font-size: 10px; } .mix-btn_fill { padding: 10px; font-size: 14px; font-weight: 700; } .mix-btn_fillBig { font-size: 16px; padding: 13px 0; } .mix-btn_large { padding: 16px 20px; font-size: 16px; font-weight: 600; } .getApps-label { width: 100%; height: auto; margin-bottom: 13px; line-height: 1; } .getApps-action { width: 100%; } .getApps-action-btn + .getApps-action-btn { margin-left: 0; } .getApps-action-btn_android { float: right; } .startFreeWrapper .hdg_2 /* Footer */ { font-size:20px; } .startFree { width: 100%; max-width: 100%; padding: 10px; text-align: center; } .startFree-form { max-width: 100%; margin-bottom: 0px; clear: both; height: 65px; } .startFree-form-field { width: 60%; padding-left: 10px; font-size: 16px; text-align: left; display: inline-block; float: left; } .startFree-form-btn { float: right; width: 21.15385%; margin: 0; padding: 0; font-size: 16px; text-align: center; cursor: pointer; } .startFree-action { width: 184px; max-width: 184px; margin: 0 auto; float: none !important; font-size: 0; /* remove ghost space for inline-block elements */ } .startFree-action-split { width: 30px; max-width: 16.30435%; } .startFree-action-btn { width: 152px; max-width: 82.6087%; padding: 13px 0 0 26px; border: 1px solid #333333; background: transparent url(../media/images/icon-githubMobile.png) no-repeat scroll 7px 7px; background-size: 19px 19px; color: #333333; font-size: 12px; font-weight: 600; line-height: 1; } .startFree-action-btn:hover { background-color: #e0e1e1; } .hdg_1 { font-size: 28px; line-height: 1.2; } .hdg_2 { font-size: 24px; line-height: 1.3125; } .hdg_4 { font-size: 18px; line-height: 1.5625; } .hdg_5 { font-size: 16px; line-height: 1.76471; } .hdg_sm10 { font-size: 10px; } .hdg_sm4 { font-size: 14px; line-height: 1.5625; } .mix-hdg_smDark { color: #333333; } body:after { content: 'sm'; display: none; } } @media (max-width: 900px) { .masthead { background-color: #ffffff; } .masthead-cont { padding: 12px 20px 0 20px; } .masthead-cont-banner { display: none; } .masthead-cont-identity { float: left; /*width: 20%;*/ width: 15%; margin-bottom: 12px; } .masthead-cont-menu { clear: both; float: none; /* reset the float */ display: block; width: auto; padding: 0 20px; margin: 0 -20px; } .masthead-cont-action { float: left; max-width: 60.71429%; /*padding-top: 20px;*/ padding-top: 2px; margin-left: 10.71429%; } /*margin-left: 15.71429%; }*/ .masthead-cont-mobile { float: right; display: block; /*padding-top: 24px; }*/ padding-top: 5px; } .masthead_home { background: transparent; } .masthead_home .masthead-cont-action { display: none; } .mainNav { display: none; position: absolute; width: 100%; background: #f6f6f6; left: 0; top: 62px; /*top: 97px;*/ padding-bottom: 13px; border-bottom: 1px solid #dddddd; } .mainNav.isActive { display: block; } .mainNav ol, .mainNav ul, .mainNav .menu { display: none; display: block; padding: 5px 0; } .mainNav ol > li, .mainNav ul > li, .mainNav .menu > li { display: block; font-size: 16px; } .mainNav ol > li + li, .mainNav ul > li + li, .mainNav .menu > li + li { margin-left: 0; } .mainNav ol > li > a, .mainNav ul > li > a, .mainNav .menu > li > a { display: block; padding: 6px 0 6px 21px; /* reduced to fit mobile landscape; was - 10px 0 12px 21px */ border: none; } .mainNav ol > li > a.subNavArrow:after, .mainNav ul > li > a.subNavArrow:after, .mainNav .menu > li > a.subNavArrow:after { content: url(../media/images/nav-down-arrow-closed.png); position: relative; left: 5px; top: -4px; } .mainNav ol > li > a.isActive:after, .mainNav ul > li > a.isActive:after, .mainNav .menu > li > a.isActive:after { content: url(../media/images/nav-down-arrow-open.png); } .mainNav ol > li:hover > a.isActive:after, .mainNav ul > li:hover > a.isActive:after, .mainNav .menu > li:hover > a.isActive:after { content: url(../media/images/nav-down-arrow-hover.png); } .mainNav ol > li > a:hover, .mainNav ul > li > a:hover, .mainNav .menu > li > a:hover { background: #333333; color: #ffffff; } .mainNav ol ol, .mainNav ul ul, .mainNav .sub-menu { padding: 0; position: relative; display: block; background: transparent; font-size: 12px; } .mainNav ol ol > li > a, .mainNav ul ul > li > a, .mainNav .sub-menu > li > a { padding: 2px 0 2px 31px; font-size: 12px; text-transform: capitalize; } .mainNav ol ol > li > a:hover, .mainNav ul ul > li > a:hover, .mainNav .sub-menu > li > a:hover { background: #333333; color: #ffffff; } .mainNav-subMenu { display: none; /* collapse the sub menu by default */ } .navList { display: none; } .quickLinks { width: 100%; padding: 13px 21px 0 21px; border-top: 1px solid #dddddd; } .quicklinks ol > li, .quickLinks ul > li, .quickLinks .menu > li { display: inline-block; margin: 0; padding: 0; font-size: 14px; /* reset font-size */ } .quickLinks ol > li + li, .quickLinks ul > li + li, .quickLinks .menu > li + li { margin-left: 30px; } .quickLinks ol > li > a, .quickLinks ul > li > a, .quickLinks .menu > li > a { padding: 0; font-size: 16px; text-transform: capitalize; } .quickLinks ol > li > a:after, .quickLinks ul > li > a:after, .quickLinks .menu > li > a:after { content: ""; display: none; } .quickLinks ol > li > a:hover, .quickLinks ul > li > a:hover, .quickLinks .menu > li > a:hover { background: transparent; color: #8c191b; } .quickLinks_sm { display: block; } } @media (min-width: 901px) { /* --------------------------------------------------------------------- MEDIUM BREAKPOINT ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Masthead ------------------------------------------------------------------------ */ /** ALT LAYOUT FOR HOMEPAGE ========== */ /* --------------------------------------------------------------------- Main Navigation - The Navigation will be following the standard WP nav setup so it will need to be styled to fit that markup orientation. example:
------------------------------------------------------------------------ */ /** Link styling for WP navigation */ /** STATES ========== */ /** SUB NAV ========== */ /** SUB NAV: STATES ========== */ /** ALT HEADER LAYOUT - this layout only happens at md and lg breakpoints on the home page ========== */ /* --------------------------------------------------------------------- Nav List ------------------------------------------------------------------------ */ /* at the md breakpoint the navList is not visible */ /* --------------------------------------------------------------------- Social ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Start for Free Footer To style objects in the footer start for free section ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Media Block ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Footer for the features section on the pricing page ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Wrapper used to vertically center the body section of the startFree media object above the footer. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Counter ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Pricing Table Container ------------------------------------------------------------------------ */ /** MIXINS ========== */ /* keeps the element from collapsing if there is no content in it*/ /* --------------------------------------------------------------------- Tagged Media ------------------------------------------------------------------------ */ /** INDICATORS ========== */ /** TRANSITIONS - state classes are added and removed with JS ========== */ /* --------------------------------------------------------------------- Back to top - hidden for tablet view and larger ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Section Content ------------------------------------------------------------------------ */ /** EXTENSIONS =========== */ /* --------------------------------------------------------------------- Brand Banner ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Slideshow ------------------------------------------------------------------------ */ /** ALTERNATE PAGER ========== */ /* --------------------------------------------------------------------- Scroll Menu ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Quick Link - the quicklinks will be inheriting the HTML structure of WP menus ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Hide - Vissually hide an element at the Medium breakpoint. ------------------------------------------------------------------------ */ /* hide only at the medium breakpoint */ /* --------------------------------------------------------------------- Breakpoint detection hack ------------------------------------------------------------------------ */ .masthead.masthead.isAltLayout { background: transparent; border-bottom: none; padding: 30px 0 15px; } /*.masthead.isAltLayout .axway-logo { background-image: url(../media/images/axway-logo-vert-white-text.png); }*/ .masthead.isAltLayout .masthead-cont-banner { display: none; } .masthead.isAltLayout .masthead-cont-action { display: none; } .masthead.isAltLayout .masthead-cont-mobile { float: right; display: block; /* visually show this content */ width: 30px; height: 25px; padding-top: 9px; cursor: pointer; } .masthead.isAltLayout .masthead-cont-menu { opacity: 0; /* used to allow a fade transition */ } .masthead.isAltLayout .mobileMenu:before, .masthead.isAltLayout .mobileMenu:after { border-color: #ffffff; } .mainNav ol > li > a, .mainNav ul > li > a, .mainNav .menu > li > a { display: block; padding: 0 0 7px 0; border-bottom: 3px solid transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #363636; font-size: 14px; line-height: 1; text-transform: uppercase; } .mainNav ol > li:hover > a, .mainNav ul > li:hover > a, .mainNav .menu > li:hover > a { border-color: #ca2127; } .mainNav ol > li > :not(a), .mainNav ul > li > :not(a), .mainNav .menu > li > :not(a) { display: none; /* initially the sub nav will be hidden */ position: absolute; top: 100%; left: 0; } .mainNav ol ol, .mainNav ul ul, .mainNav .sub-menu { padding: 16px 0; background: #ffffff; } .mainNav ol ol > li, .mainNav ul ul > li, .mainNav .sub-menu > li { display: block; margin: 0; color: #333333; } .mainNav ol ol > li > a, .mainNav ul ul > li > a, .mainNav .sub-menu > li > a { display: block; min-width: 170px; margin: 0; padding: 8px 16px 9px 16px; border-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333333; line-height: 1.3; } .mainNav ol > li:hover > *:not(a), .mainNav ul > li:hover > *:not(a), .mainNav .menu > li:hover > *:not(a) { display: block; /* display sub nav on hover of parent */ } .mainNav ol ol > li > a:hover, .mainNav ul ul > li > a:hover, .mainNav .sub-menu > li > a:hover { background-color: #f6f6f6; } .mainNav.isAltLayout { display: none; width: 100%; background: rgba(255, 255, 255, 0.8) none no-repeat scroll 0 0; padding: 0 10px; } .mainNav.isAltLayout .mainNav ol, .mainNav.isAltLayout .mainNav ul, .mainNav.isAltLayout .mainNav .menu { padding: 10px 20px 0; } .mainNav.isAltLayout .mainNav ol ol, .mainNav.isAltLayout .mainNav ul ul, .mainNav.isAltLayout .mainNav .sub-menu { padding: 16px 0; } .navList { display: none; } .social { max-width: 300px; margin-bottom: 40px; } .social-label { margin-bottom: 16px; } .social-blocks-icon { width: 30px; height: 30px; padding: 0; } .social-blocks-icon + .social-blocks-icon { margin-left: 8px; } .startFreeFooter .media-img { width: 43%; } .mix-media-img_mdStack { float: none; display: block; } .featureFooter { font-size: 0; } .featureFooter-desc, .featureFooter-btn { display: inline-block; vertical-align: bottom; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .featureFooter-desc { width: 66.66666%; padding-right: 10px; } .featureFooter-btn { width: 33.33333%; padding-left: 10px; } .startFreeWrapper { height: 250px; display: table-cell; vertical-align: middle; } .counter-nums { margin-bottom: 11px; font-size: 20px; } .counter-desc { font-size: 11px; line-height: 1.45455; } .pricingTable-ft { border-top: 1px solid #cccccc; } .mix-pricingGrid-col_fillBlank { min-height: 10px; } .tagMedia { position: relative; /* needed for transition repositioning */ top: 0; /* final state for transition */ opacity: 1; /* final state for transition */ } .tagMedia-media { max-width: 60.13333%; } .tagMedia-tag { font-size: 11px; line-height: 1.72727; opacity: 1; /* final state for transition */ } .tagMedia-tag_botL { width: 14.57447%; padding-right: 19px; margin-left: -37.02128%; top: 312px; text-align: right; } .tagMedia-tag_botR { width: 15%; padding-left: 19px; margin-left: 24.3617%; top: 312px; text-align: left; } .tagMedia-tag_topR { width: 25%; padding-left: 19px; margin-left: 12.87234%; top: 126px; text-align: left; } .tagMedia-tag:before { top: 8px; left: 0; width: 9px; height: 9px; border-radius: 100%; } .tagMedia-tag:after { top: 12px; right: 100%; width: 55px; height: 0; border-width: 1px 0 0; } .tagMedia-tag_botL:before { left: auto; right: 0; } .tagMedia-tag_botL:after { left: 100%; } .tagMedia-tag_topR { margin-left: 15.87234%; top: 79px; } .tagMedia-tag_botR { margin-left: 34.3617%; top: 272px; } .tagMedia-tag_botL { margin-left: -45.02128%; top: 262px; } @media screen and (min-width: 660px) { .tagMedia-tag_topR { top: 95px; } } @media screen and (min-width: 768px) { .tagMedia-tag_topR { margin-left: 16.87234%; top: 126px; } .tagMedia-tag_botL { margin-left: -45.02128%; top: 312px; } .tagMedia-tag_botR { margin-left: 30.3617%; top: 312px; } } .tagMedia.transitioning { -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; } .tagMedia-media.transitioning { -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; -o-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; } .tagMedia-tag.transitioning { -webkit-transition: opacity 1.5s ease-in-out 0.5s; -moz-transition: opacity 1.5s ease-in-out 0.5s; -o-transition: opacity 1.5s ease-in-out 0.5s; transition: opacity 1.5s ease-in-out 0.5s; } .tagMedia-media.isFading, .tagMedia-tag.isFading { opacity: 0; } .toTop { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .sectCont-hd-sub { max-width: 82%; } .sectCont-hd-sub_left { max-width: 100%; } .brandBanner-block { padding: 0 17.35714px; } .slideshow { padding: 0 30px; } .product-slideshow-labels { margin: 0 auto; text-align: center; } .slideshow-label { display: inline-block; padding-top: 34px; color: #959595; font-size: 11px; font-weight: 600; text-transform: uppercase; } .slideshow-pager_labeled { display: inline-block; width: auto; padding-top: 34px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .slideshow-pager_labeled .slideshow-pager-item { margin: 0; padding: 0 14px 0 0; background: transparent url(../media/images/pager-arrow.png) no-repeat scroll right center; } .slideshow-pager_labeled .slideshow-pager-item:last-child { background-image: none; } .slideshow-pager_labeled .slideshow-pager-item-link { width: auto; margin: 0 11px; background: transparent; /** Overriding Legacy Styles */ color: #ca2127; font-weight: 600; line-height: 1; text-indent: 0; } .slideshow-pager_labeled .isActive .slideshow-pager-item-link { background: transparent; color: #424142; text-decoration: none; } .scrollMenu-block { margin: 0 30px; } .scrollMenu-block-icon, .scrollMenu-block-label { display: table-cell; vertical-align: middle; } .scrollMenu-block-icon { width: 37px; } .scrollMenu-block-label { padding-left: 10px; font-size: 10px; text-align: left; } .quicklinks ol > li, .quickLinks ul > li, .quickLinks .menu > li { display: inline-block; margin: 0; padding: 0; font-size: 14px; /* reset font-size */ } .quicklinks ol > li + li, .quickLinks ul > li + li, .quickLinks .menu > li + li { margin-left: 20px; } .hide_md { display: none; } body:after { content: 'md'; display: none; } } @media (min-width: 860px) { /* --------------------------------------------------------------------- LARGE BREAKPOINT ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Footer ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Masthead ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Nav List ------------------------------------------------------------------------ */ /* at the md breakpoint the navList is not visible */ /* --------------------------------------------------------------------- Navigation Dropdown ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Social ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Pricing Grid ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Section Content ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Start for Free Footer To style objects in the footer start for free section ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Media Block ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Footer for the features section on the pricing page ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Wrapper used to vertically center the body section of the startFree media object above the footer. ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Hide - Vissually hide an element at the Large breakpoint. ------------------------------------------------------------------------ */ /* hide only at the large breakpoint */ /* --------------------------------------------------------------------- Counter ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Pricing Table Container ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Brand Banner ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Cells ------------------------------------------------------------------------ */ /* Hide these components */ /** Wrapper class */ /** EXTENSIONS =========== */ /* --------------------------------------------------------------------- Boxes ------------------------------------------------------------------------ */ /** EXTENSIONS =========== */ /* --------------------------------------------------------------------- Tagged Media ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Slideshow ------------------------------------------------------------------------ */ /** ALTERNATE PAGER ========== */ /** SCREEN SIZE ADJUSTMENT ========== */ /* --------------------------------------------------------------------- Scroll Menu ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------- Breakpoint detection hack ------------------------------------------------------------------------ */ .footer { text-align: left; } .footer > * { float: left; } .footer > * + * { margin-left: 2.12766%; } .footer-menu { width: 65.95745%; margin-bottom: 0; } .footer-legal { width: 31.91489%; } .navList { display: block; } .navDrop { display: none; } .social { max-width: 100%; margin-bottom: 120px; } .social-label { margin-bottom: 16px; } .social-blocks-icon { width: 30px; height: 30px; padding: 0; } .social-blocks-icon + .social-blocks-icon { margin-left: 8px; } .pricingGrid { display: block; width: 100%; padding: 0; position: relative; *zoom: 1; } .pricingGrid:before, .pricingGrid:after { display: table; content: ""; } .pricingGrid:after { clear: both; } .pricingGrid-col { display: block; float: left; padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .pricingGrid-col:last-child { float: right; /* hack to deal with rounding errors accumulating on the right side */ } .pricingGrid-col_label { display: block; width: 33.33333%; } .pricingGrid-col_label-wide { width: 55.55556%; } .pricingGrid-col_section { width: 22.22222%; text-align: center; } .pricingGrid-col_section-push { margin-left: 33.33333%; } .pricingGrid-col_label-wide + .pricingGrid-col_section { display: none; } .pricingGrid-col-bottomLabel { width: 33.33333%; /* being positioned relative to the .pricingGrid instead of .pricingGrid-col */ position: absolute; bottom: 0; left: 0; } .sectCont-hd-sub { max-width: 100%; } .startFreeFooter .media-img { width: auto; } .startFreeFooter .startFree-form-btn { padding: 0 8px; } @media screen and (min-width: 940px) { .startFreeFooter .startFree-form-btn { width: 54px; padding: 0 16px; } } .media-img { float: left; } .featureFooter { width: 100%; text-align: center; } .featureFooter-desc { margin-right: 50px; text-align: left; width: 41.66667%; } .featureFooter-btn { width: 25%; } .startFreeWrapper { height: 300px; } .hide_lg { display: none; } .counter-nums { margin-bottom: 14px; font-size: 38px; } .counter-desc { font-size: 14px; line-height: 1.42857; margin-bottom: 14px; } .pricingTable { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .pricingTable-hd { border-bottom: 3px solid #b61a1c; } .pricingTable-bd { border-left: 1px solid #cccccc; } .pricingTable-ft { border-bottom: 3px solid #b61a1c; border-left: 1px solid #cccccc; border-top: none; } .brandBanner-block { padding: 0 20px; } .cell { padding: 4px 0 4px 0; width: 100%; border-bottom: 1px solid #cccccc; } .cell-columnLabel, .cell-cellLabel { display: none; } .cell-cellLabel br, .cell_hdg br { display: block; } .cells { -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 0px; } .cells > * { min-height: 0; } .cell_hdg { padding: 20px 0 6px 0; } .mix-cell_dark { background-color: #f3f4f4; } .mix-cell_zebra:nth-child(odd) { background-color: #ebebeb; } .mix-cell_zebra:nth-child(even) { background-color: #ffffff; } .mix-cell_zebraDark:nth-child(odd) { background-color: #e0e1e1; } .box_greyish { background-color: #f3f4f4; } .tagMedia-tag { font-size: 14px; line-height: 1.71429; } .tagMedia-tag_botL { width: 18.40426%; padding-right: 27px; margin-left: -456px; top: 386px; } .tagMedia-tag_botR { width: 19.89362%; padding-left: 27px; margin-left: 283px; top: 386px; } .tagMedia-tag_topR { width: 31.38298%; padding-left: 27px; margin-left: 149px; top: 156px; } .slideshow { padding: 0 50px; } .slideshow-prev { left: -3.89583%; } .slideshow-next { right: -3.89583%; } .slideshow-label { padding-top: 46px; font-size: 14px; } .slideshow-pager_labeled { padding-top: 46px; font-size: 14px; } @media (max-width: 1110px) { .slideshow { padding: 0 24px; } .slideshow-prev { left: -2.94792%; } .slideshow-next { right: -2.94792%; } } @media (max-width: 1024px) { .slideshow-prev { left: -0.5%; } .slideshow-next { right: -0.5%; } } .scrollMenu-block { margin: 0 40px; } .scrollMenu-block-icon { width: 30px; } .scrollMenu-block-label { padding-left: 10px; font-size: 12px; } body:after { content: 'lg'; display: none; } } /* updates for pricing page */ #pricingTable { display: none; } .pricingTable-small .grid-col { margin-left: .85%; } .pricingTable-small .grid-col_4of12 { width: 32.41489%; } .upper-pricing-box { border-bottom: 3px solid #b61a1c; } .upper-pricing-box .box { position: relative; } .upper-pricing-box .box-hd, .upper-pricing-box .box-bd { text-align: center; padding-left: 35px; padding-right: 35px; line-height: 1.5; } .upper-pricing-box.enterprise-box .box-hd, .upper-pricing-box.enterprise-box .box-bd { padding-left: 55px; padding-right: 55px; } .upper-pricing-box.enterprise-box { background: #eee; } .upper-pricing-box.team-box { border-left: 1px solid #b61a1c; border-right: 1px solid #b61a1c; } .upper-pricing-box .box-hd h4 { font-weight: 600; } .box-hd-top { display: block; height: 35px; } .box-hd-top.best-value { background: #8c191b; text-align: center; } .box-hd-top.best-value h5 { font-weight: 700; padding-top: 10px; } .pricingTable-small .cell { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .pricingTable-small .cell.black-cell { background: #333333; text-align: center; border-left: 1px solid #333; border-right: 1px solid #333; } .pricingTable-small .cell .cell-rowLabel { padding: 7px 0; font-size: .95rem; } .pricingTable-small .cell.black-cell .cell-rowLabel { color: #fff; padding: 5px 0; } .pricingTable-small .cell .cell-rowLabel .cell-rowLabel-text .cell-icon_supported { padding: 0 10px; } .pricingTable-small-footer { text-align: center; margin-top: 35px; } .pricingTable-small-footer .or { margin: 0 15px; } .pricingTable-small .sectCont-hd .hdg { line-height: 1.5; } .ribbon.top-ribbon { margin-top: 55px; } .leadership .panel-toggle p { color: #fff; } .leadership .grid-532 { max-width: 600px; } @media only screen and (max-width: 767px) { .leadership .grid-532 .col-532 { width: 148px; } } @media only screen and (max-width: 500px) { .leadership .grid-532 .col-532 { width: 100px; } .leadership .grid-532 .col-532 img { width: 100%; } } .page-id-38199 .startFreeFooter { display: none; } .start-email .secCont-bd { margin-top: 35px; } .waitlist-form form { margin: auto; width: 400px !important; background-color: #ccc; border-radius: 5px; padding: 15px 20px 5px; } .waitlist-form form label { display: none; } .waitlist-form .mktoButton { display: inline-block !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; -o-box-sizing: border-box !important; box-sizing: border-box !important; background: #b61a1c !important; color: #fff !important; /* fallback for non rgba browsers */ color: rgba(255, 255, 255, 1) !important; font-weight: 600 !important; font-size: 16px !important; text-align: center !important; text-decoration: none !important; text-transform: capitalize !important; cursor: pointer !important; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; -ms-border-radius: 3px !important; -o-border-radius: 3px !important; border-radius: 3px !important; } .waitlist-form .mktoButton:hover { background: #8c191b !important; color: #fff !important; /* fallback for non rgba browsers */ color: rgba(255, 255, 255, 1) !important; text-decoration: none !important; } .waitlist-form form input { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 0 0 !important; padding: 8px 15px !important; border: 1px solid #ADADAD !important; background: #ffffff none repeat scroll 0 0 !important; border-radius: 5px !important; color: #898989 !important; font-size: 18px !important; font-weight: 400 !important; } .waitlist-form form .mktoFieldWrap { float: none !important; text-align: center; } .waitlist-form form .mktoFormRow { display: inline-block; width: 270px; } .waitlist-form form .mktoOffset, .waitlist-form form .mktoGutter { display: none; } .waitlist-form form .mktoFormCol { float: none; } .waitlist-form form .mktoButtonRow { display: inline-block; float: right; } .waitlist-form span.mktoButtonWrap.mktoSimple { margin: 0 !important; display: block !important; text-align: center !important; } .quickLinks ul li { font-family: inherit; } /* Home Page */ .appc-counter { color: #ca2127; } .home .ribbonStack-fg.ribbonStack-fg_thickest { padding-top: 285px; } #AppceleratorVideo { margin-top: 25px; } #content.signup { min-height: 445px; } @media (max-width: 900px) { .masthead.expanded .mainNav { display: block; } .masthead.expanded .masthead-cont-menu { opacity: 1; } .legacySpacer { padding-top: 67px; } } .vjs-error .vjs-error-display { display: none !important; } .vjs-no-js { padding: 0; background-color: transparent; width: 100%; height: auto; margin: 0 auto; } #AppceleratorVideo .vjs-no-js img { width: 460px; height: 290px; } #APIsVideo.vjs-error { height: 484px !important; } /* Media Queries */ @media (max-width:1023px) { .pricingTable-small .cell .cell-rowLabel .cell-rowLabel-text .cell-icon_supported { padding: 0 3px; } .cell-rowLabel-text { white-space: normal; } } @media (max-width: 767px) { .pricingTable-small .grid-col_4of12 { width: 95%; float: none; position: relative; margin-bottom: 25px; margin-left: 0; } .pricingTable-small-footer { display: none; } .waitlist-form form { width: 90% !important; padding: 15px 20px 15px; } .waitlist-form form input { min-width: 100%; } .waitlist-form form .mktoFormRow, .waitlist-form form .mktoButtonRow { display: block; width: 100%; } .waitlist-form form .mktoButtonRow { float: none !important; } .signup .grid-col_4of12 { text-align: center; } .home .ribbonStack-fg.ribbonStack-fg_thickest { padding-bottom: 135px; padding-top: 75px; } #AppsVideo, #APIsVideo, #AnalyticsVideo, #AppceleratorVideo { display: none; } } @media screen and (max-width: 500px) { .home .ribbonStack-bg img { min-height: 460px; } .home .ribbonStack-fg.ribbonStack-fg_thickest { padding-bottom: 85px; } } /* -------------------------------------------------------------- App Showcase @media queries -------------------------------------------------------------- .app-showcase-page .carousel-full-width.carousel-tall, .app-showcase-page .carousel-full-width.carousel-tall .carousel-panel, .app-showcase-page .carousel-full-width.carousel-tall .carousel-panel .inner { position: relative; height:auto; } .app-showcase-page .carousel-panels-container, .app-showcase-page .carousel-full-width .carousel-panels, .app-sh.carousel-full-width .carousel-panel { overflow: auto; } .app-showcase-page .carousel-full-width.carousel-tall .carousel-panel .inner { padding-top:20px; padding-bottom: 20px; } @media only screen and (max-width: 960px) { .app-showcase-page .carousel-full-width .inner h1 { font-size:36px; } .app-showcase-page .carousel-full-width .inner h2 { font-size:28px; } } @media only screen and (max-width: 600px) { .app-showcase-page .carousel-full-width .inner h1 { font-size:30px; } .app-showcase-page .carousel-full-width .inner h2 { font-size:20px; } } @media only screen and (max-width: 479px) { .app-showcase-page .carousel-full-width .inner h1 { font-size:28px; } .app-showcase-page .carousel-full-width .inner h2 { font-size:16px; } } */ .spinner { margin: 0 20px 0 0; width: 20px; height: 20px; position: relative; display: inline-block; display: none; } .container1 > div, .container2 > div, .container3 > div { width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } form div.spinner, form div.spinner div { padding: 0; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(.6) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(.6); } } @media (max-width: 800px) { .ribbon.top-ribbon.mix-ribbon_noPadding { margin-top: 0px; } } .startFree.not-signup .startFree-form-field { width: 67%; max-width: 100%; } .startFreeFooter .startFree.not-signup .startFree-form-field { width: 56%; } .startFree-buttons { display: inline-block; width: auto; /*margin-top: 15px;*/ position: relative; text-align: center; margin-left: 15px; vertical-align: top; } .startFreeFooter .startFree-buttons { /*width: 100%;*/ } .startFree.not-signup .startFree-action-split { width: 34px; } .startFree.not-signup { max-width: 520px; width: 100%; margin-bottom: 10px; } .startFree.not-signup .startFree-form { width: 100%; max-width: 100%; } .startFree.not-signup .startFree-form-btn { float: none; max-width: 100%; display: inline-block; margin: 0; } .startFree.not-signup .startFree-action-btn { } .startFree.not-signup .startFree-error { margin-top: 10px; } @media (max-width: 860px) and (min-width: 650px) { .startFreeFooter .startFree.not-signup .startFree-form-field { width: 100%; margin-bottom: 15px; } .startFreeFooter .startFree-buttons { width: 100%; margin-left: 0; } .startFreeFooter .startFree.not-signup .startFree-form-btn { width: 40%; min-width: 60px; } .startFreeFooter .startFree.not-signup .startFree-action-btn { width: 40%; min-width: 60px; } .startFree.not-signup .startFree-form-field { /*width: 100%;*/ /*max-width: 100%;*/ } } @media (max-width: 650px) { .ribbon.top-ribbon.mix-ribbon_noPadding { margin-top: 0px; } .plan-special-header { width: 90%; margin: auto; } .plan-special-header-left { width: 100%; display: block; vertical-align: top; } .plan-special-header-right { width: 100%; display: block; vertical-align: top; } .mix-ribbon_noPadding .sectCont { padding-bottom: 35px; } .not-signup.startFree .startFree-form { height: 40px; } .startFree.not-signup .startFree-form-field, .startFreeFooter .startFree.not-signup .startFree-form-field { width: 66%; } .signup-startFree .startFree-form-btn, .signup-startFree .startFree-action-btn { padding-top: 15px; font-size: .9rem; padding-bottom: 10px; } .signup-startFree .startFree-action { width: 100%; max-width: 100%; } .signup-startFree .startFree-action-split { width: 100%; max-width: 100%; font-size: 1rem; } .signup-startFree .startFree-action-btn { width: 100%; max-width: 100%; border: none; background: #CA2127; color: #fff; } .signup-startFree .startFree-form-btn { width: 33%; padding-bottom: 17px; margin-top: 0; margin-left: -10px; max-height: 52px; } .signup-startFree .startFree-form-btn img { display: none; } } @media (max-width: 530px) { .not-signup.startFree .startFree-form { height: auto; } .startFree.not-signup .startFree-form-field, .startFreeFooter .startFree.not-signup .startFree-form-field { width: 100%; margin-bottom: 15px; } } @media (max-width:340px) { .signup-startFree .startFree-action-btn img { display: block; margin: auto; margin-bottom: 10px; } .signup-startFree .startFree-action-btn { padding: 10px 5px 15px; line-height: .6; } .signup-startFree .startFree-action-btn img { margin-top: 0px; } } /* extra Pricing styles 3/2016 */ #new-tabs .btn-default { color: #888 !important; text-transform: none !important; } #new-tabs .btn-default.active { color: #333 !important; } .range-control input { border: none !important; } .page-template-template-pricing-page-redesign .pricingGrid-col img.two-line-label { padding: 22px; } .page-template-template-pricing-page-redesign .pricingGrid-col img { padding: 8px; } .page-template-template-pricing-page-redesign .pricingGrid-col img.tooltip-icon { padding: 0 0 2px 5px; } .page-template-template-pricing-page-redesign .pricingGrid-col img.cell-icon_unsupported.two-line-label { padding: 21px; } .page-template-template-pricing-page-redesign .pricingGrid-col img.cell-icon_unsupported { padding: 7px; } .page-template-template-pricing-page-redesign .pricingGrid-col .feature-text { margin-bottom: 0; } .page-template-template-pricing-page-redesign .pricingGrid-col .feature-text.two-line-label { padding: 14px; } .page-template-template-pricing-page-redesign .hdg_padding { padding: 15px; } .page-template-template-pricing-page-redesign .pricingGrid h3 { padding: 15px 0; } .page-template-template-pricing-page-redesign .pg-tooltip { display: inline-block; position: relative; } .page-template-template-pricing-page-redesign .pg-tooltip:hover .tooltip-text { display: block; opacity: 0.9; } .page-template-template-pricing-page-redesign .pricingGrid-col:last-of-type { border-right: 1px solid #ccc; } .page-template-template-pricing-page-redesign .pricingTable { width: 80%; margin: 0 auto 10px; } body.page-template-template-pricing-page-redesign { padding-top: 120px; } .page-template-template-pricing-page-redesign .mobileMenu:after { margin: 5px 0; border-bottom: 5px solid #cccccc; height: 15px; } @media (max-width: 649px) { .page-template-template-pricing-page-redesign .pricingGrid-col { display: block; width: 100%; border-left: none !important; border-right: none !important; } .page-template-template-pricing-page-redesign .pricingGrid-col .box { border-top: none !important; border-left: none !important; border-right: none !important; } .page-template-template-pricing-page-redesign .pricingGrid-col h4.hdg_5 { font-size: 36px; } .page-template-template-pricing-page-redesign .pricingTable-hd { border-right: none !important; } } @media (min-width: 649px) { .show-on-mobile { display: none !important; } } @media (max-width:649px) { .hide-on-mobile { display: none !important; } #new-tabs .btn { word-wrap: normal; white-space: initial; vertical-align: top; min-height: 100px; } } .logo-set { max-width: 880px; } .link-partner-overlay { z-index: 15; position: relative; } .partner-overlay { display: block; position: absolute; left: 0%; max-width: 100%; border-radius: 7px; transition: .5s opacity; opacity: 0; } .partner-overlay.expanded { display: block; opacity: 1; } .partner-overlay #inner { font-size:14px; padding:1em 1.8em 1.5em; text-align:left; border-radius:3px; background-color:#000; color:#fff; } .partner-overlay h4{padding-bottom:0.333em;} .close-overlay {cursor: pointer;font-size: 25px;} .partner-overlay p { width: 97%; } .startFreeWrapper input.startFree-form-field::-webkit-input-placeholder { font-size: 13pt; } /* --------------------------------------------------------------------- HYPERLOOP HOME PAGE LAYER ------------------------------------------------------------------------ */ h3.feature { color: #FFFFFF; /*font-family: "Open Sans";*/ font-size: 56px; font-weight: 300; line-height: 76px; /*padding: 5px 0;*/ padding: 0; } @media (max-width: 650px) { h3.feature { text-align: center; } } @media (max-width: 650px) { .hyperloop [class*="grid-col_sm"] + [class*="grid-col_sm"] { margin-left: 0; } } .open-to-all { color: #FFFFFF; font-size: 44px; font-weight: bold; /*line-height: 60px;*/ margin: 0; padding: 0; text-align: center; } .cross-platform { color: #FFFFFF; font-size: 18px; font-weight: 600; line-height: 24px; margin-bottom: 19px; text-align: center; } .buttons { text-align: center; } .buttons div.text { border-radius: 3px; display: inline-block; margin-left: 15px; } .buttons div.text a { padding: 15px 19px; } /* Power of Pro */ .pop-header { background: #D8D8D8 url('//s3.amazonaws.com/www.appcelerator.com.images/header-image.png') left top no-repeat; background-size: cover; padding: 77px 0 36px; } .power-of-pro .btn { background: #484850; color: rgba(255, 255, 255, 1.0); font-weight: normal; padding: 17px 21px; } .power-of-pro .btn_standout { background: #ca2127; } .power-of-pro .dotList > * { padding-bottom: 8px; } .power-of-pro .dotList > *:after { left: -22px; } .power-of-pro .dotList > *:before { left: -17px; } .power-of-pro .dotList span { display: inline-block; margin: -2px 0 0 0; } .power-of-pro .dotList { margin-left: 30px; } .power-of-pro .hdg { color: #484850; } .power-of-pro .hdg.mix-text_standout { color: #ca2127; } .power-of-pro .hdg_3 { font-size: 30px; } .power-of-pro .infoList { margin-bottom: 20px; } /*.power-of-pro .mediaVid { display: flex; justify-content: center; }*/ .power-of-pro .mix-text_small { font-size: 14px; } /*.power-of-pro .ribbon { padding: 94px 0 22px; }*/ .power-of-pro .ribbon { padding: 40px 0 0; } .power-of-pro .ribbon.chatBg { background: #D8D8D8 url('//s3.amazonaws.com/www.appcelerator.com.images/chat-bg.png') left top no-repeat; background-size: cover; } .power-of-pro .ribbon.enhBg { background: #C8081D url('//s3.amazonaws.com/www.appcelerator.com.images/enhanced-analytics-background.png') left top no-repeat; background-size: cover; } .power-of-pro .ribbon.enhBg .btn_standout { background: #FFF; color: #C8081D; } .power-of-pro .ribbon.enhBg .hdg { color: #FFF; } .power-of-pro .ribbon.enhBg li { color: #FFF; } .power-of-pro .ribbon.enhBg p { color: #FFF; } .power-of-pro .ribbon.stdGray .hdg { color: #FFF; } .power-of-pro .ribbon.stdGray li { color: #FFF; } .power-of-pro .ribbon.stdGray p { color: #FFF; } .power-of-pro .ribbon.stdGray { background-color: #484850; } .power-of-pro .vRhythm { line-height: 1.5; } .power-of-pro .vRhythm_run { display: flex; } .power-of-pro li { color: #484850; } .power-of-pro p { color: #484850; font-size: 18px; } span.jwcontrolbar button { margin-top: 0; } @media (max-width: 650px) { .power-of-pro .btn { font-size: 13px; } .power-of-pro .vRhythm_run { flex-direction: column; justify-content: space-around } .power-of-pro .ribbon:nth-child(even) .vRhythm_run { flex-direction: column-reverse; } } @media (min-width: 651px) { .power-of-pro .mediaVid { margin-bottom: 0; } .power-of-pro .vRhythm_run { flex-direction: row; align-items: center; } .power-of-pro .vRhythm_run:nth-child(even) { flex-direction: row; } } /* Top of MBaaS Page */ .flexor img { max-width: none; } @media (max-width: 650px) { .flexor img { height: 145px; margin-bottom: 10px; } } @media (min-width: 651px) { .flexor { display: flex; position: relative; } .flexor img { height: 115px; margin-bottom: 8px; } .flexor .plus-icon { padding: 8px 0; position: absolute; left: 27.5%; } .flexor .plus-icon:nth-child(2) { left: 65%; } .flexor .mix-text_justCenter:nth-child(3) { margin: 0 40px; } } @media (min-width: 768px) { .flexor img { height: 145px; margin-bottom: 10px; } .flexor .plus-icon { padding: 20px 0; } } @media (min-width: 960px) { .flexor img { height: 195px; margin-bottom: 15px; } .flexor .plus-icon { padding: 40px 0; } } .mobile-back { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6c1d45+0,d22630+100 */ background: #6c1d45; /* Old browsers */ background: -moz-linear-gradient(left, #6c1d45 0%, #d22630 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6c1d45 0%,#d22630 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6c1d45 0%,#d22630 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c1d45', endColorstr='#d22630',GradientType=1 ); /* IE6-9 */ } .mobile-back .sectCont-hd-sub, .services { margin-bottom: 40px; } .services_cell { border-bottom: 2px solid rgba(255, 255, 255, 0.4); } .services_cell > * { vertical-align: middle; } .services_cell > span { display: inline-block; line-height: 1.2; width: 50%; } .icon { background-color: transparent; background-repeat: no-repeat; margin-right: 10px; display: inline-block; } /* line 45, ../sass/mbass.scss */ .acls { background-image: url("../media/images/mbaas-icons/acls.png"); } /* line 45, ../sass/mbass.scss */ .chat { background-image: url("../media/images/mbaas-icons/chat.png"); } /* line 45, ../sass/mbass.scss */ .checkin { background-image: url("../media/images/mbaas-icons/checkin.png"); } /* line 45, ../sass/mbass.scss */ .clients { background-image: url("../media/images/mbaas-icons/clients.png"); } /* line 45, ../sass/mbass.scss */ .emails { background-image: url("../media/images/mbaas-icons/emails.png"); } /* line 45, ../sass/mbass.scss */ .events { background-image: url("../media/images/mbaas-icons/events.png"); } /* line 45, ../sass/mbass.scss */ .files { background-image: url("../media/images/mbaas-icons/files.png"); } /* line 45, ../sass/mbass.scss */ .friends { background-image: url("../media/images/mbaas-icons/friends.png"); } /* line 45, ../sass/mbass.scss */ .key_values { background-image: url("../media/images/mbaas-icons/key_values.png"); } /* line 45, ../sass/mbass.scss */ .messages { background-image: url("../media/images/mbaas-icons/messages.png"); } /* line 45, ../sass/mbass.scss */ .nosql { background-image: url("../media/images/mbaas-icons/nosql.png"); } /* line 45, ../sass/mbass.scss */ .photo_coll { background-image: url("../media/images/mbaas-icons/photo_coll.png"); } /* line 45, ../sass/mbass.scss */ .photos { background-image: url("../media/images/mbaas-icons/photos.png"); } /* line 45, ../sass/mbass.scss */ .places { background-image: url("../media/images/mbaas-icons/places.png"); } /* line 45, ../sass/mbass.scss */ .posts { background-image: url("../media/images/mbaas-icons/posts.png"); } /* line 45, ../sass/mbass.scss */ .push { background-image: url("../media/images/mbaas-icons/push.png"); } /* line 45, ../sass/mbass.scss */ .ratings { background-image: url("../media/images/mbaas-icons/ratings.png"); } /* line 45, ../sass/mbass.scss */ .social-mbaas { background-image: url("../media/images/mbaas-icons/social.png"); } /* line 45, ../sass/mbass.scss */ .status { background-image: url("../media/images/mbaas-icons/status.png"); } /* line 45, ../sass/mbass.scss */ .users { background-image: url("../media/images/mbaas-icons/users.png"); } .btn_white { background: #FFF; color: #333333; padding: 16px 33px; } @media (max-width: 650px) { .btn_white { padding: 10px 14px; } .icon { background-size: contain; height: 41px; width: 34px; } .is-mobile { display: block; } .services { margin-top: 16px; } .services_cell { padding-top: 24px; padding-bottom: 18px; } .services_cell > * { vertical-align: top; } .services .row:last-child .services_cell:last-child { border-bottom: none; } } @media (min-width: 651px) { .btn_white { padding: 16px 33px; } .desk-ctr { text-align: center; } .is-mobile { display: none; } /* line 52, ../sass/mbass.scss */ .acls { background-size: 32.5px 32.5px; height: 32.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .chat { background-size: 33px 26.5px; height: 26.5px; width: 33px; } /* line 52, ../sass/mbass.scss */ .checkin { background-size: 33.5px 33.5px; height: 33.5px; width: 33.5px; } /* line 52, ../sass/mbass.scss */ .clients { background-size: 32.5px 32.5px; height: 32.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .emails { background-size: 27px 25px; height: 25px; width: 27px; } /* line 52, ../sass/mbass.scss */ .events { background-size: 27px 32px; height: 32px; width: 27px; } /* line 52, ../sass/mbass.scss */ .files { background-size: 33px 36.5px; height: 36.5px; width: 33px; } /* line 52, ../sass/mbass.scss */ .friends { background-size: 32.5px 25.5px; height: 25.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .key_values { background-size: 32.5px 28.5px; height: 28.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .messages { background-size: 32.5px 26px; height: 26px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .nosql { background-size: 30px 30px; height: 30px; width: 30px; } /* line 52, ../sass/mbass.scss */ .photo_coll { background-size: 32.5px 25px; height: 25px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .photos { background-size: 32.5px 26.5px; height: 26.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .places { background-size: 29.5px 28.5px; height: 28.5px; width: 29.5px; } /* line 52, ../sass/mbass.scss */ .posts { background-size: 23.5px 25.5px; height: 25.5px; width: 23.5px; } /* line 52, ../sass/mbass.scss */ .push { background-size: 25px 33px; height: 33px; width: 25px; } /* line 52, ../sass/mbass.scss */ .ratings { background-size: 32.5px 40.5px; height: 40.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .social-mbaas { background-size: 32.5px 32.5px; height: 32.5px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .status { background-size: 32.5px 30px; height: 30px; width: 32.5px; } /* line 52, ../sass/mbass.scss */ .users { background-size: 31.5px 21px; height: 21px; width: 31.5px; } .services { display: table; } .services .row { display: table-row; } .services_cell { display: table-cell; width: 20%; padding-top: 47px; padding-bottom: 35px; } .services_cell > * { vertical-align: middle; } .services .row:last-child .services_cell { border-bottom: none; } } /* Tweaks for Events plugin */ #tribe-events-header { display: none; } #tribe-events-content-wrapper { clear: both; float: none; padding: 1.333em 0 1em; z-index: 1; } #tribe-events-content.tribe-events-list, #tribe-events-content.tribe-events-single { clear: both; float: none; margin: 0 auto; position: relative; width: 960px; } .tribe-events-list-separator-month { display: none; } .tribe-events-list .type-tribe_events { border-bottom: 1px solid #DDD; margin-bottom: 20px; padding-bottom: 30px; } .tribe-events-loop .type-tribe_events.tribe-events-last { margin-bottom: 0; padding-bottom: 0; } h2.tribe-events-list-event-title { font-size: 20px; line-height: 1.4; } .tribe-events-event-meta { color: #58595B; font-size: 16px !important; font-weight: 700 !important; line-height: 1.75em !important; } .tribe-events-meta-group h3 { font-size: 21px; } .type-tribe_events .tribe-events-event-meta dt, .type-tribe_events .tribe-events-event-meta dl { font-weight: 400; } .tribe-events-single-event-description, .tribe-events-list-event-description p { line-height: 1.5; padding-bottom: 20px; } .tribe-events-meta-group.tribe-events-meta-group-details { margin-bottom: 20px; } .single-tribe_events .tribe-events-schedule h2 { margin-bottom: 20px; } .tribe-events-loop .tribe-events-ical.tribe-events-button { display: none; } h1.tribe-events-single-event-title { color: #CF1626; font-size: 35px; } .tribe-events-schedule h2 { color: #58595B; font-size: 25px; margin: 0; padding: 0; } .tribe-events-cal-links a { margin-right: 10px; } @media only screen and (max-width: 767px) { #tribe-events-content.tribe-events-list, #tribe-events-content.tribe-events-single { padding: 0 20px !important; width: auto; } }