@charset "UTF-8"; /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- styles.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Canvas ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- canvas.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/normalize.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @import "components/featherlight.css"; @import url("//fast.fonts.net/t/1.css?apiType=css&projectid=0ad58892-f9b1-46ea-ba08-2507aaaef2fe"); @import "components/magnific-popup.css"; html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { ont-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-animation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Transitions -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animation Keyframes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Fade In ----------------------------------------------------------------------------- */ @keyframes fade-in { 0% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } /* ----------------------------------------------------------------------------- Fade Out ----------------------------------------------------------------------------- */ @keyframes fade-out { 0% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0; filter: alpha(opacity=0); } } /* ----------------------------------------------------------------------------- Zoom In ----------------------------------------------------------------------------- */ @keyframes zoom-in { 0% { opacity: 0; filter: alpha(opacity=0); transform: scale3d(0.5, 0.5, 0.5); } 50% { opacity: 1; filter: alpha(opacity=100); transform: scale3d(1, 1, 1); } } /* ----------------------------------------------------------------------------- Zoom Out ----------------------------------------------------------------------------- */ @keyframes zoom-out { 0% { opacity: 1; filter: alpha(opacity=100); transform: scale3d(1, 1, 1); } 50% { opacity: 0; filter: alpha(opacity=0); transform: scale3d(0.5, 0.5, 0.5); } 100% { opacity: 0; filter: alpha(opacity=0); transform: scale3d(0.5, 0.5, 0.5); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-border-radius.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Single Corner Border Radius ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Single Side Border Radius ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-buttons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-carousel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-colors.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lighten and Darken Colors -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Gradients -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Border Gradient -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-forms.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-grid.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container (Fixed) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Columns -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mini Column ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Column ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Medium Column ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Large Column ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-grid-framework.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Columns -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Float Grid Columns ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Calculate Grid Columns ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Make Grid Columns ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-layout.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Shape layout Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Clearfix -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .clearfix, .container, .row { *zoom: 1; } .clearfix:before, .clearfix:after, .container:before, .container:after, .row:before, .row:after { display: table; content: ""; line-height: 0; } .clearfix:after, .container:after, .row:after { clear: both; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- IE7 Fixes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Focus -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Center Block Elements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Sizing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Transformations -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-modals.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-carousel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Variant Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Size Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-animation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Triangle -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Triangle Size ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Triangle Color ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-styling.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Shape Style Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Shadow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Appearance -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-tables.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell Size Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell Style Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Style Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Size Variant -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Test Styling (REMOVE) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hide Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Placeholder Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-utilities.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-buttons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Mini) Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Mini) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Small) Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Small) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Large) Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Large) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Jumbo) Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Jumbo) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Spacing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Spacing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Dropdown -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-carousel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination (Default) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination (Default) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-code.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Padding ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Text Responsive Text Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Block Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Code Block Responsive Margin Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pretty Print Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pretty Print Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pretty Print Text Responsive Text Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pretty Print Line Number Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Syntax Highlighting ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-colors.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Colors -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- neutralscale ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Colors ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Social Networks ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-config.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Components -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Path Definitions -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-dropdown-menus.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu (Inverse) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Header Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Header Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Header (Default) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Header (Inverse) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Divider Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Divider Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Divider (Default) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu Divider (Inverse) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item Styles (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-forms.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Group States ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Group Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Group Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow Style ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow Style ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) Select Arrow Style ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) Select Arrow Style ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) Select Arrow Style ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Padding ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Checkbox ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Radio ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Default) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Default) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Default) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Success) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Success) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Success) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Success) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Error) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Error) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Error) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option (Error) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Option Inverse mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Default) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Success) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label (Error) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Default) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Success) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Help Block (Error) Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-icons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icons -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- icon (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- icon (small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- icon (medium) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- icon (Large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- icon (Jumbo) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-layout.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Sizes ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Resolutions ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Grid ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Fluid Container ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Spacing Unit ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Z-Index Depths ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Foundation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Canvas ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Canvas Pod ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container Pod ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Borders ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-modal.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Widths ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Attributes ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Transitions ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Header Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Body ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Body Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Footer ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal footer Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal (Fullscreen) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Backdrop -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Backdrop Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Backdrop Transitions ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-panel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Sizing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-tables.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Sucess, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Sucess, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Sucess, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Sucess, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Sucess, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Sucess, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Disabled) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Hover -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Font Families -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/foundation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Reset Box Sizing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { margin: 0px; background-color: #232937; height: 100%; overflow-x: hidden; position: relative; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Selection Highlighting -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ a { outline: 0; } ::-moz-selection { background: #9351e5; color: #ffffff; } ::selection { background: #9351e5; color: #ffffff; } ::-moz-selection { background: #9351e5; color: #ffffff; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas { position: relative; background-color: #ffffff; overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .canvas-pod { position: relative; } .canvas-pod.canvas-pod-light { background: #f9f9fa; } .canvas-pod.canvas-pod-dark { background: #232937; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { position: relative; padding-top: 36px; padding-bottom: 36px; } .container-pod.container-pod-short { padding-top: 18px; padding-bottom: 18px; } .container-pod.container-pod-short-top { padding-top: 18px; } .container-pod.container-pod-short-bottom { padding-bottom: 18px; } .container-pod.container-pod-tall { padding-top: 60px; padding-bottom: 60px; } .container-pod.container-pod-tall-top { padding-top: 60px; } .container-pod.container-pod-tall-bottom { padding-bottom: 60px; } .container-pod.container-pod-fill { height: 100%; box-sizing: border-box; } .container-pod.container-pod-divider-top { border-top: 1px solid #ebebed; } .container-pod.container-pod-divider-top.container-pod-divider-inverse { border-top: 1px solid #323a4e; } .container-pod.container-pod-divider-bottom { border-bottom: 1px solid #ebebed; } .container-pod.container-pod-divider-bottom.container-pod-divider-inverse { border-bottom: 1px solid #323a4e; } .container-pod.flush-top { padding-top: 0px !important; } .container-pod.flush-bottom { padding-bottom: 0px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { position: relative; padding-top: 36px; padding-bottom: 36px; } .row-pod.row-pod-short { padding-top: 18px; padding-bottom: 18px; } .row-pod.row-pod-short-top { padding-top: 18px; } .row-pod.row-pod-short-bottom { padding-bottom: 18px; } .row-pod.row-pod-tall { padding-top: 60px; padding-bottom: 60px; } .row-pod.row-pod-tall-top { padding-top: 60px; } .row-pod.row-pod-tall-bottom { padding-bottom: 60px; } .row-pod.flush-top { padding-top: 0px !important; } .row-pod.flush-bottom { padding-bottom: 0px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -24px; } .row-grid [class*="column-"] { margin-bottom: 24px; } .row-grid.flush-bottom { margin-bottom: -24px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow { margin-top: 36px; } .column-overflow.column-overflow-short { margin-top: 18px; } .column-overflow.column-overflow-tall { margin-top: 60px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { border: 0px; height: 1px; margin-top: 36px; margin-bottom: 36px; background: #ebebed; /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } hr.short, .divider.short { margin-top: 18px; margin-bottom: 18px; } hr.tall, .divider.tall { margin-top: 60px; margin-bottom: 60px; } hr.inverse, .divider.inverse { background: #323a4e; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-box:before, .flex-box:after { display: none; } .flex-box.flex-box-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-box.flex-box-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .flex-box.flex-box-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .flex-box.flex-box-align-vertical-top { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .flex-box.flex-box-align-vertical-bottom { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .flex-box.flex-box-align-horizontal-center { -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fill-height { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: 36px; padding-bottom: 36px; } .container-pod.container-pod-short { padding-top: 18px; padding-bottom: 18px; } .container-pod.container-pod-short-top { padding-top: 18px; } .container-pod.container-pod-short-bottom { padding-bottom: 18px; } .container-pod.container-pod-tall { padding-top: 60px; padding-bottom: 60px; } .container-pod.container-pod-tall-top { padding-top: 60px; } .container-pod.container-pod-tall-bottom { padding-bottom: 60px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: 36px; padding-bottom: 36px; } .row-pod.row-pod-short { padding-top: 18px; padding-bottom: 18px; } .row-pod.row-pod-short-top { padding-top: 18px; } .row-pod.row-pod-short-bottom { padding-bottom: 18px; } .row-pod.row-pod-tall { padding-top: 60px; padding-bottom: 60px; } .row-pod.row-pod-tall-top { padding-top: 60px; } .row-pod.row-pod-tall-bottom { padding-bottom: 60px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -5%; } .row-grid [class*="column-"] { margin-bottom: 5%; } .row-grid.flush-bottom { margin-bottom: -5% !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow[class*="column-mini-"] { margin-top: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: 36px; margin-bottom: 36px; } hr.short, .divider.short { margin-top: 18px; margin-bottom: 18px; } hr.tall, .divider.tall { margin-top: 60px; margin-bottom: 60px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box-mini { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-box-mini.flex-box-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .flex-box-mini.flex-box-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .flex-box-mini.flex-box-align-vertical-top { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .flex-box-mini.flex-box-align-vertical-bottom { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .flex-box-mini.flex-box-align-horizontal-center { -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fill-height-mini { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: 48px; padding-bottom: 48px; } .container-pod.container-pod-short { padding-top: 24px; padding-bottom: 24px; } .container-pod.container-pod-short-top { padding-top: 24px; } .container-pod.container-pod-short-bottom { padding-bottom: 24px; } .container-pod.container-pod-tall { padding-top: 80px; padding-bottom: 80px; } .container-pod.container-pod-tall-top { padding-top: 80px; } .container-pod.container-pod-tall-bottom { padding-bottom: 80px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: 48px; padding-bottom: 48px; } .row-pod.row-pod-short { padding-top: 24px; padding-bottom: 24px; } .row-pod.row-pod-short-top { padding-top: 24px; } .row-pod.row-pod-short-bottom { padding-bottom: 24px; } .row-pod.row-pod-tall { padding-top: 80px; padding-bottom: 80px; } .row-pod.row-pod-tall-top { padding-top: 80px; } .row-pod.row-pod-tall-bottom { padding-bottom: 80px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -32px; } .row-grid [class*="column-"] { margin-bottom: 32px; } .row-grid.flush-bottom { margin-bottom: -32px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-overflow[class*="column-small-"] { margin-top: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: 48px; margin-bottom: 48px; } hr.short, .divider.short { margin-top: 24px; margin-bottom: 24px; } hr.tall, .divider.tall { margin-top: 80px; margin-bottom: 80px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box-small { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-box-small.flex-box-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .flex-box-small.flex-box-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .flex-box-small.flex-box-align-vertical-top { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .flex-box-small.flex-box-align-vertical-bottom { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .flex-box-small.flex-box-align-horizontal-center { -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fill-height-small { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: 72px; padding-bottom: 72px; } .container-pod.container-pod-short { padding-top: 36px; padding-bottom: 36px; } .container-pod.container-pod-short-top { padding-top: 36px; } .container-pod.container-pod-short-bottom { padding-bottom: 36px; } .container-pod.container-pod-tall { padding-top: 120px; padding-bottom: 120px; } .container-pod.container-pod-tall-top { padding-top: 120px; } .container-pod.container-pod-tall-bottom { padding-bottom: 120px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: 72px; padding-bottom: 72px; } .row-pod.row-pod-short { padding-top: 36px; padding-bottom: 36px; } .row-pod.row-pod-short-top { padding-top: 36px; } .row-pod.row-pod-short-bottom { padding-bottom: 36px; } .row-pod.row-pod-tall { padding-top: 120px; padding-bottom: 120px; } .row-pod.row-pod-tall-top { padding-top: 120px; } .row-pod.row-pod-tall-bottom { padding-bottom: 120px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -48px; } .row-grid [class*="column-"] { margin-bottom: 48px; } .row-grid.flush-bottom { margin-bottom: -48px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [class^="column-"].column-overflow[class^="column-medium-"] { margin-top: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: 72px; margin-bottom: 72px; } hr.short, .divider.short { margin-top: 36px; margin-bottom: 36px; } hr.tall, .divider.tall { margin-top: 120px; margin-bottom: 120px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box-medium { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-box-medium.flex-box-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .flex-box-medium.flex-box-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .flex-box-medium.flex-box-align-vertical-top { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .flex-box-medium.flex-box-align-vertical-bottom { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .flex-box-medium.flex-box-align-horizontal-center { -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fill-height-medium { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container-pod { padding-top: 96px; padding-bottom: 96px; } .container-pod.container-pod-short { padding-top: 48px; padding-bottom: 48px; } .container-pod.container-pod-short-top { padding-top: 48px; } .container-pod.container-pod-short-bottom { padding-bottom: 48px; } .container-pod.container-pod-tall { padding-top: 160px; padding-bottom: 160px; } .container-pod.container-pod-tall-top { padding-top: 160px; } .container-pod.container-pod-tall-bottom { padding-bottom: 160px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod { padding-top: 96px; padding-bottom: 96px; } .row-pod.row-pod-short { padding-top: 48px; padding-bottom: 48px; } .row-pod.row-pod-short-top { padding-top: 48px; } .row-pod.row-pod-short-bottom { padding-bottom: 48px; } .row-pod.row-pod-tall { padding-top: 160px; padding-bottom: 160px; } .row-pod.row-pod-tall-top { padding-top: 160px; } .row-pod.row-pod-tall-bottom { padding-bottom: 160px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-grid { margin-bottom: -64px; } .row-grid [class*="column-"] { margin-bottom: 64px; } .row-grid.flush-bottom { margin-bottom: -64px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Column Overflow -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [class^="column-"].column-overflow[class^="column-large-"] { margin-top: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Horizontal Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ hr, .divider { margin-top: 96px; margin-bottom: 96px; } hr.short, .divider.short { margin-top: 48px; margin-bottom: 48px; } hr.tall, .divider.tall { margin-top: 160px; margin-bottom: 160px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flex Box -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-box-large { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-box-large.flex-box-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .flex-box-large.flex-box-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .flex-box-large.flex-box-align-vertical-top { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .flex-box-large.flex-box-align-vertical-bottom { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .flex-box-large.flex-box-align-horizontal-center { -ms-flex-pack: center; justify-content: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fill Height -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fill-height-large { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/grid.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fixed Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { margin-left: 24px; margin-right: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { width: auto; margin-left: 24px; margin-right: 24px; } .container.container-fluid.container-fluid-narrow { margin-left: 12px; margin-right: 12px; } .container.container-fluid.container-fluid-wide { margin-left: 48px; margin-right: 48px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { margin-left: -12px; margin-right: -12px; } .row.row-flex { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .row.row-flex.row-flex-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .row.row-flex.row-flex-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .row.row-fill { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Columns -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-mini-1, .column-small-1, .column-medium-1, .column-large-1, .column-2, .column-mini-2, .column-small-2, .column-medium-2, .column-large-2, .column-3, .column-mini-3, .column-small-3, .column-medium-3, .column-large-3, .column-4, .column-mini-4, .column-small-4, .column-medium-4, .column-large-4, .column-5, .column-mini-5, .column-small-5, .column-medium-5, .column-large-5, .column-6, .column-mini-6, .column-small-6, .column-medium-6, .column-large-6, .column-7, .column-mini-7, .column-small-7, .column-medium-7, .column-large-7, .column-8, .column-mini-8, .column-small-8, .column-medium-8, .column-large-8, .column-9, .column-mini-9, .column-small-9, .column-medium-9, .column-large-9, .column-10, .column-mini-10, .column-small-10, .column-medium-10, .column-large-10, .column-11, .column-mini-11, .column-small-11, .column-medium-11, .column-large-11, .column-12, .column-mini-12, .column-small-12, .column-medium-12, .column-large-12 { position: relative; min-height: 1px; padding-left: 12px; padding-right: 12px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 { padding-left: 12px; padding-right: 12px; } .column-12 { float: left; width: 100%; } .column-11 { float: left; width: 91.66666667%; } .column-10 { float: left; width: 83.33333333%; } .column-9 { float: left; width: 75%; } .column-8 { float: left; width: 66.66666667%; } .column-7 { float: left; width: 58.33333333%; } .column-6 { float: left; width: 50%; } .column-5 { float: left; width: 41.66666667%; } .column-4 { float: left; width: 33.33333333%; } .column-3 { float: left; width: 25%; } .column-2 { float: left; width: 16.66666667%; } .column-1 { float: left; width: 8.33333333%; } .column-pull-12 { right: 100%; } .column-pull-11 { right: 91.66666667%; } .column-pull-10 { right: 83.33333333%; } .column-pull-9 { right: 75%; } .column-pull-8 { right: 66.66666667%; } .column-pull-7 { right: 58.33333333%; } .column-pull-6 { right: 50%; } .column-pull-5 { right: 41.66666667%; } .column-pull-4 { right: 33.33333333%; } .column-pull-3 { right: 25%; } .column-pull-2 { right: 16.66666667%; } .column-pull-1 { right: 8.33333333%; } .column-pull-0 { right: auto; } .column-push-12 { left: 100%; } .column-push-11 { left: 91.66666667%; } .column-push-10 { left: 83.33333333%; } .column-push-9 { left: 75%; } .column-push-8 { left: 66.66666667%; } .column-push-7 { left: 58.33333333%; } .column-push-6 { left: 50%; } .column-push-5 { left: 41.66666667%; } .column-push-4 { left: 33.33333333%; } .column-push-3 { left: 25%; } .column-push-2 { left: 16.66666667%; } .column-push-1 { left: 8.33333333%; } .column-push-0 { left: auto; } .column-offset-12 { margin-left: 100%; } .column-offset-11 { margin-left: 91.66666667%; } .column-offset-10 { margin-left: 83.33333333%; } .column-offset-9 { margin-left: 75%; } .column-offset-8 { margin-left: 66.66666667%; } .column-offset-7 { margin-left: 58.33333333%; } .column-offset-6 { margin-left: 50%; } .column-offset-5 { margin-left: 41.66666667%; } .column-offset-4 { margin-left: 33.33333333%; } .column-offset-3 { margin-left: 25%; } .column-offset-2 { margin-left: 16.66666667%; } .column-offset-1 { margin-left: 8.33333333%; } .column-offset-0 { margin-left: 0%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: auto; margin-left: 24px; margin-right: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: 24px; margin-right: 24px; } .container.container-fluid.container-fluid-narrow { margin-left: 12px; margin-right: 12px; } .container.container-fluid.container-fluid-wide { margin-left: 48px; margin-right: 48px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { margin-left: -2.5%; margin-right: -2.5%; } .row.row-flex-mini { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .row.row-flex-mini.row-flex-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .row.row-flex-mini.row-flex-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .row.row-fill-mini { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-mini-1, .column-small-1, .column-medium-1, .column-large-1, .column-2, .column-mini-2, .column-small-2, .column-medium-2, .column-large-2, .column-3, .column-mini-3, .column-small-3, .column-medium-3, .column-large-3, .column-4, .column-mini-4, .column-small-4, .column-medium-4, .column-large-4, .column-5, .column-mini-5, .column-small-5, .column-medium-5, .column-large-5, .column-6, .column-mini-6, .column-small-6, .column-medium-6, .column-large-6, .column-7, .column-mini-7, .column-small-7, .column-medium-7, .column-large-7, .column-8, .column-mini-8, .column-small-8, .column-medium-8, .column-large-8, .column-9, .column-mini-9, .column-small-9, .column-medium-9, .column-large-9, .column-10, .column-mini-10, .column-small-10, .column-medium-10, .column-large-10, .column-11, .column-mini-11, .column-small-11, .column-medium-11, .column-large-11, .column-12, .column-mini-12, .column-small-12, .column-medium-12, .column-large-12 { padding-left: 2.5%; padding-right: 2.5%; } .column-mini-12 { float: left; width: 100%; } .column-mini-11 { float: left; width: 91.66666667%; } .column-mini-10 { float: left; width: 83.33333333%; } .column-mini-9 { float: left; width: 75%; } .column-mini-8 { float: left; width: 66.66666667%; } .column-mini-7 { float: left; width: 58.33333333%; } .column-mini-6 { float: left; width: 50%; } .column-mini-5 { float: left; width: 41.66666667%; } .column-mini-4 { float: left; width: 33.33333333%; } .column-mini-3 { float: left; width: 25%; } .column-mini-2 { float: left; width: 16.66666667%; } .column-mini-1 { float: left; width: 8.33333333%; } .column-mini-pull-12 { right: 100%; } .column-mini-pull-11 { right: 91.66666667%; } .column-mini-pull-10 { right: 83.33333333%; } .column-mini-pull-9 { right: 75%; } .column-mini-pull-8 { right: 66.66666667%; } .column-mini-pull-7 { right: 58.33333333%; } .column-mini-pull-6 { right: 50%; } .column-mini-pull-5 { right: 41.66666667%; } .column-mini-pull-4 { right: 33.33333333%; } .column-mini-pull-3 { right: 25%; } .column-mini-pull-2 { right: 16.66666667%; } .column-mini-pull-1 { right: 8.33333333%; } .column-mini-pull-0 { right: auto; } .column-mini-push-12 { left: 100%; } .column-mini-push-11 { left: 91.66666667%; } .column-mini-push-10 { left: 83.33333333%; } .column-mini-push-9 { left: 75%; } .column-mini-push-8 { left: 66.66666667%; } .column-mini-push-7 { left: 58.33333333%; } .column-mini-push-6 { left: 50%; } .column-mini-push-5 { left: 41.66666667%; } .column-mini-push-4 { left: 33.33333333%; } .column-mini-push-3 { left: 25%; } .column-mini-push-2 { left: 16.66666667%; } .column-mini-push-1 { left: 8.33333333%; } .column-mini-push-0 { left: auto; } .column-mini-offset-12 { margin-left: 100%; } .column-mini-offset-11 { margin-left: 91.66666667%; } .column-mini-offset-10 { margin-left: 83.33333333%; } .column-mini-offset-9 { margin-left: 75%; } .column-mini-offset-8 { margin-left: 66.66666667%; } .column-mini-offset-7 { margin-left: 58.33333333%; } .column-mini-offset-6 { margin-left: 50%; } .column-mini-offset-5 { margin-left: 41.66666667%; } .column-mini-offset-4 { margin-left: 33.33333333%; } .column-mini-offset-3 { margin-left: 25%; } .column-mini-offset-2 { margin-left: 16.66666667%; } .column-mini-offset-1 { margin-left: 8.33333333%; } .column-mini-offset-0 { margin-left: 0%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: 730px; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: 32px; margin-right: 32px; } .container.container-fluid.container-fluid-narrow { margin-left: 16px; margin-right: 16px; } .container.container-fluid.container-fluid-wide { margin-left: 64px; margin-right: 64px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { margin-left: -16px; margin-right: -16px; } .row.row-flex-small { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .row.row-flex-small.row-flex-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .row.row-flex-small.row-flex-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .row.row-fill-small { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-mini-1, .column-small-1, .column-medium-1, .column-large-1, .column-2, .column-mini-2, .column-small-2, .column-medium-2, .column-large-2, .column-3, .column-mini-3, .column-small-3, .column-medium-3, .column-large-3, .column-4, .column-mini-4, .column-small-4, .column-medium-4, .column-large-4, .column-5, .column-mini-5, .column-small-5, .column-medium-5, .column-large-5, .column-6, .column-mini-6, .column-small-6, .column-medium-6, .column-large-6, .column-7, .column-mini-7, .column-small-7, .column-medium-7, .column-large-7, .column-8, .column-mini-8, .column-small-8, .column-medium-8, .column-large-8, .column-9, .column-mini-9, .column-small-9, .column-medium-9, .column-large-9, .column-10, .column-mini-10, .column-small-10, .column-medium-10, .column-large-10, .column-11, .column-mini-11, .column-small-11, .column-medium-11, .column-large-11, .column-12, .column-mini-12, .column-small-12, .column-medium-12, .column-large-12 { padding-left: 16px; padding-right: 16px; } .column-small-12 { float: left; width: 100%; } .column-small-11 { float: left; width: 91.66666667%; } .column-small-10 { float: left; width: 83.33333333%; } .column-small-9 { float: left; width: 75%; } .column-small-8 { float: left; width: 66.66666667%; } .column-small-7 { float: left; width: 58.33333333%; } .column-small-6 { float: left; width: 50%; } .column-small-5 { float: left; width: 41.66666667%; } .column-small-4 { float: left; width: 33.33333333%; } .column-small-3 { float: left; width: 25%; } .column-small-2 { float: left; width: 16.66666667%; } .column-small-1 { float: left; width: 8.33333333%; } .column-small-pull-12 { right: 100%; } .column-small-pull-11 { right: 91.66666667%; } .column-small-pull-10 { right: 83.33333333%; } .column-small-pull-9 { right: 75%; } .column-small-pull-8 { right: 66.66666667%; } .column-small-pull-7 { right: 58.33333333%; } .column-small-pull-6 { right: 50%; } .column-small-pull-5 { right: 41.66666667%; } .column-small-pull-4 { right: 33.33333333%; } .column-small-pull-3 { right: 25%; } .column-small-pull-2 { right: 16.66666667%; } .column-small-pull-1 { right: 8.33333333%; } .column-small-pull-0 { right: auto; } .column-small-push-12 { left: 100%; } .column-small-push-11 { left: 91.66666667%; } .column-small-push-10 { left: 83.33333333%; } .column-small-push-9 { left: 75%; } .column-small-push-8 { left: 66.66666667%; } .column-small-push-7 { left: 58.33333333%; } .column-small-push-6 { left: 50%; } .column-small-push-5 { left: 41.66666667%; } .column-small-push-4 { left: 33.33333333%; } .column-small-push-3 { left: 25%; } .column-small-push-2 { left: 16.66666667%; } .column-small-push-1 { left: 8.33333333%; } .column-small-push-0 { left: auto; } .column-small-offset-12 { margin-left: 100%; } .column-small-offset-11 { margin-left: 91.66666667%; } .column-small-offset-10 { margin-left: 83.33333333%; } .column-small-offset-9 { margin-left: 75%; } .column-small-offset-8 { margin-left: 66.66666667%; } .column-small-offset-7 { margin-left: 58.33333333%; } .column-small-offset-6 { margin-left: 50%; } .column-small-offset-5 { margin-left: 41.66666667%; } .column-small-offset-4 { margin-left: 33.33333333%; } .column-small-offset-3 { margin-left: 25%; } .column-small-offset-2 { margin-left: 16.66666667%; } .column-small-offset-1 { margin-left: 8.33333333%; } .column-small-offset-0 { margin-left: 0%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: 920px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: 48px; margin-right: 48px; } .container.container-fluid.container-fluid-narrow { margin-left: 24px; margin-right: 24px; } .container.container-fluid.container-fluid-wide { margin-left: 96px; margin-right: 96px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { margin-left: -24px; margin-right: -24px; } .row.row-flex-medium { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .row.row-flex-medium.row-flex-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .row.row-flex-medium.row-flex-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .row.row-fill-medium { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-mini-1, .column-small-1, .column-medium-1, .column-large-1, .column-2, .column-mini-2, .column-small-2, .column-medium-2, .column-large-2, .column-3, .column-mini-3, .column-small-3, .column-medium-3, .column-large-3, .column-4, .column-mini-4, .column-small-4, .column-medium-4, .column-large-4, .column-5, .column-mini-5, .column-small-5, .column-medium-5, .column-large-5, .column-6, .column-mini-6, .column-small-6, .column-medium-6, .column-large-6, .column-7, .column-mini-7, .column-small-7, .column-medium-7, .column-large-7, .column-8, .column-mini-8, .column-small-8, .column-medium-8, .column-large-8, .column-9, .column-mini-9, .column-small-9, .column-medium-9, .column-large-9, .column-10, .column-mini-10, .column-small-10, .column-medium-10, .column-large-10, .column-11, .column-mini-11, .column-small-11, .column-medium-11, .column-large-11, .column-12, .column-mini-12, .column-small-12, .column-medium-12, .column-large-12 { padding-left: 24px; padding-right: 24px; } .column-medium-12 { float: left; width: 100%; } .column-medium-11 { float: left; width: 91.66666667%; } .column-medium-10 { float: left; width: 83.33333333%; } .column-medium-9 { float: left; width: 75%; } .column-medium-8 { float: left; width: 66.66666667%; } .column-medium-7 { float: left; width: 58.33333333%; } .column-medium-6 { float: left; width: 50%; } .column-medium-5 { float: left; width: 41.66666667%; } .column-medium-4 { float: left; width: 33.33333333%; } .column-medium-3 { float: left; width: 25%; } .column-medium-2 { float: left; width: 16.66666667%; } .column-medium-1 { float: left; width: 8.33333333%; } .column-medium-pull-12 { right: 100%; } .column-medium-pull-11 { right: 91.66666667%; } .column-medium-pull-10 { right: 83.33333333%; } .column-medium-pull-9 { right: 75%; } .column-medium-pull-8 { right: 66.66666667%; } .column-medium-pull-7 { right: 58.33333333%; } .column-medium-pull-6 { right: 50%; } .column-medium-pull-5 { right: 41.66666667%; } .column-medium-pull-4 { right: 33.33333333%; } .column-medium-pull-3 { right: 25%; } .column-medium-pull-2 { right: 16.66666667%; } .column-medium-pull-1 { right: 8.33333333%; } .column-medium-pull-0 { right: auto; } .column-medium-push-12 { left: 100%; } .column-medium-push-11 { left: 91.66666667%; } .column-medium-push-10 { left: 83.33333333%; } .column-medium-push-9 { left: 75%; } .column-medium-push-8 { left: 66.66666667%; } .column-medium-push-7 { left: 58.33333333%; } .column-medium-push-6 { left: 50%; } .column-medium-push-5 { left: 41.66666667%; } .column-medium-push-4 { left: 33.33333333%; } .column-medium-push-3 { left: 25%; } .column-medium-push-2 { left: 16.66666667%; } .column-medium-push-1 { left: 8.33333333%; } .column-medium-push-0 { left: auto; } .column-medium-offset-12 { margin-left: 100%; } .column-medium-offset-11 { margin-left: 91.66666667%; } .column-medium-offset-10 { margin-left: 83.33333333%; } .column-medium-offset-9 { margin-left: 75%; } .column-medium-offset-8 { margin-left: 66.66666667%; } .column-medium-offset-7 { margin-left: 58.33333333%; } .column-medium-offset-6 { margin-left: 50%; } .column-medium-offset-5 { margin-left: 41.66666667%; } .column-medium-offset-4 { margin-left: 33.33333333%; } .column-medium-offset-3 { margin-left: 25%; } .column-medium-offset-2 { margin-left: 16.66666667%; } .column-medium-offset-1 { margin-left: 8.33333333%; } .column-medium-offset-0 { margin-left: 0%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: 1100px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: 64px; margin-right: 64px; } .container.container-fluid.container-fluid-narrow { margin-left: 32px; margin-right: 32px; } .container.container-fluid.container-fluid-wide { margin-left: 128px; margin-right: 128px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { margin-left: -32px; margin-right: -32px; } .row.row-flex-large { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .row.row-flex-large.row-flex-fit-height { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .row.row-flex-large.row-flex-align-vertical-center { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .row.row-fill-large { height: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-1, .column-mini-1, .column-small-1, .column-medium-1, .column-large-1, .column-2, .column-mini-2, .column-small-2, .column-medium-2, .column-large-2, .column-3, .column-mini-3, .column-small-3, .column-medium-3, .column-large-3, .column-4, .column-mini-4, .column-small-4, .column-medium-4, .column-large-4, .column-5, .column-mini-5, .column-small-5, .column-medium-5, .column-large-5, .column-6, .column-mini-6, .column-small-6, .column-medium-6, .column-large-6, .column-7, .column-mini-7, .column-small-7, .column-medium-7, .column-large-7, .column-8, .column-mini-8, .column-small-8, .column-medium-8, .column-large-8, .column-9, .column-mini-9, .column-small-9, .column-medium-9, .column-large-9, .column-10, .column-mini-10, .column-small-10, .column-medium-10, .column-large-10, .column-11, .column-mini-11, .column-small-11, .column-medium-11, .column-large-11, .column-12, .column-mini-12, .column-small-12, .column-medium-12, .column-large-12 { padding-left: 32px; padding-right: 32px; } .column-large-12 { float: left; width: 100%; } .column-large-11 { float: left; width: 91.66666667%; } .column-large-10 { float: left; width: 83.33333333%; } .column-large-9 { float: left; width: 75%; } .column-large-8 { float: left; width: 66.66666667%; } .column-large-7 { float: left; width: 58.33333333%; } .column-large-6 { float: left; width: 50%; } .column-large-5 { float: left; width: 41.66666667%; } .column-large-4 { float: left; width: 33.33333333%; } .column-large-3 { float: left; width: 25%; } .column-large-2 { float: left; width: 16.66666667%; } .column-large-1 { float: left; width: 8.33333333%; } .column-large-pull-12 { right: 100%; } .column-large-pull-11 { right: 91.66666667%; } .column-large-pull-10 { right: 83.33333333%; } .column-large-pull-9 { right: 75%; } .column-large-pull-8 { right: 66.66666667%; } .column-large-pull-7 { right: 58.33333333%; } .column-large-pull-6 { right: 50%; } .column-large-pull-5 { right: 41.66666667%; } .column-large-pull-4 { right: 33.33333333%; } .column-large-pull-3 { right: 25%; } .column-large-pull-2 { right: 16.66666667%; } .column-large-pull-1 { right: 8.33333333%; } .column-large-pull-0 { right: auto; } .column-large-push-12 { left: 100%; } .column-large-push-11 { left: 91.66666667%; } .column-large-push-10 { left: 83.33333333%; } .column-large-push-9 { left: 75%; } .column-large-push-8 { left: 66.66666667%; } .column-large-push-7 { left: 58.33333333%; } .column-large-push-6 { left: 50%; } .column-large-push-5 { left: 41.66666667%; } .column-large-push-4 { left: 33.33333333%; } .column-large-push-3 { left: 25%; } .column-large-push-2 { left: 16.66666667%; } .column-large-push-1 { left: 8.33333333%; } .column-large-push-0 { left: auto; } .column-large-offset-12 { margin-left: 100%; } .column-large-offset-11 { margin-left: 91.66666667%; } .column-large-offset-10 { margin-left: 83.33333333%; } .column-large-offset-9 { margin-left: 75%; } .column-large-offset-8 { margin-left: 66.66666667%; } .column-large-offset-7 { margin-left: 58.33333333%; } .column-large-offset-6 { margin-left: 50%; } .column-large-offset-5 { margin-left: 41.66666667%; } .column-large-offset-4 { margin-left: 33.33333333%; } .column-large-offset-3 { margin-left: 25%; } .column-large-offset-2 { margin-left: 16.66666667%; } .column-large-offset-1 { margin-left: 8.33333333%; } .column-large-offset-0 { margin-left: 0%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/responsive.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Visibility -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fade { opacity: 0; transition: opacity .15s linear; } .fade.in { opacity: 1; } .invisible { visibility: hidden; position: absolute !important; left: -9999px !important; } .hide { display: none !important; } .show { display: block !important; } .off-screen { position: absolute !important; left: -9999px !important; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .hidden-text { display: block; line-height: 0.1em; font-size: 0.1em; text-indent: -9999px; overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Flush Margins -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flush { margin: 0px !important; } .flush-vertical { margin-top: 0px !important; margin-bottom: 0px !important; } .flush-horizontal { margin-left: 0px !important; margin-right: 0px !important; } .flush-top { margin-top: 0px !important; } .flush-bottom { margin-bottom: 0px !important; } .flush-left { margin-left: 0px !important; } .flush-right { margin-right: 0px !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Positioning -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pull-right { float: right; } .pull-left { float: left; } .center { text-align: center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-up { display: none !important; } @media (max-width: 480px - 1) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-down { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-mini-up { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and below -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (max-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-below-mini { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and below -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (max-width: 767px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-mini-down { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-small-up { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and below -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (max-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-small-down { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-medium-up { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (max-width: 1399px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-medium-down { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-large-up { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Hidden -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .hidden-large-down { display: none !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media print { .visible-print-block { display: block !important; } .visible-print-inline { display: inline !important; } .visible-print-inline-block { display: inline-block !important; } .hidden-print { display: none !important; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Components -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/buttons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ position: relative; vertical-align: middle; cursor: pointer; text-align: center; *display: inline; *zoom: 1; *margin-left: .3em; display: inline-block; border-style: solid; box-sizing: border-box; background-clip: padding-box !important; font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; /* ----------------------------------------------------------------------------- Wide Button ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Rounded Button ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button:first-child { *margin-left: 0; } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -1px; margin-right: 0px; } .button.button-wide { display: block; width: 100%; margin-left: 0px; margin-right: 0px; } .button.button-rounded { border-radius: 1000px !important; } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { vertical-align: middle; content: ''; display: inline-block; width: 0; height: 0; border-style: solid; line-height: 0px; -moz-transform: scale(0.9999); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 11px; line-height: 16px; height: 22px; padding-top: 3px; padding-bottom: 3px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle:after { border-width: 3px 2.5px 0 2.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 16px; height: 28px; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle:after { border-width: 4px 3.5px 0 3.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 36px; padding-right: 36px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 9px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 56px; padding-top: 17px; padding-bottom: 17px; padding-left: 48px; padding-right: 48px; border-radius: 6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle:after { border-width: 8px 7px 0 7px; margin-left: 12px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button (Default) State: Normal ----------------------------------------------------------------------------- */ color: #323a4e; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; text-decoration: none; text-rendering: optimizelegibility; background: #e0e1e4; border-width: 0px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-color: #323a4e transparent transparent transparent !important; _border-color: #323a4e #000000 #000000 #000000 !important; } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button:focus { outline: none; } .button:hover { color: #282e3e; text-decoration: none; background: #d6d8dc; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button:hover.dropdown-toggle:after { border-color: #282e3e transparent transparent transparent !important; _border-color: #282e3e #000000 #000000 #000000 !important; } .button:active { outline: 0; color: #5b6171; background: #b7bac1; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button:active.dropdown-toggle:after { border-color: #5b6171 transparent transparent transparent !important; _border-color: #5b6171 #000000 #000000 #000000 !important; } .button.active { outline: 0; color: #5b6171; background: #c2c4ca; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.active.dropdown-toggle:after { border-color: #5b6171 transparent transparent transparent !important; _border-color: #5b6171 #000000 #000000 #000000 !important; } .button.disabled, .button[disabled] { outline: 0; cursor: default !important; pointer-events: none; opacity: 0.5; filter: alpha(opacity=50); } .button.button-link { /* ----------------------------------------------------------------------------- Button (Default, Link) State: Normal ----------------------------------------------------------------------------- */ color: #323a4e; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Default, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-link:hover { color: #282e3e; } .button.button-link:active { color: #5b6171; } .button.button-link.active { color: #5b6171; } .button.button-link.disabled, .button.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-stroke { /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-width: 1px; border-color: #e0e1e4; border-style: solid; /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-stroke:hover { background: rgba(50, 58, 78, 0.0125); border-color: #e0e1e4; } .button.button-stroke:active { background: rgba(50, 58, 78, 0.025); border-top-color: #e0e1e4; box-shadow: #e0e1e4; } .button.button-stroke.active { background: #e0e1e4; } .button.button-stroke.disabled, .button.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-inverse { /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #3c4457; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Default, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-inverse.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-inverse.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-inverse:hover { color: #ffffff; background: #474e60; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-inverse:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-inverse:hover.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-inverse:active { color: #ffffff; background: #515869; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-inverse:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-inverse:active.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-inverse.active { color: #323a4e; border-color: #ffffff; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-inverse.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-inverse.active.dropdown-toggle:after { border-color: #323a4e transparent transparent transparent !important; _border-color: #323a4e #000000 #000000 #000000 !important; } .button.button-inverse.disabled, .button.button-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-inverse.button-link { /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-inverse.button-link.disabled, .button.button-inverse.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-inverse.button-stroke { /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #3c4457; /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Default, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-inverse.button-stroke:hover { background: rgba(50, 58, 78, 0.4); border-color: #3c4457; } .button.button-inverse.button-stroke:active { background: rgba(50, 58, 78, 0.6); border-color: #3c4457; } .button.button-inverse.button-stroke.active { color: #ffffff; background: #3c4457; } .button.button-inverse.button-stroke.disabled, .button.button-inverse.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-primary { /* ----------------------------------------------------------------------------- Button (Primary) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #9351e5; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-primary.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-primary:hover { background: #8449ce; } .button.button-primary:active { color: #e9dcfa; background: #6739a0; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-primary:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary:active.dropdown-toggle:after { border-color: #e9dcfa transparent transparent transparent !important; _border-color: #e9dcfa #000000 #000000 #000000 !important; } .button.button-primary.active { color: #e9dcfa; background: #7641b7; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-primary.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.active.dropdown-toggle:after { border-color: #e9dcfa transparent transparent transparent !important; _border-color: #e9dcfa #000000 #000000 #000000 !important; } .button.button-primary.disabled, .button.button-primary[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-primary.button-link { /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Normal ----------------------------------------------------------------------------- */ color: #9351e5; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-primary.button-link:hover { color: #8449ce; } .button.button-primary.button-link:active { color: #6739a0; } .button.button-primary.button-link.active { color: #6739a0; } .button.button-primary.button-link.disabled, .button.button-primary.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-primary.button-stroke { /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #9351e5; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #9351e5; /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-primary.button-stroke:hover { color: #8449ce; background: rgba(147, 81, 229, 0.025); } .button.button-primary.button-stroke:active { color: #6739a0; background: rgba(147, 81, 229, 0.05); } .button.button-primary.button-stroke.active { color: #ffffff; background: #9351e5; } .button.button-primary.button-stroke.disabled, .button.button-primary.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-primary.button-inverse { /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #9351e5; background: #ffffff; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.dropdown-toggle:after { border-color: #9351e5 transparent transparent transparent !important; _border-color: #9351e5 #000000 #000000 #000000 !important; } .button.button-primary.button-inverse:hover { color: #8449ce; background: #f4eefc; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse:hover.dropdown-toggle:after { border-color: #8449ce transparent transparent transparent !important; _border-color: #8449ce #000000 #000000 #000000 !important; } .button.button-primary.button-inverse:active { color: #8449ce; background: #e9dcfa; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse:active.dropdown-toggle:after { border-color: #8449ce transparent transparent transparent !important; _border-color: #8449ce #000000 #000000 #000000 !important; } .button.button-primary.button-inverse.active { color: #ffffff; background: #9351e5; border-color: #9351e5; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.active.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-primary.button-inverse.disabled, .button.button-primary.button-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-primary.button-inverse.button-link { /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.button-link.disabled, .button.button-primary.button-inverse.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-primary.button-inverse.button-stroke { /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #9351e5; /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Primary, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-primary.button-inverse.button-stroke:hover { background: rgba(147, 81, 229, 0.2); border-color: #9351e5; } .button.button-primary.button-inverse.button-stroke:active { background: rgba(147, 81, 229, 0.4); border-color: #9351e5; } .button.button-primary.button-inverse.button-stroke.active { color: #ffffff; background: #9351e5; } .button.button-primary.button-inverse.button-stroke.disabled, .button.button-primary.button-inverse.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-success { /* ----------------------------------------------------------------------------- Button (Success) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #27c97b; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-success.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-success:hover { background: #23b56f; } .button.button-success:active { color: #d4f4e5; background: #1b8d56; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-success:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success:active.dropdown-toggle:after { border-color: #d4f4e5 transparent transparent transparent !important; _border-color: #d4f4e5 #000000 #000000 #000000 !important; } .button.button-success.active { color: #d4f4e5; background: #1fa162; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-success.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.active.dropdown-toggle:after { border-color: #d4f4e5 transparent transparent transparent !important; _border-color: #d4f4e5 #000000 #000000 #000000 !important; } .button.button-success.disabled, .button.button-success[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-success.button-link { /* ----------------------------------------------------------------------------- Button (Success, Link) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Success, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Success ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-success.button-link:hover { color: #23b56f; } .button.button-success.button-link:active { color: #1b8d56; } .button.button-success.button-link.active { color: #1b8d56; } .button.button-success.button-link.disabled, .button.button-success.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-success.button-stroke { /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #27c97b; /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-success.button-stroke:hover { color: #23b56f; background: rgba(39, 201, 123, 0.025); } .button.button-success.button-stroke:active { color: #1b8d56; background: rgba(39, 201, 123, 0.05); } .button.button-success.button-stroke.active { color: #ffffff; background: #27c97b; } .button.button-success.button-stroke.disabled, .button.button-success.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-success.button-inverse { /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: #ffffff; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Success, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.dropdown-toggle:after { border-color: #27c97b transparent transparent transparent !important; _border-color: #27c97b #000000 #000000 #000000 !important; } .button.button-success.button-inverse:hover { color: #23b56f; background: #e9faf2; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse:hover.dropdown-toggle:after { border-color: #23b56f transparent transparent transparent !important; _border-color: #23b56f #000000 #000000 #000000 !important; } .button.button-success.button-inverse:active { color: #23b56f; background: #d4f4e5; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse:active.dropdown-toggle:after { border-color: #23b56f transparent transparent transparent !important; _border-color: #23b56f #000000 #000000 #000000 !important; } .button.button-success.button-inverse.active { color: #ffffff; background: #27c97b; border-color: #27c97b; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.active.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-success.button-inverse.disabled, .button.button-success.button-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-success.button-inverse.button-link { /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.button-link.disabled, .button.button-success.button-inverse.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-success.button-inverse.button-stroke { /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #27c97b; /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Success, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-success.button-inverse.button-stroke:hover { background: rgba(39, 201, 123, 0.2); } .button.button-success.button-inverse.button-stroke:active { background: rgba(39, 201, 123, 0.4); } .button.button-success.button-inverse.button-stroke.active { color: #ffffff; background: #27c97b; } .button.button-success.button-inverse.button-stroke.disabled, .button.button-success.button-inverse.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-warning { /* ----------------------------------------------------------------------------- Button (Warning) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f56753; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-warning.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-warning:hover { background: #dd5d4b; } .button.button-warning:active { color: #fde1dd; background: #ac483a; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-warning:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning:active.dropdown-toggle:after { border-color: #fde1dd transparent transparent transparent !important; _border-color: #fde1dd #000000 #000000 #000000 !important; } .button.button-warning.active { color: #fde1dd; background: #c45242; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-warning.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.active.dropdown-toggle:after { border-color: #fde1dd transparent transparent transparent !important; _border-color: #fde1dd #000000 #000000 #000000 !important; } .button.button-warning.disabled, .button.button-warning[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-warning.button-link { /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-warning.button-link:hover { color: #dd5d4b; } .button.button-warning.button-link:active { color: #ac483a; } .button.button-warning.button-link.active { color: #ac483a; } .button.button-warning.button-link.disabled, .button.button-warning.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-warning.button-stroke { /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #f56753; /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-warning.button-stroke:hover { color: #dd5d4b; background: rgba(245, 103, 83, 0.025); } .button.button-warning.button-stroke:active { color: #ac483a; background: rgba(245, 103, 83, 0.05); } .button.button-warning.button-stroke.active { color: #ffffff; background: #f56753; } .button.button-warning.button-stroke.disabled, .button.button-warning.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-warning.button-inverse { /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #ffffff; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.dropdown-toggle:after { border-color: #f56753 transparent transparent transparent !important; _border-color: #f56753 #000000 #000000 #000000 !important; } .button.button-warning.button-inverse:hover { color: #dd5d4b; background: #fef0ee; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse:hover.dropdown-toggle:after { border-color: #dd5d4b transparent transparent transparent !important; _border-color: #dd5d4b #000000 #000000 #000000 !important; } .button.button-warning.button-inverse:active { color: #dd5d4b; background: #fde1dd; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse:active.dropdown-toggle:after { border-color: #dd5d4b transparent transparent transparent !important; _border-color: #dd5d4b #000000 #000000 #000000 !important; } .button.button-warning.button-inverse.active { color: #ffffff; background: #f56753; border-color: #f56753; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.active.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-warning.button-inverse.disabled, .button.button-warning.button-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-warning.button-inverse.button-link { /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.button-link.disabled, .button.button-warning.button-inverse.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-warning.button-inverse.button-stroke { /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #f56753; /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Warning, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-warning.button-inverse.button-stroke:hover { background: rgba(245, 103, 83, 0.2); } .button.button-warning.button-inverse.button-stroke:active { background: rgba(245, 103, 83, 0.4); } .button.button-warning.button-inverse.button-stroke.active { color: #ffffff; background: #f56753; } .button.button-warning.button-inverse.button-stroke.disabled, .button.button-warning.button-inverse.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-danger { /* ----------------------------------------------------------------------------- Button (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f33745; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-danger.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-danger:hover { background: #db323e; } .button.button-danger:active { color: #fdd7da; background: #aa2730; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-danger:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger:active.dropdown-toggle:after { border-color: #fdd7da transparent transparent transparent !important; _border-color: #fdd7da #000000 #000000 #000000 !important; } .button.button-danger.active { color: #fdd7da; background: #c22c37; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-danger.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.active.dropdown-toggle:after { border-color: #fdd7da transparent transparent transparent !important; _border-color: #fdd7da #000000 #000000 #000000 !important; } .button.button-danger.disabled, .button.button-danger[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-danger.button-link { /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-danger.button-link:hover { color: #db323e; } .button.button-danger.button-link:active { color: #aa2730; } .button.button-danger.button-link.active { color: #aa2730; } .button.button-danger.button-link.disabled, .button.button-danger.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-danger.button-stroke { /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #f33745; /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-danger.button-stroke:hover { color: #db323e; background: rgba(243, 55, 69, 0.025); } .button.button-danger.button-stroke:active { color: #aa2730; background: rgba(243, 55, 69, 0.05); } .button.button-danger.button-stroke.active { color: #ffffff; background: #f33745; } .button.button-danger.button-stroke.disabled, .button.button-danger.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-danger.button-inverse { /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #ffffff; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Link) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.dropdown-toggle:after { border-color: #f33745 transparent transparent transparent !important; _border-color: #f33745 #000000 #000000 #000000 !important; } .button.button-danger.button-inverse:hover { color: #db323e; background: #feebec; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse:hover.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse:hover.dropdown-toggle:after { border-color: #db323e transparent transparent transparent !important; _border-color: #db323e #000000 #000000 #000000 !important; } .button.button-danger.button-inverse:active { color: #db323e; background: #fdd7da; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse:active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse:active.dropdown-toggle:after { border-color: #db323e transparent transparent transparent !important; _border-color: #db323e #000000 #000000 #000000 !important; } .button.button-danger.button-inverse.active { color: #ffffff; background: #f33745; border-color: #f33745; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.active.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.active.dropdown-toggle:after { border-color: #ffffff transparent transparent transparent !important; _border-color: #ffffff #000000 #000000 #000000 !important; } .button.button-danger.button-inverse.disabled, .button.button-danger.button-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-danger.button-inverse.button-link { /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Normal ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Link) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.button-link.disabled, .button.button-danger.button-inverse.button-link[disabled] { opacity: 0.5; filter: alpha(opacity=50); } .button.button-danger.button-inverse.button-stroke { /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-color: #f33745; /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button (Danger, Inverse, Stroke) State: Disabled ----------------------------------------------------------------------------- */ } .button.button-danger.button-inverse.button-stroke:hover { background: rgba(243, 55, 69, 0.2); } .button.button-danger.button-inverse.button-stroke:active { background: rgba(243, 55, 69, 0.4); } .button.button-danger.button-inverse.button-stroke.active { color: #ffffff; background: #f33745; } .button.button-danger.button-inverse.button-stroke.disabled, .button.button-danger.button-inverse.button-stroke[disabled] { opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: 0px; margin-bottom: 7.2px; display: block; font-size: 0px; *zoom: 1; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Center) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Left) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Right) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Top) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Center) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Collection Align (Bottom) ----------------------------------------------------------------------------- */ } .button-collection:before, .button-collection:after { display: table; content: ""; line-height: 0; } .button-collection:after { clear: both; } .button-collection.flush-bottom { margin-bottom: -4.8px !important; } .button-collection > .button, .button-collection > .button-group { display: inline-block; margin-right: 4.8px; margin-bottom: 4.8px; } .button-collection > .button:last-child, .button-collection > .button-group:last-child { margin-right: 0px; } .button-collection.button-collection-align-horizontal-center { text-align: center; } .button-collection.button-collection-align-horizontal-left { text-align: left; } .button-collection.button-collection-align-horizontal-right { text-align: right; } .button-collection.button-collection-align-vertical-top > .button, .button-collection.button-collection-align-vertical-top > .button-group { vertical-align: top; } .button-collection.button-collection-align-vertical-center > .button, .button-collection.button-collection-align-vertical-center > .button-group { vertical-align: middle; } .button-collection.button-collection-align-vertical-bottom > .button, .button-collection.button-collection-align-vertical-bottom > .button-group { vertical-align: bottom; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-group { display: block; position: relative; *zoom: 1; /* ----------------------------------------------------------------------------- Button ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Group ----------------------------------------------------------------------------- */ } .button-group:before, .button-group:after { display: table; content: ""; line-height: 0; } .button-group:after { clear: both; } .button-group > .button { position: relative; float: left; } .button-group > .button:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0px !important; } .button-group > .button:first-child { margin-left: 0px; } .button-group > .button:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } .button-group > .button:last-child:not(:first-child) { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } .button-group .button + .button { margin-left: 0px; } .button-group .button + .button.button-stroke { margin-left: -1px; } .button-group .button + .button-group { margin-left: 0px; } .button-group .button-group + .button { margin-left: 0px; } .button-group .button-group + .button.button-stroke { margin-left: -1px; } .button-group .button-group + .button-group { margin-left: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Controls -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ [data-toggle=buttons] > .button input[type=checkbox], [data-toggle=buttons] > .button input[type=radio] { position: absolute !important; left: -9999px !important; visibility: hidden; } [data-toggle=buttons] > .button-group > .button input[type=checkbox], [data-toggle=buttons] > .button-group > .button input[type=radio] { position: absolute !important; left: -9999px !important; visibility: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -1px; margin-right: 0px; } .button.button-wide.button-wide-below-screen-mini { width: auto; display: inline-block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 11px; line-height: 16px; height: 22px; padding-top: 3px; padding-bottom: 3px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle:after { border-width: 3px 2.5px 0 2.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 16px; height: 28px; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle:after { border-width: 4px 3.5px 0 3.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 36px; padding-right: 36px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 9px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 64px; padding-top: 21px; padding-bottom: 21px; padding-left: 54px; padding-right: 54px; border-radius: 6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle:after { border-width: 8px 7px 0 7px; margin-left: 12px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ } .button-collection.flush-bottom { margin-bottom: -4.8px !important; } .button-collection > .button { margin-right: 4.8px; margin-bottom: 4.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 26px; padding-right: 26px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -2px; margin-right: 0px; } .button.button-wide.button-wide-below-screen-small { width: auto; display: inline-block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 17px; height: 23px; padding-top: 3px; padding-bottom: 3px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle:after { border-width: 3px 2.5px 0 2.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 17px; height: 32px; padding-top: 7px; padding-bottom: 7px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle:after { border-width: 4px 3.5px 0 3.5px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ font-size: 17px; line-height: 20px; height: 48px; padding-top: 14px; padding-bottom: 14px; padding-left: 41px; padding-right: 41px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle:after { border-width: 6px 5.5px 0 5.5px; margin-left: 9px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 20px; line-height: 24px; height: 64px; padding-top: 20px; padding-bottom: 20px; padding-left: 54px; padding-right: 54px; border-radius: 6.6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle:after { border-width: 8px 7.5px 0 7.5px; margin-left: 13px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: 0px; margin-bottom: 6.8px; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ } .button-collection.flush-bottom { margin-bottom: -6.4px !important; } .button-collection > .button { margin-right: 6.4px; margin-bottom: 6.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 28px; padding-right: 28px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 7px; margin-top: -2px; margin-right: 0px; } .button.button-wide.button-wide-below-screen-medium { width: auto; display: inline-block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle:after { border-width: 3px 3px 0 3px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle:after { border-width: 4px 4px 0 4px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 44px; padding-right: 44px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle:after { border-width: 7px 6px 0 6px; margin-left: 10px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 54px; padding-right: 54px; border-radius: 7.2px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle:after { border-width: 9px 8.5px 0 8.5px; margin-left: 14px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ } .button-collection.flush-bottom { margin-bottom: -7.2px !important; } .button-collection > .button { margin-right: 7.2px; margin-bottom: 7.2px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button { /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 28px; padding-right: 28px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Block Button ----------------------------------------------------------------------------- */ } .button.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 7px; margin-top: -2px; margin-right: 0px; } .button.button-wide.button-wide-below-screen-large { width: auto; display: inline-block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-mini { /* ----------------------------------------------------------------------------- Button (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-mini.dropdown-toggle:after { border-width: 3px 3px 0 3px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-small { /* ----------------------------------------------------------------------------- Button (Small) Styles ----------------------------------------------------------------------------- */ font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-small.dropdown-toggle:after { border-width: 4px 4px 0 4px; margin-left: 3px; margin-top: -1px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-large { /* ----------------------------------------------------------------------------- Button (Large) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 44px; padding-right: 44px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-large.dropdown-toggle:after { border-width: 7px 6px 0 6px; margin-left: 10px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button.button-jumbo { /* ----------------------------------------------------------------------------- Button (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 54px; padding-right: 54px; border-radius: 7.2px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .button.button-jumbo.dropdown-toggle:after { border-width: 9px 8.5px 0 8.5px; margin-left: 14px; margin-top: -2px; margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Button Collection -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .button-collection { margin-top: 0px; margin-bottom: 4.8px; /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Button Styles ----------------------------------------------------------------------------- */ } .button-collection.flush-bottom { margin-bottom: -9.6px !important; } .button-collection > .button { margin-right: 9.6px; margin-bottom: 9.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/carousel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel { position: relative; padding: 0px; margin: 0px; display: -ms-flexbox; display: flex; left: -100%; list-style: none; transform: translateX(100%); *zoom: 1; margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Reversing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Transition ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Item ----------------------------------------------------------------------------- */ } .carousel:before, .carousel:after { display: table; content: ""; line-height: 0; } .carousel:after { clear: both; } .carousel + .carousel-pagination { margin-top: -12px; margin-bottom: 24px; } .carousel + .carousel-pagination.short, .carousel + .carousel-pagination.short-top { margin-top: -18px; } .carousel + .carousel-pagination.tall, .carousel + .carousel-pagination.tall-top { margin-top: -6px; } .carousel.flush-bottom { margin-bottom: 0px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.flush-bottom + .carousel-pagination { margin-top: 12px; margin-bottom: 0px; } .carousel.short { margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short + .carousel-pagination { margin-top: 0px; margin-bottom: 12px; } .carousel.short + .carousel-pagination.short, .carousel.short + .carousel-pagination.short-top { margin-top: -6px; } .carousel.short-top { margin-top: 0px; } .carousel.short-bottom { margin-bottom: 12px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short-bottom + .carousel-pagination { margin-top: -6px; margin-bottom: 12px; } .carousel.short-bottom + .carousel-pagination.short, .carousel.short-bottom + .carousel-pagination.short-top { margin-top: -6px; } .carousel.tall { margin-top: 0px; margin-bottom: 36px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall + .carousel-pagination { margin-top: -24px; margin-bottom: 36px; } .carousel.tall + .carousel-pagination.tall, .carousel.tall + .carousel-pagination.tall-top { margin-top: 6px; } .carousel.tall-top { margin-top: 0px; } .carousel.tall-bottom { margin-bottom: 36px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall-bottom + .carousel-pagination { margin-top: -24px; margin-bottom: 36px; } .carousel.tall-bottom + .carousel-pagination.tall, .carousel.tall-bottom + .carousel-pagination.tall-top { margin-top: 6px; } .carousel.is-reversing { transform: translateX(-100%); } .carousel.is-set { transform: none; transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .carousel .carousel-item { transition: opacity 0.5s ease; -ms-flex: 1 0 100%; flex: 1 0 100%; margin: 0px; padding: 0px; -ms-flex-order: 2; order: 2; opacity: 0; filter: alpha(opacity=0); } .carousel .carousel-item:before { display: none; } .carousel .carousel-item.is-leaving { -ms-flex-order: 1; order: 1; } .carousel .carousel-item.active { opacity: 1; filter: alpha(opacity=100); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel-pagination { position: relative; bottom: 0px; width: 100%; text-align: center; line-height: 0px; font-size: 0px; height: auto; *zoom: 1; margin-top: 12px; margin-bottom: 0px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Item ----------------------------------------------------------------------------- */ } .carousel-pagination:before, .carousel-pagination:after { display: table; content: ""; line-height: 0; } .carousel-pagination:after { clear: both; } .carousel-pagination.short { margin-top: 6px; margin-bottom: 0px; } .carousel-pagination.short-top { margin-top: 6px; } .carousel-pagination.short-bottom { margin-bottom: 0px; } .carousel-pagination.tall { margin-top: 18px; margin-bottom: 0px; } .carousel-pagination.tall-top { margin-top: 18px; } .carousel-pagination.tall-bottom { margin-bottom: 0px; } .carousel-pagination li { position: relative; display: inline-block; width: auto; height: auto; padding: 0px; margin: 0px; transition: all 0.2s ease; width: 6px; height: 6px; margin-right: 12px; border-radius: 100%; text-decoration: none; background: rgba(0, 0, 0, 0.2); } .carousel-pagination li a { padding: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .carousel-pagination li:hover { background: rgba(0, 0, 0, 0.6); } .carousel-pagination li:active { background: rgba(0, 0, 0, 0.8); } .carousel-pagination li.active { background: none; box-shadow: 0px 0px 0px 1px #9351e5; } .carousel-pagination li span { display: none; } .carousel-pagination li:before { display: none; } .carousel-pagination li:last-child { margin-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .carousel + .carousel-pagination { margin-top: -12px; margin-bottom: 24px; } .carousel + .carousel-pagination.short, .carousel + .carousel-pagination.short-top { margin-top: -18px; } .carousel + .carousel-pagination.tall, .carousel + .carousel-pagination.tall-top { margin-top: -6px; } .carousel.flush-bottom { margin-bottom: 0px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.flush-bottom + .carousel-pagination { margin-top: 12px; margin-bottom: 0px; } .carousel.short { margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short + .carousel-pagination { margin-top: 0px; margin-bottom: 12px; } .carousel.short + .carousel-pagination.short, .carousel.short + .carousel-pagination.short-top { margin-top: -6px; } .carousel.short-top { margin-top: 0px; } .carousel.short-bottom { margin-bottom: 12px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short-bottom + .carousel-pagination { margin-top: -6px; margin-bottom: 12px; } .carousel.short-bottom + .carousel-pagination.short, .carousel.short-bottom + .carousel-pagination.short-top { margin-top: -6px; } .carousel.tall { margin-top: 0px; margin-bottom: 36px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall + .carousel-pagination { margin-top: -24px; margin-bottom: 36px; } .carousel.tall + .carousel-pagination.tall, .carousel.tall + .carousel-pagination.tall-top { margin-top: 6px; } .carousel.tall-top { margin-top: 0px; } .carousel.tall-bottom { margin-bottom: 36px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall-bottom + .carousel-pagination { margin-top: -24px; margin-bottom: 36px; } .carousel.tall-bottom + .carousel-pagination.tall, .carousel.tall-bottom + .carousel-pagination.tall-top { margin-top: 6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel-pagination { margin-top: 12px; margin-bottom: 0px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Item ----------------------------------------------------------------------------- */ } .carousel-pagination.short { margin-top: 6px; margin-bottom: 0px; } .carousel-pagination.short-top { margin-top: 6px; } .carousel-pagination.short-bottom { margin-bottom: 0px; } .carousel-pagination.tall { margin-top: 18px; margin-bottom: 0px; } .carousel-pagination.tall-top { margin-top: 18px; } .carousel-pagination.tall-bottom { margin-bottom: 0px; } .carousel-pagination li { width: 6px; height: 6px; margin-right: 12px; border-radius: 100%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel { margin-top: 0px; margin-bottom: 32px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .carousel + .carousel-pagination { margin-top: -16px; margin-bottom: 32px; } .carousel + .carousel-pagination.short, .carousel + .carousel-pagination.short-top { margin-top: -24px; } .carousel + .carousel-pagination.tall, .carousel + .carousel-pagination.tall-top { margin-top: -8px; } .carousel.flush-bottom { margin-bottom: 0px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.flush-bottom + .carousel-pagination { margin-top: 16px; margin-bottom: 0px; } .carousel.short { margin-top: 0px; margin-bottom: 16px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short + .carousel-pagination { margin-top: 0px; margin-bottom: 16px; } .carousel.short + .carousel-pagination.short, .carousel.short + .carousel-pagination.short-top { margin-top: -8px; } .carousel.short-top { margin-top: 0px; } .carousel.short-bottom { margin-bottom: 16px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short-bottom + .carousel-pagination { margin-top: -8px; margin-bottom: 16px; } .carousel.short-bottom + .carousel-pagination.short, .carousel.short-bottom + .carousel-pagination.short-top { margin-top: -8px; } .carousel.tall { margin-top: 0px; margin-bottom: 48px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall + .carousel-pagination { margin-top: -32px; margin-bottom: 48px; } .carousel.tall + .carousel-pagination.tall, .carousel.tall + .carousel-pagination.tall-top { margin-top: 8px; } .carousel.tall-top { margin-top: 0px; } .carousel.tall-bottom { margin-bottom: 48px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall-bottom + .carousel-pagination { margin-top: -32px; margin-bottom: 48px; } .carousel.tall-bottom + .carousel-pagination.tall, .carousel.tall-bottom + .carousel-pagination.tall-top { margin-top: 8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel-pagination { margin-top: 16px; margin-bottom: 0px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Item ----------------------------------------------------------------------------- */ } .carousel-pagination.short { margin-top: 8px; margin-bottom: 0px; } .carousel-pagination.short-top { margin-top: 8px; } .carousel-pagination.short-bottom { margin-bottom: 0px; } .carousel-pagination.tall { margin-top: 24px; margin-bottom: 0px; } .carousel-pagination.tall-top { margin-top: 24px; } .carousel-pagination.tall-bottom { margin-bottom: 0px; } .carousel-pagination li { width: 6px; height: 6px; margin-right: 16px; border-radius: 100%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel { margin-top: 0px; margin-bottom: 48px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .carousel + .carousel-pagination { margin-top: -24px; margin-bottom: 48px; } .carousel + .carousel-pagination.short, .carousel + .carousel-pagination.short-top { margin-top: -36px; } .carousel + .carousel-pagination.tall, .carousel + .carousel-pagination.tall-top { margin-top: -12px; } .carousel.flush-bottom { margin-bottom: 0px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.flush-bottom + .carousel-pagination { margin-top: 24px; margin-bottom: 0px; } .carousel.short { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short + .carousel-pagination { margin-top: 0px; margin-bottom: 24px; } .carousel.short + .carousel-pagination.short, .carousel.short + .carousel-pagination.short-top { margin-top: -12px; } .carousel.short-top { margin-top: 0px; } .carousel.short-bottom { margin-bottom: 24px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short-bottom + .carousel-pagination { margin-top: -12px; margin-bottom: 24px; } .carousel.short-bottom + .carousel-pagination.short, .carousel.short-bottom + .carousel-pagination.short-top { margin-top: -12px; } .carousel.tall { margin-top: 0px; margin-bottom: 72px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall + .carousel-pagination { margin-top: -48px; margin-bottom: 72px; } .carousel.tall + .carousel-pagination.tall, .carousel.tall + .carousel-pagination.tall-top { margin-top: 12px; } .carousel.tall-top { margin-top: 0px; } .carousel.tall-bottom { margin-bottom: 72px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall-bottom + .carousel-pagination { margin-top: -48px; margin-bottom: 72px; } .carousel.tall-bottom + .carousel-pagination.tall, .carousel.tall-bottom + .carousel-pagination.tall-top { margin-top: 12px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel-pagination { margin-top: 24px; margin-bottom: 0px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Item ----------------------------------------------------------------------------- */ } .carousel-pagination.short { margin-top: 12px; margin-bottom: 0px; } .carousel-pagination.short-top { margin-top: 12px; } .carousel-pagination.short-bottom { margin-bottom: 0px; } .carousel-pagination.tall { margin-top: 36px; margin-bottom: 0px; } .carousel-pagination.tall-top { margin-top: 36px; } .carousel-pagination.tall-bottom { margin-bottom: 0px; } .carousel-pagination li { width: 6px; height: 6px; margin-right: 24px; border-radius: 110%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel { margin-top: 0px; margin-bottom: 64px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Flush Bottom ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .carousel + .carousel-pagination { margin-top: -32px; margin-bottom: 64px; } .carousel + .carousel-pagination.short, .carousel + .carousel-pagination.short-top { margin-top: -48px; } .carousel + .carousel-pagination.tall, .carousel + .carousel-pagination.tall-top { margin-top: -16px; } .carousel.flush-bottom { margin-bottom: 0px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.flush-bottom + .carousel-pagination { margin-top: 32px; margin-bottom: 0px; } .carousel.short { margin-top: 0px; margin-bottom: 32px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short + .carousel-pagination { margin-top: 0px; margin-bottom: 32px; } .carousel.short + .carousel-pagination.short, .carousel.short + .carousel-pagination.short-top { margin-top: -16px; } .carousel.short-top { margin-top: 0px; } .carousel.short-bottom { margin-bottom: 32px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.short-bottom + .carousel-pagination { margin-top: -16px; margin-bottom: 32px; } .carousel.short-bottom + .carousel-pagination.short, .carousel.short-bottom + .carousel-pagination.short-top { margin-top: -16px; } .carousel.tall { margin-top: 0px; margin-bottom: 96px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall + .carousel-pagination { margin-top: -64px; margin-bottom: 96px; } .carousel.tall + .carousel-pagination.tall, .carousel.tall + .carousel-pagination.tall-top { margin-top: 16px; } .carousel.tall-top { margin-top: 0px; } .carousel.tall-bottom { margin-bottom: 96px; /* ----------------------------------------------------------------------------- Margins With Pagination ----------------------------------------------------------------------------- */ } .carousel.tall-bottom + .carousel-pagination { margin-top: -64px; margin-bottom: 96px; } .carousel.tall-bottom + .carousel-pagination.tall, .carousel.tall-bottom + .carousel-pagination.tall-top { margin-top: 16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Carousel Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .carousel-pagination { margin-top: 32px; margin-bottom: 0px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Carousel Pagination Item ----------------------------------------------------------------------------- */ } .carousel-pagination.short { margin-top: 16px; margin-bottom: 0px; } .carousel-pagination.short-top { margin-top: 16px; } .carousel-pagination.short-bottom { margin-bottom: 0px; } .carousel-pagination.tall { margin-top: 48px; margin-bottom: 0px; } .carousel-pagination.tall-top { margin-top: 48px; } .carousel-pagination.tall-bottom { margin-bottom: 0px; } .carousel-pagination li { width: 7px; height: 7px; margin-right: 32px; border-radius: 120%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/code.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { color: #ef468b; font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; font-size: 11.2px; font-style: normal; font-weight: 400; line-height: 20px; text-transform: none; text-shadow: none; display: inline-block; white-space: nowrap; background: #fdedf3; background-image: linear-gradient(90deg, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; padding: 0px 4.8px; border-radius: 4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: 0px; margin-bottom: 24px; word-break: break-all; white-space: pre; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } pre.short { margin-top: 0px; margin-bottom: 12px; } pre.short-top { margin-top: 0px; } pre.short-bottom { margin-bottom: 12px; } pre.tall { margin-top: 0px; margin-bottom: 36px; } pre.tall-top { margin-top: 0px; } pre.tall-bottom { margin-bottom: 36px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { color: #d6d8dc; font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; text-transform: none; text-shadow: none; padding: 12px; background: #282e3e; background-image: linear-gradient(90deg, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; margin-left: 0px; margin-right: 0px; overflow-x: auto; /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Syntax Highlighting -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } pre.prettyprint ol { position: relative; margin-bottom: 0px; } pre.prettyprint ol li { padding-left: 0px; } pre.prettyprint.linenums { position: relative; } pre.prettyprint.linenums:before { content: ''; position: absolute; top: 0px; left: 0px; width: 36px; height: 100%; background: #f5f5f6; background-image: linear-gradient(90deg, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.1); } pre.prettyprint.linenums ol { position: relative; } pre.prettyprint.linenums ol li { margin: 0px; padding-left: 36px; } pre.prettyprint.linenums ol li:before { content: counter(li); color: #999da7; font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; font-style: normal; font-weight: normal; text-transform: none; text-shadow: none; text-rendering: optimizelegibility; } pre.prettyprint .pln { color: #adb0b8; } pre.prettyprint .str { color: #27c97b; } pre.prettyprint .kwd { color: #be97ef; } pre.prettyprint .com { color: #adb0b8; } pre.prettyprint .typ { color: #2f81f7; } pre.prettyprint .lit { color: #f56753; } pre.prettyprint .pun { color: #adb0b8; } pre.prettyprint .opn { color: #adb0b8; } pre.prettyprint .clo { color: #adb0b8; } pre.prettyprint .tag { color: #f56753; } pre.prettyprint .atn { color: #c043d7; } pre.prettyprint .atv { color: #20d5ff; } pre.prettyprint .dec { color: #c043d7; } pre.prettyprint .var { color: #ef468b; } pre.prettyprint .fun { color: #2f81f7; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: 11.2px; line-height: 20px; padding: 0px 2.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } pre.short { margin-top: 0px; margin-bottom: 12px; } pre.short-top { margin-top: 0px; } pre.short-bottom { margin-bottom: 12px; } pre.tall { margin-top: 0px; margin-bottom: 36px; } pre.tall-top { margin-top: 0px; } pre.tall-bottom { margin-bottom: 36px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: 11px; line-height: 16px; padding: 12px; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ } pre.prettyprint.linenums:before { width: 36px; } pre.prettyprint.linenums ol li { padding-left: 36px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: 12.32px; line-height: 22px; padding: 0px 3.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: 0px; margin-bottom: 26.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } pre.short { margin-top: 0px; margin-bottom: 13.2px; } pre.short-top { margin-top: 0px; } pre.short-bottom { margin-bottom: 13.2px; } pre.tall { margin-top: 0px; margin-bottom: 39.6px; } pre.tall-top { margin-top: 0px; } pre.tall-bottom { margin-bottom: 39.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: 12.1px; line-height: 17.6px; padding: 16px; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ } pre.prettyprint.linenums:before { width: 48px; } pre.prettyprint.linenums ol li { padding-left: 48px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: 13.44px; line-height: 24px; padding: 0px 4.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: 0px; margin-bottom: 28.8px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } pre.short { margin-top: 0px; margin-bottom: 14.4px; } pre.short-top { margin-top: 0px; } pre.short-bottom { margin-bottom: 14.4px; } pre.tall { margin-top: 0px; margin-bottom: 43.2px; } pre.tall-top { margin-top: 0px; } pre.tall-bottom { margin-bottom: 43.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: 13.2px; line-height: 19.2px; padding: 24px; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ } pre.prettyprint.linenums:before { width: 60px; } pre.prettyprint.linenums ol li { padding-left: 60px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ code { font-size: 13.44px; line-height: 24px; padding: 0px 6.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre { margin-top: 0px; margin-bottom: 28.8px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } pre.short { margin-top: 0px; margin-bottom: 14.4px; } pre.short-top { margin-top: 0px; } pre.short-bottom { margin-bottom: 14.4px; } pre.tall { margin-top: 0px; margin-bottom: 43.2px; } pre.tall-top { margin-top: 0px; } pre.tall-bottom { margin-bottom: 43.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Code Block (Prettyprint) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { font-size: 13.2px; line-height: 19.2px; padding: 32px; /* ----------------------------------------------------------------------------- Line Numbers ----------------------------------------------------------------------------- */ } pre.prettyprint.linenums:before { width: 80px; } pre.prettyprint.linenums ol li { padding-left: 80px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/dropdown-menus.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown, .dropup { position: relative; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { *zoom: 1; position: absolute; top: 100%; left: 0; z-index: 5000; display: none; float: left; min-width: 160px; padding: 6px 12px; margin: 2px 0 0 0px; border-radius: 4px; background-clip: border-box; background: #ffffff; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu (Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu:before, .dropdown-menu:after { display: table; content: ""; line-height: 0; } .dropdown-menu:after { clear: both; } .dropdown-menu .dropdown-menu-header { display: block; padding: 0px 12px; margin: 9px -12px 3px; font-size: 10.2px; line-height: 16px; border-radius: 0px; color: #adb0b8; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-header:first-child { margin-top: 0px; } .dropdown-menu .dropdown-menu-header:last-child { margin-bottom: 0px; } .dropdown-menu .dropdown-menu-divider { display: block; padding: 0px 12px; margin: 6px -12px 6px; height: 1px; border-radius: 0px; background: #ebebed; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-divider:first-child { margin-top: 0px; } .dropdown-menu .dropdown-menu-divider:last-child { margin-bottom: 0px; } .dropdown-menu .dropdown-menu-list { margin-left: -12px; margin-right: -12px; margin-bottom: 6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-list:last-child { margin-bottom: 0px; } .dropdown-menu .dropdown-menu-list li { list-style: none; padding: 5px 12px; margin: 0px 0px; font-size: 12px; line-height: 16px; color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-list li:before { display: none; } .dropdown-menu .dropdown-menu-list li a { display: block; margin: -5px -12px; padding: 5px 12px; /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default) State: Normal ----------------------------------------------------------------------------- */ color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li:hover a { color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #f5f5f6; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li:active a { color: #5b6171; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #ebebed; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.selected a { color: #5b6171; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #ebebed; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.disabled a { cursor: default; opacity: 0.5; filter: alpha(opacity=50); color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.danger { /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Disabled ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-list li.danger a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.danger:hover a { color: #c22c37; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #feebec; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.danger:active a { color: #922129; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #fdd7da; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.danger.selected a { color: #922129; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #fdd7da; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu .dropdown-menu-list li.danger.disabled a { cursor: pointer; opacity: 0.5; filter: alpha(opacity=50); color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse { background: #3c4457; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu.inverse .dropdown-menu-header { color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-divider { background: #323a4e; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu.inverse .dropdown-menu-list li { color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu.inverse .dropdown-menu-list li a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li:hover a { color: #ffffff; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #474e60; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li:active a { color: #ffffff; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #5b6171; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.selected a { color: #ffffff; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #5b6171; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.disabled a { opacity: 0.5; filter: alpha(opacity=50); color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.danger { /* ----------------------------------------------------------------------------- Dropdown Menu List Item Link ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Disabled ----------------------------------------------------------------------------- */ } .dropdown-menu.inverse .dropdown-menu-list li.danger a { /* ----------------------------------------------------------------------------- Dropdown Menu List Item (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.danger:hover a { color: #f33745; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #474e60; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.danger:active a { color: #f33745; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #5b6171; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.danger.selected a { color: #f33745; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: #5b6171; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } .dropdown-menu.inverse .dropdown-menu-list li.danger.disabled a { opacity: 0.5; filter: alpha(opacity=50); color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; text-decoration: none; text-rendering: optimizelegibility; background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-top-width: 0px; border-top-color: none; border-right-width: 0px; border-right-color: none; border-bottom-width: 0px; border-bottom-color: none; border-left-width: 0px; border-left-color: none; box-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu (Open) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .open > .dropdown-menu { display: block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: 160px; padding: 6px 12px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-header { padding: 0px 12px; margin: 9px -12px 3px; font-size: 10px; line-height: 16px; border-radius: 0px; } .dropdown-menu .dropdown-menu-divider { padding: 0px 12px; margin: 6px -12px 6px; height: 1px; border-radius: 0px; } .dropdown-menu .dropdown-menu-list { margin-left: -12px; margin-right: -12px; margin-bottom: 6px; } .dropdown-menu .dropdown-menu-list li { padding: 5px 12px; margin: 0px 0px; font-size: 12px; line-height: 16px; } .dropdown-menu .dropdown-menu-list li a { margin: -5px -12px; padding: 5px 12px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: 176px; padding: 6px 13px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-header { padding: 0px 13px; margin: 9px -14px 3px; font-size: 11px; line-height: 17px; border-radius: 0px; } .dropdown-menu .dropdown-menu-divider { padding: 0px 13px; margin: 6px -13px 6px; height: 1px; border-radius: 0px; } .dropdown-menu .dropdown-menu-list { margin-left: -13px; margin-right: -13px; margin-bottom: 7px; } .dropdown-menu .dropdown-menu-list li { padding: 5px 13px; margin: 0px 0px; font-size: 13.2px; line-height: 17.6px; } .dropdown-menu .dropdown-menu-list li a { margin: -6px -13px; padding: 5px 13px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: 192px; padding: 7px 14px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-header { padding: 0px 14px; margin: 10px -15px 3px; font-size: 12px; line-height: 19px; border-radius: 0px; } .dropdown-menu .dropdown-menu-divider { padding: 0px 14px; margin: 7px -14px 7px; height: 1px; border-radius: 0px; } .dropdown-menu .dropdown-menu-list { margin-left: -14px; margin-right: -14px; margin-bottom: 8px; } .dropdown-menu .dropdown-menu-list li { padding: 6px 14px; margin: 0px 0px; font-size: 14.4px; line-height: 19.2px; } .dropdown-menu .dropdown-menu-list li a { margin: -6px -14px; padding: 6px 14px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dropdown-menu { min-width: 192px; padding: 7px 14px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu Divider -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Dropdown Menu List -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .dropdown-menu .dropdown-menu-header { padding: 0px 14px; margin: 10px -15px 3px; font-size: 12px; line-height: 19px; border-radius: 0px; } .dropdown-menu .dropdown-menu-divider { padding: 0px 14px; margin: 7px -14px 7px; height: 1px; border-radius: 0px; } .dropdown-menu .dropdown-menu-list { margin-left: -14px; margin-right: -14px; margin-bottom: 8px; } .dropdown-menu .dropdown-menu-list li { padding: 6px 14px; margin: 0px 0px; font-size: 14.4px; line-height: 19.2px; } .dropdown-menu .dropdown-menu-list li a { margin: -6px -14px; padding: 6px 14px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- base/forms.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { display: block; *zoom: 1; margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } form:before, form:after { display: table; content: ""; line-height: 0; } form:after { clear: both; } form.short { margin-top: 0px; margin-bottom: 12px; } form.short-top { margin-top: 0px; } form.short-bottom { margin-bottom: 12px; } form.tall { margin-top: 0px; margin-bottom: 36px; } form.tall-top { margin-top: 0px; } form.tall-bottom { margin-bottom: 36px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fieldset -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ fieldset { padding: 0px; margin: 0px; border: 0px; min-width: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Select -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ select { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; } select:focus { outline: 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { display: block; margin-top: 0px; margin-bottom: 6px; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #191d27; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } label.short { margin-top: 0px; margin-bottom: 3px; } label.short-top { margin-top: 0px; } label.short-bottom { margin-bottom: 3px; } label.tall { margin-top: 0px; margin-bottom: 12px; } label.tall-top { margin-top: 0px; } label.tall-bottom { margin-bottom: 12px; } label strong, label .emphasize { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #0a0c10; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } label .mute { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #323a4e; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } label.inverse { color: #d6d8dc; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } label.inverse .emphasize { color: #ffffff; text-shadow: none; } label.inverse .mute { color: #323a4e; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { display: block; margin-top: 3px; margin-bottom: 0px; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; line-height: 16px; color: #adb0b8; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .form-help-block.short { margin-top: 1.5px; margin-bottom: 0px; } .form-help-block.short-top { margin-top: 1.5px; } .form-help-block.short-bottom { margin-bottom: 0px; } .form-help-block.tall { margin-top: 6px; margin-bottom: 0px; } .form-help-block.tall-top { margin-top: 6px; } .form-help-block.tall-bottom { margin-bottom: 0px; } .form-help-block strong, .form-help-block .emphasize { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; line-height: 16px; color: #5b6171; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .form-help-block .mute { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; line-height: 16px; color: #d6d8dc; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .form-help-block.inverse { color: #5b6171; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .form-help-block.inverse .emphasize { color: #ffffff; text-shadow: none; } .form-help-block.inverse .mute { color: #323a4e; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Area -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ textarea.form-control { height: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ display: block; width: 100%; box-sizing: border-box; background-clip: padding-box !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; border-style: solid; font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-select { position: relative; padding: 0px !important; /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { display: block; width: 100%; background: none; border: none; *border: 0; margin: 0px; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; border-radius: 4px; } .form-control.form-control-select:after { content: ''; display: block; position: absolute; top: 15px; right: 12px; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px 5px 0; } .form-control.form-control-select.form-control-select-multiple:after { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 11px; line-height: 16px; height: 22px; padding-top: 3px; padding-bottom: 3px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select select { font-size: 11px; line-height: 16px; height: 22px; padding-top: 3px; padding-bottom: 3px; padding-left: 12px; padding-right: 12px; border-radius: 3px; } .form-control.form-control-mini.form-control-select:after { top: 9px; right: 12px; border-width: 3.66666667px 3.05555556px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (small) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 16px; height: 28px; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select select { font-size: 12px; line-height: 16px; height: 28px; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 3px; } .form-control.form-control-small.form-control-select:after { top: 11px; right: 12px; border-width: 4.66666667px 3.88888889px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 12px; padding-right: 12px; border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select select { font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 12px; padding-right: 12px; border-radius: 4px; } .form-control.form-control-large.form-control-select:after { top: 17px; right: 12px; border-width: 7px 5.83333333px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 56px; padding-top: 17px; padding-bottom: 17px; padding-left: 12px; padding-right: 12px; border-radius: 6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select select { font-size: 19px; line-height: 22px; height: 56px; padding-top: 17px; padding-bottom: 17px; padding-left: 12px; padding-right: 12px; border-radius: 6px; } .form-control.form-control-jumbo.form-control-select:after { top: 23px; right: 12px; border-width: 9.33333333px 7.77777778px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { position: relative; display: table !important; border-collapse: separate !important; /* ----------------------------------------------------------------------------- Form Control ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ } .form-control-group .form-control { display: table-cell !important; margin-bottom: 0; z-index: 2; } .form-control-group .form-control-group-add-on { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; } .form-control-group.form-control { padding-top: 0px !important; padding-bottom: 0px !important; /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (jumbo) ----------------------------------------------------------------------------- */ } .form-control-group.form-control .form-control { background: none !important; border: 0px !important; box-shadow: none !important; padding-left: 0px !important; padding-right: 0px !important; margin: 0px !important; margin-top: -1px !important; margin-bottom: -1px !important; } .form-control-group.form-control .form-control-group-add-on { width: 1%; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control (Default) State: Normal ----------------------------------------------------------------------------- */ color: #282e3e; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; text-rendering: optimizelegibility; background: #ffffff; border-width: 1px; border-color: rgba(0, 0, 0, 0.2); border-style: solid; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control::-webkit-input-placeholder { color: #adb0b8; } .form-control::-moz-placeholder { color: #adb0b8; } .form-control:-ms-input-placeholder { color: #adb0b8; } .form-control::placeholder { color: #adb0b8; } .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { color: #282e3e; } .form-control.form-control-select:after { border-top-color: #282e3e; } .form-control:hover { color: #1e232f; border-color: rgba(0, 0, 0, 0.4); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control:hover::-webkit-input-placeholder { color: #999da7; } .form-control:hover::-moz-placeholder { color: #999da7; } .form-control:hover:-ms-input-placeholder { color: #999da7; } .form-control:hover::placeholder { color: #999da7; } .form-control:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control:hover.form-control-select select { color: #1e232f; } .form-control:hover.form-control-select:after { border-top-color: #1e232f; } .form-control:focus, .form-control.focus { outline: none; outline: 0; color: #9351e5; background: #fdfcfe; border-color: #9351e5; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control:focus::-webkit-input-placeholder, .form-control.focus::-webkit-input-placeholder { color: #d4b9f5; } .form-control:focus::-moz-placeholder, .form-control.focus::-moz-placeholder { color: #d4b9f5; } .form-control:focus:-ms-input-placeholder, .form-control.focus:-ms-input-placeholder { color: #d4b9f5; } .form-control:focus::placeholder, .form-control.focus::placeholder { color: #d4b9f5; } .form-control:focus.form-control-select, .form-control.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control:focus.form-control-select select, .form-control.focus.form-control-select select { color: #9351e5; } .form-control:focus.form-control-select:after, .form-control.focus.form-control-select:after { border-top-color: #9351e5; } .form-control.disabled, .form-control[disabled] { outline: 0; cursor: default !important; pointer-events: none; opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control.disabled.form-control-select, .form-control[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.disabled.form-control-select select, .form-control[disabled].form-control-select select { color: null; } .form-control.disabled.form-control-select:after, .form-control[disabled].form-control-select:after { border-top-color: null; } .form-control.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; border-color: #474e60; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Default, Inverse) State: Disabled ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse::-webkit-input-placeholder { color: #5b6171; } .form-control.form-control-inverse::-moz-placeholder { color: #5b6171; } .form-control.form-control-inverse:-ms-input-placeholder { color: #5b6171; } .form-control.form-control-inverse::placeholder { color: #5b6171; } .form-control.form-control-inverse.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse.form-control-select select { color: #ffffff; } .form-control.form-control-inverse.form-control-select:after { border-top-color: #ffffff; } .form-control.form-control-inverse:hover { color: #ffffff; border-color: #5b6171; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse:hover::-webkit-input-placeholder { color: #848995; } .form-control.form-control-inverse:hover::-moz-placeholder { color: #848995; } .form-control.form-control-inverse:hover:-ms-input-placeholder { color: #848995; } .form-control.form-control-inverse:hover::placeholder { color: #848995; } .form-control.form-control-inverse:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse:hover.form-control-select select { color: #ffffff; } .form-control.form-control-inverse:hover.form-control-select:after { border-top-color: #ffffff; } .form-control.form-control-inverse:focus, .form-control.form-control-inverse.focus { color: #ffffff; border-color: #985ae6; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse:focus::-webkit-input-placeholder, .form-control.form-control-inverse.focus::-webkit-input-placeholder { color: #848995; } .form-control.form-control-inverse:focus::-moz-placeholder, .form-control.form-control-inverse.focus::-moz-placeholder { color: #848995; } .form-control.form-control-inverse:focus:-ms-input-placeholder, .form-control.form-control-inverse.focus:-ms-input-placeholder { color: #848995; } .form-control.form-control-inverse:focus::placeholder, .form-control.form-control-inverse.focus::placeholder { color: #848995; } .form-control.form-control-inverse:focus.form-control-select, .form-control.form-control-inverse.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse:focus.form-control-select select, .form-control.form-control-inverse.focus.form-control-select select { color: #ffffff; } .form-control.form-control-inverse:focus.form-control-select:after, .form-control.form-control-inverse.focus.form-control-select:after { border-top-color: #ffffff; } .form-control.form-control-inverse.disabled, .form-control.form-control-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse.disabled.form-control-select, .form-control.form-control-inverse[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-control.form-control-inverse.disabled.form-control-select select, .form-control.form-control-inverse[disabled].form-control-select select { color: null; } .form-control.form-control-inverse.disabled.form-control-select:after, .form-control.form-control-inverse[disabled].form-control-select:after { border-top-color: null; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { display: block; margin-top: 0px; margin-bottom: 6px; /* ----------------------------------------------------------------------------- Inline ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ } .checkbox.inline, .radio.inline { display: inline-block; margin-right: 12px; } .checkbox.inline:last-child, .radio.inline:last-child { margin-right: 0px; } .checkbox.short, .radio.short { margin-top: 0px; margin-bottom: 3px; } .checkbox.short-top, .radio.short-top { margin-top: 0px; } .checkbox.short-bottom, .radio.short-bottom { margin-bottom: 3px; } .checkbox.tall, .radio.tall { margin-top: 0px; margin-bottom: 12px; } .checkbox.tall-top, .radio.tall-top { margin-top: 0px; } .checkbox.tall-bottom, .radio.tall-bottom { margin-bottom: 12px; } .checkbox label, .radio label { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #191d27; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; margin: 0px; padding-left: 18px; position: relative; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .checkbox label input[type="checkbox"], .radio label input[type="checkbox"] { position: absolute; vertical-align: top; top: 4px; left: 0px; } .checkbox label input[type="radio"], .radio label input[type="radio"] { position: absolute; vertical-align: top; top: 3px; left: 0px; } .checkbox label strong, .radio label strong, .checkbox label .emphasize, .radio label .emphasize { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #0a0c10; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .checkbox label .mute, .radio label .mute { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #323a4e; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .checkbox label.inverse, .radio label.inverse { color: #1e232f; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .checkbox label.inverse .emphasize, .radio label.inverse .emphasize { color: #282e3e; text-shadow: none; } .checkbox label.inverse .mute, .radio label.inverse .mute { color: #14171f; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .form-group.short { margin-top: 0px; margin-bottom: 6px; } .form-group.short-top { margin-top: 0px; } .form-group.short-bottom { margin-bottom: 6px; } .form-group.tall { margin-top: 0px; margin-bottom: 24px; } .form-group.tall-top { margin-top: 0px; } .form-group.tall-bottom { margin-bottom: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group.form-group-success { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Group ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control { /* ----------------------------------------------------------------------------- Form Control (Success) State: Normal ----------------------------------------------------------------------------- */ color: #1fa162; border-color: #27c97b; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control::-webkit-input-placeholder { color: #27c97b; } .form-group.form-group-success .form-control::-moz-placeholder { color: #27c97b; } .form-group.form-group-success .form-control:-ms-input-placeholder { color: #27c97b; } .form-group.form-group-success .form-control::placeholder { color: #27c97b; } .form-group.form-group-success .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-select select { color: #1fa162; } .form-group.form-group-success .form-control.form-control-select:after { border-top-color: #1fa162; } .form-group.form-group-success .form-control:hover { color: #17794a; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control:hover::-webkit-input-placeholder { color: #23b56f; } .form-group.form-group-success .form-control:hover::-moz-placeholder { color: #23b56f; } .form-group.form-group-success .form-control:hover:-ms-input-placeholder { color: #23b56f; } .form-group.form-group-success .form-control:hover::placeholder { color: #23b56f; } .form-group.form-group-success .form-control:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control:hover.form-control-select select { color: #17794a; } .form-group.form-group-success .form-control:hover.form-control-select:after { border-top-color: #17794a; } .form-group.form-group-success .form-control:focus, .form-group.form-group-success .form-control.focus { color: #27c97b; background: #fbfefc; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control:focus::-webkit-input-placeholder, .form-group.form-group-success .form-control.focus::-webkit-input-placeholder { color: #3dce88; } .form-group.form-group-success .form-control:focus::-moz-placeholder, .form-group.form-group-success .form-control.focus::-moz-placeholder { color: #3dce88; } .form-group.form-group-success .form-control:focus:-ms-input-placeholder, .form-group.form-group-success .form-control.focus:-ms-input-placeholder { color: #3dce88; } .form-group.form-group-success .form-control:focus::placeholder, .form-group.form-group-success .form-control.focus::placeholder { color: #3dce88; } .form-group.form-group-success .form-control:focus.form-control-select, .form-group.form-group-success .form-control.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control:focus.form-control-select select, .form-group.form-group-success .form-control.focus.form-control-select select { color: #27c97b; } .form-group.form-group-success .form-control:focus.form-control-select:after, .form-group.form-group-success .form-control.focus.form-control-select:after { border-top-color: #27c97b; } .form-group.form-group-success .form-control.disabled, .form-group.form-group-success .form-control[disabled] { opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.disabled.form-control-select, .form-group.form-group-success .form-control[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.disabled.form-control-select select, .form-group.form-group-success .form-control[disabled].form-control-select select { color: null; } .form-group.form-group-success .form-control.disabled.form-control-select:after, .form-group.form-group-success .form-control[disabled].form-control-select:after { border-top-color: null; } .form-group.form-group-success .form-control.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; border-color: #27c97b; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Success, Inverse) State: Disabled ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse::-webkit-input-placeholder { color: #7ddfb0; } .form-group.form-group-success .form-control.form-control-inverse::-moz-placeholder { color: #7ddfb0; } .form-group.form-group-success .form-control.form-control-inverse:-ms-input-placeholder { color: #7ddfb0; } .form-group.form-group-success .form-control.form-control-inverse::placeholder { color: #7ddfb0; } .form-group.form-group-success .form-control.form-control-inverse.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse.form-control-select select { color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse:hover { color: #ffffff; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse:hover::-webkit-input-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:hover::-moz-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:hover:-ms-input-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:hover::placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse:hover.form-control-select select { color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse:hover.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse:focus, .form-group.form-group-success .form-control.form-control-inverse.focus { color: #ffffff; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse:focus::-webkit-input-placeholder, .form-group.form-group-success .form-control.form-control-inverse.focus::-webkit-input-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:focus::-moz-placeholder, .form-group.form-group-success .form-control.form-control-inverse.focus::-moz-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:focus:-ms-input-placeholder, .form-group.form-group-success .form-control.form-control-inverse.focus:-ms-input-placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:focus::placeholder, .form-group.form-group-success .form-control.form-control-inverse.focus::placeholder { color: #a9e9ca; } .form-group.form-group-success .form-control.form-control-inverse:focus.form-control-select, .form-group.form-group-success .form-control.form-control-inverse.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse:focus.form-control-select select, .form-group.form-group-success .form-control.form-control-inverse.focus.form-control-select select { color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse:focus.form-control-select:after, .form-group.form-group-success .form-control.form-control-inverse.focus.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-success .form-control.form-control-inverse.disabled, .form-group.form-group-success .form-control.form-control-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse.disabled.form-control-select, .form-group.form-group-success .form-control.form-control-inverse[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-control.form-control-inverse.disabled.form-control-select select, .form-group.form-group-success .form-control.form-control-inverse[disabled].form-control-select select { color: null; } .form-group.form-group-success .form-control.form-control-inverse.disabled.form-control-select:after, .form-group.form-group-success .form-control.form-control-inverse[disabled].form-control-select:after { border-top-color: null; } .form-group.form-group-success label { color: #27c97b; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-success label strong, .form-group.form-group-success label .emphasize { color: #1fa162; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .form-group.form-group-success label .mute { color: #52d495; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .form-group.form-group-success label.inverse { color: #27c97b; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-success label.inverse .emphasize { color: #1fa162; text-shadow: none; } .form-group.form-group-success label.inverse .mute { color: #52d495; text-shadow: none; } .form-group.form-group-success .form-help-block { color: #27c97b; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-help-block strong, .form-group.form-group-success .form-help-block .emphasize { color: #1fa162; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .form-group.form-group-success .form-help-block .mute { color: #52d495; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .form-group.form-group-success .form-help-block.inverse { color: #27c97b; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-success .form-help-block.inverse .emphasize { color: #1fa162; text-shadow: none; } .form-group.form-group-success .form-help-block.inverse .mute { color: #105031; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group.form-group-error { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Group ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control { /* ----------------------------------------------------------------------------- Form Control (Error) State: Normal ----------------------------------------------------------------------------- */ color: #c22c37; border-color: #f33745; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error) State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Error, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control::-webkit-input-placeholder { color: #f33745; } .form-group.form-group-error .form-control::-moz-placeholder { color: #f33745; } .form-group.form-group-error .form-control:-ms-input-placeholder { color: #f33745; } .form-group.form-group-error .form-control::placeholder { color: #f33745; } .form-group.form-group-error .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-select select { color: #c22c37; } .form-group.form-group-error .form-control.form-control-select:after { border-top-color: #c22c37; } .form-group.form-group-error .form-control:hover { color: #922129; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control:hover::-webkit-input-placeholder { color: #db323e; } .form-group.form-group-error .form-control:hover::-moz-placeholder { color: #db323e; } .form-group.form-group-error .form-control:hover:-ms-input-placeholder { color: #db323e; } .form-group.form-group-error .form-control:hover::placeholder { color: #db323e; } .form-group.form-group-error .form-control:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control:hover.form-control-select select { color: #922129; } .form-group.form-group-error .form-control:hover.form-control-select:after { border-top-color: #922129; } .form-group.form-group-error .form-control:focus, .form-group.form-group-error .form-control.focus { color: #f33745; background: #fffbfb; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control:focus::-webkit-input-placeholder, .form-group.form-group-error .form-control.focus::-webkit-input-placeholder { color: #f44b58; } .form-group.form-group-error .form-control:focus::-moz-placeholder, .form-group.form-group-error .form-control.focus::-moz-placeholder { color: #f44b58; } .form-group.form-group-error .form-control:focus:-ms-input-placeholder, .form-group.form-group-error .form-control.focus:-ms-input-placeholder { color: #f44b58; } .form-group.form-group-error .form-control:focus::placeholder, .form-group.form-group-error .form-control.focus::placeholder { color: #f44b58; } .form-group.form-group-error .form-control:focus.form-control-select, .form-group.form-group-error .form-control.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control:focus.form-control-select select, .form-group.form-group-error .form-control.focus.form-control-select select { color: #f33745; } .form-group.form-group-error .form-control:focus.form-control-select:after, .form-group.form-group-error .form-control.focus.form-control-select:after { border-top-color: #f33745; } .form-group.form-group-error .form-control.disabled, .form-group.form-group-error .form-control[disabled] { opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.disabled.form-control-select, .form-group.form-group-error .form-control[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.disabled.form-control-select select, .form-group.form-group-error .form-control[disabled].form-control-select select { color: null; } .form-group.form-group-error .form-control.disabled.form-control-select:after, .form-group.form-group-error .form-control[disabled].form-control-select:after { border-top-color: null; } .form-group.form-group-error .form-control.form-control-inverse { /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: none; border-color: #f33745; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Focus ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Error, Inverse) State: Disabled ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse::-webkit-input-placeholder { color: #f8878f; } .form-group.form-group-error .form-control.form-control-inverse::-moz-placeholder { color: #f8878f; } .form-group.form-group-error .form-control.form-control-inverse:-ms-input-placeholder { color: #f8878f; } .form-group.form-group-error .form-control.form-control-inverse::placeholder { color: #f8878f; } .form-group.form-group-error .form-control.form-control-inverse.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse.form-control-select select { color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse:hover { color: #ffffff; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse:hover::-webkit-input-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:hover::-moz-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:hover:-ms-input-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:hover::placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:hover.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse:hover.form-control-select select { color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse:hover.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse:focus, .form-group.form-group-error .form-control.form-control-inverse.focus { color: #ffffff; /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse:focus::-webkit-input-placeholder, .form-group.form-group-error .form-control.form-control-inverse.focus::-webkit-input-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:focus::-moz-placeholder, .form-group.form-group-error .form-control.form-control-inverse.focus::-moz-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:focus:-ms-input-placeholder, .form-group.form-group-error .form-control.form-control-inverse.focus:-ms-input-placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:focus::placeholder, .form-group.form-group-error .form-control.form-control-inverse.focus::placeholder { color: #faafb5; } .form-group.form-group-error .form-control.form-control-inverse:focus.form-control-select, .form-group.form-group-error .form-control.form-control-inverse.focus.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse:focus.form-control-select select, .form-group.form-group-error .form-control.form-control-inverse.focus.form-control-select select { color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse:focus.form-control-select:after, .form-group.form-group-error .form-control.form-control-inverse.focus.form-control-select:after { border-top-color: #ffffff; } .form-group.form-group-error .form-control.form-control-inverse.disabled, .form-group.form-group-error .form-control.form-control-inverse[disabled] { opacity: 0.5; filter: alpha(opacity=50); /* ----------------------------------------------------------------------------- Form Control Select ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse.disabled.form-control-select, .form-group.form-group-error .form-control.form-control-inverse[disabled].form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control Select Arrow ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-control.form-control-inverse.disabled.form-control-select select, .form-group.form-group-error .form-control.form-control-inverse[disabled].form-control-select select { color: null; } .form-group.form-group-error .form-control.form-control-inverse.disabled.form-control-select:after, .form-group.form-group-error .form-control.form-control-inverse[disabled].form-control-select:after { border-top-color: null; } .form-group.form-group-error label { color: #f33745; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-error label strong, .form-group.form-group-error label .emphasize { color: #c22c37; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .form-group.form-group-error label .mute { color: #f55f6a; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .form-group.form-group-error label.inverse { color: #f33745; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-error label.inverse .emphasize { color: #c22c37; text-shadow: none; } .form-group.form-group-error label.inverse .mute { color: #f55f6a; text-shadow: none; } .form-group.form-group-error .form-help-block { color: #f33745; font-style: normal; font-weight: 400; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-help-block strong, .form-group.form-group-error .form-help-block .emphasize { color: #c22c37; font-style: normal; font-weight: 500; text-transform: none; text-shadow: none; } .form-group.form-group-error .form-help-block .mute { color: #f55f6a; font-style: normal; font-weight: 200; text-transform: none; text-shadow: none; } .form-group.form-group-error .form-help-block.inverse { color: #f33745; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .form-group.form-group-error .form-help-block.inverse .emphasize { color: #c22c37; text-shadow: none; } .form-group.form-group-error .form-help-block.inverse .mute { color: #61161c; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } form.short { margin-top: 0px; margin-bottom: 12px; } form.short-top { margin-top: 0px; } form.short-bottom { margin-bottom: 12px; } form.tall { margin-top: 0px; margin-bottom: 36px; } form.tall-top { margin-top: 0px; } form.tall-bottom { margin-bottom: 36px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: 0px; margin-bottom: 6px; font-size: 14px; line-height: 20px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } label.short { margin-top: 0px; margin-bottom: 3px; } label.short-top { margin-top: 0px; } label.short-bottom { margin-bottom: 3px; } label.tall { margin-top: 0px; margin-bottom: 12px; } label.tall-top { margin-top: 0px; } label.tall-bottom { margin-bottom: 12px; } label strong, label .emphasize { font-size: 14px; line-height: 20px; } label .mute { font-size: 14px; line-height: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: 3px; margin-bottom: 0px; font-size: 11.2px; line-height: 16px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .form-help-block.short { margin-top: 1.5px; margin-bottom: 0px; } .form-help-block.short-top { margin-top: 1.5px; } .form-help-block.short-bottom { margin-bottom: 0px; } .form-help-block.tall { margin-top: 6px; margin-bottom: 0px; } .form-help-block.tall-top { margin-top: 6px; } .form-help-block.tall-bottom { margin-bottom: 0px; } .form-help-block strong, .form-help-block .emphasize { font-size: 11.2px; line-height: 16px; } .form-help-block .mute { font-size: 11.2px; line-height: 16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; } .form-control.form-control-select:after { top: 15px; right: 12px; border-width: 6px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ } .form-control-group.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 12px; } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-append { padding-left: 12px; } .form-control-group.form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 17px; height: 23px; padding-top: 3px; padding-bottom: 3px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select select { font-size: 12px; line-height: 17px; height: 23px; padding-top: 3px; padding-bottom: 3px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; } .form-control.form-control-mini.form-control-select:after { top: 9px; right: 12px; border-width: 3px 3px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 17px; height: 32px; padding-top: 7px; padding-bottom: 7px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select select { font-size: 13px; line-height: 17px; height: 32px; padding-top: 7px; padding-bottom: 7px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; } .form-control.form-control-small.form-control-select:after { top: 11px; right: 12px; border-width: 4px 3px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ font-size: 17px; line-height: 20px; height: 48px; padding-top: 14px; padding-bottom: 14px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select select { font-size: 17px; line-height: 20px; height: 48px; padding-top: 14px; padding-bottom: 14px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; } .form-control.form-control-large.form-control-select:after { top: 17px; right: 12px; border-width: 7px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 20px; line-height: 24px; height: 64px; padding-top: 20px; padding-bottom: 20px; padding-left: 13px; padding-right: 13px; border-radius: 6.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select select { font-size: 20px; line-height: 24px; height: 64px; padding-top: 20px; padding-bottom: 20px; padding-left: 13px; padding-right: 13px; border-radius: 6.6px; } .form-control.form-control-jumbo.form-control-select:after { top: 26px; right: 13px; border-width: 10px 8px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: 0px; margin-bottom: 6px; /* ----------------------------------------------------------------------------- Inline ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ } .checkbox.inline, .radio.inline { margin-right: 12px; } .checkbox.short, .radio.short { margin-top: 0px; margin-bottom: 3px; } .checkbox.short-top, .radio.short-top { margin-top: 0px; } .checkbox.short-bottom, .radio.short-bottom { margin-bottom: 3px; } .checkbox.tall, .radio.tall { margin-top: 0px; margin-bottom: 12px; } .checkbox.tall-top, .radio.tall-top { margin-top: 0px; } .checkbox.tall-bottom, .radio.tall-bottom { margin-bottom: 12px; } .checkbox label, .radio label { font-size: 14px; line-height: 20px; padding-left: 18px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .checkbox label input[type="checkbox"], .radio label input[type="checkbox"] { top: 4px; } .checkbox label input[type="radio"], .radio label input[type="radio"] { top: 3px; } .checkbox label strong, .radio label strong, .checkbox label .emphasize, .radio label .emphasize { font-size: 14px; line-height: 20px; } .checkbox label .mute, .radio label .mute { font-size: 14px; line-height: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .form-group.short { margin-top: 0px; margin-bottom: 6px; } .form-group.short-top { margin-top: 0px; } .form-group.short-bottom { margin-bottom: 6px; } .form-group.tall { margin-top: 0px; margin-bottom: 24px; } .form-group.tall-top { margin-top: 0px; } .form-group.tall-bottom { margin-bottom: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: 0px; margin-bottom: 32px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } form.short { margin-top: 0px; margin-bottom: 16px; } form.short-top { margin-top: 0px; } form.short-bottom { margin-bottom: 16px; } form.tall { margin-top: 0px; margin-bottom: 48px; } form.tall-top { margin-top: 0px; } form.tall-bottom { margin-bottom: 48px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: 0px; margin-bottom: 6.6px; font-size: 15.4px; line-height: 22px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } label.short { margin-top: 0px; margin-bottom: 3.3px; } label.short-top { margin-top: 0px; } label.short-bottom { margin-bottom: 3.3px; } label.tall { margin-top: 0px; margin-bottom: 13.2px; } label.tall-top { margin-top: 0px; } label.tall-bottom { margin-bottom: 13.2px; } label strong, label .emphasize { font-size: 15.4px; line-height: 22px; } label .mute { font-size: 15.4px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: 3.3px; margin-bottom: 0px; font-size: 12.32px; line-height: 17.6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .form-help-block.short { margin-top: 1.65px; margin-bottom: 0px; } .form-help-block.short-top { margin-top: 1.65px; } .form-help-block.short-bottom { margin-bottom: 0px; } .form-help-block.tall { margin-top: 6.6px; margin-bottom: 0px; } .form-help-block.tall-top { margin-top: 6.6px; } .form-help-block.tall-bottom { margin-bottom: 0px; } .form-help-block strong, .form-help-block .emphasize { font-size: 12.32px; line-height: 17.6px; } .form-help-block .mute { font-size: 12.32px; line-height: 17.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; } .form-control.form-control-select:after { top: 16px; right: 13px; border-width: 6px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ } .form-control-group.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.33333333px; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.33333333px; } .form-control-group.form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13px; } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13px; } .form-control-group.form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } .form-control-group.form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } .form-control-group.form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 12px; line-height: 17px; height: 23px; padding-top: 3px; padding-bottom: 3px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select select { font-size: 12px; line-height: 17px; height: 23px; padding-top: 3px; padding-bottom: 3px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; } .form-control.form-control-mini.form-control-select:after { top: 9px; right: 13px; border-width: 3px 3px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 17px; height: 32px; padding-top: 7px; padding-bottom: 7px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select select { font-size: 13px; line-height: 17px; height: 32px; padding-top: 7px; padding-bottom: 7px; padding-left: 13px; padding-right: 13px; border-radius: 3.3px; } .form-control.form-control-small.form-control-select:after { top: 13px; right: 13px; border-width: 5px 4px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ font-size: 17px; line-height: 20px; height: 48px; padding-top: 14px; padding-bottom: 14px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select select { font-size: 17px; line-height: 20px; height: 48px; padding-top: 14px; padding-bottom: 14px; padding-left: 13px; padding-right: 13px; border-radius: 4.4px; } .form-control.form-control-large.form-control-select:after { top: 20px; right: 13px; border-width: 8px 6px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 20px; line-height: 24px; height: 64px; padding-top: 20px; padding-bottom: 20px; padding-left: 13px; padding-right: 13px; border-radius: 6.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select select { font-size: 20px; line-height: 24px; height: 64px; padding-top: 20px; padding-bottom: 20px; padding-left: 13px; padding-right: 13px; border-radius: 6.6px; } .form-control.form-control-jumbo.form-control-select:after { top: 26px; right: 13px; border-width: 10px 8px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: 0px; margin-bottom: 6.6px; /* ----------------------------------------------------------------------------- Inline ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ } .checkbox.inline, .radio.inline { margin-right: 13.2px; } .checkbox.short, .radio.short { margin-top: 0px; margin-bottom: 3.3px; } .checkbox.short-top, .radio.short-top { margin-top: 0px; } .checkbox.short-bottom, .radio.short-bottom { margin-bottom: 3.3px; } .checkbox.tall, .radio.tall { margin-top: 0px; margin-bottom: 13.2px; } .checkbox.tall-top, .radio.tall-top { margin-top: 0px; } .checkbox.tall-bottom, .radio.tall-bottom { margin-bottom: 13.2px; } .checkbox label, .radio label { font-size: 15.4px; line-height: 22px; padding-left: 20px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .checkbox label input[type="checkbox"], .radio label input[type="checkbox"] { top: 5px; } .checkbox label input[type="radio"], .radio label input[type="radio"] { top: 4px; } .checkbox label strong, .radio label strong, .checkbox label .emphasize, .radio label .emphasize { font-size: 15.4px; line-height: 22px; } .checkbox label .mute, .radio label .mute { font-size: 15.4px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: 0px; margin-bottom: 16px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .form-group.short { margin-top: 0px; margin-bottom: 8px; } .form-group.short-top { margin-top: 0px; } .form-group.short-bottom { margin-bottom: 8px; } .form-group.tall { margin-top: 0px; margin-bottom: 32px; } .form-group.tall-top { margin-top: 0px; } .form-group.tall-bottom { margin-bottom: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: 0px; margin-bottom: 48px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } form.short { margin-top: 0px; margin-bottom: 24px; } form.short-top { margin-top: 0px; } form.short-bottom { margin-bottom: 24px; } form.tall { margin-top: 0px; margin-bottom: 72px; } form.tall-top { margin-top: 0px; } form.tall-bottom { margin-bottom: 72px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: 0px; margin-bottom: 7.2px; font-size: 16.8px; line-height: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } label.short { margin-top: 0px; margin-bottom: 3.6px; } label.short-top { margin-top: 0px; } label.short-bottom { margin-bottom: 3.6px; } label.tall { margin-top: 0px; margin-bottom: 14.4px; } label.tall-top { margin-top: 0px; } label.tall-bottom { margin-bottom: 14.4px; } label strong, label .emphasize { font-size: 16.8px; line-height: 24px; } label .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: 3.6px; margin-bottom: 0px; font-size: 13.44px; line-height: 19.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .form-help-block.short { margin-top: 1.8px; margin-bottom: 0px; } .form-help-block.short-top { margin-top: 1.8px; } .form-help-block.short-bottom { margin-bottom: 0px; } .form-help-block.tall { margin-top: 7.2px; margin-bottom: 0px; } .form-help-block.tall-top { margin-top: 7.2px; } .form-help-block.tall-bottom { margin-bottom: 0px; } .form-help-block strong, .form-help-block .emphasize { font-size: 13.44px; line-height: 19.2px; } .form-help-block .mute { font-size: 13.44px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; } .form-control.form-control-select:after { top: 17px; right: 14px; border-width: 7px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ } .form-control-group.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Jumbo) ----------------------------------------------------------------------------- */ } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14px; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14px; } .form-control-group.form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14px; } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14px; } .form-control-group.form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 15.42857143px; } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-append { padding-left: 15.42857143px; } .form-control-group.form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14.85714286px; } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14.85714286px; } .form-control-group.form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select select { font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; } .form-control.form-control-mini.form-control-select:after { top: 10px; right: 14px; border-width: 4px 3px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select select { font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; } .form-control.form-control-small.form-control-select:after { top: 15px; right: 15px; border-width: 6px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select select { font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; } .form-control.form-control-large.form-control-select:after { top: 21px; right: 14px; border-width: 8px 7px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 13px; padding-right: 13px; border-radius: 7.2px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select select { font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 13px; padding-right: 13px; border-radius: 7.2px; } .form-control.form-control-jumbo.form-control-select:after { top: 26px; right: 13px; border-width: 10px 8px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Inline ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ } .checkbox.inline, .radio.inline { margin-right: 14.4px; } .checkbox.short, .radio.short { margin-top: 0px; margin-bottom: 3.6px; } .checkbox.short-top, .radio.short-top { margin-top: 0px; } .checkbox.short-bottom, .radio.short-bottom { margin-bottom: 3.6px; } .checkbox.tall, .radio.tall { margin-top: 0px; margin-bottom: 14.4px; } .checkbox.tall-top, .radio.tall-top { margin-top: 0px; } .checkbox.tall-bottom, .radio.tall-bottom { margin-bottom: 14.4px; } .checkbox label, .radio label { font-size: 16.8px; line-height: 24px; padding-left: 24px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .checkbox label input[type="checkbox"], .radio label input[type="checkbox"] { top: 6px; } .checkbox label input[type="radio"], .radio label input[type="radio"] { top: 5px; } .checkbox label strong, .radio label strong, .checkbox label .emphasize, .radio label .emphasize { font-size: 16.8px; line-height: 24px; } .checkbox label .mute, .radio label .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .form-group.short { margin-top: 0px; margin-bottom: 12px; } .form-group.short-top { margin-top: 0px; } .form-group.short-bottom { margin-bottom: 12px; } .form-group.tall { margin-top: 0px; margin-bottom: 48px; } .form-group.tall-top { margin-top: 0px; } .form-group.tall-bottom { margin-bottom: 48px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ form { margin-top: 0px; margin-bottom: 64px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } form.short { margin-top: 0px; margin-bottom: 32px; } form.short-top { margin-top: 0px; } form.short-bottom { margin-bottom: 32px; } form.tall { margin-top: 0px; margin-bottom: 96px; } form.tall-top { margin-top: 0px; } form.tall-bottom { margin-bottom: 96px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Label -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ label { margin-top: 0px; margin-bottom: 7.2px; font-size: 16.8px; line-height: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } label.short { margin-top: 0px; margin-bottom: 3.6px; } label.short-top { margin-top: 0px; } label.short-bottom { margin-bottom: 3.6px; } label.tall { margin-top: 0px; margin-bottom: 14.4px; } label.tall-top { margin-top: 0px; } label.tall-bottom { margin-bottom: 14.4px; } label strong, label .emphasize { font-size: 16.8px; line-height: 24px; } label .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Help Block -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-help-block { margin-top: 3.6px; margin-bottom: 0px; font-size: 13.44px; line-height: 19.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .form-help-block.short { margin-top: 1.8px; margin-bottom: 0px; } .form-help-block.short-top { margin-top: 1.8px; } .form-help-block.short-bottom { margin-bottom: 0px; } .form-help-block.tall { margin-top: 7.2px; margin-bottom: 0px; } .form-help-block.tall-top { margin-top: 7.2px; } .form-help-block.tall-bottom { margin-bottom: 0px; } .form-help-block strong, .form-help-block .emphasize { font-size: 13.44px; line-height: 19.2px; } .form-help-block .mute { font-size: 13.44px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control, html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { /* ----------------------------------------------------------------------------- Form Control Styles ----------------------------------------------------------------------------- */ font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-select select { font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; } .form-control.form-control-select:after { top: 17px; right: 14px; border-width: 7px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control-group { /* ----------------------------------------------------------------------------- Form Control (Nested) ----------------------------------------------------------------------------- */ } .form-control-group.form-control { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (Mini) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (small) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (large) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Form Control (jumbo) ----------------------------------------------------------------------------- */ } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14px; } .form-control-group.form-control .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14px; } .form-control-group.form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14px; } .form-control-group.form-control.form-control-mini .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14px; } .form-control-group.form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 15.42857143px; } .form-control-group.form-control.form-control-small .form-control-group-add-on.form-control-group-add-on-append { padding-left: 15.42857143px; } .form-control-group.form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 14.85714286px; } .form-control-group.form-control.form-control-large .form-control-group-add-on.form-control-group-add-on-append { padding-left: 14.85714286px; } .form-control-group.form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control Add-On ----------------------------------------------------------------------------- */ } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-prepend { padding-right: 13.71428571px; } .form-control-group.form-control.form-control-jumbo .form-control-group-add-on.form-control-group-add-on-append { padding-left: 13.71428571px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Mini) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-mini { /* ----------------------------------------------------------------------------- Form Control (Mini) Styles ----------------------------------------------------------------------------- */ font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-mini.form-control-select select { font-size: 13px; line-height: 19px; height: 25px; padding-top: 3px; padding-bottom: 3px; padding-left: 14px; padding-right: 14px; border-radius: 3.6px; } .form-control.form-control-mini.form-control-select:after { top: 10px; right: 14px; border-width: 4px 3px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Small) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-small { /* ----------------------------------------------------------------------------- Form Control (Small) Styles ----------------------------------------------------------------------------- */ font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-small.form-control-select select { font-size: 14px; line-height: 19px; height: 36px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3.6px; } .form-control.form-control-small.form-control-select:after { top: 15px; right: 15px; border-width: 6px 5px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Large) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-large { /* ----------------------------------------------------------------------------- Form Control (Large) Styles ----------------------------------------------------------------------------- */ font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-large.form-control-select select { font-size: 19px; line-height: 22px; height: 52px; padding-top: 15px; padding-bottom: 15px; padding-left: 14px; padding-right: 14px; border-radius: 4.8px; } .form-control.form-control-large.form-control-select:after { top: 21px; right: 14px; border-width: 8px 7px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Jumbo) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-control.form-control-jumbo { /* ----------------------------------------------------------------------------- Form Control (Jumbo) Styles ----------------------------------------------------------------------------- */ font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 13px; padding-right: 13px; border-radius: 7.2px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Control (Select) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select { /* ----------------------------------------------------------------------------- Select ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Select Arrows ----------------------------------------------------------------------------- */ } .form-control.form-control-jumbo.form-control-select select { font-size: 22px; line-height: 26px; height: 64px; padding-top: 19px; padding-bottom: 19px; padding-left: 13px; padding-right: 13px; border-radius: 7.2px; } .form-control.form-control-jumbo.form-control-select:after { top: 26px; right: 13px; border-width: 10px 8px 0; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Option -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .checkbox, .radio { margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Inline ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Label ----------------------------------------------------------------------------- */ } .checkbox.inline, .radio.inline { margin-right: 14.4px; } .checkbox.short, .radio.short { margin-top: 0px; margin-bottom: 3.6px; } .checkbox.short-top, .radio.short-top { margin-top: 0px; } .checkbox.short-bottom, .radio.short-bottom { margin-bottom: 3.6px; } .checkbox.tall, .radio.tall { margin-top: 0px; margin-bottom: 14.4px; } .checkbox.tall-top, .radio.tall-top { margin-top: 0px; } .checkbox.tall-bottom, .radio.tall-bottom { margin-bottom: 14.4px; } .checkbox label, .radio label { font-size: 16.8px; line-height: 24px; padding-left: 28px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .checkbox label input[type="checkbox"], .radio label input[type="checkbox"] { top: 6px; } .checkbox label input[type="radio"], .radio label input[type="radio"] { top: 5px; } .checkbox label strong, .radio label strong, .checkbox label .emphasize, .radio label .emphasize { font-size: 16.8px; line-height: 24px; } .checkbox label .mute, .radio label .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Form Group -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .form-group { margin-top: 0px; margin-bottom: 32px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ } .form-group.short { margin-top: 0px; margin-bottom: 16px; } .form-group.short-top { margin-top: 0px; } .form-group.short-bottom { margin-bottom: 16px; } .form-group.tall { margin-top: 0px; margin-bottom: 64px; } .form-group.tall-top { margin-top: 0px; } .form-group.tall-bottom { margin-bottom: 64px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/icons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .icon { fill: currentColor; *margin-right: .3em; display: inline-block; vertical-align: middle; /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Positioning ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } .icon svg { width: 100%; height: 100%; } .icon.icon-align-horizontal-center { display: block; text-align: center; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon Styles -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .icon.icon-black { color: #000000; } .icon.icon-white { color: #ffffff; } .icon.icon-blue { color: #2f81f7; } .icon.icon-red { color: #f33745; } .icon.icon-orange { color: #f56753; } .icon.icon-yellow { color: #fedf57; } .icon.icon-green { color: #27c97b; } .icon.icon-purple { color: #9351e5; } .icon.icon-pink { color: #ef468b; } .icon.icon-gold { color: #b08329; } .icon.icon-cyan { color: #20d5ff; } .icon.icon-orchid { color: #c043d7; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-mini { font-size: 16px; line-height: 16px; width: 16px; height: 16px; } .icon.icon-mini:before { line-height: 16px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Mini) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-mini { width: 16px; height: 16px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Small) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-small { font-size: 24px; line-height: 24px; width: 24px; height: 24px; } .icon.icon-small:before { line-height: 24px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Small) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-small { width: 24px; height: 24px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Medium) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-medium { font-size: 32px; line-height: 32px; width: 32px; height: 32px; } .icon.icon-medium:before { line-height: 32px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Medium) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-medium { width: 32px; height: 32px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Large) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-large { font-size: 48px; line-height: 48px; width: 48px; height: 48px; } .icon.icon-large:before { line-height: 48px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Large) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-large { width: 48px; height: 48px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon (Jumbo) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon.icon-jumbo { font-size: 64px; line-height: 64px; width: 64px; height: 64px; } .icon.icon-jumbo:before { line-height: 64px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Icon Sprite (Jumbo) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .icon-sprite.icon-sprite-jumbo { width: 64px; height: 64px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/media.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Images -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ img.image-responsive { display: block; width: 100%; height: auto; } .image-border { position: relative; } .image-border:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/modal/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body.modal-open { overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Backdrop -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; z-index: 7000; background-color: rgba(35, 41, 55, 0.8); } .modal-backdrop.fade { transition: all 0.3s ease; opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.fade.in { opacity: 1; filter: alpha(opacity=100); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { position: fixed; top: 50%; left: 12px; right: 12px; display: block; width: 'auto'; max-height: 100%; margin: 0px; z-index: 7001; box-sizing: border-box; background-clip: padding-box; background: #ffffff; border-width: 4px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 20px 40px 1px rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal:hover, .modal:focus, .modal:active { outline: 0; } .modal.fade { transition: all 0.3s ease; opacity: 0; filter: alpha(opacity=0); transform: scale3d(0.5, 0.5, 0.5); } .modal.fade .modal-close { transform: rotate(-360deg); } .modal.fade.in { opacity: 1; filter: alpha(opacity=100); transform: scale3d(1, 1, 1); } .modal.fade.in .modal-close { transform: rotate(0deg); } .modal .container { width: auto; margin-left: 0px; margin-right: 0px; } .modal .container.container-fluid { margin-left: 0px; margin-right: 0px; } .modal .modal-content { position: relative; } .modal .modal-content:before { content: ''; position: fixed; top: 0px; left: 0px; width: 100%; height: 66px; display: block; background-image: linear-gradient(#ffffff 0%, #ffffff 80%, rgba(255, 255, 255, 0) 100%); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='rgba(255, 255, 255, 0)', GradientType=0); z-index: 2; } .modal .modal-content .ps-scrollbar-x-rail, .modal .modal-content .ps-scrollbar-y-rail { position: fixed; z-index: 3; } .modal .modal-content .modal-content-inner { position: relative; padding-top: 66px; width: 100%; } .modal .modal-close { display: block; position: fixed; top: 12px; left: 50%; z-index: 7002; width: 42px; height: 42px; margin-left: -21px; cursor: pointer; transition: all 0.15s ease; border-radius: 50%; box-sizing: content-box; border: 1px solid rgba(50, 58, 78, 0.2); } .modal .modal-close span { display: none; } .modal .modal-close:before, .modal .modal-close:after { content: ''; display: block; width: 21px; height: 2px; position: absolute; top: 20px; left: 50%; margin-left: -10.5px; transform: rotate(45deg); background-color: #323a4e; opacity: 0.8; filter: alpha(opacity=80); } .modal .modal-close:after { transform: rotate(-45deg); } .modal .modal-close:hover { border: 1px solid rgba(50, 58, 78, 0.6); transform: rotate(90deg); } .modal .modal-close:hover:before, .modal .modal-close:hover:after { opacity: 0.8; filter: alpha(opacity=80); } .modal .modal-close:active { border: 1px solid #9351e5; background: #9351e5; transform: rotate(0deg); } .modal .modal-close:active:before, .modal .modal-close:active:after { background-color: #ffffff; } .modal .modal-header { padding: 24px 24px; box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05); } .modal .modal-body { padding: 24px 24px; } .modal .modal-footer { padding: 24px 24px; background: #f9f9fa; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05); } .modal.modal-fullscreen { width: 100% !important; height: 100% !important; margin: 0px !important; top: 0px !important; left: 0px !important; /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .modal-content .modal-content-inner { padding-top: 66px; padding-bottom: 66px; } .modal.modal-fullscreen .modal-close { top: 12px; border: 1px solid rgba(50, 58, 78, 0.2); } .modal.modal-fullscreen .modal-close:before, .modal.modal-fullscreen .modal-close:after { background-color: #323a4e; opacity: 0.8; filter: alpha(opacity=80); } .modal.modal-fullscreen .modal-close:hover { border: 1px solid rgba(50, 58, 78, 0.6); } .modal.modal-fullscreen .modal-close:hover:before, .modal.modal-fullscreen .modal-close:hover:after { opacity: 0.8; filter: alpha(opacity=80); } .modal.modal-fullscreen .modal-close:active { border: 1px solid #9351e5; background: #9351e5; } .modal.modal-fullscreen .modal-close:active:before, .modal.modal-fullscreen .modal-close:active:after { background-color: #ffffff; } .modal.modal-fullscreen .container { margin-left: auto; margin-right: auto; width: 100%; } .modal.modal-fullscreen .modal-content { height: 100% !important; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; } .modal.modal-fullscreen .modal-content .modal-content-inner { max-height: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { left: 50%; width: 511px; margin: 0px 0px 0px -255.5px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-close { top: -80px; width: 48px; height: 48px; margin-left: -24px; border: 1px solid rgba(255, 255, 255, 0.6); } .modal .modal-close:before, .modal .modal-close:after { width: 24px; top: 23px; margin-left: -12px; background-color: #ffffff; } .modal .modal-close:hover { border: 1px solid #ffffff; } .modal .modal-close:hover:before, .modal .modal-close:hover:after { color: #7641b7; } .modal .modal-close:active { border: 1px solid #9351e5; background: #9351e5; } .modal .modal-close:active:before, .modal .modal-close:active:after { color: #583189; } .modal .modal-content:before { display: none; } .modal .modal-content .modal-content-inner { padding-top: 0px; } .modal .modal-header { padding: 32px 32px; } .modal .modal-body { padding: 32px 32px; } .modal .modal-footer { padding: 32px 32px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .modal-content:before { display: block; height: 64px; } .modal.modal-fullscreen .modal-content .modal-content-inner { padding-top: 64px; padding-bottom: 64px; } .modal.modal-fullscreen .modal-close { top: 16px; } .modal.modal-fullscreen .container { width: 584px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: 644px; margin: 0px 0px 0px -322px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-close { top: -100px; width: 52px; height: 52px; margin-left: -26px; } .modal .modal-close:before, .modal .modal-close:after { width: 26px; top: 25px; margin-left: -13px; } .modal .modal-header { padding: 48px 48px; } .modal .modal-body { padding: 48px 48px; } .modal .modal-footer { padding: 48px 48px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .modal-content:before { height: 76px; } .modal.modal-fullscreen .modal-content .modal-content-inner { padding-top: 76px; padding-bottom: 76px; } .modal.modal-fullscreen .modal-close { top: 24px; } .modal.modal-fullscreen .container { width: 736px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: 770px; margin: 0px 0px 0px -385px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-close { top: -116px; width: 52px; height: 52px; margin-left: -26px; } .modal .modal-close:before, .modal .modal-close:after { width: 26px; top: 25px; margin-left: -13px; } .modal .modal-header { padding: 64px 64px; } .modal .modal-body { padding: 64px 64px; } .modal .modal-footer { padding: 64px 64px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .modal-content:before { height: 116px; } .modal.modal-fullscreen .modal-content .modal-content-inner { padding-top: 116px; padding-bottom: 116px; } .modal.modal-fullscreen .modal-close { top: 32px; } .modal.modal-fullscreen .container { width: 880px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/panels.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { *zoom: 1; position: relative; display: block; box-sizing: border-box; background-clip: padding-box; background: #f9f9fa; margin-top: 0px; margin-bottom: 24px; border-radius: 0px; overflow: hidden; /* ----------------------------------------------------------------------------- Panel (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .panel:before, .panel:after { display: table; content: ""; line-height: 0; } .panel:after { clear: both; } .panel.short, .panel.short-top { margin-top: 0px; } .panel.short, .panel.short-bottom { margin-bottom: 12px; } .panel.tall, .panel.tall-top { margin-top: 0px; } .panel.tall, .panel.tall-bottom { margin-bottom: 36px; } .panel.panel-inverse { background: #232937; /* ----------------------------------------------------------------------------- Panel Header (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer (Inverse) ----------------------------------------------------------------------------- */ } .panel .panel-header { *zoom: 1; box-sizing: border-box; background-clip: padding-box; padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; border-radius: 0px; } .panel .panel-header:before, .panel .panel-header:after { display: table; content: ""; line-height: 0; } .panel .panel-header:after { clear: both; } .panel .panel-header.short { padding-top: 3px; padding-bottom: 3px; } .panel .panel-header.short-top { padding-top: 3px; } .panel .panel-header.short-top { padding-bottom: 3px; } .panel .panel-header.tall { padding-top: 12px; padding-bottom: 12px; } .panel .panel-header.tall-top { padding-top: 12px; } .panel .panel-header.tall-top { padding-bottom: 12px; } .panel .panel-content { *zoom: 1; box-sizing: border-box; background-clip: padding-box; padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px; border-radius: 0px; } .panel .panel-content:before, .panel .panel-content:after { display: table; content: ""; line-height: 0; } .panel .panel-content:after { clear: both; } .panel .panel-content.short { padding-top: 6px; padding-bottom: 6px; } .panel .panel-content.short-top { padding-top: 6px; } .panel .panel-content.short-top { padding-bottom: 6px; } .panel .panel-content.tall { padding-top: 24px; padding-bottom: 24px; } .panel .panel-content.tall-top { padding-top: 24px; } .panel .panel-content.tall-top { padding-bottom: 24px; } .panel .panel-footer { *zoom: 1; box-sizing: border-box; background-clip: padding-box; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.05); border-top-style: solid; padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px; border-radius: 0px; } .panel .panel-footer:before, .panel .panel-footer:after { display: table; content: ""; line-height: 0; } .panel .panel-footer:after { clear: both; } .panel .panel-footer.short { padding-top: 6px; padding-bottom: 6px; } .panel .panel-footer.short-top { padding-top: 6px; } .panel .panel-footer.short-top { padding-bottom: 6px; } .panel .panel-footer.tall { padding-top: 24px; padding-bottom: 24px; } .panel .panel-footer.tall-top { padding-top: 24px; } .panel .panel-footer.tall-top { padding-bottom: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { margin-top: 0px; margin-bottom: 24px; border-radius: 0px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .panel.short, .panel.short-top { margin-top: 0px; } .panel.short, .panel.short-bottom { margin-bottom: 12px; } .panel.tall, .panel.tall-top { margin-top: 0px; } .panel.tall, .panel.tall-bottom { margin-bottom: 36px; } .panel .panel-header { padding-left: 2%; padding-right: 2%; padding-top: 6px; padding-bottom: 6px; border-radius: 0px; } .panel .panel-header.short { padding-top: 3px; padding-bottom: 3px; } .panel .panel-header.short-top { padding-top: 3px; } .panel .panel-header.short-top { padding-bottom: 3px; } .panel .panel-header.tall { padding-top: 12px; padding-bottom: 12px; } .panel .panel-header.tall-top { padding-top: 12px; } .panel .panel-header.tall-top { padding-bottom: 12px; } .panel .panel-content { padding-left: 2%; padding-right: 2%; padding-top: 12px; padding-bottom: 12px; border-radius: 0px; } .panel .panel-content.short { padding-top: 6px; padding-bottom: 6px; } .panel .panel-content.short-top { padding-top: 6px; } .panel .panel-content.short-top { padding-bottom: 6px; } .panel .panel-content.tall { padding-top: 24px; padding-bottom: 24px; } .panel .panel-content.tall-top { padding-top: 24px; } .panel .panel-content.tall-top { padding-bottom: 24px; } .panel .panel-footer { padding-left: 2%; padding-right: 2%; padding-top: 12px; padding-bottom: 12px; border-radius: 0px; } .panel .panel-footer.short { padding-top: 6px; padding-bottom: 6px; } .panel .panel-footer.short-top { padding-top: 6px; } .panel .panel-footer.short-top { padding-bottom: 6px; } .panel .panel-footer.tall { padding-top: 24px; padding-bottom: 24px; } .panel .panel-footer.tall-top { padding-top: 24px; } .panel .panel-footer.tall-top { padding-bottom: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { margin-top: 0px; margin-bottom: 32px; border-radius: 0px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .panel.short, .panel.short-top { margin-top: 0px; } .panel.short, .panel.short-bottom { margin-bottom: 16px; } .panel.tall, .panel.tall-top { margin-top: 0px; } .panel.tall, .panel.tall-bottom { margin-bottom: 48px; } .panel .panel-header { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; border-radius: 0px; } .panel .panel-header.short { padding-top: 4px; padding-bottom: 4px; } .panel .panel-header.short-top { padding-top: 4px; } .panel .panel-header.short-top { padding-bottom: 4px; } .panel .panel-header.tall { padding-top: 16px; padding-bottom: 16px; } .panel .panel-header.tall-top { padding-top: 16px; } .panel .panel-header.tall-top { padding-bottom: 16px; } .panel .panel-content { padding-left: 16px; padding-right: 16px; padding-top: 16px; padding-bottom: 16px; border-radius: 0px; } .panel .panel-content.short { padding-top: 8px; padding-bottom: 8px; } .panel .panel-content.short-top { padding-top: 8px; } .panel .panel-content.short-top { padding-bottom: 8px; } .panel .panel-content.tall { padding-top: 32px; padding-bottom: 32px; } .panel .panel-content.tall-top { padding-top: 32px; } .panel .panel-content.tall-top { padding-bottom: 32px; } .panel .panel-footer { padding-left: 16px; padding-right: 16px; padding-top: 16px; padding-bottom: 16px; border-radius: 0px; } .panel .panel-footer.short { padding-top: 8px; padding-bottom: 8px; } .panel .panel-footer.short-top { padding-top: 8px; } .panel .panel-footer.short-top { padding-bottom: 8px; } .panel .panel-footer.tall { padding-top: 32px; padding-bottom: 32px; } .panel .panel-footer.tall-top { padding-top: 32px; } .panel .panel-footer.tall-top { padding-bottom: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { margin-top: 0px; margin-bottom: 48px; border-radius: 0px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .panel.short, .panel.short-top { margin-top: 0px; } .panel.short, .panel.short-bottom { margin-bottom: 24px; } .panel.tall, .panel.tall-top { margin-top: 0px; } .panel.tall, .panel.tall-bottom { margin-bottom: 72px; } .panel .panel-header { padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px; border-radius: 0px; } .panel .panel-header.short { padding-top: 6px; padding-bottom: 6px; } .panel .panel-header.short-top { padding-top: 6px; } .panel .panel-header.short-top { padding-bottom: 6px; } .panel .panel-header.tall { padding-top: 24px; padding-bottom: 24px; } .panel .panel-header.tall-top { padding-top: 24px; } .panel .panel-header.tall-top { padding-bottom: 24px; } .panel .panel-content { padding-left: 24px; padding-right: 24px; padding-top: 24px; padding-bottom: 24px; border-radius: 0px; } .panel .panel-content.short { padding-top: 12px; padding-bottom: 12px; } .panel .panel-content.short-top { padding-top: 12px; } .panel .panel-content.short-top { padding-bottom: 12px; } .panel .panel-content.tall { padding-top: 48px; padding-bottom: 48px; } .panel .panel-content.tall-top { padding-top: 48px; } .panel .panel-content.tall-top { padding-bottom: 48px; } .panel .panel-footer { padding-left: 24px; padding-right: 24px; padding-top: 24px; padding-bottom: 24px; border-radius: 0px; } .panel .panel-footer.short { padding-top: 12px; padding-bottom: 12px; } .panel .panel-footer.short-top { padding-top: 12px; } .panel .panel-footer.short-top { padding-bottom: 12px; } .panel .panel-footer.tall { padding-top: 48px; padding-bottom: 48px; } .panel .panel-footer.tall-top { padding-top: 48px; } .panel .panel-footer.tall-top { padding-bottom: 48px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { margin-top: 0px; margin-bottom: 64px; border-radius: 0px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .panel.short, .panel.short-top { margin-top: 0px; } .panel.short, .panel.short-bottom { margin-bottom: 32px; } .panel.tall, .panel.tall-top { margin-top: 0px; } .panel.tall, .panel.tall-bottom { margin-bottom: 96px; } .panel .panel-header { padding-left: 32px; padding-right: 32px; padding-top: 16px; padding-bottom: 16px; border-radius: 0px; } .panel .panel-header.short { padding-top: 8px; padding-bottom: 8px; } .panel .panel-header.short-top { padding-top: 8px; } .panel .panel-header.short-top { padding-bottom: 8px; } .panel .panel-header.tall { padding-top: 32px; padding-bottom: 32px; } .panel .panel-header.tall-top { padding-top: 32px; } .panel .panel-header.tall-top { padding-bottom: 32px; } .panel .panel-content { padding-left: 32px; padding-right: 32px; padding-top: 32px; padding-bottom: 32px; border-radius: 0px; } .panel .panel-content.short { padding-top: 16px; padding-bottom: 16px; } .panel .panel-content.short-top { padding-top: 16px; } .panel .panel-content.short-top { padding-bottom: 16px; } .panel .panel-content.tall { padding-top: 64px; padding-bottom: 64px; } .panel .panel-content.tall-top { padding-top: 64px; } .panel .panel-content.tall-top { padding-bottom: 64px; } .panel .panel-footer { padding-left: 32px; padding-right: 32px; padding-top: 32px; padding-bottom: 32px; border-radius: 0px; } .panel .panel-footer.short { padding-top: 16px; padding-bottom: 16px; } .panel .panel-footer.short-top { padding-top: 16px; } .panel .panel-footer.short-top { padding-bottom: 16px; } .panel .panel-footer.tall { padding-top: 64px; padding-bottom: 64px; } .panel .panel-footer.tall-top { padding-top: 64px; } .panel .panel-footer.tall-top { padding-bottom: 64px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/tables.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Basic Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ table { border-collapse: collapse; } th, td { text-align: left; border-collapse: collapse; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .table { width: 100%; max-width: 100%; margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table (Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ border-radius: 4px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (All) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Outer Borders) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Outer Borders, Rows) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Outer Borders, Columns) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Inner Borders) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Inner Borders, Rows) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Borderless (Inner Borders, Columns) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.short { margin-top: 0px; margin-bottom: 12px; } .table.short-top { margin-top: 0px; } .table.short-bottom { margin-bottom: 12px; } .table.tall { margin-top: 0px; margin-bottom: 36px; } .table.tall-top { margin-top: 0px; } .table.tall-bottom { margin-bottom: 36px; } .table > thead tr, .table > tbody tr, .table > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th, .table > tbody tr > th, .table > tfoot tr > th, .table > thead tr > td, .table > tbody tr > td, .table > tfoot tr > td { /* ----------------------------------------------------------------------------- Table Cell (Default) State: Normal ----------------------------------------------------------------------------- */ padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; text-rendering: optimizelegibility; background: none; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.05); border-top-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.05); border-right-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.05); border-bottom-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.05); border-left-style: solid; /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.highlight, .table > tbody tr > th.highlight, .table > tfoot tr > th.highlight, .table > thead tr > td.highlight, .table > tbody tr > td.highlight, .table > tfoot tr > td.highlight { background: rgba(0, 0, 0, 0.025); } .table > thead tr > th.disabled, .table > tbody tr > th.disabled, .table > tfoot tr > th.disabled, .table > thead tr > td.disabled, .table > tbody tr > td.disabled, .table > tfoot tr > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.selected, .table > tbody tr > th.selected, .table > tfoot tr > th.selected, .table > thead tr > td.selected, .table > tbody tr > td.selected, .table > tfoot tr > td.selected { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ color: #232937; background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.selected.highlight, .table > tbody tr > th.selected.highlight, .table > tfoot tr > th.selected.highlight, .table > thead tr > td.selected.highlight, .table > tbody tr > td.selected.highlight, .table > tfoot tr > td.selected.highlight { background: rgba(0, 0, 0, 0.125); } .table > thead tr > th.selected.disabled, .table > tbody tr > th.selected.disabled, .table > tfoot tr > th.selected.disabled, .table > thead tr > td.selected.disabled, .table > tbody tr > td.selected.disabled, .table > tfoot tr > td.selected.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.selected > th, .table > tbody tr.selected > th, .table > tfoot tr.selected > th, .table > thead tr.selected > td, .table > tbody tr.selected > td, .table > tfoot tr.selected > td { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ color: #232937; background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.selected > th.highlight, .table > tbody tr.selected > th.highlight, .table > tfoot tr.selected > th.highlight, .table > thead tr.selected > td.highlight, .table > tbody tr.selected > td.highlight, .table > tfoot tr.selected > td.highlight { background: rgba(0, 0, 0, 0.125); } .table > thead tr.selected > th.disabled, .table > tbody tr.selected > th.disabled, .table > tfoot tr.selected > th.disabled, .table > thead tr.selected > td.disabled, .table > tbody tr.selected > td.disabled, .table > tfoot tr.selected > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.success, .table > tbody tr > th.success, .table > tfoot tr > th.success, .table > thead tr > td.success, .table > tbody tr > td.success, .table > tfoot tr > td.success { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: #e9faf2; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.success.highlight, .table > tbody tr > th.success.highlight, .table > tfoot tr > th.success.highlight, .table > thead tr > td.success.highlight, .table > tbody tr > td.success.highlight, .table > tfoot tr > td.success.highlight { background: #dff7eb; } .table > thead tr > th.success.disabled, .table > tbody tr > th.success.disabled, .table > tfoot tr > th.success.disabled, .table > thead tr > td.success.disabled, .table > tbody tr > td.success.disabled, .table > tfoot tr > td.success.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.success > th, .table > tbody tr.success > th, .table > tfoot tr.success > th, .table > thead tr.success > td, .table > tbody tr.success > td, .table > tfoot tr.success > td { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: #e9faf2; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.success > th.highlight, .table > tbody tr.success > th.highlight, .table > tfoot tr.success > th.highlight, .table > thead tr.success > td.highlight, .table > tbody tr.success > td.highlight, .table > tfoot tr.success > td.highlight { background: #dff7eb; } .table > thead tr.success > th.disabled, .table > tbody tr.success > th.disabled, .table > tfoot tr.success > th.disabled, .table > thead tr.success > td.disabled, .table > tbody tr.success > td.disabled, .table > tfoot tr.success > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.warning, .table > tbody tr > th.warning, .table > tfoot tr > th.warning, .table > thead tr > td.warning, .table > tbody tr > td.warning, .table > tfoot tr > td.warning { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fef0ee; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.warning.highlight, .table > tbody tr > th.warning.highlight, .table > tfoot tr > th.warning.highlight, .table > thead tr > td.warning.highlight, .table > tbody tr > td.warning.highlight, .table > tfoot tr > td.warning.highlight { background: #fee8e5; } .table > thead tr > th.warning.disabled, .table > tbody tr > th.warning.disabled, .table > tfoot tr > th.warning.disabled, .table > thead tr > td.warning.disabled, .table > tbody tr > td.warning.disabled, .table > tfoot tr > td.warning.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.warning > th, .table > tbody tr.warning > th, .table > tfoot tr.warning > th, .table > thead tr.warning > td, .table > tbody tr.warning > td, .table > tfoot tr.warning > td { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fef0ee; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.warning > th.highlight, .table > tbody tr.warning > th.highlight, .table > tfoot tr.warning > th.highlight, .table > thead tr.warning > td.highlight, .table > tbody tr.warning > td.highlight, .table > tfoot tr.warning > td.highlight { background: #fee8e5; } .table > thead tr.warning > th.disabled, .table > tbody tr.warning > th.disabled, .table > tfoot tr.warning > th.disabled, .table > thead tr.warning > td.disabled, .table > tbody tr.warning > td.disabled, .table > tfoot tr.warning > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.danger, .table > tbody tr > th.danger, .table > tfoot tr > th.danger, .table > thead tr > td.danger, .table > tbody tr > td.danger, .table > tfoot tr > td.danger { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #feebec; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.danger.highlight, .table > tbody tr > th.danger.highlight, .table > tfoot tr > th.danger.highlight, .table > thead tr > td.danger.highlight, .table > tbody tr > td.danger.highlight, .table > tfoot tr > td.danger.highlight { background: #fde1e3; } .table > thead tr > th.danger.disabled, .table > tbody tr > th.danger.disabled, .table > tfoot tr > th.danger.disabled, .table > thead tr > td.danger.disabled, .table > tbody tr > td.danger.disabled, .table > tfoot tr > td.danger.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.danger > th, .table > tbody tr.danger > th, .table > tfoot tr.danger > th, .table > thead tr.danger > td, .table > tbody tr.danger > td, .table > tfoot tr.danger > td { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #feebec; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.danger > th.highlight, .table > tbody tr.danger > th.highlight, .table > tfoot tr.danger > th.highlight, .table > thead tr.danger > td.highlight, .table > tbody tr.danger > td.highlight, .table > tfoot tr.danger > td.highlight { background: #fde1e3; } .table > thead tr.danger > th.disabled, .table > tbody tr.danger > th.disabled, .table > tfoot tr.danger > th.disabled, .table > thead tr.danger > td.disabled, .table > tbody tr.danger > td.disabled, .table > tfoot tr.danger > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th { /* ----------------------------------------------------------------------------- Table Header Cell (Default) State: Normal ----------------------------------------------------------------------------- */ padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; color: #232937; font-weight: 500; text-rendering: optimizelegibility; background: rgba(0, 0, 0, 0.05); border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; /* ----------------------------------------------------------------------------- Table Header Cell (Default, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.highlight { background: rgba(0, 0, 0, 0.075); } .table > thead tr > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.selected { /* ----------------------------------------------------------------------------- Table Header Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ color: #232937; background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.selected.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.selected > th { /* ----------------------------------------------------------------------------- Table Header Cell (Selected) State: Normal ----------------------------------------------------------------------------- */ color: #232937; background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.selected > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.success { /* ----------------------------------------------------------------------------- Table Header Cell (Success) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: #dff7eb; /* ----------------------------------------------------------------------------- Table Header Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.success.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.success > th { /* ----------------------------------------------------------------------------- Table Header Cell (Success) State: Normal ----------------------------------------------------------------------------- */ color: #27c97b; background: #dff7eb; /* ----------------------------------------------------------------------------- Table Header Cell (Success, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.success > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.warning { /* ----------------------------------------------------------------------------- Table Header Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fee8e5; /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.warning.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.warning > th { /* ----------------------------------------------------------------------------- Table Header Cell (Warning) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fee8e5; /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.warning > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr > th.danger { /* ----------------------------------------------------------------------------- Table Header Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #fde1e3; /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr > th.danger.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > thead tr.danger > th { /* ----------------------------------------------------------------------------- Table Header Cell (Danger) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #fde1e3; /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table > thead tr.danger > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.inverse > thead tr, .table.inverse > tbody tr, .table.inverse > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Selected, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Warning, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th, .table.inverse > tbody tr > th, .table.inverse > tfoot tr > th, .table.inverse > thead tr > td, .table.inverse > tbody tr > td, .table.inverse > tfoot tr > td { color: #848995; border-top-color: rgba(255, 255, 255, 0.05); border-right-color: rgba(255, 255, 255, 0.05); border-bottom-color: rgba(255, 255, 255, 0.05); border-left-color: rgba(255, 255, 255, 0.05); /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.highlight, .table.inverse > tbody tr > th.highlight, .table.inverse > tfoot tr > th.highlight, .table.inverse > thead tr > td.highlight, .table.inverse > tbody tr > td.highlight, .table.inverse > tfoot tr > td.highlight { background: rgba(255, 255, 255, 0.05); } .table.inverse > thead tr > th.disabled, .table.inverse > tbody tr > th.disabled, .table.inverse > tfoot tr > th.disabled, .table.inverse > thead tr > td.disabled, .table.inverse > tbody tr > td.disabled, .table.inverse > tfoot tr > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.selected, .table.inverse > tbody tr > th.selected, .table.inverse > tfoot tr > th.selected, .table.inverse > thead tr > td.selected, .table.inverse > tbody tr > td.selected, .table.inverse > tfoot tr > td.selected { /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #adb0b8; background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.selected.highlight, .table.inverse > tbody tr > th.selected.highlight, .table.inverse > tfoot tr > th.selected.highlight, .table.inverse > thead tr > td.selected.highlight, .table.inverse > tbody tr > td.selected.highlight, .table.inverse > tfoot tr > td.selected.highlight { background: rgba(255, 255, 255, 0.125); } .table.inverse > thead tr > th.selected.disabled, .table.inverse > tbody tr > th.selected.disabled, .table.inverse > tfoot tr > th.selected.disabled, .table.inverse > thead tr > td.selected.disabled, .table.inverse > tbody tr > td.selected.disabled, .table.inverse > tfoot tr > td.selected.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.selected > th, .table.inverse > tbody tr.selected > th, .table.inverse > tfoot tr.selected > th, .table.inverse > thead tr.selected > td, .table.inverse > tbody tr.selected > td, .table.inverse > tfoot tr.selected > td { /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #adb0b8; background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.selected > th.highlight, .table.inverse > tbody tr.selected > th.highlight, .table.inverse > tfoot tr.selected > th.highlight, .table.inverse > thead tr.selected > td.highlight, .table.inverse > tbody tr.selected > td.highlight, .table.inverse > tfoot tr.selected > td.highlight { background: rgba(255, 255, 255, 0.125); } .table.inverse > thead tr.selected > th.disabled, .table.inverse > tbody tr.selected > th.disabled, .table.inverse > tfoot tr.selected > th.disabled, .table.inverse > thead tr.selected > td.disabled, .table.inverse > tbody tr.selected > td.disabled, .table.inverse > tfoot tr.selected > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.success, .table.inverse > tbody tr > th.success, .table.inverse > tfoot tr > th.success, .table.inverse > thead tr > td.success, .table.inverse > tbody tr > td.success, .table.inverse > tfoot tr > td.success { /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #27c97b; /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.success.highlight, .table.inverse > tbody tr > th.success.highlight, .table.inverse > tfoot tr > th.success.highlight, .table.inverse > thead tr > td.success.highlight, .table.inverse > tbody tr > td.success.highlight, .table.inverse > tfoot tr > td.success.highlight { background: #21ab69; } .table.inverse > thead tr > th.success.disabled, .table.inverse > tbody tr > th.success.disabled, .table.inverse > tfoot tr > th.success.disabled, .table.inverse > thead tr > td.success.disabled, .table.inverse > tbody tr > td.success.disabled, .table.inverse > tfoot tr > td.success.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.success > th, .table.inverse > tbody tr.success > th, .table.inverse > tfoot tr.success > th, .table.inverse > thead tr.success > td, .table.inverse > tbody tr.success > td, .table.inverse > tfoot tr.success > td { /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #27c97b; /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.success > th.highlight, .table.inverse > tbody tr.success > th.highlight, .table.inverse > tfoot tr.success > th.highlight, .table.inverse > thead tr.success > td.highlight, .table.inverse > tbody tr.success > td.highlight, .table.inverse > tfoot tr.success > td.highlight { background: #21ab69; } .table.inverse > thead tr.success > th.disabled, .table.inverse > tbody tr.success > th.disabled, .table.inverse > tfoot tr.success > th.disabled, .table.inverse > thead tr.success > td.disabled, .table.inverse > tbody tr.success > td.disabled, .table.inverse > tfoot tr.success > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.warning, .table.inverse > tbody tr > th.warning, .table.inverse > tfoot tr > th.warning, .table.inverse > thead tr > td.warning, .table.inverse > tbody tr > td.warning, .table.inverse > tfoot tr > td.warning { /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f56753; /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.warning.highlight, .table.inverse > tbody tr > th.warning.highlight, .table.inverse > tfoot tr > th.warning.highlight, .table.inverse > thead tr > td.warning.highlight, .table.inverse > tbody tr > td.warning.highlight, .table.inverse > tfoot tr > td.warning.highlight { background: #d05847; } .table.inverse > thead tr > th.warning.disabled, .table.inverse > tbody tr > th.warning.disabled, .table.inverse > tfoot tr > th.warning.disabled, .table.inverse > thead tr > td.warning.disabled, .table.inverse > tbody tr > td.warning.disabled, .table.inverse > tfoot tr > td.warning.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.warning > th, .table.inverse > tbody tr.warning > th, .table.inverse > tfoot tr.warning > th, .table.inverse > thead tr.warning > td, .table.inverse > tbody tr.warning > td, .table.inverse > tfoot tr.warning > td { /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f56753; /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.warning > th.highlight, .table.inverse > tbody tr.warning > th.highlight, .table.inverse > tfoot tr.warning > th.highlight, .table.inverse > thead tr.warning > td.highlight, .table.inverse > tbody tr.warning > td.highlight, .table.inverse > tfoot tr.warning > td.highlight { background: #d05847; } .table.inverse > thead tr.warning > th.disabled, .table.inverse > tbody tr.warning > th.disabled, .table.inverse > tfoot tr.warning > th.disabled, .table.inverse > thead tr.warning > td.disabled, .table.inverse > tbody tr.warning > td.disabled, .table.inverse > tfoot tr.warning > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.danger, .table.inverse > tbody tr > th.danger, .table.inverse > tfoot tr > th.danger, .table.inverse > thead tr > td.danger, .table.inverse > tbody tr > td.danger, .table.inverse > tfoot tr > td.danger { /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f33745; /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.danger.highlight, .table.inverse > tbody tr > th.danger.highlight, .table.inverse > tfoot tr > th.danger.highlight, .table.inverse > thead tr > td.danger.highlight, .table.inverse > tbody tr > td.danger.highlight, .table.inverse > tfoot tr > td.danger.highlight { background: #cf2f3b; } .table.inverse > thead tr > th.danger.disabled, .table.inverse > tbody tr > th.danger.disabled, .table.inverse > tfoot tr > th.danger.disabled, .table.inverse > thead tr > td.danger.disabled, .table.inverse > tbody tr > td.danger.disabled, .table.inverse > tfoot tr > td.danger.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.danger > th, .table.inverse > tbody tr.danger > th, .table.inverse > tfoot tr.danger > th, .table.inverse > thead tr.danger > td, .table.inverse > tbody tr.danger > td, .table.inverse > tfoot tr.danger > td { /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #f33745; /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.danger > th.highlight, .table.inverse > tbody tr.danger > th.highlight, .table.inverse > tfoot tr.danger > th.highlight, .table.inverse > thead tr.danger > td.highlight, .table.inverse > tbody tr.danger > td.highlight, .table.inverse > tfoot tr.danger > td.highlight { background: #cf2f3b; } .table.inverse > thead tr.danger > th.disabled, .table.inverse > tbody tr.danger > th.disabled, .table.inverse > tfoot tr.danger > th.disabled, .table.inverse > thead tr.danger > td.disabled, .table.inverse > tbody tr.danger > td.disabled, .table.inverse > tfoot tr.danger > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Selected, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Success, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Warning, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Danger, Inverse) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th { /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #848995; background: rgba(255, 255, 255, 0.05); border-bottom-color: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Default, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.highlight { background: rgba(255, 255, 255, 0.075); } .table.inverse > thead tr > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.selected { /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #d6d8dc; background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.selected.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.selected > th { /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #d6d8dc; background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Selected, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.selected > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.success { /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #27c97b; /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.success.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.success > th { /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #ffffff; background: #27c97b; /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Success, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.success > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.warning { /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fee8e5; /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.warning.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.warning > th { /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f56753; background: #fee8e5; /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Warning, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.warning > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr > th.danger { /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #fde1e3; /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr > th.danger.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.inverse > thead tr.danger > th { /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse) State: Normal ----------------------------------------------------------------------------- */ color: #f33745; background: #fde1e3; /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Highlight) State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Header Cell (Danger, Inverse, Disabled) State: Normal ----------------------------------------------------------------------------- */ } .table.inverse > thead tr.danger > th.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table > tbody tr:first-child td:first-child, .table > tbody tr:first-child th:first-child { border-top-left-radius: 4px; } .table > tbody tr:first-child td:last-child, .table > tbody tr:first-child th:last-child { border-top-right-radius: 4px; } .table > tbody tr:last-child td:first-child, .table > tbody tr:last-child th:first-child { border-bottom-left-radius: 4px; } .table > tbody tr:last-child td:last-child, .table > tbody tr:last-child th:last-child { border-bottom-right-radius: 4px; } .table > thead tr:first-child th:first-child { border-top-left-radius: 4px; } .table > thead tr:first-child th:last-child { border-top-right-radius: 4px; } .table > thead + tbody tr:first-child th, .table > thead + tbody tr:first-child td { border-radius: 0px !important; } .table.table-hover { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Hover -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Inverse -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td { /* ----------------------------------------------------------------------------- Table Cell (Default) State: Hover ----------------------------------------------------------------------------- */ background: rgba(0, 0, 0, 0.025); /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.highlight { background: rgba(0, 0, 0, 0.05); } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.selected, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.selected { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.selected.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.selected.highlight { background: rgba(0, 0, 0, 0.125); } .table.table-hover > tbody tr:not(.table-row-hover-disabled).selected:hover > th, .table.table-hover > tbody tr:not(.table-row-hover-disabled).selected:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ background: rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled).selected:hover > th.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled).selected:hover > td.highlight { background: rgba(0, 0, 0, 0.125); } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.success, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.success { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Hover ----------------------------------------------------------------------------- */ background: #e9faf2; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.success.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.success.highlight { background: #dff7eb; } .table.table-hover > tbody tr:not(.table-row-hover-disabled).success:hover > th, .table.table-hover > tbody tr:not(.table-row-hover-disabled).success:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Hover ----------------------------------------------------------------------------- */ background: #e9faf2; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled).success:hover > th.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled).success:hover > td.highlight { background: #dff7eb; } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.warning, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.warning { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ background: #fef0ee; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.warning.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.warning.highlight { background: #fee8e5; } .table.table-hover > tbody tr:not(.table-row-hover-disabled).warning:hover > th, .table.table-hover > tbody tr:not(.table-row-hover-disabled).warning:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ background: #fef0ee; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled).warning:hover > th.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled).warning:hover > td.highlight { background: #fee8e5; } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.danger, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.danger { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ background: #feebec; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > th.danger.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled):hover > td.danger.highlight { background: #fde1e3; } .table.table-hover > tbody tr:not(.table-row-hover-disabled).danger:hover > th, .table.table-hover > tbody tr:not(.table-row-hover-disabled).danger:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ background: #feebec; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover > tbody tr:not(.table-row-hover-disabled).danger:hover > th.highlight, .table.table-hover > tbody tr:not(.table-row-hover-disabled).danger:hover > td.highlight { background: #fde1e3; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Selected) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Success) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Warning) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Danger) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td { /* ----------------------------------------------------------------------------- Table Cell (Default) State: Hover ----------------------------------------------------------------------------- */ background: rgba(255, 255, 255, 0.05); /* ----------------------------------------------------------------------------- Table Cell (Default, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Default, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.highlight { background: rgba(255, 255, 255, 0.1); } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.disabled, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.disabled { opacity: 0.5; filter: alpha(opacity=50); } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.selected, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.selected { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.selected.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.selected.highlight { background: rgba(255, 255, 255, 0.125); } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).selected:hover > th, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).selected:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Selected) State: Hover ----------------------------------------------------------------------------- */ background: rgba(255, 255, 255, 0.1); /* ----------------------------------------------------------------------------- Table Cell (Selected, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Selected, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).selected:hover > th.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).selected:hover > td.highlight { background: rgba(255, 255, 255, 0.125); } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.success, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.success { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Hover ----------------------------------------------------------------------------- */ background: #3dce88; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.success.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.success.highlight { background: #25bf75; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).success:hover > th, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).success:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Success) State: Hover ----------------------------------------------------------------------------- */ background: #3dce88; /* ----------------------------------------------------------------------------- Table Cell (Success, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Success, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).success:hover > th.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).success:hover > td.highlight { background: #25bf75; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.warning, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.warning { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ background: #f67664; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.warning.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.warning.highlight { background: #e9624f; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).warning:hover > th, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).warning:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Warning) State: Hover ----------------------------------------------------------------------------- */ background: #f67664; /* ----------------------------------------------------------------------------- Table Cell (Warning, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Warning, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).warning:hover > th.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).warning:hover > td.highlight { background: #e9624f; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.danger, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.danger { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ background: #f44b58; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > th.danger.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled):hover > td.danger.highlight { background: #f4414e; } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).danger:hover > th, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).danger:hover > td { /* ----------------------------------------------------------------------------- Table Cell (Danger) State: Hover ----------------------------------------------------------------------------- */ background: #f44b58; /* ----------------------------------------------------------------------------- Table Cell (Danger, Highlight) State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Table Cell (Danger, Disabled) State: Hover ----------------------------------------------------------------------------- */ } .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).danger:hover > th.highlight, .table.table-hover.inverse > tbody tr:not(.table-row-hover-disabled).danger:hover > td.highlight { background: #f4414e; } .table.table-borderless > thead tr th { border-top: 0px; border-left: 0px; border-right: 0px; } .table.table-borderless > tbody tr td, .table.table-borderless > tfoot tr td, .table.table-borderless > tbody tr th, .table.table-borderless > tfoot tr th { border: 0px; } .table.table-borderless-outer > thead tr:first-child th { border-top: 0px; } .table.table-borderless-outer > thead tr th:first-child { border-left: 0px; } .table.table-borderless-outer > thead tr th:last-child { border-right: 0px; } .table.table-borderless-outer > tbody tr:first-child td, .table.table-borderless-outer > tfoot tr:first-child td, .table.table-borderless-outer > tbody tr:first-child th, .table.table-borderless-outer > tfoot tr:first-child th { border-top: 0px; } .table.table-borderless-outer > tbody tr:last-child td, .table.table-borderless-outer > tfoot tr:last-child td, .table.table-borderless-outer > tbody tr:last-child th, .table.table-borderless-outer > tfoot tr:last-child th { border-bottom: 0px; } .table.table-borderless-outer > tbody tr td:first-child, .table.table-borderless-outer > tfoot tr td:first-child, .table.table-borderless-outer > tbody tr th:first-child, .table.table-borderless-outer > tfoot tr th:first-child { border-left: 0px; } .table.table-borderless-outer > tbody tr td:last-child, .table.table-borderless-outer > tfoot tr td:last-child, .table.table-borderless-outer > tbody tr th:last-child, .table.table-borderless-outer > tfoot tr th:last-child { border-right: 0px; } .table.table-borderless-outer-rows > thead tr:first-child th { border-top: 0px; } .table.table-borderless-outer-rows > tbody tr:first-child td, .table.table-borderless-outer-rows > tfoot tr:first-child td, .table.table-borderless-outer-rows > tbody tr:first-child th, .table.table-borderless-outer-rows > tfoot tr:first-child th { border-top: 0px; } .table.table-borderless-outer-rows > tbody tr:last-child td, .table.table-borderless-outer-rows > tfoot tr:last-child td, .table.table-borderless-outer-rows > tbody tr:last-child th, .table.table-borderless-outer-rows > tfoot tr:last-child th { border-bottom: 0px; } .table.table-borderless-outer-columns > thead tr th:first-child { border-left: 0px; } .table.table-borderless-outer-columns > thead tr th:last-child { border-right: 0px; } .table.table-borderless-outer-columns > tbody tr td:first-child, .table.table-borderless-outer-columns > tfoot tr td:first-child, .table.table-borderless-outer-columns > tbody tr th:first-child, .table.table-borderless-outer-columns > tfoot tr th:first-child { border-left: 0px; } .table.table-borderless-outer-columns > tbody tr td:last-child, .table.table-borderless-outer-columns > tfoot tr td:last-child, .table.table-borderless-outer-columns > tbody tr th:last-child, .table.table-borderless-outer-columns > tfoot tr th:last-child { border-right: 0px; } .table.table-borderless-inner > thead tr:not(:first-child) td, .table.table-borderless-inner > tbody tr:not(:first-child) td, .table.table-borderless-inner > tfoot tr:not(:first-child) td, .table.table-borderless-inner > thead tr:not(:first-child) th, .table.table-borderless-inner > tbody tr:not(:first-child) th, .table.table-borderless-inner > tfoot tr:not(:first-child) th { border-top: 0px; } .table.table-borderless-inner > thead tr:not(:last-child) td, .table.table-borderless-inner > tbody tr:not(:last-child) td, .table.table-borderless-inner > tfoot tr:not(:last-child) td, .table.table-borderless-inner > thead tr:not(:last-child) th, .table.table-borderless-inner > tbody tr:not(:last-child) th, .table.table-borderless-inner > tfoot tr:not(:last-child) th { border-bottom: 0px; } .table.table-borderless-inner > thead tr td:not(:first-child), .table.table-borderless-inner > tbody tr td:not(:first-child), .table.table-borderless-inner > tfoot tr td:not(:first-child), .table.table-borderless-inner > thead tr th:not(:first-child), .table.table-borderless-inner > tbody tr th:not(:first-child), .table.table-borderless-inner > tfoot tr th:not(:first-child) { border-left: 0px; } .table.table-borderless-inner > thead tr td:not(:last-child), .table.table-borderless-inner > tbody tr td:not(:last-child), .table.table-borderless-inner > tfoot tr td:not(:last-child), .table.table-borderless-inner > thead tr th:not(:last-child), .table.table-borderless-inner > tbody tr th:not(:last-child), .table.table-borderless-inner > tfoot tr th:not(:last-child) { border-right: 0px; } .table.table-borderless-inner > thead + tbody tr:first-child td, .table.table-borderless-inner > thead + tbody tr:first-child th { border-top: 0px; } .table.table-borderless-inner-rows > thead tr:not(:first-child) td, .table.table-borderless-inner-rows > tbody tr:not(:first-child) td, .table.table-borderless-inner-rows > tfoot tr:not(:first-child) td, .table.table-borderless-inner-rows > thead tr:not(:first-child) th, .table.table-borderless-inner-rows > tbody tr:not(:first-child) th, .table.table-borderless-inner-rows > tfoot tr:not(:first-child) th { border-top: 0px; } .table.table-borderless-inner-rows > thead tr:not(:last-child) td, .table.table-borderless-inner-rows > tbody tr:not(:last-child) td, .table.table-borderless-inner-rows > tfoot tr:not(:last-child) td, .table.table-borderless-inner-rows > thead tr:not(:last-child) th, .table.table-borderless-inner-rows > tbody tr:not(:last-child) th, .table.table-borderless-inner-rows > tfoot tr:not(:last-child) th { border-bottom: 0px; } .table > thead + tbody tr:first-child td, .table > thead + tbody tr:first-child th { border-top: 0px; } .table.table-borderless-inner-columns > thead tr td:not(:first-child), .table.table-borderless-inner-columns > tbody tr td:not(:first-child), .table.table-borderless-inner-columns > tfoot tr td:not(:first-child), .table.table-borderless-inner-columns > thead tr th:not(:first-child), .table.table-borderless-inner-columns > tbody tr th:not(:first-child), .table.table-borderless-inner-columns > tfoot tr th:not(:first-child) { border-left: 0px; } .table.table-borderless-inner-columns > thead tr td:not(:last-child), .table.table-borderless-inner-columns > tbody tr td:not(:last-child), .table.table-borderless-inner-columns > tfoot tr td:not(:last-child), .table.table-borderless-inner-columns > thead tr th:not(:last-child), .table.table-borderless-inner-columns > tbody tr th:not(:last-child), .table.table-borderless-inner-columns > tfoot tr th:not(:last-child) { border-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .table { margin-top: 0px; margin-bottom: 24px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ border-radius: 4px; } .table.short { margin-top: 0px; margin-bottom: 12px; } .table.short-top { margin-top: 0px; } .table.short-bottom { margin-bottom: 12px; } .table.tall { margin-top: 0px; margin-bottom: 36px; } .table.tall-top { margin-top: 0px; } .table.tall-bottom { margin-bottom: 36px; } .table > thead tr, .table > tbody tr, .table > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th, .table > tbody tr > th, .table > tfoot tr > th, .table > thead tr > td, .table > tbody tr > td, .table > tfoot tr > td { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .table > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; } .table > tbody tr:first-child td:first-child, .table > tbody tr:first-child th:first-child { border-top-left-radius: 4px; } .table > tbody tr:first-child td:last-child, .table > tbody tr:first-child th:last-child { border-top-right-radius: 4px; } .table > tbody tr:last-child td:first-child, .table > tbody tr:last-child th:first-child { border-bottom-left-radius: 4px; } .table > tbody tr:last-child td:last-child, .table > tbody tr:last-child th:last-child { border-bottom-right-radius: 4px; } .table > thead tr:first-child th:first-child { border-top-left-radius: 4px; } .table > thead tr:first-child th:last-child { border-top-right-radius: 4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .table { margin-top: 0px; margin-bottom: 32px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ border-radius: 4.4px; } .table.short { margin-top: 0px; margin-bottom: 16px; } .table.short-top { margin-top: 0px; } .table.short-bottom { margin-bottom: 16px; } .table.tall { margin-top: 0px; margin-bottom: 48px; } .table.tall-top { margin-top: 0px; } .table.tall-bottom { margin-bottom: 48px; } .table > thead tr, .table > tbody tr, .table > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th, .table > tbody tr > th, .table > tfoot tr > th, .table > thead tr > td, .table > tbody tr > td, .table > tfoot tr > td { padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; } .table > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th { padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; } .table > tbody tr:first-child td:first-child, .table > tbody tr:first-child th:first-child { border-top-left-radius: 4.4px; } .table > tbody tr:first-child td:last-child, .table > tbody tr:first-child th:last-child { border-top-right-radius: 4.4px; } .table > tbody tr:last-child td:first-child, .table > tbody tr:last-child th:first-child { border-bottom-left-radius: 4.4px; } .table > tbody tr:last-child td:last-child, .table > tbody tr:last-child th:last-child { border-bottom-right-radius: 4.4px; } .table > thead tr:first-child th:first-child { border-top-left-radius: 4.4px; } .table > thead tr:first-child th:last-child { border-top-right-radius: 4.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .table { margin-top: 0px; margin-bottom: 48px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ border-radius: 4.8px; } .table.short { margin-top: 0px; margin-bottom: 24px; } .table.short-top { margin-top: 0px; } .table.short-bottom { margin-bottom: 24px; } .table.tall { margin-top: 0px; margin-bottom: 72px; } .table.tall-top { margin-top: 0px; } .table.tall-bottom { margin-bottom: 72px; } .table > thead tr, .table > tbody tr, .table > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th, .table > tbody tr > th, .table > tfoot tr > th, .table > thead tr > td, .table > tbody tr > td, .table > tfoot tr > td { padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; } .table > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th { padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; } .table > tbody tr:first-child td:first-child, .table > tbody tr:first-child th:first-child { border-top-left-radius: 4.8px; } .table > tbody tr:first-child td:last-child, .table > tbody tr:first-child th:last-child { border-top-right-radius: 4.8px; } .table > tbody tr:last-child td:first-child, .table > tbody tr:last-child th:first-child { border-bottom-left-radius: 4.8px; } .table > tbody tr:last-child td:last-child, .table > tbody tr:last-child th:last-child { border-bottom-right-radius: 4.8px; } .table > thead tr:first-child th:first-child { border-top-left-radius: 4.8px; } .table > thead tr:first-child th:last-child { border-top-right-radius: 4.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .table { margin-top: 0px; margin-bottom: 64px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cells -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Border Radius -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ border-radius: 4.8px; } .table.short { margin-top: 0px; margin-bottom: 32px; } .table.short-top { margin-top: 0px; } .table.short-bottom { margin-bottom: 32px; } .table.tall { margin-top: 0px; margin-bottom: 96px; } .table.tall-top { margin-top: 0px; } .table.tall-bottom { margin-bottom: 96px; } .table > thead tr, .table > tbody tr, .table > tfoot tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th, .table > tbody tr > th, .table > tfoot tr > th, .table > thead tr > td, .table > tbody tr > td, .table > tfoot tr > td { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; } .table > thead tr { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Table Header Cell (Default) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .table > thead tr > th { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; } .table > tbody tr:first-child td:first-child, .table > tbody tr:first-child th:first-child { border-top-left-radius: 4.8px; } .table > tbody tr:first-child td:last-child, .table > tbody tr:first-child th:last-child { border-top-right-radius: 4.8px; } .table > tbody tr:last-child td:first-child, .table > tbody tr:last-child th:first-child { border-bottom-left-radius: 4.8px; } .table > tbody tr:last-child td:last-child, .table > tbody tr:last-child th:last-child { border-bottom-right-radius: 4.8px; } .table > thead tr:first-child th:first-child { border-top-left-radius: 4.8px; } .table > thead tr:first-child th:last-child { border-top-right-radius: 4.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px; text-transform: none; text-shadow: none; /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } body a { color: #9351e5; text-decoration: none; } body a:hover { color: #7641b7; text-decoration: underline; } body a:active { color: #583189; text-decoration: none; } body a:disabled { color: #583189; text-decoration: none; } body strong, body .emphasize { color: #5b6171; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; text-transform: none; text-shadow: none; } body .mute { color: #adb0b8; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 200; line-height: 20px; text-transform: none; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header Styles -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6 { display: block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Alignment & Transformation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .text-align-left { text-align: left !important; } .text-align-right { text-align: right !important; } .text-align-center { text-align: center !important; } .text-align-justify { text-align: justify !important; } .text-nowrap { white-space: nowrap !important; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px; text-transform: none; text-shadow: none; margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } p.short { margin-top: 0px; margin-bottom: 6px; } p.short-top { margin-top: 0px; } p.short-bottom { margin-bottom: 6px; } p.tall { margin-top: 0px; margin-bottom: 24px; } p.tall-top { margin-top: 0px; } p.tall-bottom { margin-bottom: 24px; } p a { color: #9351e5; text-decoration: none; } p a:hover { color: #7641b7; text-decoration: underline; } p a:active { color: #583189; text-decoration: none; } p a:disabled { color: #583189; text-decoration: none; } p strong, p .emphasize { color: #5b6171; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; text-transform: none; text-shadow: none; } p .mute { color: #adb0b8; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 200; line-height: 20px; text-transform: none; text-shadow: none; } p.inverse { color: #848995; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } p.inverse strong, p.inverse .emphasize { color: #d6d8dc; text-shadow: none; } p.inverse .mute { color: #5b6171; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small, .wp-caption-text { color: #999da7; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; font-style: normal; font-weight: 400; line-height: 16px; text-transform: none; text-shadow: none; margin-top: 0px; margin-bottom: 6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .small.short { margin-top: 0px; margin-bottom: 3px; } .small.short-top { margin-top: 0px; } .small.short-bottom { margin-bottom: 3px; } .small.tall { margin-top: 0px; margin-bottom: 12px; } .small.tall-top { margin-top: 0px; } .small.tall-bottom { margin-bottom: 12px; } .small strong, .small .emphasize { color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; font-style: normal; font-weight: 700; line-height: 16px; text-transform: none; text-shadow: none; } .small .mute { color: #c2c4ca; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; font-style: normal; font-weight: 200; line-height: 16px; text-transform: none; text-shadow: none; } .small.inverse { color: #848995; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .small.inverse strong, .small.inverse .emphasize { color: #d6d8dc; text-shadow: none; } .small.inverse .mute { color: #14171f; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16.8px; font-style: normal; font-weight: 300; line-height: 22px; text-transform: none; text-shadow: none; margin-top: 0px; margin-bottom: 18px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } .lead.short { margin-top: 0px; margin-bottom: 9px; } .lead.short-top { margin-top: 0px; } .lead.short-bottom { margin-bottom: 9px; } .lead.tall { margin-top: 0px; margin-bottom: 36px; } .lead.tall-top { margin-top: 0px; } .lead.tall-bottom { margin-bottom: 36px; } .lead strong, .lead .emphasize { color: #191d27; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16.8px; font-style: normal; font-weight: 500; line-height: 22px; text-transform: none; text-shadow: none; } .lead .mute { color: #2d3446; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16.8px; font-style: normal; font-weight: 200; line-height: 22px; text-transform: none; text-shadow: none; } .lead.inverse { color: #c2c4ca; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } .lead.inverse strong, .lead.inverse .emphasize { color: #ffffff; text-shadow: none; } .lead.inverse .mute { color: #848995; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { color: #1e232f; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 42px; font-style: normal; font-weight: 700; line-height: 35px; text-transform: uppercase; text-shadow: none; margin-top: 87.0912px; margin-bottom: 43.5456px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h1.short, .h1.short { margin-top: 43.5456px; margin-bottom: 21.7728px; } h1.short-top, .h1.short-top { margin-top: 43.5456px; } h1.short-bottom, .h1.short-bottom { margin-bottom: 21.7728px; } h1.tall, .h1.tall { margin-top: 174.1824px; margin-bottom: 87.0912px; } h1.tall-top, .h1.tall-top { margin-top: 174.1824px; } h1.tall-bottom, .h1.tall-bottom { margin-bottom: 87.0912px; } h1 strong, .h1 strong, h1 .emphasize, .h1 .emphasize { color: #1e232f; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 42px; font-style: normal; font-weight: 900; line-height: 35px; text-transform: uppercase; text-shadow: none; } h1 .mute, .h1 .mute { color: #848995; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 42px; font-style: normal; font-weight: 200; line-height: 35px; text-transform: uppercase; text-shadow: none; } h1.inverse, .h1.inverse { color: #ffffff; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h1.inverse strong, .h1.inverse strong, h1.inverse .emphasize, .h1.inverse .emphasize { color: #c2c4ca; text-shadow: none; } h1.inverse .mute, .h1.inverse .mute { color: #2d3446; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { color: #323a4e; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30.8px; font-style: normal; font-weight: 200; line-height: 32.2px; text-transform: none; text-shadow: none; margin-top: 43.5456px; margin-bottom: 31.104px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h2.short, .h2.short { margin-top: 21.7728px; margin-bottom: 15.552px; } h2.short-top, .h2.short-top { margin-top: 21.7728px; } h2.short-bottom, .h2.short-bottom { margin-bottom: 15.552px; } h2.tall, .h2.tall { margin-top: 87.0912px; margin-bottom: 62.208px; } h2.tall-top, .h2.tall-top { margin-top: 87.0912px; } h2.tall-bottom, .h2.tall-bottom { margin-bottom: 62.208px; } h2 strong, .h2 strong, h2 .emphasize, .h2 .emphasize { color: #050608; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30.8px; font-style: normal; font-weight: 700; line-height: 32.2px; text-transform: none; text-shadow: none; } h2 .mute, .h2 .mute { color: #474e60; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30.8px; font-style: normal; font-weight: 200; line-height: 32.2px; text-transform: none; text-shadow: none; } h2.inverse, .h2.inverse { color: #ffffff; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h2.inverse strong, .h2.inverse strong, h2.inverse .emphasize, .h2.inverse .emphasize { color: #adb0b8; text-shadow: none; } h2.inverse .mute, .h2.inverse .mute { color: #282e3e; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { color: #323a4e; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22.4px; font-style: normal; font-weight: 500; line-height: 21px; text-transform: uppercase; text-shadow: none; margin-top: 31.104px; margin-bottom: 20.736px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h3.short, .h3.short { margin-top: 15.552px; margin-bottom: 10.368px; } h3.short-top, .h3.short-top { margin-top: 15.552px; } h3.short-bottom, .h3.short-bottom { margin-bottom: 10.368px; } h3.tall, .h3.tall { margin-top: 62.208px; margin-bottom: 41.472px; } h3.tall-top, .h3.tall-top { margin-top: 62.208px; } h3.tall-bottom, .h3.tall-bottom { margin-bottom: 41.472px; } h3 strong, .h3 strong, h3 .emphasize, .h3 .emphasize { color: #0a0c10; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22.4px; font-style: normal; font-weight: 700; line-height: 21px; text-transform: uppercase; text-shadow: none; } h3 .mute, .h3 .mute { color: #5b6171; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22.4px; font-style: normal; font-weight: 200; line-height: 21px; text-transform: uppercase; text-shadow: none; } h3.inverse, .h3.inverse { color: #d6d8dc; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h3.inverse strong, .h3.inverse strong, h3.inverse .emphasize, .h3.inverse .emphasize { color: #999da7; text-shadow: none; } h3.inverse .mute, .h3.inverse .mute { color: #232937; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { color: #5b6171; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18.2px; font-style: normal; font-weight: 300; line-height: 22px; text-transform: none; text-shadow: none; margin-top: 20.736px; margin-bottom: 17.28px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h4.short, .h4.short { margin-top: 10.368px; margin-bottom: 8.64px; } h4.short-top, .h4.short-top { margin-top: 10.368px; } h4.short-bottom, .h4.short-bottom { margin-bottom: 8.64px; } h4.tall, .h4.tall { margin-top: 41.472px; margin-bottom: 34.56px; } h4.tall-top, .h4.tall-top { margin-top: 41.472px; } h4.tall-bottom, .h4.tall-bottom { margin-bottom: 34.56px; } h4 strong, .h4 strong, h4 .emphasize, .h4 .emphasize { color: #0f1117; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18.2px; font-style: normal; font-weight: 700; line-height: 22px; text-transform: none; text-shadow: none; } h4 .mute, .h4 .mute { color: #707583; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18.2px; font-style: normal; font-weight: 200; line-height: 22px; text-transform: none; text-shadow: none; } h4.inverse, .h4.inverse { color: #adb0b8; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h4.inverse strong, .h4.inverse strong, h4.inverse .emphasize, .h4.inverse .emphasize { color: #848995; text-shadow: none; } h4.inverse .mute, .h4.inverse .mute { color: #1e232f; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { color: #323a4e; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; text-transform: normal; text-shadow: none; margin-top: 17.28px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h5.short, .h5.short { margin-top: 8.64px; margin-bottom: 7.2px; } h5.short-top, .h5.short-top { margin-top: 8.64px; } h5.short-bottom, .h5.short-bottom { margin-bottom: 7.2px; } h5.tall, .h5.tall { margin-top: 34.56px; margin-bottom: 28.8px; } h5.tall-top, .h5.tall-top { margin-top: 34.56px; } h5.tall-bottom, .h5.tall-bottom { margin-bottom: 28.8px; } h5 strong, .h5 strong, h5 .emphasize, .h5 .emphasize { color: #14171f; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 16px; text-transform: normal; text-shadow: none; } h5 .mute, .h5 .mute { color: #848995; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 200; line-height: 16px; text-transform: normal; text-shadow: none; } h5.inverse, .h5.inverse { color: #848995; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h5.inverse strong, .h5.inverse strong, h5.inverse .emphasize, .h5.inverse .emphasize { color: #707583; text-shadow: none; } h5.inverse .mute, .h5.inverse .mute { color: #191d27; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { color: #5b6171; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; text-transform: uppercase; text-shadow: none; margin-top: 14.4px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } h6.short, .h6.short { margin-top: 7.2px; margin-bottom: 6px; } h6.short-top, .h6.short-top { margin-top: 7.2px; } h6.short-bottom, .h6.short-bottom { margin-bottom: 6px; } h6.tall, .h6.tall { margin-top: 28.8px; margin-bottom: 24px; } h6.tall-top, .h6.tall-top { margin-top: 28.8px; } h6.tall-bottom, .h6.tall-bottom { margin-bottom: 24px; } h6 strong, .h6 strong, h6 .emphasize, .h6 .emphasize { color: #191d27; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 16px; text-transform: uppercase; text-shadow: none; } h6 .mute, .h6 .mute { color: #999da7; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 200; line-height: 16px; text-transform: uppercase; text-shadow: none; } h6.inverse, .h6.inverse { color: #848995; text-shadow: none; /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } h6.inverse strong, .h6.inverse strong, h6.inverse .emphasize, .h6.inverse .emphasize { color: #5b6171; text-shadow: none; } h6.inverse .mute, .h6.inverse .mute { color: #14171f; text-shadow: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { padding: 0px; list-style: none; margin-top: 0px; margin-bottom: 12px; position: relative; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Unstyled List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } ul.short, ol.short { margin-top: 0px; margin-bottom: 6px; } ul.short-top, ol.short-top { margin-top: 0px; } ul.short-bottom, ol.short-bottom { margin-bottom: 6px; } ul.tall, ol.tall { margin-top: 0px; margin-bottom: 24px; } ul.tall-top, ol.tall-top { margin-top: 0px; } ul.tall-bottom, ol.tall-bottom { margin-bottom: 24px; } ul li, ol li { margin-bottom: 6px; padding-left: 21px; position: relative; /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ } ul li:before, ol li:before { content: ''; position: absolute; top: 8px; left: 0px; display: block; width: 5px; height: 5px; background-color: #707583; border-radius: 5px; } ul li:last-child, ol li:last-child { margin-bottom: 0px; } ul li > ul, ol li > ul, ul li > ol, ol li > ol { margin-top: 6px; margin-bottom: 6px; } ul > ul, ol > ul, ul > ol, ol > ol { padding-left: 12px; } ul.list-unstyled > li, ol.list-unstyled > li { padding-left: 0px; } ul.list-unstyled > li:before, ol.list-unstyled > li:before { display: none; } ul.list-inline, ol.list-inline { margin-top: -6px; margin-left: -12px; *zoom: 1; } ul.list-inline:before, ol.list-inline:before, ul.list-inline:after, ol.list-inline:after { display: table; content: ""; line-height: 0; } ul.list-inline:after, ol.list-inline:after { clear: both; } ul.list-inline > li, ol.list-inline > li { padding-left: 0px; float: left; display: block; margin-top: 6px; margin-left: 12px; margin-bottom: 0px; } ul.list-inline > li:before, ol.list-inline > li:before { display: none; } ul.inverse, ol.inverse { color: #848995; text-shadow: none; /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ } ul.inverse li:before, ol.inverse li:before { background-color: #848995; } ul.inverse strong, ol.inverse strong, ul.inverse .emphasize, ol.inverse .emphasize { color: #d6d8dc; text-shadow: none; } ul.inverse .mute, ol.inverse .mute { color: #5b6171; text-shadow: none; } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { counter-reset: li; /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ } ol li { padding-left: 21px; } ol li:before { content: counter(li) "."; counter-increment: li; text-align: left; height: 20px; background: none; top: 0px; border-radius: none; } ol li ol.a li:before { content: counter(li, lower-alpha) "."; } ol li ol.A li:before { content: counter(li, upper-alpha) "."; } ol li ol.i li:before { content: counter(li, lower-roman) "."; } ol li ol.I li:before { content: counter(li, upper-roman) "."; } ol.a li:before { content: counter(li, lower-alpha) "."; } ol.A li:before { content: counter(li, upper-alpha) "."; } ol.i li:before { content: counter(li, lower-roman) "."; } ol.I li:before { content: counter(li, upper-roman) "."; } ol.inverse { /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ } ol.inverse li:before { color: #848995; background: none; width: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: 14px; line-height: 20px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } body strong, body .emphasize { font-size: 14px; line-height: 20px; } body .mute { font-size: 14px; line-height: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: 14px; line-height: 20px; margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } p.short { margin-top: 0px; margin-bottom: 6px; } p.short-top { margin-top: 0px; } p.short-bottom { margin-bottom: 6px; } p.tall { margin-top: 0px; margin-bottom: 24px; } p.tall-top { margin-top: 0px; } p.tall-bottom { margin-bottom: 24px; } p strong, p .emphasize { font-size: 14px; line-height: 20px; } p .mute { font-size: 14px; line-height: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small, .wp-caption-text { font-size: 11.2px; line-height: 16px; margin-top: 0px; margin-bottom: 6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .small.short { margin-top: 0px; margin-bottom: 3px; } .small.short-top { margin-top: 0px; } .small.short-bottom { margin-bottom: 3px; } .small.tall { margin-top: 0px; margin-bottom: 12px; } .small.tall-top { margin-top: 0px; } .small.tall-bottom { margin-bottom: 12px; } .small strong, .small .emphasize { font-size: 11.2px; line-height: 16px; } .small .mute { font-size: 11.2px; line-height: 16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: 16.8px; line-height: 22px; margin-top: 0px; margin-bottom: 18px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .lead.short { margin-top: 0px; margin-bottom: 9px; } .lead.short-top { margin-top: 0px; } .lead.short-bottom { margin-bottom: 9px; } .lead.tall { margin-top: 0px; margin-bottom: 36px; } .lead.tall-top { margin-top: 0px; } .lead.tall-bottom { margin-bottom: 36px; } .lead strong, .lead .emphasize { font-size: 16.8px; line-height: 22px; } .lead .mute { font-size: 16.8px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: 42px; line-height: 35px; margin-top: 87.0912px; margin-bottom: 43.5456px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h1.short, .h1.short { margin-top: 43.5456px; margin-bottom: 21.7728px; } h1.short-top, .h1.short-top { margin-top: 43.5456px; } h1.short-bottom, .h1.short-bottom { margin-bottom: 21.7728px; } h1.tall, .h1.tall { margin-top: 174.1824px; margin-bottom: 87.0912px; } h1.tall-top, .h1.tall-top { margin-top: 174.1824px; } h1.tall-bottom, .h1.tall-bottom { margin-bottom: 87.0912px; } h1 strong, .h1 strong, h1 .emphasize, .h1 .emphasize { font-size: 42px; line-height: 35px; } h1 .mute, .h1 .mute { font-size: 42px; line-height: 35px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: 30.8px; line-height: 32.2px; margin-top: 43.5456px; margin-bottom: 31.104px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h2.short, .h2.short { margin-top: 21.7728px; margin-bottom: 15.552px; } h2.short-top, .h2.short-top { margin-top: 21.7728px; } h2.short-bottom, .h2.short-bottom { margin-bottom: 15.552px; } h2.tall, .h2.tall { margin-top: 87.0912px; margin-bottom: 62.208px; } h2.tall-top, .h2.tall-top { margin-top: 87.0912px; } h2.tall-bottom, .h2.tall-bottom { margin-bottom: 62.208px; } h2 strong, .h2 strong, h2 .emphasize, .h2 .emphasize { font-size: 30.8px; line-height: 32.2px; } h2 .mute, .h2 .mute { font-size: 30.8px; line-height: 32.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: 22.4px; line-height: 21px; margin-top: 31.104px; margin-bottom: 20.736px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h3.short, .h3.short { margin-top: 15.552px; margin-bottom: 10.368px; } h3.short-top, .h3.short-top { margin-top: 15.552px; } h3.short-bottom, .h3.short-bottom { margin-bottom: 10.368px; } h3.tall, .h3.tall { margin-top: 62.208px; margin-bottom: 41.472px; } h3.tall-top, .h3.tall-top { margin-top: 62.208px; } h3.tall-bottom, .h3.tall-bottom { margin-bottom: 41.472px; } h3 strong, .h3 strong, h3 .emphasize, .h3 .emphasize { font-size: 22.4px; line-height: 21px; } h3 .mute, .h3 .mute { font-size: 22.4px; line-height: 21px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: 18.2px; line-height: 22px; margin-top: 20.736px; margin-bottom: 17.28px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h4.short, .h4.short { margin-top: 10.368px; margin-bottom: 8.64px; } h4.short-top, .h4.short-top { margin-top: 10.368px; } h4.short-bottom, .h4.short-bottom { margin-bottom: 8.64px; } h4.tall, .h4.tall { margin-top: 41.472px; margin-bottom: 34.56px; } h4.tall-top, .h4.tall-top { margin-top: 41.472px; } h4.tall-bottom, .h4.tall-bottom { margin-bottom: 34.56px; } h4 strong, .h4 strong, h4 .emphasize, .h4 .emphasize { font-size: 18.2px; line-height: 22px; } h4 .mute, .h4 .mute { font-size: 18.2px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: 14px; line-height: 16px; margin-top: 17.28px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h5.short, .h5.short { margin-top: 8.64px; margin-bottom: 7.2px; } h5.short-top, .h5.short-top { margin-top: 8.64px; } h5.short-bottom, .h5.short-bottom { margin-bottom: 7.2px; } h5.tall, .h5.tall { margin-top: 34.56px; margin-bottom: 28.8px; } h5.tall-top, .h5.tall-top { margin-top: 34.56px; } h5.tall-bottom, .h5.tall-bottom { margin-bottom: 28.8px; } h5 strong, .h5 strong, h5 .emphasize, .h5 .emphasize { font-size: 14px; line-height: 16px; } h5 .mute, .h5 .mute { font-size: 14px; line-height: 16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: 14px; line-height: 16px; margin-top: 14.4px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h6.short, .h6.short { margin-top: 7.2px; margin-bottom: 6px; } h6.short-top, .h6.short-top { margin-top: 7.2px; } h6.short-bottom, .h6.short-bottom { margin-bottom: 6px; } h6.tall, .h6.tall { margin-top: 28.8px; margin-bottom: 24px; } h6.tall-top, .h6.tall-top { margin-top: 28.8px; } h6.tall-bottom, .h6.tall-bottom { margin-bottom: 24px; } h6 strong, .h6 strong, h6 .emphasize, .h6 .emphasize { font-size: 14px; line-height: 16px; } h6 .mute, .h6 .mute { font-size: 14px; line-height: 16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: 0px; margin-bottom: 12px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ } ul.short, ol.short { margin-top: 0px; margin-bottom: 6px; } ul.short-top, ol.short-top { margin-top: 0px; } ul.short-bottom, ol.short-bottom { margin-bottom: 6px; } ul.tall, ol.tall { margin-top: 0px; margin-bottom: 24px; } ul.tall-top, ol.tall-top { margin-top: 0px; } ul.tall-bottom, ol.tall-bottom { margin-bottom: 24px; } ul li, ol li { margin-bottom: 6px; padding-left: 24px; /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ } ul li:before, ol li:before { top: 7px; width: 5px; height: 5px; border-radius: 5px; } ul li > ul, ol li > ul, ul li > ol, ol li > ol { margin-top: 6px; margin-bottom: 6px; } ul > ul, ol > ul, ul > ol, ol > ol { padding-left: 12px; } ul.list-inline, ol.list-inline { margin-top: -6px; margin-left: -12px; } ul.list-inline > li, ol.list-inline > li { margin-top: 6px; margin-left: 12px; } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol li { padding-left: 24px; } ol li:before { top: 0px; width: auto; height: 20px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: 15.4px; line-height: 22px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } body strong, body .emphasize { font-size: 15.4px; line-height: 22px; } body .mute { font-size: 15.4px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: 15.4px; line-height: 22px; margin-top: 0px; margin-bottom: 13.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } p.short { margin-top: 0px; margin-bottom: 6.6px; } p.short-top { margin-top: 0px; } p.short-bottom { margin-bottom: 6.6px; } p.tall { margin-top: 0px; margin-bottom: 26.4px; } p.tall-top { margin-top: 0px; } p.tall-bottom { margin-bottom: 26.4px; } p strong, p .emphasize { font-size: 15.4px; line-height: 22px; } p .mute { font-size: 15.4px; line-height: 22px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small, .wp-caption-text { font-size: 12.32px; line-height: 17.6px; margin-top: 0px; margin-bottom: 6.6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .small.short { margin-top: 0px; margin-bottom: 3.3px; } .small.short-top { margin-top: 0px; } .small.short-bottom { margin-bottom: 3.3px; } .small.tall { margin-top: 0px; margin-bottom: 13.2px; } .small.tall-top { margin-top: 0px; } .small.tall-bottom { margin-bottom: 13.2px; } .small strong, .small .emphasize { font-size: 12.32px; line-height: 17.6px; } .small .mute { font-size: 12.32px; line-height: 17.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: 18.48px; line-height: 24.2px; margin-top: 0px; margin-bottom: 19.8px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .lead.short { margin-top: 0px; margin-bottom: 9.9px; } .lead.short-top { margin-top: 0px; } .lead.short-bottom { margin-bottom: 9.9px; } .lead.tall { margin-top: 0px; margin-bottom: 39.6px; } .lead.tall-top { margin-top: 0px; } .lead.tall-bottom { margin-bottom: 39.6px; } .lead strong, .lead .emphasize { font-size: 18.48px; line-height: 24.2px; } .lead .mute { font-size: 18.48px; line-height: 24.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: 46.2px; line-height: 38.5px; margin-top: 95.80032px; margin-bottom: 47.90016px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h1.short, .h1.short { margin-top: 47.90016px; margin-bottom: 23.95008px; } h1.short-top, .h1.short-top { margin-top: 47.90016px; } h1.short-bottom, .h1.short-bottom { margin-bottom: 23.95008px; } h1.tall, .h1.tall { margin-top: 191.60064px; margin-bottom: 95.80032px; } h1.tall-top, .h1.tall-top { margin-top: 191.60064px; } h1.tall-bottom, .h1.tall-bottom { margin-bottom: 95.80032px; } h1 strong, .h1 strong, h1 .emphasize, .h1 .emphasize { font-size: 46.2px; line-height: 38.5px; } h1 .mute, .h1 .mute { font-size: 46.2px; line-height: 38.5px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: 33.88px; line-height: 35.42px; margin-top: 47.90016px; margin-bottom: 34.2144px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h2.short, .h2.short { margin-top: 23.95008px; margin-bottom: 17.1072px; } h2.short-top, .h2.short-top { margin-top: 23.95008px; } h2.short-bottom, .h2.short-bottom { margin-bottom: 17.1072px; } h2.tall, .h2.tall { margin-top: 95.80032px; margin-bottom: 68.4288px; } h2.tall-top, .h2.tall-top { margin-top: 95.80032px; } h2.tall-bottom, .h2.tall-bottom { margin-bottom: 68.4288px; } h2 strong, .h2 strong, h2 .emphasize, .h2 .emphasize { font-size: 33.88px; line-height: 35.42px; } h2 .mute, .h2 .mute { font-size: 33.88px; line-height: 35.42px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: 27.104px; line-height: 24.255px; margin-top: 34.2144px; margin-bottom: 22.8096px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h3.short, .h3.short { margin-top: 17.1072px; margin-bottom: 11.4048px; } h3.short-top, .h3.short-top { margin-top: 17.1072px; } h3.short-bottom, .h3.short-bottom { margin-bottom: 11.4048px; } h3.tall, .h3.tall { margin-top: 68.4288px; margin-bottom: 45.6192px; } h3.tall-top, .h3.tall-top { margin-top: 68.4288px; } h3.tall-bottom, .h3.tall-bottom { margin-bottom: 45.6192px; } h3 strong, .h3 strong, h3 .emphasize, .h3 .emphasize { font-size: 27.104px; line-height: 24.255px; } h3 .mute, .h3 .mute { font-size: 27.104px; line-height: 24.255px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: 20.02px; line-height: 24.2px; margin-top: 22.8096px; margin-bottom: 19.008px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h4.short, .h4.short { margin-top: 11.4048px; margin-bottom: 9.504px; } h4.short-top, .h4.short-top { margin-top: 11.4048px; } h4.short-bottom, .h4.short-bottom { margin-bottom: 9.504px; } h4.tall, .h4.tall { margin-top: 45.6192px; margin-bottom: 38.016px; } h4.tall-top, .h4.tall-top { margin-top: 45.6192px; } h4.tall-bottom, .h4.tall-bottom { margin-bottom: 38.016px; } h4 strong, .h4 strong, h4 .emphasize, .h4 .emphasize { font-size: 20.02px; line-height: 24.2px; } h4 .mute, .h4 .mute { font-size: 20.02px; line-height: 24.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: 15.4px; line-height: 17.6px; margin-top: 19.008px; margin-bottom: 15.84px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h5.short, .h5.short { margin-top: 9.504px; margin-bottom: 7.92px; } h5.short-top, .h5.short-top { margin-top: 9.504px; } h5.short-bottom, .h5.short-bottom { margin-bottom: 7.92px; } h5.tall, .h5.tall { margin-top: 38.016px; margin-bottom: 31.68px; } h5.tall-top, .h5.tall-top { margin-top: 38.016px; } h5.tall-bottom, .h5.tall-bottom { margin-bottom: 31.68px; } h5 strong, .h5 strong, h5 .emphasize, .h5 .emphasize { font-size: 15.4px; line-height: 17.6px; } h5 .mute, .h5 .mute { font-size: 15.4px; line-height: 17.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: 15.4px; line-height: 17.6px; margin-top: 15.84px; margin-bottom: 13.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h6.short, .h6.short { margin-top: 7.92px; margin-bottom: 6.6px; } h6.short-top, .h6.short-top { margin-top: 7.92px; } h6.short-bottom, .h6.short-bottom { margin-bottom: 6.6px; } h6.tall, .h6.tall { margin-top: 31.68px; margin-bottom: 26.4px; } h6.tall-top, .h6.tall-top { margin-top: 31.68px; } h6.tall-bottom, .h6.tall-bottom { margin-bottom: 26.4px; } h6 strong, .h6 strong, h6 .emphasize, .h6 .emphasize { font-size: 15.4px; line-height: 17.6px; } h6 .mute, .h6 .mute { font-size: 15.4px; line-height: 17.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: 0px; margin-bottom: 13.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ } ul.short, ol.short { margin-top: 0px; margin-bottom: 6.6px; } ul.short-top, ol.short-top { margin-top: 0px; } ul.short-bottom, ol.short-bottom { margin-bottom: 6.6px; } ul.tall, ol.tall { margin-top: 0px; margin-bottom: 26.4px; } ul.tall-top, ol.tall-top { margin-top: 0px; } ul.tall-bottom, ol.tall-bottom { margin-bottom: 26.4px; } ul li, ol li { margin-bottom: 6.6px; padding-left: 26.4px; /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ } ul li:before, ol li:before { top: 8px; width: 5px; height: 5px; border-radius: 5px; } ul li > ul, ol li > ul, ul li > ol, ol li > ol { margin-top: 6.6px; margin-bottom: 6.6px; } ul > ul, ol > ul, ul > ol, ol > ol { padding-left: 13.2px; } ul.list-inline, ol.list-inline { margin-top: -6.6px; margin-left: -13.2px; } ul.list-inline > li, ol.list-inline > li { margin-top: 6.6px; margin-left: 13.2px; } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol li { padding-left: 26.4px; } ol li:before { top: 0px; width: auto; height: 22px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: 16.8px; line-height: 24px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } body strong, body .emphasize { font-size: 16.8px; line-height: 24px; } body .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: 16.8px; line-height: 24px; margin-top: 0px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } p.short { margin-top: 0px; margin-bottom: 7.2px; } p.short-top { margin-top: 0px; } p.short-bottom { margin-bottom: 7.2px; } p.tall { margin-top: 0px; margin-bottom: 28.8px; } p.tall-top { margin-top: 0px; } p.tall-bottom { margin-bottom: 28.8px; } p strong, p .emphasize { font-size: 16.8px; line-height: 24px; } p .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small, .wp-caption-text { font-size: 13.44px; line-height: 19.2px; margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .small.short { margin-top: 0px; margin-bottom: 3.6px; } .small.short-top { margin-top: 0px; } .small.short-bottom { margin-bottom: 3.6px; } .small.tall { margin-top: 0px; margin-bottom: 14.4px; } .small.tall-top { margin-top: 0px; } .small.tall-bottom { margin-bottom: 14.4px; } .small strong, .small .emphasize { font-size: 13.44px; line-height: 19.2px; } .small .mute { font-size: 13.44px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: 20.16px; line-height: 26.4px; margin-top: 0px; margin-bottom: 21.6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .lead.short { margin-top: 0px; margin-bottom: 10.8px; } .lead.short-top { margin-top: 0px; } .lead.short-bottom { margin-bottom: 10.8px; } .lead.tall { margin-top: 0px; margin-bottom: 43.2px; } .lead.tall-top { margin-top: 0px; } .lead.tall-bottom { margin-bottom: 43.2px; } .lead strong, .lead .emphasize { font-size: 20.16px; line-height: 26.4px; } .lead .mute { font-size: 20.16px; line-height: 26.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: 65.52px; line-height: 54.6px; margin-top: 104.50944px; margin-bottom: 52.25472px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h1.short, .h1.short { margin-top: 52.25472px; margin-bottom: 26.12736px; } h1.short-top, .h1.short-top { margin-top: 52.25472px; } h1.short-bottom, .h1.short-bottom { margin-bottom: 26.12736px; } h1.tall, .h1.tall { margin-top: 209.01888px; margin-bottom: 104.50944px; } h1.tall-top, .h1.tall-top { margin-top: 209.01888px; } h1.tall-bottom, .h1.tall-bottom { margin-bottom: 104.50944px; } h1 strong, .h1 strong, h1 .emphasize, .h1 .emphasize { font-size: 65.52px; line-height: 54.6px; } h1 .mute, .h1 .mute { font-size: 65.52px; line-height: 54.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: 40.656px; line-height: 42.504px; margin-top: 52.25472px; margin-bottom: 37.3248px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h2.short, .h2.short { margin-top: 26.12736px; margin-bottom: 18.6624px; } h2.short-top, .h2.short-top { margin-top: 26.12736px; } h2.short-bottom, .h2.short-bottom { margin-bottom: 18.6624px; } h2.tall, .h2.tall { margin-top: 104.50944px; margin-bottom: 74.6496px; } h2.tall-top, .h2.tall-top { margin-top: 104.50944px; } h2.tall-bottom, .h2.tall-bottom { margin-bottom: 74.6496px; } h2 strong, .h2 strong, h2 .emphasize, .h2 .emphasize { font-size: 40.656px; line-height: 42.504px; } h2 .mute, .h2 .mute { font-size: 40.656px; line-height: 42.504px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: 30.1056px; line-height: 28.224px; margin-top: 37.3248px; margin-bottom: 24.8832px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h3.short, .h3.short { margin-top: 18.6624px; margin-bottom: 12.4416px; } h3.short-top, .h3.short-top { margin-top: 18.6624px; } h3.short-bottom, .h3.short-bottom { margin-bottom: 12.4416px; } h3.tall, .h3.tall { margin-top: 74.6496px; margin-bottom: 49.7664px; } h3.tall-top, .h3.tall-top { margin-top: 74.6496px; } h3.tall-bottom, .h3.tall-bottom { margin-bottom: 49.7664px; } h3 strong, .h3 strong, h3 .emphasize, .h3 .emphasize { font-size: 30.1056px; line-height: 28.224px; } h3 .mute, .h3 .mute { font-size: 30.1056px; line-height: 28.224px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: 21.84px; line-height: 26.4px; margin-top: 24.8832px; margin-bottom: 20.736px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h4.short, .h4.short { margin-top: 12.4416px; margin-bottom: 10.368px; } h4.short-top, .h4.short-top { margin-top: 12.4416px; } h4.short-bottom, .h4.short-bottom { margin-bottom: 10.368px; } h4.tall, .h4.tall { margin-top: 49.7664px; margin-bottom: 41.472px; } h4.tall-top, .h4.tall-top { margin-top: 49.7664px; } h4.tall-bottom, .h4.tall-bottom { margin-bottom: 41.472px; } h4 strong, .h4 strong, h4 .emphasize, .h4 .emphasize { font-size: 21.84px; line-height: 26.4px; } h4 .mute, .h4 .mute { font-size: 21.84px; line-height: 26.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: 16.8px; line-height: 19.2px; margin-top: 20.736px; margin-bottom: 17.28px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h5.short, .h5.short { margin-top: 10.368px; margin-bottom: 8.64px; } h5.short-top, .h5.short-top { margin-top: 10.368px; } h5.short-bottom, .h5.short-bottom { margin-bottom: 8.64px; } h5.tall, .h5.tall { margin-top: 41.472px; margin-bottom: 34.56px; } h5.tall-top, .h5.tall-top { margin-top: 41.472px; } h5.tall-bottom, .h5.tall-bottom { margin-bottom: 34.56px; } h5 strong, .h5 strong, h5 .emphasize, .h5 .emphasize { font-size: 16.8px; line-height: 19.2px; } h5 .mute, .h5 .mute { font-size: 16.8px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: 16.8px; line-height: 19.2px; margin-top: 17.28px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h6.short, .h6.short { margin-top: 8.64px; margin-bottom: 7.2px; } h6.short-top, .h6.short-top { margin-top: 8.64px; } h6.short-bottom, .h6.short-bottom { margin-bottom: 7.2px; } h6.tall, .h6.tall { margin-top: 34.56px; margin-bottom: 28.8px; } h6.tall-top, .h6.tall-top { margin-top: 34.56px; } h6.tall-bottom, .h6.tall-bottom { margin-bottom: 28.8px; } h6 strong, .h6 strong, h6 .emphasize, .h6 .emphasize { font-size: 16.8px; line-height: 19.2px; } h6 .mute, .h6 .mute { font-size: 16.8px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: 0px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ } ul.short, ol.short { margin-top: 0px; margin-bottom: 7.2px; } ul.short-top, ol.short-top { margin-top: 0px; } ul.short-bottom, ol.short-bottom { margin-bottom: 7.2px; } ul.tall, ol.tall { margin-top: 0px; margin-bottom: 28.8px; } ul.tall-top, ol.tall-top { margin-top: 0px; } ul.tall-bottom, ol.tall-bottom { margin-bottom: 28.8px; } ul li, ol li { margin-bottom: 7.2px; padding-left: 28.8px; /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ } ul li:before, ol li:before { top: 9px; width: 6px; height: 6px; border-radius: 6px; } ul li > ul, ol li > ul, ul li > ol, ol li > ol { margin-top: 7.2px; margin-bottom: 7.2px; } ul > ul, ol > ul, ul > ol, ol > ol { padding-left: 14.4px; } ul.list-inline, ol.list-inline { margin-top: -7.2px; margin-left: -14.4px; } ul.list-inline > li, ol.list-inline > li { margin-top: 7.2px; margin-left: 14.4px; } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol li { padding-left: 28.8px; } ol li:before { top: 0px; width: auto; height: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: 16.8px; line-height: 24px; /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } body strong, body .emphasize { font-size: 16.8px; line-height: 24px; } body .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: 16.8px; line-height: 24px; margin-top: 0px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } p.short { margin-top: 0px; margin-bottom: 7.2px; } p.short-top { margin-top: 0px; } p.short-bottom { margin-bottom: 7.2px; } p.tall { margin-top: 0px; margin-bottom: 28.8px; } p.tall-top { margin-top: 0px; } p.tall-bottom { margin-bottom: 28.8px; } p strong, p .emphasize { font-size: 16.8px; line-height: 24px; } p .mute { font-size: 16.8px; line-height: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small, .wp-caption-text { font-size: 13.44px; line-height: 19.2px; margin-top: 0px; margin-bottom: 7.2px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .small.short { margin-top: 0px; margin-bottom: 3.6px; } .small.short-top { margin-top: 0px; } .small.short-bottom { margin-bottom: 3.6px; } .small.tall { margin-top: 0px; margin-bottom: 14.4px; } .small.tall-top { margin-top: 0px; } .small.tall-bottom { margin-bottom: 14.4px; } .small strong, .small .emphasize { font-size: 13.44px; line-height: 19.2px; } .small .mute { font-size: 13.44px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: 20.16px; line-height: 26.4px; margin-top: 0px; margin-bottom: 21.6px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } .lead.short { margin-top: 0px; margin-bottom: 10.8px; } .lead.short-top { margin-top: 0px; } .lead.short-bottom { margin-bottom: 10.8px; } .lead.tall { margin-top: 0px; margin-bottom: 43.2px; } .lead.tall-top { margin-top: 0px; } .lead.tall-bottom { margin-bottom: 43.2px; } .lead strong, .lead .emphasize { font-size: 20.16px; line-height: 26.4px; } .lead .mute { font-size: 20.16px; line-height: 26.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: 75.6px; line-height: 63px; margin-top: 104.50944px; margin-bottom: 52.25472px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h1.short, .h1.short { margin-top: 52.25472px; margin-bottom: 26.12736px; } h1.short-top, .h1.short-top { margin-top: 52.25472px; } h1.short-bottom, .h1.short-bottom { margin-bottom: 26.12736px; } h1.tall, .h1.tall { margin-top: 209.01888px; margin-bottom: 104.50944px; } h1.tall-top, .h1.tall-top { margin-top: 209.01888px; } h1.tall-bottom, .h1.tall-bottom { margin-bottom: 104.50944px; } h1 strong, .h1 strong, h1 .emphasize, .h1 .emphasize { font-size: 75.6px; line-height: 63px; } h1 .mute, .h1 .mute { font-size: 75.6px; line-height: 63px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: 40.656px; line-height: 42.504px; margin-top: 52.25472px; margin-bottom: 37.3248px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h2.short, .h2.short { margin-top: 26.12736px; margin-bottom: 18.6624px; } h2.short-top, .h2.short-top { margin-top: 26.12736px; } h2.short-bottom, .h2.short-bottom { margin-bottom: 18.6624px; } h2.tall, .h2.tall { margin-top: 104.50944px; margin-bottom: 74.6496px; } h2.tall-top, .h2.tall-top { margin-top: 104.50944px; } h2.tall-bottom, .h2.tall-bottom { margin-bottom: 74.6496px; } h2 strong, .h2 strong, h2 .emphasize, .h2 .emphasize { font-size: 40.656px; line-height: 42.504px; } h2 .mute, .h2 .mute { font-size: 40.656px; line-height: 42.504px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: 30.1056px; line-height: 28.224px; margin-top: 37.3248px; margin-bottom: 24.8832px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h3.short, .h3.short { margin-top: 18.6624px; margin-bottom: 12.4416px; } h3.short-top, .h3.short-top { margin-top: 18.6624px; } h3.short-bottom, .h3.short-bottom { margin-bottom: 12.4416px; } h3.tall, .h3.tall { margin-top: 74.6496px; margin-bottom: 49.7664px; } h3.tall-top, .h3.tall-top { margin-top: 74.6496px; } h3.tall-bottom, .h3.tall-bottom { margin-bottom: 49.7664px; } h3 strong, .h3 strong, h3 .emphasize, .h3 .emphasize { font-size: 30.1056px; line-height: 28.224px; } h3 .mute, .h3 .mute { font-size: 30.1056px; line-height: 28.224px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: 21.84px; line-height: 26.4px; margin-top: 24.8832px; margin-bottom: 20.736px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h4.short, .h4.short { margin-top: 12.4416px; margin-bottom: 10.368px; } h4.short-top, .h4.short-top { margin-top: 12.4416px; } h4.short-bottom, .h4.short-bottom { margin-bottom: 10.368px; } h4.tall, .h4.tall { margin-top: 49.7664px; margin-bottom: 41.472px; } h4.tall-top, .h4.tall-top { margin-top: 49.7664px; } h4.tall-bottom, .h4.tall-bottom { margin-bottom: 41.472px; } h4 strong, .h4 strong, h4 .emphasize, .h4 .emphasize { font-size: 21.84px; line-height: 26.4px; } h4 .mute, .h4 .mute { font-size: 21.84px; line-height: 26.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: 16.8px; line-height: 19.2px; margin-top: 20.736px; margin-bottom: 17.28px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h5.short, .h5.short { margin-top: 10.368px; margin-bottom: 8.64px; } h5.short-top, .h5.short-top { margin-top: 10.368px; } h5.short-bottom, .h5.short-bottom { margin-bottom: 8.64px; } h5.tall, .h5.tall { margin-top: 41.472px; margin-bottom: 34.56px; } h5.tall-top, .h5.tall-top { margin-top: 41.472px; } h5.tall-bottom, .h5.tall-bottom { margin-bottom: 34.56px; } h5 strong, .h5 strong, h5 .emphasize, .h5 .emphasize { font-size: 16.8px; line-height: 19.2px; } h5 .mute, .h5 .mute { font-size: 16.8px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: 16.8px; line-height: 19.2px; margin-top: 17.28px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ } h6.short, .h6.short { margin-top: 8.64px; margin-bottom: 7.2px; } h6.short-top, .h6.short-top { margin-top: 8.64px; } h6.short-bottom, .h6.short-bottom { margin-bottom: 7.2px; } h6.tall, .h6.tall { margin-top: 34.56px; margin-bottom: 28.8px; } h6.tall-top, .h6.tall-top { margin-top: 34.56px; } h6.tall-bottom, .h6.tall-bottom { margin-bottom: 28.8px; } h6 strong, .h6 strong, h6 .emphasize, .h6 .emphasize { font-size: 16.8px; line-height: 19.2px; } h6 .mute, .h6 .mute { font-size: 16.8px; line-height: 19.2px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: 0px; margin-bottom: 14.4px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ } ul.short, ol.short { margin-top: 0px; margin-bottom: 7.2px; } ul.short-top, ol.short-top { margin-top: 0px; } ul.short-bottom, ol.short-bottom { margin-bottom: 7.2px; } ul.tall, ol.tall { margin-top: 0px; margin-bottom: 28.8px; } ul.tall-top, ol.tall-top { margin-top: 0px; } ul.tall-bottom, ol.tall-bottom { margin-bottom: 28.8px; } ul li, ol li { margin-bottom: 7.2px; padding-left: 28.8px; /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ } ul li:before, ol li:before { top: 9px; width: 6px; height: 6px; border-radius: 6px; } ul li > ul, ol li > ul, ul li > ol, ol li > ol { margin-top: 7.2px; margin-bottom: 7.2px; } ul > ul, ol > ul, ul > ol, ol > ol { padding-left: 14.4px; } ul.list-inline, ol.list-inline { margin-top: -7.2px; margin-left: -14.4px; } ul.list-inline > li, ol.list-inline > li { margin-top: 7.2px; margin-left: 14.4px; } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol li { padding-left: 28.8px; } ol li:before { top: 0px; width: auto; height: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-config.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Components -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paths -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Z-Index -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-layout.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Sizes ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Grid ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Spacing Unit ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Z-Index Depths ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Foundation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Canvas ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Canvas Pod ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Container Pod ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Borders ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-panel.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Sizing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Header (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer (Default) Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer (Inverse) Styling -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Font Families -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Small Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Lead Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 (large) Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H1 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H2 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H3 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Margins ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H4 Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H5 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Links ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Margin ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Mute ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse Emphasize ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Heading H6 Text Inverse Mute ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Utilities ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.fast { animation-duration: 250ms; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { animation-duration: .75s; } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } .bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } } .pulse { animation-name: pulse; } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } .rubberBand { animation-name: rubberBand; } @keyframes shake { 0%, 100% { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { animation-name: shake; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } .swing { transform-origin: top center; animation-name: swing; } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } .tada { animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { 0% { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { transform: none; } } .wobble { animation-name: wobble; } @keyframes jello { 11.1% { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { transform: none; } } .jello { animation-name: jello; transform-origin: center; } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } .bounceIn { animation-name: bounceIn; } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } .bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } .bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } .bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } .bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } .bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } .bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } .bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; transform: none; } } .fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; transform: none; } } .fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0); } } .fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes flip { 0% { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; } @keyframes flipInX { 0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { 0% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @keyframes flipOutY { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedIn { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } @keyframes rotateIn { 0% { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { transform-origin: center; transform: none; opacity: 1; } } .rotateIn { animation-name: rotateIn; } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInDownLeft { animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInDownRight { animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInUpLeft { animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInUpRight { animation-name: rotateInUpRight; } @keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 100% { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { animation-name: rotateOut; } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 100% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 100% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 100% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 100% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { animation-name: rotateOutUpRight; } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } 100% { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; transform: none; } } .rollIn { animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { animation-name: rollOut; } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.75, 0.75, 0.75); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.75, 0.75, 0.75); } 100% { opacity: 0; } } .zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { animation-name: zoomOutDown; } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { animation-name: zoomOutUp; } @keyframes slideInDown { 0% { transform: translate3d(0, -100%, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); } } .slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { 0% { transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { 0% { transform: translate3d(100%, 0, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); } } .slideInRight { animation-name: slideInRight; } @keyframes slideInUp { 0% { transform: translate3d(0, 100%, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { 0% { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { 0% { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { 0% { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { 0% { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { animation-name: slideOutUp; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-down { from { opacity: 0; transform: translate(0, -8px); } to { opacity: 1; transform: translate(0, 0); } } @keyframes fade-up { from { opacity: 0; transform: translate(0, 8px); } to { opacity: 1; transform: translate(0, 0); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- utilities/mixins-gradient-overlay.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Colored Gradient Overlays Directly on Element -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .gradient-overlay-purple-blue { background: linear-gradient(135deg, #9351e5, #2f81f7); } .gradient-overlay-purple-red { background: linear-gradient(135deg, #9351e5, #f33745); } .gradient-overlay-purple-orange { background: linear-gradient(135deg, #9351e5, #f56753); } .gradient-overlay-purple-yellow { background: linear-gradient(135deg, #9351e5, #fedf57); } .gradient-overlay-purple-green { background: linear-gradient(135deg, #9351e5, #27c97b); } .gradient-overlay-purple-pink { background: linear-gradient(135deg, #9351e5, #ef468b); } .gradient-overlay-purple-cyan { background: linear-gradient(135deg, #9351e5, #20d5ff); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Colored Gradient Overlays Directly on Element -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .gradient-overlay-before-purple-blue:before { background: linear-gradient(135deg, #9351e5, #2f81f7); } .gradient-overlay-before-purple-red:before { background: linear-gradient(135deg, #9351e5, #f33745); } .gradient-overlay-before-purple-orange:before { background: linear-gradient(135deg, #9351e5, #f56753); } .gradient-overlay-before-purple-yellow:before { background: linear-gradient(135deg, #9351e5, #fedf57); } .gradient-overlay-before-purple-green:before { background: linear-gradient(135deg, #9351e5, #27c97b); } .gradient-overlay-before-purple-pink:before { background: linear-gradient(135deg, #9351e5, #ef468b); } .gradient-overlay-before-purple-cyan:before { background: linear-gradient(135deg, #9351e5, #20d5ff); } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Layout ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/canvas-sidebar.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- canvas-sidebar ----------------------------------------------------------------------------- */ #canvas-sidebar { position: fixed; top: 0px; left: -100%; width: 100%; height: 100%; overflow: hidden; background: #191d27; z-index: 1000; transition: left 0.3s ease; /* ----------------------------------------------------------------------------- Canvas Sidebar Navigation ----------------------------------------------------------------------------- */ } #canvas-sidebar .canvas-sidebar-content { position: relative; padding-top: 63px; } #canvas-sidebar .canvas-sidebar-content:before { content: ''; position: fixed; top: 0px; left: 0px; display: block; width: 100%; height: 63px; z-index: 1; background-image: linear-gradient(#191d27 0%, #191d27 50%, rgba(25, 29, 39, 0) 100%); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#191d27', endColorstr='rgba(25, 29, 39, 0)', GradientType=0); } #canvas-sidebar .ps-scrollbar-y-rail { z-index: 2; } #canvas-sidebar .container-pod { padding-top: 13.5px; padding-bottom: 13.5px; } #canvas-sidebar .canvas-sidebar-navigation { margin: 0 auto; *zoom: 1; } #canvas-sidebar .canvas-sidebar-navigation:before, #canvas-sidebar .canvas-sidebar-navigation:after { display: table; content: ""; line-height: 0; } #canvas-sidebar .canvas-sidebar-navigation:after { clear: both; } #canvas-sidebar .canvas-sidebar-navigation ul { list-style: none; *zoom: 1; margin: 0px; } #canvas-sidebar .canvas-sidebar-navigation ul:before, #canvas-sidebar .canvas-sidebar-navigation ul:after { display: table; content: ""; line-height: 0; } #canvas-sidebar .canvas-sidebar-navigation ul:after { clear: both; } #canvas-sidebar .canvas-sidebar-navigation ul li { display: block; position: relative; font-size: 18.2px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; margin-left: -24px; margin-right: -24px; padding-top: 19px; padding-bottom: 19px; padding-left: 24px; padding-right: 24px; color: #d6d8dc; font-weight: 500; } #canvas-sidebar .canvas-sidebar-navigation ul li:before { display: none; } #canvas-sidebar .canvas-sidebar-navigation ul li a { display: block; text-decoration: none !important; margin-top: -19px; margin-bottom: -19px; margin-left: -24px; margin-right: -24px; padding-top: 19px; padding-bottom: 19px; padding-left: 24px; padding-right: 24px; color: #d6d8dc; } #canvas-sidebar .canvas-sidebar-navigation ul li a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } #canvas-sidebar .canvas-sidebar-navigation ul li a:active { color: #ffffff; background: rgba(255, 255, 255, 0.2); } #canvas-sidebar .canvas-sidebar-navigation ul li.selected, #canvas-sidebar .canvas-sidebar-navigation ul li.current_page_item { color: #ffffff; } #canvas-sidebar .canvas-sidebar-navigation ul li.selected > a, #canvas-sidebar .canvas-sidebar-navigation ul li.current_page_item > a, #canvas-sidebar .canvas-sidebar-navigation ul li.selected > a:hover, #canvas-sidebar .canvas-sidebar-navigation ul li.current_page_item > a:hover, #canvas-sidebar .canvas-sidebar-navigation ul li.selected > a:active, #canvas-sidebar .canvas-sidebar-navigation ul li.current_page_item > a:active { color: #ffffff; background: #9351e5; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children { position: relative; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_item, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_parent { color: #ffffff; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_item > a, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_parent > a { color: #ffffff; background: #9351e5; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_item > ul.sub-menu, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children.current_page_parent > ul.sub-menu { display: block; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul { display: none; width: auto; background: #9351e5; margin-bottom: -19px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; margin-top: 19px; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li { display: block; float: none; text-align: left; font-size: 18.2px; line-height: 22px; margin-bottom: 0px; padding-top: 19px; padding-bottom: 19px; padding-left: 24px; padding-right: 24px; color: #f4eefc; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.selected > a, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.current_page_item > a, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.selected > a:hover, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.current_page_item > a:hover, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.selected > a:active, #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li.current_page_item > a:active { color: #ffffff; background: rgba(0, 0, 0, 0.1); } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li > a { display: block; text-decoration: none !important; margin-top: -19px; margin-bottom: -19px; margin-left: -24px; margin-right: -24px; padding-top: 19px; padding-bottom: 19px; padding-left: 24px; padding-right: 24px; color: #dfcbf7; } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li > a:hover { color: #ffffff; background: rgba(0, 0, 0, 0.1); } #canvas-sidebar .canvas-sidebar-navigation ul li.menu-item-has-children > ul li > a:active { color: #dfcbf7; } /* ----------------------------------------------------------------------------- Header Mobile Menu Button ----------------------------------------------------------------------------- */ .canvas-sidebar-toggle { display: block; position: fixed; top: 19.5px; left: 24px; width: 24px; height: 24px; cursor: pointer; z-index: 4001; transition: opacity 0.2s ease; } .canvas-sidebar-toggle span { display: none; } .canvas-sidebar-toggle.fade { opacity: 0; filter: alpha(opacity=0); } .canvas-sidebar-toggle:before, .canvas-sidebar-toggle:after { content: ''; display: block; width: 24px; height: 2px; position: absolute; top: 11px; left: 0px; transform: rotate(0deg); background-color: #282e3e; transition: all 0.3s ease; } .canvas-sidebar-toggle:before { top: 7px; } .canvas-sidebar-toggle:after { top: 15px; } .canvas-sidebar-toggle.canvas-sidebar-toggle-light:before, .canvas-sidebar-toggle.canvas-sidebar-toggle-light:after { background-color: #ffffff; } /* ----------------------------------------------------------------------------- Canvas Sidebar Open ----------------------------------------------------------------------------- */ body.canvas-sidebar-open #canvas-sidebar { left: 0px; } body.canvas-sidebar-open #canvas-sidebar ul > li { opacity: 100; filter: alpha(opacity=10000); } body.canvas-sidebar-open #canvas { left: 100%; position: fixed; } body.canvas-sidebar-open .canvas-sidebar-toggle:before { top: 11px; transform: rotate(45deg); background-color: #ffffff; } body.canvas-sidebar-open .canvas-sidebar-toggle:after { top: 11px; transform: rotate(-45deg); background-color: #ffffff; } /* ----------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas-sidebar .canvas-sidebar-content:before { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header Mobile Menu Button -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .canvas-sidebar-toggle { display: none; } } /* ----------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- canvas-sidebar ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- canvas-sidebar ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- Screen Resolution: 2x ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- canvas-sidebar ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Menu Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Size ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Menu Item Link -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Submenu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Submenu Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Size ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Sidebar Submenu Link -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/header.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { *zoom: 1; position: relative; height: 63px; width: 100%; text-align: center; z-index: 4000; background: none; /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Navigation ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Actions ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header (Fill) ----------------------------------------------------------------------------- */ } #header:before, #header:after { display: table; content: ""; line-height: 0; } #header:after { clear: both; } #header .container-pod { padding-top: 13.5px; padding-bottom: 13.5px; } #header .header-inner { position: relative; } #header .header-logo { *zoom: 1; position: absolute; display: block; margin: 0 auto; top: 6.8px; left: 50%; margin-left: -20px; } #header .header-logo:before, #header .header-logo:after { display: table; content: ""; line-height: 0; } #header .header-logo:after { clear: both; } #header .header-logo .header-logo-mark { display: block; width: 40px; height: 28.8px; background-image: url("../images/layout/header/header-logo-color-dark-mark.png"); background-size: 100% 100%; float: left; transition: transform 0.5s ease, opacity 0.5s ease; transform: translateY(0px); background-repeat: no-repeat; } #header .header-logo .header-logo-type { display: none; width: 164.8px; height: 20px; background-image: url("../images/layout/header/header-logo-color-dark-type.png"); background-size: 100% 100%; float: left; margin-left: 16px; background-repeat: no-repeat; } #header .header-logo a { display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #header .header-logo a span { display: none; } #header .header-logo.header-logo-color-light .header-logo-mark { background-image: url("../images/layout/header/header-logo-color-light-mark.png"); } #header .header-logo.header-logo-color-light .header-logo-type { background-image: url("../images/layout/header/header-logo-color-light-type.png"); } #header .header-logo.header-logo-flat-light .header-logo-mark { background-image: url("../images/layout/header/header-logo-flat-light-mark.png"); } #header .header-logo.header-logo-flat-light .header-logo-type { background-image: url("../images/layout/header/header-logo-flat-light-type.png"); } #header .header-logo.header-logo-flat-light:hover { opacity: 1; filter: alpha(opacity=100); } #header .header-logo.header-logo-flat-dark { opacity: 0.3; filter: alpha(opacity=30); } #header .header-logo.header-logo-flat-dark .header-logo-mark { background-image: url("../images/layout/header/header-logo-flat-dark-mark.png"); } #header .header-logo.header-logo-flat-dark .header-logo-type { background-image: url("../images/layout/header/header-logo-flat-dark-type.png"); } #header .header-logo.header-logo-flat-dark:hover { opacity: 1; filter: alpha(opacity=100); } #header .header-logo:hover .header-logo-mark { transform: translateY(-3px); } #header .header-navigation { display: none; margin: 0 auto; *zoom: 1; } #header .header-navigation:before, #header .header-navigation:after { display: table; content: ""; line-height: 0; } #header .header-navigation:after { clear: both; } #header .header-navigation ul { list-style: none; *zoom: 1; margin: 0px; } #header .header-navigation ul:before, #header .header-navigation ul:after { display: table; content: ""; line-height: 0; } #header .header-navigation ul:after { clear: both; } #header .header-navigation ul li { float: left; position: relative; font-size: 14px; line-height: 16px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 6px; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; color: #282e3e; font-weight: 500; } #header .header-navigation ul li a { display: block; text-decoration: none !important; margin-top: -10px; margin-bottom: -10px; margin-left: -18px; margin-right: -18px; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; color: #282e3e; } #header .header-navigation ul li a:hover { color: #9351e5; } #header .header-navigation ul li a:active { color: #9351e5; } #header .header-navigation ul li:before { display: none; content: ''; position: absolute; top: -13.5px; bottom: auto; left: 0px; width: 100%; height: 2px; background: #9351e5; border-radius: 0px; } #header .header-navigation ul li:last-child { margin-right: 0px; } #header .header-navigation ul li.selected, #header .header-navigation ul li.current_page_item { color: #ffffff; } #header .header-navigation ul li.selected > a, #header .header-navigation ul li.current_page_item > a, #header .header-navigation ul li.selected > a:hover, #header .header-navigation ul li.current_page_item > a:hover, #header .header-navigation ul li.selected > a:active, #header .header-navigation ul li.current_page_item > a:active { color: #9351e5; } #header .header-navigation ul li.selected:before, #header .header-navigation ul li.current_page_item:before { display: block; } #header .header-navigation ul li .nav-closed .nav-item-ani-in { animation-name: fade-out; } #header .header-navigation ul li .nav-closed li:nth-child(1) { animation-delay: 150ms; } #header .header-navigation ul li .nav-closed li:nth-child(2) { animation-delay: 205ms; } #header .header-navigation ul li .nav-closed li:nth-child(3) { animation-delay: 260ms; } #header .header-navigation ul li .nav-closed li:nth-child(4) { animation-delay: 315ms; } #header .header-navigation ul li .nav-closed li:nth-child(5) { animation-delay: 370ms; } #header .header-navigation ul li .nav-closed li:nth-child(6) { animation-delay: 425ms; } #header .header-navigation ul li .nav-closed li:nth-child(7) { animation-delay: 480ms; } #header .header-navigation ul li .nav-closed li:nth-child(8) { animation-delay: 535ms; } #header .header-navigation ul li .nav-closed li:nth-child(9) { animation-delay: 590ms; } #header .header-navigation ul li .nav-closed li:nth-child(10) { animation-delay: 645ms; } #header .header-navigation ul li .nav-closed li:nth-child(11) { animation-delay: 700ms; } #header .header-navigation ul li .nav-closed li:nth-child(12) { animation-delay: 755ms; } #header .header-navigation ul li .nav-closed li:nth-child(13) { animation-delay: 810ms; } #header .header-navigation ul li .nav-closed li:nth-child(14) { animation-delay: 865ms; } #header .header-navigation ul li .nav-closed li:nth-child(15) { animation-delay: 920ms; } #header .header-navigation ul li .nav-closed li:nth-child(16) { animation-delay: 975ms; } #header .header-navigation ul li .nav-closed li:nth-child(17) { animation-delay: 1030ms; } #header .header-navigation ul li .nav-closed li:nth-child(18) { animation-delay: 1085ms; } #header .header-navigation ul li .nav-closed li:nth-child(19) { animation-delay: 1140ms; } #header .header-navigation ul li .nav-closed li:nth-child(20) { animation-delay: 1195ms; } #header .header-navigation ul li.menu-item-has-children.nav-closed > ul li { animation-name: fade-out; } #header .header-navigation ul li.menu-item-has-children.nav-open > ul.sub-menu { opacity: 1; transform: scaleY(1); } #header .header-navigation ul li.menu-item-has-children.nav-open > ul li { animation-name: fade-down; } #header .header-navigation ul li.menu-item-has-children { position: relative; } #header .header-navigation ul li.menu-item-has-children > ul.sub-menu { opacity: 0; transition: transform 0.150s ease-in-out, opacity 0.250s ease; transform: scaleY(0); transform-origin: 0 0; } #header .header-navigation ul li.menu-item-has-children > a { position: relative; } #header .header-navigation ul li.menu-item-has-children > a span { position: relative; } #header .header-navigation ul li.menu-item-has-children > a:before { position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: #9351e5; transition: opacity 0.250s ease; opacity: 0; } #header .header-navigation ul li.menu-item-has-children:hover { color: #ffffff; } #header .header-navigation ul li.menu-item-has-children:hover > a { color: #ffffff; } #header .header-navigation ul li.menu-item-has-children:hover > a:before { opacity: 1; } #header .header-navigation ul li.menu-item-has-children:hover > ul.sub-menu { display: block; } #header .header-navigation ul li.menu-item-has-children > ul { display: none; width: auto; position: absolute; white-space: nowrap; opacity: 0; background: #9351e5; margin-left: -18px; padding-top: 10px; padding-bottom: 10px; transition: opacity 0.150s ease; margin-top: 10px; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(1) { animation-delay: 150ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(2) { animation-delay: 205ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(3) { animation-delay: 260ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(4) { animation-delay: 315ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(5) { animation-delay: 370ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(6) { animation-delay: 425ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(7) { animation-delay: 480ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(8) { animation-delay: 535ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(9) { animation-delay: 590ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(10) { animation-delay: 645ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(11) { animation-delay: 700ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(12) { animation-delay: 755ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(13) { animation-delay: 810ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(14) { animation-delay: 865ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(15) { animation-delay: 920ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(16) { animation-delay: 975ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(17) { animation-delay: 1030ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(18) { animation-delay: 1085ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(19) { animation-delay: 1140ms; } #header .header-navigation ul li.menu-item-has-children > ul li:nth-child(20) { animation-delay: 1195ms; } #header .header-navigation ul li.menu-item-has-children > ul li { display: block; float: none; text-align: left; font-size: 14px; line-height: 16px; margin-bottom: 0px; margin-right: 0px; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; color: #f4eefc; opacity: 0; animation-duration: 150ms; animation-delay: 150ms; animation-timing-function: ease-out; animation-fill-mode: both; } #header .header-navigation ul li.menu-item-has-children > ul li:before { display: none; } #header .header-navigation ul li.menu-item-has-children > ul li.selected > a, #header .header-navigation ul li.menu-item-has-children > ul li.selected > a:hover, #header .header-navigation ul li.menu-item-has-children > ul li.selected > a:active { color: #ffffff; } #header .header-navigation ul li.menu-item-has-children > ul li > a { display: block; text-decoration: none !important; margin-top: -10px; margin-bottom: -10px; margin-left: -18px; margin-right: -18px; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; color: #dfcbf7; } #header .header-navigation ul li.menu-item-has-children > ul li > a:hover { color: #ffffff; background: rgba(0, 0, 0, 0.1); } #header .header-navigation ul li.menu-item-has-children > ul li > a:active { color: #adb0b8; } #header .header-navigation.header-navigation-inverse ul li { color: rgba(255, 255, 255, 0.9); } #header .header-navigation.header-navigation-inverse ul li a { color: rgba(255, 255, 255, 0.8); } #header .header-navigation.header-navigation-inverse ul li a:hover { color: #ffffff; } #header .header-navigation.header-navigation-inverse ul li a:active { color: #ffffff; } #header .header-navigation.header-navigation-inverse ul li.selected, #header .header-navigation.header-navigation-inverse ul li.current_page_item { color: #ffffff; } #header .header-navigation.header-navigation-inverse ul li.selected > a, #header .header-navigation.header-navigation-inverse ul li.current_page_item > a, #header .header-navigation.header-navigation-inverse ul li.selected > a:hover, #header .header-navigation.header-navigation-inverse ul li.current_page_item > a:hover, #header .header-navigation.header-navigation-inverse ul li.selected > a:active, #header .header-navigation.header-navigation-inverse ul li.current_page_item > a:active { color: #ffffff; } #header .header-navigation.header-navigation-inverse ul li.menu-item-has-children:hover { color: #ffffff; } #header .header-actions { display: none; } #header.header-fill { background: #232937; } #header.header-fill.header-fill-light { background: #ffffff; } #header.header-fill.header-fill-dark { background: #232937; } @keyframes header-logo-hover { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 0% { transform: translateY(0px); } } /* ---------------------------------------------------------------------------------------------------- KEYFRAMES ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ } #header .container-pod { padding-top: 13.5px; padding-bottom: 13.5px; } #header .header-logo { top: 6.8px; margin-left: -20px; } #header .header-logo .header-logo-mark { width: 40px; height: 28.8px; } #header .header-logo .header-logo-type { width: 164.8px; height: 20px; margin-left: 12.8px; } } /* ----------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { height: auto; /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Actions ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Navigation ----------------------------------------------------------------------------- */ } #header .container-pod { padding-top: 18px; padding-bottom: 18px; } #header .header-logo { top: 10.2px; left: 0px; margin-left: 0px; } #header .header-logo .header-logo-mark { width: 35px; height: 25.2px; } #header .header-logo .header-logo-type { width: 144.2px; height: 17.5px; margin-left: 11.2px; } #header .header-actions { display: block; position: absolute; top: 0px; right: 0px; } #header .header-navigation { display: table; } #header .header-navigation ul li { font-size: 15.4px; line-height: 17.6px; margin-right: 4px; padding-top: 11.2px; padding-bottom: 11.2px; padding-left: 20px; padding-right: 20px; } #header .header-navigation ul li a { margin-top: -11.2px; margin-bottom: -11.2px; margin-left: -20px; margin-right: -20px; padding-top: 11.2px; padding-bottom: 11.2px; padding-left: 20px; padding-right: 20px; } #header .header-navigation ul li:before { top: -18px; } #header .header-navigation ul li.menu-item-has-children > ul { margin-left: -20px; padding-top: 11.2px; padding-bottom: 11.2px; margin-top: 11.2px; } #header .header-navigation ul li.menu-item-has-children > ul li { font-size: 15.4px; line-height: 17.6px; padding-top: 11.2px; padding-bottom: 11.2px; padding-left: 20px; padding-right: 20px; } #header .header-navigation ul li.menu-item-has-children > ul li > a { margin-top: -11.2px; margin-bottom: -11.2px; margin-left: -20px; margin-right: -20px; padding-top: 11.2px; padding-bottom: 11.2px; padding-left: 20px; padding-right: 20px; } } /* ----------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Navigation ----------------------------------------------------------------------------- */ } #header .container-pod { padding-top: 27px; padding-bottom: 27px; } #header .header-logo { top: 8.4px; } #header .header-logo .header-logo-mark { width: 45px; height: 32.4px; } #header .header-logo .header-logo-type { display: block; width: 185.4px; height: 22.5px; margin-left: 14.4px; } #header .header-navigation ul li { font-size: 16.8px; line-height: 19.2px; margin-right: 6px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 10.5px; padding-right: 10.5px; } #header .header-navigation ul li a { margin-top: -11.4px; margin-bottom: -11.4px; margin-left: -10.5px; margin-right: -10.5px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 10.5px; padding-right: 10.5px; } #header .header-navigation ul li:before { top: -27px; } #header .header-navigation ul li.menu-item-has-children > ul { margin-left: -10.5px; padding-top: 11.4px; padding-bottom: 11.4px; margin-top: 11.4px; } #header .header-navigation ul li.menu-item-has-children > ul li { font-size: 16.8px; line-height: 19.2px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 10.5px; padding-right: 10.5px; } #header .header-navigation ul li.menu-item-has-children > ul li > a { margin-top: -11.4px; margin-bottom: -11.4px; margin-left: -10.5px; margin-right: -10.5px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 10.5px; padding-right: 10.5px; } } /* ----------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Navigation ----------------------------------------------------------------------------- */ } #header .container-pod { padding-top: 36px; padding-bottom: 36px; } #header .header-logo { top: 8.4px; } #header .header-logo .header-logo-mark { width: 45px; height: 32.4px; } #header .header-logo .header-logo-type { width: 185.4px; height: 22.5px; margin-left: 14.4px; } #header .header-navigation ul li { font-size: 16.8px; line-height: 19.2px; margin-right: 8px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 21px; padding-right: 21px; } #header .header-navigation ul li a { margin-top: -11.4px; margin-bottom: -11.4px; margin-left: -21px; margin-right: -21px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 21px; padding-right: 21px; } #header .header-navigation ul li:before { top: -36px; } #header .header-navigation ul li.menu-item-has-children > ul { margin-left: -21px; padding-top: 11.4px; padding-bottom: 11.4px; margin-top: 11.4px; } #header .header-navigation ul li.menu-item-has-children > ul li { font-size: 16.8px; line-height: 19.2px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 21px; padding-right: 21px; } #header .header-navigation ul li.menu-item-has-children > ul li > a { margin-top: -11.4px; margin-bottom: -11.4px; margin-left: -21px; margin-right: -21px; padding-top: 11.4px; padding-bottom: 11.4px; padding-left: 21px; padding-right: 21px; } } /* ----------------------------------------------------------------------------- Screen Resolution: 2x ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #header { /* ----------------------------------------------------------------------------- Header Logo ----------------------------------------------------------------------------- */ } #header .header-logo .header-logo-mark { background-image: url("../images/layout/header/header-logo-color-dark-mark@2x.png"); } #header .header-logo .header-logo-type { background-image: url("../images/layout/header/header-logo-color-dark-type@2x.png"); } #header .header-logo.header-logo-color-light .header-logo-mark { background-image: url("../images/layout/header/header-logo-color-light-mark@2x.png"); } #header .header-logo.header-logo-color-light .header-logo-type { background-image: url("../images/layout/header/header-logo-color-light-type@2x.png"); } #header .header-logo.header-logo-flat-light .header-logo-mark { background-image: url("../images/layout/header/header-logo-flat-light-mark@2x.png"); } #header .header-logo.header-logo-flat-light .header-logo-type { background-image: url("../images/layout/header/header-logo-flat-light-type@2x.png"); } #header .header-logo.header-logo-flat-dark .header-logo-mark { background-image: url("../images/layout/header/header-logo-flat-dark-mark@2x.png"); } #header .header-logo.header-logo-flat-dark .header-logo-type { background-image: url("../images/layout/header/header-logo-flat-dark-type@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header Logo -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Logo Mark ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Header Logo Type ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header Menu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- header Menu Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Size ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- header Menu Item Link -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- header Submenu -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- header Submenu Item -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Size ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- header Submenu Link -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- layout/footer.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #footer { *zoom: 1; position: relative; width: 100%; /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Disclaimer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Navigation ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #footer:before, #footer:after { display: table; content: ""; line-height: 0; } #footer:after { clear: both; } #footer .footer-disclaimer { text-align: center; } #footer .footer-disclaimer .footer-disclaimer-menu { display: table; margin: 0 auto; *zoom: 1; } #footer .footer-disclaimer .footer-disclaimer-menu:before, #footer .footer-disclaimer .footer-disclaimer-menu:after { display: table; content: ""; line-height: 0; } #footer .footer-disclaimer .footer-disclaimer-menu:after { clear: both; } #footer .footer-disclaimer ul { float: left; } #footer .footer-disclaimer ul li { font-size: 0.85em; line-height: 0.85em; } #footer .footer-disclaimer ul li a { color: #848995; text-decoration: underline; } #footer .footer-disclaimer ul li a:hover { color: #adb0b8; } #footer .footer-navigation { *zoom: 1; } #footer .footer-navigation:before, #footer .footer-navigation:after { display: table; content: ""; line-height: 0; } #footer .footer-navigation:after { clear: both; } #footer .footer-navigation .footer-navigation-menu li:before { display: none; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-header { color: #ffffff; border-bottom: 1px solid #323a4e; padding-bottom: 8.64px; margin-bottom: 8.64px; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-list .footer-navigation-menu-list-item { color: #848995; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-list .footer-navigation-menu-list-item a { color: #848995; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-list .footer-navigation-menu-list-item a:hover { color: #adb0b8; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #footer { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Navigation ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #footer .footer-navigation { *zoom: 1; } #footer .footer-navigation:before, #footer .footer-navigation:after { display: table; content: ""; line-height: 0; } #footer .footer-navigation:after { clear: both; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-header { padding-bottom: 7.2px; margin-bottom: 7.2px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #footer { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Navigation ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #footer .footer-navigation { *zoom: 1; } #footer .footer-navigation:before, #footer .footer-navigation:after { display: table; content: ""; line-height: 0; } #footer .footer-navigation:after { clear: both; } #footer .footer-navigation .footer-navigation-menu > li { width: 20% !important; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-header { padding-bottom: 7.92px; margin-bottom: 7.92px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #footer { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Navigation ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #footer .footer-navigation { *zoom: 1; } #footer .footer-navigation:before, #footer .footer-navigation:after { display: table; content: ""; line-height: 0; } #footer .footer-navigation:after { clear: both; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-header { padding-bottom: 8.64px; margin-bottom: 8.64px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #footer { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Footer Navigation ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #footer .footer-navigation { *zoom: 1; } #footer .footer-navigation:before, #footer .footer-navigation:after { display: table; content: ""; line-height: 0; } #footer .footer-navigation:after { clear: both; } #footer .footer-navigation .footer-navigation-menu .footer-navigation-menu-header { padding-bottom: 8.64px; margin-bottom: 8.64px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Aspect TODO: Convert this into a mixin to make less DRY. From orignal sass map. $aspect_grids: ( '7x9': (7, 9), '7x3': (7, 3), '5x7': (5, 7), '5x3': (5, 3), '4x5': (4, 5), '14x5': (14, 5), '5x4': (5, 4), '4x3': (4, 3), '3x4': (3, 4), '1x1': (1, 1), ) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Aspect Mixin Helper -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .aspect { padding-bottom: 100%; position: relative; } .aspect-inner { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .aspect-7x9 { height: 0; padding-bottom: 128.57142857%; position: relative; width: 100%; } .aspect-7x4 { height: 0; padding-bottom: 57.14285714%; position: relative; width: 100%; } .aspect-7x3 { height: 0; padding-bottom: 42.85714286%; position: relative; width: 100%; } .aspect-5x7 { height: 0; padding-bottom: 140%; position: relative; width: 100%; } .aspect-5x3 { height: 0; padding-bottom: 60%; position: relative; width: 100%; } .aspect-5x4 { height: 0; padding-bottom: 80%; position: relative; width: 100%; } .aspect-4x7 { height: 0; padding-bottom: 175%; position: relative; width: 100%; } .aspect-4x5 { height: 0; padding-bottom: 125%; position: relative; width: 100%; } .aspect-4x3 { height: 0; padding-bottom: 75%; position: relative; width: 100%; } .aspect-3x4 { height: 0; padding-bottom: 133.33333333%; position: relative; width: 100%; } .aspect-1x1 { height: 0; padding-bottom: 100%; position: relative; width: 100%; } .aspect-14x5 { height: 0; padding-bottom: 35.71428571%; position: relative; width: 100%; } .aspect-9x7 { height: 0; padding-bottom: 77.77777778%; position: relative; width: 100%; } @media (min-width: 480px) { .aspect-7x9-screen-mini { height: 0; padding-bottom: 128.57142857%; position: relative; width: 100%; } .aspect-7x3-screen-mini { height: 0; padding-bottom: 42.85714286%; position: relative; width: 100%; } .aspect-7x4-screen-mini { height: 0; padding-bottom: 57.14285714%; position: relative; width: 100%; } .aspect-5x7-screen-mini { height: 0; padding-bottom: 140%; position: relative; width: 100%; } .aspect-5x3-screen-mini { height: 0; padding-bottom: 60%; position: relative; width: 100%; } .aspect-5x4-screen-mini { height: 0; padding-bottom: 80%; position: relative; width: 100%; } .aspect-4x7-screen-mini { height: 0; padding-bottom: 175%; position: relative; width: 100%; } .aspect-4x5-screen-mini { height: 0; padding-bottom: 125%; position: relative; width: 100%; } .aspect-4x3-screen-mini { height: 0; padding-bottom: 75%; position: relative; width: 100%; } .aspect-3x4-screen-mini { height: 0; padding-bottom: 133.33333333%; position: relative; width: 100%; } .aspect-1x1-screen-mini { height: 0; padding-bottom: 100%; position: relative; width: 100%; } .aspect-14x5-screen-mini { height: 0; padding-bottom: 35.71428571%; position: relative; width: 100%; } .aspect-9x7-screen-mini { height: 0; padding-bottom: 77.77777778%; position: relative; width: 100%; } .aspect-none-screen-mini { padding-bottom: inherit; height: initial; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .aspect-7x9-screen-small { height: 0; padding-bottom: 128.57142857%; position: relative; width: 100%; } .aspect-7x4-screen-small { height: 0; padding-bottom: 57.14285714%; position: relative; width: 100%; } .aspect-7x3-screen-small { height: 0; padding-bottom: 42.85714286%; position: relative; width: 100%; } .aspect-5x7-screen-small { height: 0; padding-bottom: 140%; position: relative; width: 100%; } .aspect-5x3-screen-small { height: 0; padding-bottom: 60%; position: relative; width: 100%; } .aspect-5x4-screen-small { height: 0; padding-bottom: 80%; position: relative; width: 100%; } .aspect-4x5-screen-small { height: 0; padding-bottom: 125%; position: relative; width: 100%; } .aspect-4x3-screen-small { height: 0; padding-bottom: 75%; position: relative; width: 100%; } .aspect-3x4-screen-small { height: 0; padding-bottom: 133.33333333%; position: relative; width: 100%; } .aspect-1x1-screen-small { height: 0; padding-bottom: 100%; position: relative; width: 100%; } .aspect-14x5-screen-small { height: 0; padding-bottom: 35.71428571%; position: relative; width: 100%; } .aspect-9x7-screen-small { height: 0; padding-bottom: 77.77777778%; position: relative; width: 100%; } .aspect-4x7-screen-small { height: 0; padding-bottom: 175%; position: relative; width: 100%; } .aspect-none-screen-small { padding-bottom: inherit; height: initial; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .aspect-7x9-screen-medium { height: 0; padding-bottom: 128.57142857%; position: relative; width: 100%; } .aspect-9x3-screen-medium { height: 0; padding-bottom: 33.33333333%; position: relative; width: 100%; } .aspect-7x4-screen-medium { height: 0; padding-bottom: 57.14285714%; position: relative; width: 100%; } .aspect-7x3-screen-medium { height: 0; padding-bottom: 42.85714286%; position: relative; width: 100%; } .aspect-5x7-screen-medium { height: 0; padding-bottom: 140%; position: relative; width: 100%; } .aspect-5x3-screen-medium { height: 0; padding-bottom: 60%; position: relative; width: 100%; } .aspect-5x4-screen-medium { height: 0; padding-bottom: 80%; position: relative; width: 100%; } .aspect-4x7-screen-medium { height: 0; padding-bottom: 175%; position: relative; width: 100%; } .aspect-4x5-screen-medium { height: 0; padding-bottom: 125%; position: relative; width: 100%; } .aspect-4x3-screen-medium { height: 0; padding-bottom: 75%; position: relative; width: 100%; } .aspect-3x4-screen-medium { height: 0; padding-bottom: 133.33333333%; position: relative; width: 100%; } .aspect-1x1-screen-medium { height: 0; padding-bottom: 100%; position: relative; width: 100%; } .aspect-14x5-screen-medium { height: 0; padding-bottom: 35.71428571%; position: relative; width: 100%; } .aspect-9x7-screen-medium { height: 0; padding-bottom: 77.77777778%; position: relative; width: 100%; } .aspect-none-screen-medium { padding-bottom: inherit; height: initial; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .aspect-7x9-screen-large { height: 0; padding-bottom: 128.57142857%; position: relative; width: 100%; } .aspect-7x3-screen-large { height: 0; padding-bottom: 42.85714286%; position: relative; width: 100%; } .aspect-7x4-screen-large { height: 0; padding-bottom: 57.14285714%; position: relative; width: 100%; } .aspect-5x7-screen-large { height: 0; padding-bottom: 140%; position: relative; width: 100%; } .aspect-5x3-screen-large { height: 0; padding-bottom: 60%; position: relative; width: 100%; } .aspect-5x4-screen-large { height: 0; padding-bottom: 80%; position: relative; width: 100%; } .aspect-4x7-screen-large { height: 0; padding-bottom: 175%; position: relative; width: 100%; } .aspect-4x5-screen-large { height: 0; padding-bottom: 125%; position: relative; width: 100%; } .aspect-4x3-screen-large { height: 0; padding-bottom: 75%; position: relative; width: 100%; } .aspect-3x4-screen-large { height: 0; padding-bottom: 133.33333333%; position: relative; width: 100%; } .aspect-1x1-screen-large { height: 0; padding-bottom: 100%; position: relative; width: 100%; } .aspect-14x5-screen-large { height: 0; padding-bottom: 35.71428571%; position: relative; width: 100%; } .aspect-9x7-screen-large { height: 0; padding-bottom: 77.77777778%; position: relative; width: 100%; } .aspect-none-screen-large { padding-bottom: inherit; height: initial; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- layout/foundation.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Canvas ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas { position: absolute; top: 0px; left: 0px; width: 100%; transition: left 0.3s ease, margin-left 0.3s ease; z-index: 2000; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- JS Positioning Classes ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .center-vertical { position: absolute; top: 100000px; } .fit-content { width: 100%; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Text Selection ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Canvas Pod ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .canvas-pod { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Canvas Pod Background -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .canvas-pod.canvas-pod-white { background: #ffffff; } .canvas-pod.canvas-pod-darker { background: #1e232f; } .canvas-pod.canvas-pod-color.canvas-pod-color-purple { background: #9351e5; } .canvas-pod.canvas-pod-gradient-vertical-green-to-purple { background-image: linear-gradient(to bottom, #27c97b 0%, #9351e5 100%); background-repeat: repeat-x; } .canvas-pod.canvas-pod-gradient-vertical-purple-to-green { background-image: linear-gradient(to bottom, #9351e5 0%, #27c97b 100%); background-repeat: repeat-x; } .canvas-pod.canvas-pod-gradient-horizontal-green-to-purple { background-image: linear-gradient(90deg, #27c97b 0%, #9351e5 100%); background-repeat: repeat-x; } .canvas-pod.canvas-pod-gradient-horizontal-purple-to-green { background-image: linear-gradient(90deg, #9351e5 0%, #27c97b 100%); background-repeat: repeat-x; } .canvas-pod .canvas-pod-background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .canvas-pod .canvas-pod-background.canvas-pod-background-horizontal-align-left img { left: 0px !important; right: auto !important; } .canvas-pod .canvas-pod-background.canvas-pod-background-horizontal-align-right img { left: auto !important; right: 0px !important; } .canvas-pod .canvas-pod-background.canvas-pod-background-vertical-align-top img { top: 0px !important; bottom: auto !important; } .canvas-pod .canvas-pod-background.canvas-pod-background-vertical-align-bottom img { top: auto !important; bottom: 0px !important; } .canvas-pod.canvas-pod-patterned.canvas-pod-patterned-isometric-grid { background-image: url("../images/layout/canvas/canvas-pod-patterned-isometric-grid.png"); background-size: 144px 84px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod.row-pod-shorter { padding-top: 13.5px; padding-bottom: 13.5px; } .row-pod.row-pod-taller { padding-top: 90px; padding-bottom: 90px; } .row.no-gutter { margin: 0; } .row.no-gutter > [class*='column-'] { padding-right: 0; padding-left: 0; } .row.no-gutter--small > [class*='column-'] { padding-right: 24px; padding-left: 24px; } .row.no-gutter--medium > [class*='column-'] { padding-right: 24px; padding-left: 24px; } @media (min-width: 480px) { .row.no-gutter--small > [class*='column-'] { padding-right: 5%; padding-left: 5%; } .row.no-gutter--medium > [class*='column-'] { padding-right: 5%; padding-left: 5%; } } @media (min-width: 768px) { .row.no-gutter--small > [class*='column-'] { padding-right: 0; padding-left: 0; } } @media (min-width: 992px) { .row.no-gutter--medium > [class*='column-'] { padding-right: 0; padding-left: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Compress -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .column-flush { float: none; padding-left: 0px; padding-right: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .vertically-align-center { position: absolute; top: 50%; transform: translateY(-50%); } .ghost-center-wrap { font-size: 0; height: 100%; } .ghost-center-wrap:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; } .ghost-center-wrap .ghost-center { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; font-size: 16px; font-size: 1rem; } .ghost-center.v-bottom { vertical-align: bottom; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Borders ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .border { position: relative; } .border .edge { display: block; position: absolute; background: #ebebed; } .border .edge.edge-top { top: 0px; left: 0px; width: 100%; height: 1px; } .border .edge.edge-right { top: 0px; right: 0px; width: 1px; height: 100%; } .border .edge.edge-bottom { bottom: 0px; left: 0px; width: 100%; height: 1px; } .border .edge.edge-left { top: 0px; left: 0px; width: 1px; height: 100%; } .border.border-gradient-horizontal-purple-to-pink .edge.edge-top { background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } .border.border-gradient-horizontal-purple-to-pink .edge.edge-right { background: #ef468b; } .border.border-gradient-horizontal-purple-to-pink .edge.edge-bottom { background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } .border.border-gradient-horizontal-purple-to-pink .edge.edge-left { background: #9351e5; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Crosshairs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-crosshairs [class^="column-"] { position: relative; margin-top: 12px; margin-bottom: 12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner { display: block !important; position: absolute; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:before { content: ''; display: block; width: 12px; height: 1px; position: absolute; background: #d6d8dc; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:after { content: ''; display: block; width: 1px; height: 12px; position: absolute; background: #d6d8dc; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left { top: -12px; left: 0px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:before { left: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:after { top: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right { top: -12px; right: 0px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:before { right: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:after { top: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left { bottom: -12px; left: 0px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:before { left: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:after { bottom: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right { bottom: -12px; right: 0px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:before { right: -6px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:after { bottom: -6px; } .row-crosshairs.row-crosshairs-gradient [class^="column-"] .row-crosshairs-item-corner:before { background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } .row-crosshairs.row-crosshairs-gradient [class^="column-"] .row-crosshairs-item-corner:after { background: #c34fb3; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod.row-pod-shorter { padding-top: 9px; padding-bottom: 9px; } .row-pod.row-pod-taller { padding-top: 90px; padding-bottom: 90px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod.row-pod-shorter { padding-top: 12px; padding-bottom: 12px; } .row-pod.row-pod-taller { padding-top: 120px; padding-bottom: 120px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Crosshairs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-crosshairs [class^="column-"] { margin-top: 16px; margin-bottom: 16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:before { width: 16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:after { height: 16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left { top: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:before { left: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:after { top: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right { top: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:before { right: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:after { top: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left { bottom: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:before { left: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:after { bottom: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right { bottom: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:before { right: -8px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:after { bottom: -8px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod.row-pod-shorter { padding-top: 18px; padding-bottom: 18px; } .row-pod.row-pod-taller { padding-top: 180px; padding-bottom: 180px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Crosshairs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-crosshairs [class^="column-"] { margin-top: 24px; margin-bottom: 24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:before { width: 24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:after { height: 24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left { top: -24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:before { left: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:after { top: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right { top: -24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:before { right: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:after { top: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left { bottom: -24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:before { left: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:after { bottom: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right { bottom: -24px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:before { right: -12px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:after { bottom: -12px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Pod -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-pod.row-pod-shorter { padding-top: 24px; padding-bottom: 24px; } .row-pod.row-pod-taller { padding-top: 240px; padding-bottom: 240px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row Crosshairs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row-crosshairs [class^="column-"] { margin-top: 32px; margin-bottom: 32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:before { width: 32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner:after { height: 32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left { top: -32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:before { left: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-left:after { top: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right { top: -32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:before { right: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-top-right:after { top: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left { bottom: -32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:before { left: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-left:after { bottom: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right { bottom: -32px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:before { right: -16px; } .row-crosshairs [class^="column-"] .row-crosshairs-item-corner-bottom-right:after { bottom: -16px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Canvas Pod ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .canvas-pod.canvas-pod-patterned.canvas-pod-patterned-isometric-grid { background-image: url("../images/layout/canvas/canvas-pod-patterned-isometric-grid@2x.png"); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- layout/page-content.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Content ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Content ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Content ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Content ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Content ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- template.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Header ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #page-header { color: #b08329; margin-top: -63px; text-align: center; overflow: hidden; /* ---------------------------------------------------------------------------------------------------- Page Header Background Video ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Page Header Image ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Page Header Video ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Page Header Promotion ---------------------------------------------------------------------------------------------------- */ } #page-header .icon-container-circle { border: 1px solid #9351e5; border-radius: 39px; display: inline-block; height: 39px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 39px; margin-right: 10px; } #page-header .button-label { padding-left: 10px; } #page-header #page-header-inner { padding-top: 63px; padding-bottom: 13.5px; } #page-header #page-header-background-video { position: absolute !important; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #page-header #page-header-background-video video { opacity: 0.2; filter: alpha(opacity=20); display: none; background-size: cover; background-color: transparent; background-repeat: no-repeat; } #page-header #page-header-background-video #page-header-background-video-swf { position: absolute !important; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; opacity: 0.2; filter: alpha(opacity=20); display: none; } #page-header .page-header-image { margin-left: auto; margin-right: auto; } #page-header .page-header-image img { max-width: 100%; } #page-header .page-header-video { display: inline-block; margin: 0 auto; margin-bottom: 24px; } #page-header .page-header-video .page-header-video-action { position: relative; display: block; width: 80px; height: 80px; cursor: pointer; } #page-header .page-header-video .page-header-video-action .page-header-video-action-border { position: relative; display: block; width: 100%; height: 100%; background-image: url("../images/components/icons/icon-ring.svg"); background-size: 100% 100%; transition: all 0.2s ease; } #page-header .page-header-video .page-header-video-action .page-header-video-action-icon { display: block; width: 0; height: 0; line-height: 0px; border-style: solid; border-width: 16px 0 16px 24px; border-color: transparent transparent transparent #ffffff; _border-color: #000000 #000000 #000000 #ffffff; _filter: progid:DXImageTransform.Microsoft.Chroma(color='@white'); position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -8.4px; } #page-header .page-header-video .page-header-video-action .page-header-video-action-label { display: none; } #page-header .page-header-video .page-header-video-label { display: none; } #page-header .page-header-video:hover .page-header-video-action .page-header-video-action-border { transform: scale(1.1, 1.1); } #page-header #page-header-footer { background: rgba(0, 0, 0, 0.25); } #page-header #page-header-footer a { text-decoration: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- No Video ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ html.no-video .load-video video { display: none; } html.no-video .load-video object { display: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Header ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #page-header { margin-top: -63px; } #page-header #page-header-inner { padding-top: 63px; padding-bottom: 13.5px; } #page-header #page-header-inner.fill-vertical { height: 10000px; } #page-header.left .page-header-headline, #page-header.left .page-header-description { text-align: left; } #page-header.center .page-header-headline, #page-header.center .page-header-description { text-align: center; } #page-header.right .page-header-headline, #page-header.right .page-header-description { text-align: left; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Header ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #page-header { margin-top: -76px; /* ---------------------------------------------------------------------------------------------------- Page Header Background Video ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Page Header Video ---------------------------------------------------------------------------------------------------- */ } #page-header #page-header-inner { padding-top: 76px; padding-bottom: 18px; } #page-header #page-header-background-video video { display: block; } #page-header .page-header-video { margin-bottom: 32px; } #page-header .page-header-video .page-header-video-action { width: 96px; height: 96px; } #page-header .page-header-video .page-header-video-action .page-header-video-action-icon { border-width: 19.2px 0 19.2px 28.8px; margin-top: -19.2px; margin-left: -10.08px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- No Video ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ html.no-video .load-video video { display: none; } html.no-video .load-video object { display: block !important; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Header ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #page-header { margin-top: -96px; /* ---------------------------------------------------------------------------------------------------- Page Header Video ---------------------------------------------------------------------------------------------------- */ } #page-header #page-header-inner { padding-top: 96px; padding-bottom: 27px; } #page-header .page-header-video { margin-bottom: 48px; } #page-header .page-header-video .page-header-video-action { width: 112px; height: 112px; } #page-header .page-header-video .page-header-video-action .page-header-video-action-icon { border-width: 22.4px 0 22.4px 33.6px; margin-top: -22.4px; margin-left: -11.76px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Page Header ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #page-header { margin-top: -114px; /* ---------------------------------------------------------------------------------------------------- Page Header Video ---------------------------------------------------------------------------------------------------- */ } #page-header #page-header-inner { padding-top: 114px; padding-bottom: 36px; } #page-header .page-header-video { margin-bottom: 64px; } #page-header .page-header-video .page-header-video-action { width: 128px; height: 128px; } #page-header .page-header-video .page-header-video-action .page-header-video-action-icon { border-width: 25.6px 0 25.6px 38.4px; margin-top: -25.6px; margin-left: -13.44px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .gutterless.row, .gutterless.container, .gutterless.container-fluid { margin-left: 0; margin-right: 0; } .gutterless > [class^="column-"] { padding-left: 0; padding-right: 0; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Components ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/calendar.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Calendar -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .clndr { font-weight: 400; line-height: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .clndr .clndr-controls { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; max-width: 90%; margin: 0 auto 24px auto; } .clndr .clndr-control-button, .clndr .month { -ms-flex: 1 1 auto; flex: 1 1 auto; margin-top: 1px; } .clndr .clndr-control-button { color: rgba(29, 29, 38, 0.75); cursor: pointer; max-width: 24px; padding: 4px; } .clndr .clndr-control-button .icon-glyph-sprite.icon-glyph-sprite-small { height: 16px; width: 16px; } .clndr .month { color: #323a4e; font-size: 0.95em; font-weight: 600; text-align: center; } .clndr-table { font-size: 0.75em; width: 100%; } .clndr-table .header-day { color: rgba(29, 29, 38, 0.5); font-size: 0.6em; font-weight: 600; padding-bottom: 4px; text-align: center; text-transform: uppercase; } .clndr-table .day { width: 14.285%; } .clndr-table .day-contents { color: #1d1d26; cursor: default; font-weight: 600; padding: 9px 0; position: relative; text-align: center; z-index: 1; } .clndr-table .event .day-contents { background: transparent; border-radius: 4px; cursor: pointer; transition: color 0.25s; } .clndr-table .event .day-contents:before { background: transparent; border-radius: 100%; box-shadow: inset 0 0 0 1px #9351e5; content: ''; height: 0; left: 50%; padding-bottom: 100%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: -1; } .clndr-table .event.active .day-contents { color: #ffffff; } .clndr-table .event.active .day-contents:before { background: #9351e5; } .clndr-table .adjacent-month .day-contents { color: rgba(29, 29, 38, 0.3); } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Resolution: 2x ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- template.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Element -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ pre.prettyprint { border-radius: 5px; overflow-x: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .split-container { border-top: 1px solid rgba(0, 0, 0, 0.1); position: relative; background: #ffffff; z-index: 0; } .split-container:after { content: ''; display: none; height: 100%; left: 50%; position: absolute; top: 0; width: 50%; } .split-container__inner { position: relative; z-index: 10; } .split-container__inner-sidebar-container { padding-right: 0; } .split-container__inner-sidebar-container .search-form .search-form-decoration { bottom: 0; left: 0; transition: background 200ms ease-in; background: rgba(0, 0, 0, 0.1); transform: scale(1); } .split-container__inner-sidebar-container .search-form .search-form-input-wrapper { height: 39px; } .split-container__search-form-column { padding-left: 0; } .split-container__list a { color: #8e939e; display: block; position: relative; padding: 5px 0; } .split-container__list a:hover { text-decoration: none; } .split-container__list li { margin: 0; } .split-container__list .current-menu-item a { color: #9351e5; } @media (min-width: 768px) { .split-container { background: #f5f5f6; } .split-container:after { display: block; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- components/devices.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Browser ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ .device { /* ---------------------------------------------------------------------------------------------------- Browser ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Laptop ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ } .device.device-browser { position: relative; } .device.device-browser .device-browser-header { position: relative; height: 20px; border-radius: 6px 6px 0px 0px; overflow: hidden; } .device.device-browser .device-browser-header .device-browser-header-actions { display: block; position: absolute; top: 8px; left: 8px; } .device.device-browser .device-browser-header .device-browser-header-actions .device-browser-header-action { position: relative; display: block; width: 4px; height: 4px; border-radius: 200px; background: #c2c4ca; float: left; margin-right: 2px; } .device.device-browser .device-browser-header .device-browser-header-actions .device-browser-header-action:last-child { margin-right: 0px; } .device.device-browser .device-browser-content { position: relative; border-radius: 0px 0px 6px 6px; overflow: hidden; } .device.device-browser .device-browser-content .device-browser-content-image-fill { width: 100%; height: auto; display: block; } .device.device-browser .device-browser-content:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); border-radius: 0px 0px 6px 6px; } .device.device-browser .device-browser-content.no-border:after { display: none; } .device.device-browser .device-browser-content .device-browser-content-terminal { background: #232937; padding: 12px; height: 100%; } .device.device-browser .device-browser-content .device-browser-content-terminal .device-browser-content-terminal-code { font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; color: #ebebed; text-transform: none; } .device.device-browser .device-browser-content .device-browser-content-terminal .device-browser-content-terminal-code .prompt { color: #848995; } .device.device-browser .device-browser-content .device-browser-content-terminal .device-browser-content-terminal-code .value { color: #f56753; } .device.device-browser:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); border-radius: 6px; } .device.device-browser.no-border:after { display: none; } .device.device-laptop { position: relative; width: 600px; height: 380px; } .device.device-laptop .device-base { border-radius: 0px 0px 15px 15px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3); display: block; width: 600px; height: 30px; position: absolute; bottom: 0px; left: 0px; background: #ffffff; } .device.device-laptop .device-base .device-base-notch { border-radius: 0px 0px 15px 15px; display: block; width: 100px; height: 10px; position: absolute; top: 0px; left: 50%; background: #ffffff; margin-left: -50px; border: 1px solid rgba(0, 0, 0, 0.3); border-top: none; } .device.device-laptop .device-shell { border-radius: 25px 25px 0px 0px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3); display: block; width: 500px; height: 350px; position: absolute; top: 0px; left: 50%; background: #ffffff; margin-left: -250px; } .device.device-laptop .device-shell .device-shell-camera { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 50%; width: 8px; height: 8px; top: 14px; left: 50%; margin-left: -4px; } .device.device-laptop .device-shell .device-shell-screen { display: block; position: absolute; border-radius: 1px; width: 450px; height: 281.25px; top: 50%; left: 50%; margin-left: -225px; margin-top: -140.625px; } .device.device-laptop .device-shell .device-shell-screen:after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .device.device-iphone { position: relative; width: 200px; height: 420px; } .device.device-iphone .device-shell { border-radius: 25px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3); display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: #ffffff; } .device.device-iphone .device-shell .device-shell-button-power { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 1.5px 1.5px 0px 0px; width: 35px; height: 3px; top: -4px; right: 30px; } .device.device-iphone .device-shell .device-shell-button-switch-vibrate { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 1.5px 0px 0px 1.5px; width: 3px; height: 20px; top: 50px; left: -4px; } .device.device-iphone .device-shell .device-shell-button-volume-up { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 1.5px 0px 0px 1.5px; width: 3px; height: 20px; top: 90px; left: -4px; } .device.device-iphone .device-shell .device-shell-button-volume-down { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 1.5px 0px 0px 1.5px; width: 3px; height: 20px; top: 130px; left: -4px; } .device.device-iphone .device-shell .device-shell-speaker { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 50px; width: 34px; height: 6px; top: 30px; left: 50%; margin-left: -17px; } .device.device-iphone .device-shell .device-shell-camera { display: block; background: rgba(0, 0, 0, 0.3); position: absolute; border-radius: 50%; width: 8px; height: 8px; top: 14px; left: 50%; margin-left: -4px; } .device.device-iphone .device-shell .device-shell-button-home { display: block; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3); position: absolute; border-radius: 50px; width: 34px; height: 34px; bottom: 8px; left: 50%; margin-left: -17px; } .device.device-iphone .device-screen { display: block; position: absolute; border-radius: 1px; width: 180px; height: 324px; top: 50%; left: 50%; margin-left: -90px; margin-top: -162px; } .device.device-iphone .device-screen:after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .device { /* ---------------------------------------------------------------------------------------------------- Browser ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Laptop ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ } .device.device-browser .device-browser-header { height: 24px; } .device.device-browser .device-browser-header .device-browser-header-actions { top: 9px; left: 9px; } .device.device-browser .device-browser-header .device-browser-header-actions .device-browser-header-action { width: 6px; height: 6px; margin-right: 4px; } .device.device-browser .device-browser-content .device-browser-content-terminal { padding: 16px; } .device.device-laptop { width: 720px; height: 456px; } .device.device-laptop .device-base { border-radius: 0px 0px 18px 18px; width: 720px; height: 36px; background: #ffffff; } .device.device-laptop .device-base .device-base-notch { border-radius: 0px 0px 18px 18px; width: 120px; height: 12px; margin-left: -60px; } .device.device-laptop .device-shell { border-radius: 30px 30px 0px 0px; width: 600px; height: 420px; margin-left: -300px; } .device.device-laptop .device-shell .device-shell-camera { border-radius: 60%; width: 9.6px; height: 9.6px; top: 16.8px; margin-left: -4.8px; } .device.device-laptop .device-shell .device-shell-screen { border-radius: 1.2px; width: 540px; height: 337.5px; margin-left: -270px; margin-top: -169px; } .device.device-iphone { width: 240px; height: 504px; } .device.device-iphone .device-shell { border-radius: 30px; } .device.device-iphone .device-shell .device-shell-button-power { border-radius: 1.8px 1.8px 0px 0px; width: 42px; height: 3.6px; top: -4.6px; right: 36px; } .device.device-iphone .device-shell .device-shell-button-switch-vibrate { border-radius: 1.8px 0px 0px 1.8px; width: 3.6px; height: 24px; top: 60px; left: -4.6px; } .device.device-iphone .device-shell .device-shell-button-volume-up { border-radius: 1.8px 0px 0px 1.8px; width: 3.6px; height: 24px; top: 108px; left: -4.6px; } .device.device-iphone .device-shell .device-shell-button-volume-down { border-radius: 1.8px 0px 0px 1.8px; width: 3.6px; height: 24px; top: 156px; left: -4.6px; } .device.device-iphone .device-shell .device-shell-speaker { border-radius: 60px; width: 40.8px; height: 7.2px; top: 36px; margin-left: -20.4px; } .device.device-iphone .device-shell .device-shell-camera { border-radius: 60%; width: 9.6px; height: 9.6px; top: 16.8px; margin-left: -4.8px; } .device.device-iphone .device-shell .device-shell-button-home { border-radius: 60px; width: 40.8px; height: 40.8px; bottom: 9.6px; margin-left: -20.4px; } .device.device-iphone .device-screen { border-radius: 1.2px; width: 216px; height: 388.8px; margin-left: -108px; margin-top: -195px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { .device { /* ---------------------------------------------------------------------------------------------------- Browser ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Laptop ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ } .device.device-browser .device-browser-header { height: 32px; } .device.device-browser .device-browser-header .device-browser-header-actions { top: 12px; left: 12px; } .device.device-browser .device-browser-header .device-browser-header-actions .device-browser-header-action { width: 8px; height: 8px; margin-right: 4px; } .device.device-browser .device-browser-content .device-browser-content-terminal { padding: 24px; } .device.device-laptop { width: 840px; height: 532px; } .device.device-laptop .device-base { border-radius: 0px 0px 21px 21px; width: 840px; height: 42px; background: #ffffff; } .device.device-laptop .device-base .device-base-notch { border-radius: 0px 0px 21px 21px; width: 140px; height: 14px; margin-left: -70px; } .device.device-laptop .device-shell { border-radius: 35px 35px 0px 0px; width: 700px; height: 490px; margin-left: -350px; } .device.device-laptop .device-shell .device-shell-camera { border-radius: 70%; width: 11.2px; height: 11.2px; top: 19.6px; margin-left: -5.6px; } .device.device-laptop .device-shell .device-shell-screen { border-radius: 1.4px; width: 630px; height: 393.75px; margin-left: -315px; margin-top: -196.875px; } .device.device-iphone { width: 280px; height: 588px; } .device.device-iphone .device-shell { border-radius: 35px; } .device.device-iphone .device-shell .device-shell-button-power { border-radius: 2.1px 2.1px 0px 0px; width: 49px; height: 4.2px; top: -5.2px; right: 42px; } .device.device-iphone .device-shell .device-shell-button-switch-vibrate { border-radius: 2.1px 0px 0px 2.1px; width: 4.2px; height: 28px; top: 70px; left: -5.2px; } .device.device-iphone .device-shell .device-shell-button-volume-up { border-radius: 2.1px 0px 0px 2.1px; width: 4.2px; height: 28px; top: 126px; left: -5.2px; } .device.device-iphone .device-shell .device-shell-button-volume-down { border-radius: 2.1px 0px 0px 2.1px; width: 4.2px; height: 28px; top: 182px; left: -5.2px; } .device.device-iphone .device-shell .device-shell-speaker { border-radius: 70px; width: 47.6px; height: 8.4px; top: 42px; margin-left: -23.8px; } .device.device-iphone .device-shell .device-shell-camera { border-radius: 70%; width: 11.2px; height: 11.2px; top: 19.6px; margin-left: -5.6px; } .device.device-iphone .device-shell .device-shell-button-home { border-radius: 70px; width: 47.6px; height: 47.6px; bottom: 11.2px; margin-left: -23.8px; } .device.device-iphone .device-screen { border-radius: 1.4px; width: 252px; height: 453.6px; margin-left: -126px; margin-top: -226.8px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { .device { /* ---------------------------------------------------------------------------------------------------- Browser ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Laptop ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- iPhone ---------------------------------------------------------------------------------------------------- */ } .device.device-browser .device-browser-header { height: 32px; } .device.device-browser .device-browser-header .device-browser-header-actions { top: 12px; left: 12px; } .device.device-browser .device-browser-header .device-browser-header-actions .device-browser-header-action { width: 8px; height: 8px; margin-right: 4px; } .device.device-browser .device-browser-content .device-browser-content-terminal { padding: 32px; } .device.device-laptop { width: 960px; height: 608px; } .device.device-laptop .device-base { border-radius: 0px 0px 24px 24px; width: 960px; height: 48px; background: #ffffff; } .device.device-laptop .device-base .device-base-notch { border-radius: 0px 0px 24px 24px; width: 160px; height: 16px; margin-left: -80px; } .device.device-laptop .device-shell { border-radius: 40px 40px 0px 0px; width: 800px; height: 560px; margin-left: -400px; } .device.device-laptop .device-shell .device-shell-camera { border-radius: 80%; width: 12.8px; height: 12.8px; top: 22.4px; margin-left: -6.4px; } .device.device-laptop .device-shell .device-shell-screen { border-radius: 1.6px; width: 720px; height: 450px; margin-left: -360px; margin-top: -225px; } .device.device-iphone { width: 320px; height: 672px; } .device.device-iphone .device-shell { border-radius: 40px; } .device.device-iphone .device-shell .device-shell-button-power { border-radius: 2.4px 2.4px 0px 0px; width: 56px; height: 4.8px; top: -5.8px; right: 48px; } .device.device-iphone .device-shell .device-shell-button-switch-vibrate { border-radius: 2.4px 0px 0px 2.4px; width: 4.8px; height: 32px; top: 80px; left: -5.8px; } .device.device-iphone .device-shell .device-shell-button-volume-up { border-radius: 2.4px 0px 0px 2.4px; width: 4.8px; height: 32px; top: 144px; left: -5.8px; } .device.device-iphone .device-shell .device-shell-button-volume-down { border-radius: 2.4px 0px 0px 2.4px; width: 4.8px; height: 32px; top: 208px; left: -5.8px; } .device.device-iphone .device-shell .device-shell-speaker { border-radius: 80px; width: 54.4px; height: 9.6px; top: 48px; margin-left: -27.2px; } .device.device-iphone .device-shell .device-shell-camera { border-radius: 80%; width: 12.8px; height: 12.8px; top: 22.4px; margin-left: -6.4px; } .device.device-iphone .device-shell .device-shell-button-home { border-radius: 80px; width: 54.4px; height: 54.4px; bottom: 12.8px; margin-left: -27.2px; } .device.device-iphone .device-screen { border-radius: 1.6px; width: 288px; height: 518.4px; margin-left: -144px; margin-top: -259.2px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Retina Display ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/fancy-media-object.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fancy Media -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .fancy-media { -ms-flex-align: stretch; align-items: stretch; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; margin: 24px; position: relative; } .fancy-media.flush-bottom { margin-bottom: 0; } .fancy-media.flush-top { margin-top: 0; } .fancy-media-blue { background: #2f81f7; } .fancy-media-blue p { color: #ffffff; } .fancy-media-green { background: #27c97b; } .fancy-media-green p { color: #ffffff; } .fancy-media-pink { background: #ff435e; } .fancy-media-pink p { color: #ffffff; } .fancy-media-quote-content { -ms-flex: 2 2 60%; flex: 2 2 60%; padding: 12px 24px; } .fancy-media-quote-photo { background-position: center; background-repeat: no-repeat; background-size: cover; -ms-flex: 1 1 40%; flex: 1 1 40%; } .fancy-media-quote-body:before { content: '“'; display: block; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 62px; font-weight: 500; margin-bottom: -0.15em; margin-top: 0.3em; opacity: 0.6; width: 50%; } .fancy-media-quote-attribution { font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; opacity: 0.6; text-transform: uppercase; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .fancy-media-right { float: right; } .fancy-media-right.fancy-media-offset-50 { margin-right: -50%; } .fancy-media-right.fancy-media-offset-40 { margin-right: -40%; } .fancy-media-right.fancy-media-offset-25 { margin-right: -25%; } .fancy-media-left { float: left; } .fancy-media-left.fancy-media-offset-50 { margin-left: -50%; } .fancy-media-left.fancy-media-offset-40 { margin-left: -40%; } .fancy-media-left.fancy-media-offset-25 { margin-left: -25%; } .fancy-media-125 { margin-left: -12.5%; margin-right: -12.5%; width: 125%; } .fancy-media-50 { width: 50%; } .fancy-media-55 { width: 55%; } .fancy-media-65 { width: 65%; } .fancy-media-75 { width: 75%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- featured-quote.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Quote Typography -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .featured-quote { display: block; text-align: center; } .featured-quote-body { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; padding-bottom: 3px; padding-top: 3px; } .featured-quote-attribution { color: #ffffff; display: block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/filter.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Filter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .filter-header-view-all { display: inline-block; margin-left: 12px; font-size: 0.65em; font-weight: 500; line-height: 1.5; } .filter-sidebar .form-control-select select::-ms-expand { display: none; } .filter-sidebar .filter-criteria-item .panel-content { border: 1px solid rgba(50, 58, 78, 0.1); border-radius: 5px; color: #9351e5; cursor: pointer; display: block; padding: 0.95em 0 0.75em 0; position: relative; transition: background 0.5s, border 0.5s, color 0.5s; } .filter-sidebar .filter-criteria-item .panel-content:hover { background: rgba(50, 58, 78, 0.05); box-shadow: none; } .filter-sidebar .filter-criteria-item .panel-content h6 { color: #9351e5; font-size: 0.9em; font-weight: 400; transition: color 0.5s; } .filter-sidebar .filter-criteria-item .panel-content .filter-criteria-icon { height: 32px; fill: #9351e5; stroke: none; transition: fill 0.5s; width: 32px; } .filter-sidebar .filter-criteria-item .filter-criteria-checkmark { fill: #ffffff; opacity: 0; position: absolute; right: 10px; stroke: #ffffff; stroke-width: 2px; top: 10px; transform: scale(0); transition: opacity 0.5s, transform 0.5s; } .filter-sidebar .filter-criteria-item.active .panel-content { border: 1px solid #9351e5; background: #9351e5; color: #ffffff; } .filter-sidebar .filter-criteria-item.active .panel-content h6 { color: #ffffff; } .filter-sidebar .filter-criteria-item.active .panel-content .filter-criteria-icon { fill: #ffffff; } .filter-sidebar .filter-criteria-item.active .panel-content .filter-criteria-checkmark { opacity: 1; transform: scale(1); } .filters-list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -5px; } .filter-criteria-item { -ms-flex: 1; flex: 1; margin: 5px; max-width: calc(50% - 10px); min-width: calc(50% - 10px); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .filter-sidebar { -ms-flex-order: 2; order: 2; } .filter-content { -ms-flex-order: 1; order: 1; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .filter-sidebar .filter-criteria-item .filter-criteria-checkmark { right: 2px; top: 2px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .filter-sidebar .filter-criteria-item .filter-criteria-checkmark { right: 6px; top: 6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .filter-sidebar .filter-criteria-item .filter-criteria-checkmark { right: 10px; top: 10px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- template.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Source Sans Pro -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* @charset "UTF-8"; @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200; src: local('Source Sans Pro Extra Light'), local('Source-Sans–Pro-Extra-Light'), url("@{path-fonts}soure-sans=pro/SourceSansPro-ExtraLight.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 200; src: local('Source Sans Pro Extra Light Italic'), local('Source-Sans–Pro-Extra-Light-Italic'), url("@{path-fonts}soure-sans=pro/SourceSansPro-ExtraLightItalic.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('Source-Sans–Pro-Light'), url("@{path-fonts}soure-sans=pro/SourceSansPro-Light.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 300; src: local('Source Sans Pro Light Italic'), local('Source-Sans–Pro-Light-Italic'), url("@{path-fonts}soure-sans=pro/SourceSansPro-LightItalic.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('Source-Sans–Pro-Regular'), url("@{path-fonts}soure-sans=pro/SourceSansPro-Regular.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('Source-Sans–Pro-Italic'), url("@{path-fonts}soure-sans=pro/SourceSansPro-Italic.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local('Source Sans Pro Semibold'), local('Source-Sans–Pro-Semibold'), url("@{path-fonts}soure-sans=pro/SourceSansPro-Semibold.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 600; src: local('Source Sans Pro Semibold Italic'), local('Source-Sans–Pro-Semibold-Italic'), url("@{path-fonts}soure-sans=pro/SourceSansPro-SemiboldItalic.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('Source-Sans–Pro-Bold'), url("@{path-fonts}soure-sans=pro/SourceSansPro-Bold.ttf") format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 700; src: local('Source Sans Pro Bold Italic'), local('Source-Sans–Pro-Bold-Italic'), url("@{path-fonts}soure-sans=pro/SourceSansPro-BoldItalic.ttf") format('truetype'); } */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- DIN -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @font-face { font-family: "DIN Next W01_n1"; src: url("../fonts/din/d8b8889b-af70-4f3d-b86e-e0cf674dd069.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/d8b8889b-af70-4f3d-b86e-e0cf674dd069.eot?#iefix"); src: url("../fonts/din/d8b8889b-af70-4f3d-b86e-e0cf674dd069.eot?#iefix") format("eot"), url("../fonts/din/d544417b-3dbf-4d66-9f4c-cc1264548542.woff2") format("woff2"), url("../fonts/din/02c54ffd-ffe5-4a1d-baf3-6f2f329e985e.woff") format("woff"), url("../fonts/din/be798c01-2b57-4464-b4f2-8fdda5148346.ttf") format("truetype"), url("../fonts/din/9286c432-d97d-4af1-8608-fbd7b9cb38a0.svg#9286c432-d97d-4af1-8608-fbd7b9cb38a0") format("svg"); font-weight: 100; font-style: normal; } @font-face { font-family: "DIN Next W01_n2"; src: url("../fonts/din/c0be55e4-0b40-4646-a643-431ca3639465.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/c0be55e4-0b40-4646-a643-431ca3639465.eot?#iefix"); src: url("../fonts/din/c0be55e4-0b40-4646-a643-431ca3639465.eot?#iefix") format("eot"), url("../fonts/din/9ef359c1-4458-4560-874a-1f40df1c01d1.woff2") format("woff2"), url("../fonts/din/43e82893-3880-47b2-82d6-5b136f8f7477.woff") format("woff"), url("../fonts/din/72f03533-e4e2-48a4-9d34-53d2964eb649.ttf") format("truetype"), url("../fonts/din/c11fd4df-941d-4a17-8af0-be88e02e0042.svg#c11fd4df-941d-4a17-8af0-be88e02e0042") format("svg"); font-weight: 200; font-style: normal; } @font-face { font-family: "DIN Next W01_n4"; src: url("../fonts/din/6fa09720-5b0e-48a5-8895-5af8af928c01.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/6fa09720-5b0e-48a5-8895-5af8af928c01.eot?#iefix"); src: url("../fonts/din/6fa09720-5b0e-48a5-8895-5af8af928c01.eot?#iefix") format("eot"), url("../fonts/din/5dd9f4c4-cfde-415c-bb51-433569311de5.woff2") format("woff2"), url("../fonts/din/3b15daf5-d7fb-4099-93b9-db20fd26c2fe.woff") format("woff"), url("../fonts/din/16159505-c85d-44ba-ba2b-64f94e68ddb5.ttf") format("truetype"), url("../fonts/din/b2be45ad-0169-4c84-9fc9-66a0e9ebff0a.svg#b2be45ad-0169-4c84-9fc9-66a0e9ebff0a") format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: "DIN Next W01_n5"; src: url("../fonts/din/0b46a18d-fb34-4ef7-b5da-5902c510577a.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/0b46a18d-fb34-4ef7-b5da-5902c510577a.eot?#iefix"); src: url("../fonts/din/0b46a18d-fb34-4ef7-b5da-5902c510577a.eot?#iefix") format("eot"), url("../fonts/din/76b8cda6-0ded-4197-acab-e314297eb90f.woff2") format("woff2"), url("../fonts/din/2613a064-2962-44af-ae6f-3640e06e8dc4.woff") format("woff"), url("../fonts/din/2889b152-497e-4ea3-a90d-02854d136a8d.ttf") format("truetype"), url("../fonts/din/4f311da1-9ec6-4379-9621-b45be0e23abd.svg#4f311da1-9ec6-4379-9621-b45be0e23abd") format("svg"); font-weight: 500; font-style: normal; } @font-face { font-family: "DIN Next W01_n7"; src: url("../fonts/din/71888b4d-cd66-4c8b-9a5c-b37014e8e4fa.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/71888b4d-cd66-4c8b-9a5c-b37014e8e4fa.eot?#iefix"); src: url("../fonts/din/71888b4d-cd66-4c8b-9a5c-b37014e8e4fa.eot?#iefix") format("eot"), url("../fonts/din/258804c2-9ca6-4856-bad7-67cde4f087b4.woff2") format("woff2"), url("../fonts/din/0c0418fe-d324-4ab2-978a-e8201c646ca1.woff") format("woff"), url("../fonts/din/2c4f6a99-1274-42cd-8d14-fecf6ae449a4.ttf") format("truetype"), url("../fonts/din/aabfdee7-da54-4fae-93d3-afae95449faa.svg#aabfdee7-da54-4fae-93d3-afae95449faa") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: "DIN Next W01_n8"; src: url("../fonts/din/10ea3ea4-cd5d-4305-a069-553921bb4565.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/10ea3ea4-cd5d-4305-a069-553921bb4565.eot?#iefix"); src: url("../fonts/din/10ea3ea4-cd5d-4305-a069-553921bb4565.eot?#iefix") format("eot"), url("../fonts/din/acbfa600-0449-44a4-b773-d281b71044d8.woff2") format("woff2"), url("../fonts/din/d245e531-16e5-4428-904d-d6cb987d44f9.woff") format("woff"), url("../fonts/din/b85fd97e-f10c-4dde-87fb-51dd1bdbf114.ttf") format("truetype"), url("../fonts/din/3aed4526-cc9c-4bc4-9642-157b26400e95.svg#3aed4526-cc9c-4bc4-9642-157b26400e95") format("svg"); font-weight: 800; font-style: normal; } @font-face { font-family: "DIN Next W01_n9"; src: url("../fonts/din/4fdd4a2f-fc95-4fd1-9b35-a883e0b2b3d6.eot?#iefix") format("eot"); } @font-face { font-family: "DIN Next W01"; src: url("../fonts/din/4fdd4a2f-fc95-4fd1-9b35-a883e0b2b3d6.eot?#iefix"); src: url("../fonts/din/4fdd4a2f-fc95-4fd1-9b35-a883e0b2b3d6.eot?#iefix") format("eot"), url("../fonts/din/b7952e68-ebbf-4bb8-be04-eec334679561.woff2") format("woff2"), url("../fonts/din/5a992686-aab3-4b26-9c57-f41b0f01b6fd.woff") format("woff"), url("../fonts/din/5229463c-ec7d-4d0c-97ca-49aa4ff3abe5.ttf") format("truetype"), url("../fonts/din/c67946ea-aa8b-46fe-96af-14d6d108b17b.svg#c67946ea-aa8b-46fe-96af-14d6d108b17b") format("svg"); font-weight: 900; font-style: normal; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/greenhouse-iframe.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #grnhse_iframe { max-width: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/icons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .icon { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Icon Styles -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .icon.icon-facebook { color: #3b5998; } .icon.icon-twitter { color: #55acee; } .icon.icon-black { color: #000000; } .icon.icon-white { color: #ffffff; } .icon.icon-neutral { color: #323a4e; } .icon.icon-purple { color: #9351e5; } .icon.icon-purple-light { color: #e9dcfa; } .icon.icon-pink { color: #ef468b; } .icon.icon-blue { color: #2f81f7; } .icon.icon-green { color: #27c97b; } .icon.icon-red { color: #f33745; } .icon.icon-gradient { -webkit-text-fill-color: transparent; background-clip: text; } .icon.icon-gradient use { -webkit-text-fill-color: transparent; background-clip: text; } .icon.icon-gradient.icon-gradient-purple-to-pink { color: #9351e5 !important; background-image: -webkit-linear-gradient(top, #9351e5 #ef468b, #333 100%) !important; } .icon.icon-gradient.icon-gradient-purple-to-pink.icon-gradient-horizontal { background-image: -webkit-linear-gradient(left, #9351e5 #ef468b, #333 100%) !important; background-repeat: repeat-x; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/iframeresize.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- iFrameResizer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .iframeresizer { width: 100%; position: absolute; top: -600px; visibility: hidden; opacity: 0; } .iframeresizer.loaded { position: relative; top: 0; visibility: visible; opacity: 1; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .detect-ad-block:before { content: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Sed posuere consectetur est at lobortis."; display: block; width: 100%; height: auto; text-align: center; } picture, picture img, .responsive-image img { display: block; } .responsive-image { opacity: 0; transition: opacity 250ms ease-out; } .responsive-image--cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .responsive-image img { display: block; max-width: 100%; } .responsive-image--loaded { opacity: 1; } .responsive-image--background-image[data-type="background"] img { visibility: hidden; display: none; } .responsive-image--background-image[data-type="background"] img img { visibility: hidden; } .responsive-image--contain { background-size: contain; background-repeat: no-repeat; background-position: center center; } .responsive-image--position-bottom { background-position: bottom center; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- media-grid.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Media Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .media-grid-wrapper { position: relative; } .media-grid-wrapper.media-grid-wrapper-16-9:after { content: ''; display: block; padding-bottom: 56.25%; width: 100%; } .media-grid-wrapper-full-screen, .media-grid-wrapper-row, .media-grid-wrapper-square { position: relative; } .media-grid-wrapper-full-screen:after, .media-grid-wrapper-row:after, .media-grid-wrapper-square:after { content: ''; display: block; width: 100%; } .media-grid-wrapper-row:after { padding-bottom: 100%; } .media-grid-wrapper-row .media-grid .media-grid-one-quarter.media-grid-column { -ms-flex: 1 1 50%; flex: 1 1 50%; max-width: 50%; min-width: 50%; } .media-grid-wrapper-row .media-grid .media-grid-row { -ms-flex-wrap: wrap; flex-wrap: wrap; } .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(3n), .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(4n) { padding-top: 8px; } .media-grid-wrapper-square:after { padding-bottom: 100%; } .media-grid-wrapper-full-screen:after { padding-bottom: 200%; } .media-grid { -ms-flex-align: stretch; align-items: stretch; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .media-grid.media-grid-full-screen { -ms-flex-direction: column; flex-direction: column; } .media-grid.media-grid-full-screen > .media-grid-column.media-grid-one-half { -ms-flex: 1 1 50%; flex: 1 1 50%; height: 50%; min-height: 50%; min-width: 100%; max-height: 50%; max-width: 100%; width: 100%; } .media-grid.media-grid-dark { background: #323a4e; } .media-grid .media-grid-fill { -ms-flex: 1 1 100%; flex: 1 1 100%; } .media-grid .media-grid-fill.media-grid-column { max-width: 100%; min-width: 100%; width: 100%; } .media-grid .media-grid-fill.media-grid-row { height: 100%; max-height: 100%; min-height: 100%; } .media-grid .media-grid-one-quarter { -ms-flex: 1 1 25%; flex: 1 1 25%; } .media-grid .media-grid-one-quarter.media-grid-column { max-width: 25%; min-width: 25%; } .media-grid .media-grid-one-quarter.media-grid-row { height: 25%; max-height: 25%; min-height: 25%; } .media-grid .media-grid-one-third { -ms-flex: 1 1 33.333%; flex: 1 1 33.333%; } .media-grid .media-grid-one-third.media-grid-column { max-width: 33.333%; min-width: 33.333%; width: 33.333%; } .media-grid .media-grid-one-third.media-grid-row { height: 33.333%; max-height: 33.333%; min-height: 33.333%; } .media-grid .media-grid-one-half { -ms-flex: 1 1 50%; flex: 1 1 50%; } .media-grid .media-grid-one-half.media-grid-column { max-width: 50%; min-width: 50%; width: 50%; } .media-grid .media-grid-one-half.media-grid-row { height: 50%; max-height: 50%; min-height: 50%; } .media-grid .media-grid-two-thirds { -ms-flex: 2 2 66.666%; flex: 2 2 66.666%; } .media-grid .media-grid-two-thirds.media-grid-column { max-width: 66.666%; min-width: 66.666%; width: 66.666%; } .media-grid .media-grid-two-thirds.media-grid-row { height: 66.666%; max-height: 66.666%; min-height: 66.666%; } .media-grid .media-grid-column { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .media-grid .media-grid-row { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .media-grid.media-grid-padded .media-grid-column { padding: 0 4px; } .media-grid.media-grid-padded .media-grid-row { padding: 4px 0; } .media-grid-content-wrapper { position: relative; width: 100%; } .media-grid-content-wrapper:before { content: ''; display: block; height: 0; padding-bottom: 100%; width: 100%; } .media-grid-content { background-position: center; background-repeat: no-repeat; background-size: cover; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; height: 100%; -ms-flex-pack: center; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; } .media-grid-content-tweet { background: #55acee; color: #ffffff; font-size: 1em; line-height: 1.3; padding: 12px; } .media-grid-content-tweet:hover { color: #ffffff; text-decoration: none; } .media-grid-content-tweet .media-grid-tweet-body { display: block; margin-bottom: 12px; } .media-grid-content-tweet .media-grid-tweet-body a { color: #ffffff; } .media-grid-content-tweet .media-grid-tweet-username { color: rgba(255, 255, 255, 0.6); font-weight: 400; text-decoration: none; } .media-grid-content-tweet .media-grid-tweet-logo { bottom: 24px; opacity: 0.4; position: absolute; right: 24px; } .media-grid-content-video { background: #000000; cursor: pointer; } .media-grid-content-video .load-video object { display: block; } html.video .media-grid-content-video .load-video object { display: none; z-index: 10; } .media-grid-content-video .load-video video { display: none; } html.video .media-grid-content-video .load-video video { display: block; z-index: 10; } .media-grid-content-video .media-grid-video-action { display: inline-block; height: 80px; position: relative; width: 80px; z-index: 2; } .media-grid-content-video .media-grid-video-action .media-grid-video-action-border { background-image: url("../images/components/icons/icon-ring.svg"); background-size: 100%; display: block; height: 100%; transition: transform 0.2s ease; width: 100%; } .media-grid-content-video .media-grid-video-action .media-grid-video-action-icon { border-bottom: 16px solid transparent; border-left: 24px solid #ffffff; border-top: 16px solid transparent; font-size: 0; left: 50%; position: absolute; top: 50%; transform: translate(-33%, -50%); } .media-grid-content-video .media-grid-video-thumbnail { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; transition: opacity 0.5s; width: 100%; z-index: 1; } .media-grid-content-video .media-grid-video-thumbnail video, .media-grid-content-video .media-grid-video-thumbnail object { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .media-grid-content-video:hover .media-grid-video-action-border { transform: scale(1.1); } .media-grid-content-video:hover .media-grid-video-thumbnail { opacity: 0.6; } .media-grid-popup-link { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .media-grid-popup-modal { background: rgba(50, 58, 78, 0); cursor: pointer; height: 100%; left: 0; opacity: 1 !important; position: fixed; top: 0; transition: background 0.3s; width: 100%; z-index: 10000; } .media-grid-popup-modal.is-open { background: rgba(50, 58, 78, 0.75); } .media-grid-popup-modal.is-closing { background: rgba(50, 58, 78, 0); } .media-grid-popup-modal.is-closing .modal-close { transform: rotate(360deg); } .media-grid-popup-modal.is-open .media-grid-popup-modal-content { box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 40px 1px; } .media-grid-popup-modal .modal-close { transform: rotate(90deg); } .media-grid-popup-modal .modal { box-shadow: none; } .media-grid-popup-modal-content { cursor: default; left: 50%; max-width: 100%; position: absolute; top: 50%; transform-origin: 0 0; transform: scale(0) translate(-50%, -50%); transition: transform 0.3s; } .is-open .media-grid-popup-modal-content { transform: scale(1) translate(-50%, -50%); } .media-grid-popup-modal-content img { display: block; } .media-grid-popup-modal-content iframe { border: none; display: block; left: 0; position: absolute; height: 100%; top: 0; z-index: 1; width: 100%; } .media-grid-popup-iframe .media-grid-popup-modal-content { width: 100%; } .media-grid-popup-iframe .media-grid-popup-modal-content:after { content: ''; display: block; padding-bottom: 56.25%; width: 100%; } .media-grid-popup-iframe .media-grid-popup-modal-content img { display: none; } .media-grid-content-force-aspect-ratio-16-9:after { content: ''; display: block; padding-bottom: 56.25%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .media-grid.media-grid-padded .media-grid-column { padding: 0 8px; } .media-grid.media-grid-padded .media-grid-row { padding: 8px 0; } .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(3n), .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(4n) { padding-top: 16px; } .media-grid-content-tweet { font-size: 1.25em; padding: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .media-grid-wrapper-full-screen:after { padding-bottom: 50%; } .media-grid.media-grid-full-screen { -ms-flex-direction: row; flex-direction: row; } .media-grid.media-grid-full-screen .media-grid-column.media-grid-one-half { -ms-flex: 1 1 50%; flex: 1 1 50%; height: 100%; min-height: 100%; min-width: 50%; max-height: 100%; max-width: 50%; width: 50%; } .media-grid-content-tweet { font-size: 1.125em; padding: 18px; } .media-grid-content-tweet .media-grid-tweet-body { margin-bottom: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .media-grid-wrapper-row:after { padding-bottom: 25%; } .media-grid-wrapper-row .media-grid .media-grid-one-quarter.media-grid-column { -ms-flex: 1 1 25%; flex: 1 1 25%; max-width: 25%; min-width: 25%; } .media-grid-wrapper-row .media-grid .media-grid-row { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(3n), .media-grid-wrapper-row .media-grid.media-grid-padded .media-grid-one-quarter.media-grid-column:nth-child(4n) { padding-top: 0; } .media-grid-content-tweet { padding: 24px; } .media-grid-content-tweet .media-grid-tweet-logo { bottom: 36px; left: 36px; right: auto; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .media-grid-content-tweet { font-size: 1.375em; padding: 48px; } .media-grid-content-tweet .media-grid-tweet-logo { bottom: 48px; left: 48px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/modal/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Textbox Fix -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .modal-header { border: none; box-shadow: none; padding-bottom: 0px; } .modal .form-control { transform: translateZ(0); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { left: 50%; width: 511px; margin: 0px 0px 0px -255.5px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-header { padding: 32px 32px; } .modal .modal-body { padding: 32px 32px; } .modal .modal-footer { padding: 32px 32px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .container { width: 584px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: 644px; margin: 0px 0px 0px -322px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-header { padding: 48px 48px; } .modal .modal-body { padding: 48px 48px; } .modal .modal-footer { padding: 48px 48px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .container { width: 736px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: 770px; margin: 0px 0px 0px -385px; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .modal .modal-header { padding: 64px 64px; } .modal .modal-body { padding: 64px 64px; } .modal .modal-footer { padding: 64px 64px; } .modal.modal-fullscreen { /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ } .modal.modal-fullscreen .container { width: 880px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/pagination.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination Styles ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination Responsive Scaling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination State: Normal ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination State: Hover ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination State: Active ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination State: Selected ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Pagination State: Disabled ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pagination { display: block; margin: 0px 0px 12px 0px; text-align: center; } .pagination ul { display: inline-block; *display: inline; *zoom: 1; margin: 0px auto; border-radius: 3px; } .pagination ul > li { display: block; float: left; margin-bottom: 0px; margin-left: 2px; padding: 0px; } .pagination ul > li:before { display: none; padding: 0px; margin: 0px; } .pagination ul > li > a, .pagination ul > li > span { position: relative; vertical-align: middle; cursor: pointer; text-align: center; *display: inline; *zoom: 1; *margin-left: .3em; display: inline-block; font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ background: none; background-image: linear-gradient(to bottom, none 0%, none 100%); background-repeat: repeat-x; border-width: 1px; border-color: #e0e1e4; border-style: solid; border-radius: 0px !important; } .pagination ul > li > a:first-child, .pagination ul > li > span:first-child { *margin-left: 0; } .pagination ul > li > a.dropdown-toggle, .pagination ul > li > span.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle:after, .pagination ul > li > span.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -1px; margin-right: 0px; } .pagination ul > li > a:hover, .pagination ul > li > a:focus { background: rgba(50, 58, 78, 0.0125); border-color: #e0e1e4; } .pagination ul > li > a:active { background: rgba(50, 58, 78, 0.025); border-top-color: #e0e1e4; box-shadow: #e0e1e4; } .pagination ul > li > a.current, .pagination ul > li > span.current { background: #e0e1e4; } .pagination ul > li:first-child { margin-left: 0px; } .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } .pagination.short { margin-bottom: 6px; } .pagination.tall { margin-bottom: 24px; } .pagination.pagination-left { text-align: left; } .pagination.pagination-right { text-align: right; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pagination { margin: 0px 0px 12px 0px; } .pagination ul { border-radius: 3px; } .pagination ul > li > a, .pagination ul > li > span { font-size: 14px; line-height: 16px; height: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; border-radius: 4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle, .pagination ul > li > span.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle:after, .pagination ul > li > span.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -1px; margin-right: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pagination { margin: 0px 0px 16px 0px; } .pagination ul { border-radius: 3.3px; } .pagination ul > li > a, .pagination ul > li > span { font-size: 15px; line-height: 17px; height: 40px; padding-top: 11px; padding-bottom: 11px; padding-left: 26px; padding-right: 26px; border-radius: 4.4px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle, .pagination ul > li > span.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle:after, .pagination ul > li > span.dropdown-toggle:after { border-width: 5px 4.5px 0 4.5px; margin-left: 6px; margin-top: -2px; margin-right: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pagination { margin: 0px 0px 24px 0px; } .pagination ul { border-radius: 3.6px; } .pagination ul > li > a, .pagination ul > li > span { font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 28px; padding-right: 28px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle, .pagination ul > li > span.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle:after, .pagination ul > li > span.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 7px; margin-top: -2px; margin-right: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .pagination { margin: 0px 0px 32px 0px; } .pagination ul { border-radius: 3.6px; } .pagination ul > li > a, .pagination ul > li > span { font-size: 16px; line-height: 19px; height: 42px; padding-top: 11px; padding-bottom: 11px; padding-left: 28px; padding-right: 28px; border-radius: 4.8px; /* ----------------------------------------------------------------------------- Button Dropdown ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle, .pagination ul > li > span.dropdown-toggle { /* ----------------------------------------------------------------------------- Button Dropdown Caret ----------------------------------------------------------------------------- */ } .pagination ul > li > a.dropdown-toggle:after, .pagination ul > li > span.dropdown-toggle:after { border-width: 6px 5px 0 5px; margin-left: 7px; margin-top: -2px; margin-right: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/panels.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { /* ----------------------------------------------------------------------------- Panel (Flex) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Flex) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Light) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Frame) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Info) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Warning) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel (Danger) ----------------------------------------------------------------------------- */ } .panel .panel-content.flush, .panel .panel-footer.flush, .panel .panel-header.flush { padding-bottom: 0; padding-top: 0; } .panel .panel-content.flush-bottom, .panel .panel-footer.flush-bottom, .panel .panel-header.flush-bottom { padding-bottom: 0; } .panel .panel-content.flush-top, .panel .panel-footer.flush-top, .panel .panel-header.flush-top { padding-top: 0; } .panel.panel-flex { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; -ms-flex-direction: column; flex-direction: column; } .panel.panel-flex .panel-content { -ms-flex-positive: 1; flex-grow: 1; } .panel.panel-simple .panel-content + .panel-footer { padding-top: 0px; border-width: 0px; } .panel.panel-light { background: #ffffff; /* ----------------------------------------------------------------------------- Panel Header (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Content (Inverse) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Panel Footer (Inverse) ----------------------------------------------------------------------------- */ } .panel.panel-frame { margin: -24px; padding: 24px; margin-bottom: 0px; } .panel.panel-frame.panel-frame-pull-top { margin-top: -36px; padding-top: 36px; } .panel.panel-frame.panel-frame-pull-bottom { margin-bottom: -12px; padding-bottom: 36px; } .panel.panel-frame.flush-bottom { margin-bottom: -36px; } .panel.panel-info { background: #eaf2fe; color: #2667c6; } .panel.panel-info strong { color: #2667c6; } .panel.panel-info a { color: #2f81f7 !important; text-decoration: underline; } .panel.panel-warning { background: #fef0ee; color: #c45242; } .panel.panel-warning strong { color: #c45242; } .panel.panel-warning a { color: #f56753 !important; text-decoration: underline; } .panel.panel-danger { background: #feebec; color: #c22c37; } .panel.panel-danger strong { color: #c22c37; } .panel.panel-danger a { color: #f33745 !important; text-decoration: underline; } .panel .panel-header, .panel .panel-content, .panel .panel-footer { position: relative; z-index: 2; } .panel .panel-image-overlay { background-position: center; background-size: cover; -webkit-filter: gray; filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0; width: 100%; z-index: 1; } /* ----------------------------------------------------------------------------- Panel (Link) ----------------------------------------------------------------------------- */ a.panel, .panel-large > a { transition: box-shadow 0.2s ease, transform 0.2s ease; } a.panel:hover, .panel-large > a:hover { text-decoration: none; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 6px 10px 0px rgba(0, 0, 0, 0.1); cursor: pointer; } /* ----------------------------------------------------------------------------- Panel: Large ----------------------------------------------------------------------------- */ .panel-large { width: 100%; } .panel-large .panel-content-wrapper { color: #ffffff; } .panel-large .panel-content-wrapper:hover { color: #ffffff; text-decoration: none; } .panel-large .panel-content-wrapper.panel-content { padding: 0; } .panel-large .panel-content { -ms-flex-align: stretch; align-items: stretch; background: #ffffff; color: #323a4e; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; } .panel-large .panel-content:hover { color: #323a4e; } .panel-large .panel-copy { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 24px 24px 54px 24px; position: relative; } .panel-large .panel-category, .panel-large .panel-heading, .panel-large .panel-cta { color: inherit; position: relative; z-index: 2; } .panel-large .panel-category { color: #9351e5; font-weight: 500; } .panel-large .panel-category .icon { margin-right: 8px; } .panel-large .panel-heading { font-size: 2em; line-height: 1.2em; } .panel-large .panel-excerpt { color: rgba(50, 58, 78, 0.7); font-size: 1.2em; line-height: 1.5em; } .panel-large .panel-cta { bottom: 24px; color: #9351e5; font-size: 0.9em; font-weight: 600; position: absolute; } .panel-large .panel-cta .button { padding-left: 24px; padding-right: 24px; } .panel-large .panel-image-wrapper { display: block; position: relative; } .panel-large .panel-image-wrapper:after { content: ''; display: block; padding-bottom: 100%; } .panel-large .panel-image-wrapper .panel-gradient, .panel-large .panel-image-wrapper .panel-image { display: block; height: 100%; left: 0; position: absolute; right: 0; top: 0; z-index: 1; width: 100%; } .panel-large .panel-image-wrapper .panel-gradient { z-index: 1; } .panel-large .panel-image-wrapper .panel-image { background-position: center; background-size: cover; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 2; } .panel-large .panel-image-wrapper .panel-gradient + .panel-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.15; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { /* ----------------------------------------------------------------------------- Panel (Frame) ----------------------------------------------------------------------------- */ } .panel.panel-frame { margin: -24px; padding: 24px; margin-bottom: 24px; } .panel.panel-frame.panel-frame-pull-top { margin-top: -36px; padding-top: 36px; } .panel.panel-frame.panel-frame-pull-bottom { margin-bottom: -12px; padding-bottom: 36px; } .panel.panel-frame.flush-bottom { margin-bottom: -36px; } /* ----------------------------------------------------------------------------- Panel: Large ----------------------------------------------------------------------------- */ .panel-large .panel-content-wrapper { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .panel-large .panel-copy { max-width: 58.75%; padding: 20px 20px 50px 20px; } .panel-large .panel-cta { bottom: 20px; } .panel-large .panel-image-wrapper { -ms-flex: 1 1 41.25%; flex: 1 1 41.25%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { /* ----------------------------------------------------------------------------- Panel (Frame) ----------------------------------------------------------------------------- */ } .panel.panel-frame { padding: 16px; margin: -16px 0px; margin-bottom: 16px; } .panel.panel-frame.panel-frame-pull-top { margin-top: -64px; padding-top: 64px; } .panel.panel-frame.panel-frame-pull-bottom { margin-bottom: -32px; padding-bottom: 64px; } .panel.panel-frame:flush-bottom { margin-bottom: -64px; } .panel.panel-frame.panel-frame-pull-left { margin-left: -1000%; padding-left: 1000%; } .panel.panel-frame.panel-frame-pull-right { margin-right: -1000%; padding-right: 1000%; } /* ----------------------------------------------------------------------------- Panel: Large ----------------------------------------------------------------------------- */ .panel-large .panel-copy { padding: 32px 32px 56px 32px; } .panel-large .panel-cta { bottom: 22.85714286px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { /* ----------------------------------------------------------------------------- Panel (Frame) ----------------------------------------------------------------------------- */ } .panel.panel-frame { padding: 24px; margin: -24px 0px; margin-bottom: 24px; } .panel.panel-frame.panel-frame-pull-top { margin-top: -96px; padding-top: 96px; } .panel.panel-frame.panel-frame-pull-bottom { margin-bottom: -48px; padding-bottom: 96px; } .panel.panel-frame:flush-bottom { margin-bottom: -96px; } /* ----------------------------------------------------------------------------- Panel: Large ----------------------------------------------------------------------------- */ .panel-large .panel-copy { padding: 48px 48px 84px 48px; } .panel-large .panel-cta { bottom: 34.28571429px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { /* ----------------------------------------------------------------------------- Panel (Frame) ----------------------------------------------------------------------------- */ } .panel.panel-frame { padding: 32px; margin: -32px 0px; margin-bottom: 32px; } .panel.panel-frame.panel-frame-pull-top { margin-top: -128px; padding-top: 128px; } .panel.panel-frame.panel-frame-pull-bottom { margin-bottom: -64px; padding-bottom: 128px; } .panel.panel-frame:flush-bottom { margin-bottom: -128px; } /* ----------------------------------------------------------------------------- Panel: Large ----------------------------------------------------------------------------- */ .panel-large .panel-copy { padding: 44.8px 44.8px 86.4px 44.8px; } .panel-large .panel-cta { bottom: 38.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/panel-grid.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-grid { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; /* ----------------------------------------------------------------------------- Single Panel ----------------------------------------------------------------------------- */ } .panel-grid .panel-container { display: -ms-flexbox; display: flex; padding: 8px 12px; } .panel-grid .panel-content { -ms-flex: 1 1 100%; flex: 1 1 100%; padding: 12px; } .panel-grid .panel-container-4 { -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; } .panel-grid .panel-container-3 { -ms-flex: 1 1 25%; flex: 1 1 25%; } .panel-grid .panel-container-2 { -ms-flex: 1 1 50%; flex: 1 1 50%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .panel-grid { /* ----------------------------------------------------------------------------- Single Panel ----------------------------------------------------------------------------- */ } .panel-grid .panel-container { padding: 1.66666667% 2.5%; } .panel-grid .panel-content { padding: 2.5%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .panel-grid { /* ----------------------------------------------------------------------------- Single Panel ----------------------------------------------------------------------------- */ } .panel-grid .panel-container { padding: 10.66666667px 16px; } .panel-grid .panel-content { padding: 16px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .panel-grid { /* ----------------------------------------------------------------------------- Single Panel ----------------------------------------------------------------------------- */ } .panel-grid .panel-container { padding: 16px 24px; } .panel-grid .panel-content { padding: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .panel-grid { /* ----------------------------------------------------------------------------- Single Panel ----------------------------------------------------------------------------- */ } .panel-grid .panel-container { padding: 21.33333333px 32px; } .panel-grid .panel-content { padding: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/product-cta.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Product CTAs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .product-cta { -ms-flex-align: stretch; align-items: stretch; background: #282e3e; background-size: cover; background-position: center; border-radius: 10px; color: #ffffff; display: -ms-flexbox; display: flex; position: relative; } .product-cta:after { background: rgba(35, 41, 55, 0.3); border-radius: 10px; content: ''; height: 100%; left: 0; position: absolute; top: 0; transition: background 0.2s ease; width: 100%; z-index: 1; } .product-cta .product-cta-row { position: relative; z-index: 2; } .product-cta.product-cta-infinity { background-image: url("../images/components/product-cta/infinity-pattern.png"); } .product-cta.product-cta-velocity { background-image: url("../images/components/product-cta/velocity-pattern.png"); } .product-cta .product-cta-row, .product-cta .product-cta-column { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; -ms-flex-direction: column; flex-direction: column; } .product-cta .product-cta-content { -ms-flex: 1 0 auto; flex: 1 0 auto; } .product-cta .product-cta-footer { -ms-flex: 0 0 auto; flex: 0 0 auto; } .product-cta h3, .product-cta p { color: #ffffff; } .product-cta .button.button-primary.button-stroke { color: #ffffff; } .product-cta .button.button-primary.button-stroke:hover { color: #ffffff; } a.product-cta { box-shadow: none; transition: box-shadow 0.2s ease; } a.product-cta:hover, a.product-cta:active { box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 6px 10px 0px rgba(0, 0, 0, 0.1); color: inherit; text-decoration: inherit; } a.product-cta:hover:after, a.product-cta:active:after { background: rgba(30, 35, 47, 0.65); } .product-cta-wrapper { -ms-flex-align: stretch; align-items: stretch; display: -ms-flexbox; display: flex; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { .product-cta.product-cta-infinity { background-image: url("../images/components/product-cta/infinity-pattern@2x.png"); } .product-cta.product-cta-velocity { background-image: url("../images/components/product-cta/velocity-pattern@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* */ /* components/scrollbars.less */ /* */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .ps-container { position: relative; overflow: hidden; height: 100%; width: 100%; } .ps-container .ps-scrollbar-x-rail { position: absolute; bottom: 3px; height: 8px; border-radius: 4px; opacity: 0; filter: alpha(opacity=0); transition: background-color 0.2s linear, opacity 0.2s linear; } .ps-container:hover .ps-scrollbar-x-rail, .ps-container.hover .ps-scrollbar-x-rail { opacity: .6; filter: alpha(opacity=60); } .ps-container .ps-scrollbar-x-rail:hover, .ps-container .ps-scrollbar-x-rail.hover { background-color: #eee; opacity: .9; filter: alpha(opacity=90); } .ps-container .ps-scrollbar-x-rail.in-scrolling { background-color: #eee; opacity: .9; filter: alpha(opacity=90); } .ps-container .ps-scrollbar-y-rail { position: absolute; right: 3px; width: 8px; border-radius: 4px; opacity: 0; filter: alpha(opacity=0); transition: background-color 0.2s linear, opacity 0.2s linear; } .ps-container:hover .ps-scrollbar-y-rail, .ps-container.hover .ps-scrollbar-y-rail { opacity: .6; filter: alpha(opacity=60); } .ps-container .ps-scrollbar-y-rail:hover, .ps-container .ps-scrollbar-y-rail.hover { background-color: #eee; opacity: .9; filter: alpha(opacity=90); } .ps-container .ps-scrollbar-y-rail.in-scrolling { background-color: #eee; opacity: .9; filter: alpha(opacity=90); } .ps-container .ps-scrollbar-x { position: absolute; bottom: 0; height: 8px; background-color: #aaa; border-radius: 4px; transition: background-color 0.2s linear; } .ps-container.ie6 .ps-scrollbar-x { font-size: 0; } .ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x { background-color: #999; } .ps-container .ps-scrollbar-y { position: absolute; right: 0; width: 8px; background-color: #aaa; border-radius: 4px; transition: background-color 0.2s linear; } .ps-container.ie6 .ps-scrollbar-y { font-size: 0; } .ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y { background-color: #999; } .ps-container.ie .ps-scrollbar-x, .ps-container.ie .ps-scrollbar-y { visibility: hidden; } .ps-container.ie:hover .ps-scrollbar-x, .ps-container.ie:hover .ps-scrollbar-y, .ps-container.ie.hover .ps-scrollbar-x, .ps-container.ie.hover .ps-scrollbar-y { visibility: visible; } .scroller { overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: relative; } .scroller .scroller-content { height: 100%; overflow: auto; overflow-x: hidden; overflow-y: scroll; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; } .scroller .scroller-bar { display: none; height: 100% !important; position: absolute; right: 10px; top: 0; width: 6px; z-index: 2; opacity: 0.25; filter: alpha(opacity=25); transition: opacity 0.25s ease; } .scroller .scroller-bar .scroller-track { height: 100%; position: relative; width: 100%; border-radius: 10px; background: rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08); } .scroller .scroller-bar .scroller-track .scroller-handle { cursor: pointer; height: 20px; position: absolute; right: 0px; top: 0px; width: 6px; z-index: 2; border-radius: 10px; background: rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.28); opacity: 0.5; filter: alpha(opacity=50); transition: opacity 0.25s ease; } .scroller:hover .scroller-bar { opacity: 1; filter: alpha(opacity=100); } .scroller.scroller-white .scroller-bar .scroller-track { background: rgba(255, 255, 255, 0.1); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.12); } .scroller.scroller-white .scroller-bar .scroller-track .scroller-handle { background: rgba(255, 255, 255, 0.4); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.42); } /* Webkit Fix */ .scroller-content::-webkit-scrollbar, .scroller-content::-webkit-scrollbar-button, .scroller-content::-webkit-scrollbar-track, .scroller-content::-webkit-scrollbar-track-piece, .scroller-content::-webkit-scrollbar-thumb, .scroller-content::-webkit-scrollbar-corner, .scroller-content::-webkit-resizer { background: transparent; opacity: 0; } /* Active Scrollbar */ .scroller-active .scroller-bar { display: block; } /* Setup Scrollbar - Should match 'active' styles for proper sizing */ .scroller-active .scroller-bar { display: block; } /* Horizontal */ .scroller-horizontal .scroller-content { overflow: auto; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px 0; } .scroller-horizontal .scroller-bar { border-left: none; border-top: 1px solid #EEEEEE; bottom: 0; height: 20px; top: auto; width: 100%; } .scroller-horizontal .scroller-handle { bottom: 5px; height: 10px; right: auto; top: auto; width: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/service-icons.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Service Icons -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .services-icons { margin: 0 auto; text-align: center; *zoom: 1; margin-top: -12px; margin-left: -12px; } .services-icons:before, .services-icons:after { display: table; content: ""; line-height: 0; } .services-icons:after { clear: both; } .services-icons .services-icon { display: inline-block; margin-left: 12px; margin-top: 12px; vertical-align: top; } .services-icons .services-icon .services-icon-image-wrapper { position: relative; } .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { position: relative; display: block; width: 48px; height: 48px; border-radius: 18%; overflow: hidden; } .services-icons .services-icon .services-icon-image-wrapper .services-icon-image:after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; border-radius: 18%; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } .services-icons .services-icon .services-icon-label { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 57.6px; height: 57.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .services-icons { margin-left: -16px; margin-top: -16px; } .services-icons .services-icon { margin-left: 16px; margin-top: 16px; } .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 76.8px; height: 76.8px; } .services-icons .services-icon .services-icon-label { text-align: center; display: inline-block; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .services-icons { margin-left: -24px; margin-top: -24px; } .services-icons .services-icon { margin-left: 24px; margin-top: 24px; } .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 96px; height: 96px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .services-icons { margin-left: -32px; margin-top: -32px; } .services-icons .services-icon { margin-left: 32px; margin-top: 32px; } .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 105.6px; height: 105.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/share-toolbar.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Element -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .share-toolbar { margin: 0px; margin-bottom: -3.6px; *zoom: 1; } .share-toolbar:before, .share-toolbar:after { display: table; content: ""; line-height: 0; } .share-toolbar:after { clear: both; } .share-toolbar .share-toolbar-item { margin: 0px; margin-right: 3.6px; margin-bottom: 3.6px; list-style: none; display: inline-block; vertical-align: top; padding-left: 0px; overflow: visible !important; } .share-toolbar .share-toolbar-item:before { display: none; } .share-toolbar .share-toolbar-item.share-toolbar-item-facebook { height: 20px; } .share-toolbar .share-toolbar-item.share-toolbar-item-facebook > .fb-like, .share-toolbar .share-toolbar-item.share-toolbar-item-facebook > .fb-share-button { vertical-align: top; } .share-toolbar .share-toolbar-item.share-toolbar-item-facebook > .fb-like span, .share-toolbar .share-toolbar-item.share-toolbar-item-facebook > .fb-share-button span { vertical-align: top !important; } .share-toolbar .share-toolbar-item.share-toolbar-item-twitter { height: 20px; overflow: visible; } .share-toolbar .share-toolbar-item.share-toolbar-item-twitter.share-toolbar-item-twitter-follow-only { width: 60px; } .share-toolbar .share-toolbar-item.share-toolbar-item-google-plus { width: 64px; } .share-toolbar .share-toolbar-item:last-child { margin-right: 0px; } .share-toolbar.share-toolbar-align-horizontal-center { text-align: center; } .share-toolbar.share-toolbar-align-horizontal-right { text-align: right; } .share-toolbar-simple { display: block; margin: -8px 0 -8px -8px; } .share-toolbar-simple .share-toolbar-item { display: inline-block; margin: 8px 0 8px 8px; } .share-toolbar-simple .share-toolbar-item .share-toolbar-item-icon { margin-right: 6px; margin-top: -4px; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-twitter a { border-color: #00acee; color: #00acee; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-twitter a:hover { background-color: #00acee; border-color: #00acee; color: #ffffff; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-facebook a { border-color: #3b5998; color: #3b5998; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-facebook a:hover { background-color: #3b5998; border-color: #3b5998; color: #ffffff; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-google-plus a { border-color: #dd1812; color: #dd1812; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-google-plus a:hover { background-color: #dd1812; border-color: #dd1812; color: #ffffff; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-hacker-news a { border-color: #ff6600; color: #ff6600; } .share-toolbar-simple .share-toolbar-item.share-toolbar-item-hacker-news a:hover { background-color: #ff6600; border-color: #ff6600; color: #ffffff; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .share-toolbar-simple .share-toolbar-item-icon { margin-right: 12px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .share-toolbar { margin-bottom: -4.8px; } .share-toolbar .share-toolbar-item { margin-right: 4.8px; margin-bottom: 4.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .share-toolbar { margin-bottom: -7.2px; } .share-toolbar .share-toolbar-item { margin-right: 7.2px; margin-bottom: 7.2px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .share-toolbar { margin-bottom: -9.6px; } .share-toolbar .share-toolbar-item { margin-right: 9.6px; margin-bottom: 9.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/tabs.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Tabs -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul.tabs-navigation { display: block; list-style: none; text-align: center; } ul.tabs-navigation li { background: #ffffff; border: 1px solid #ccced3; border-radius: 5px; color: #9351e5; cursor: pointer; display: block; font-size: 14px; font-weight: 400; list-style: none; margin-bottom: 15px; padding: 10px 30px; position: relative; transition: background 0.25s, border-color 0.25s, color 0.25s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ul.tabs-navigation li:before { background: #ccced3; border-radius: 0; bottom: 100%; content: ''; display: block; height: 15px; left: 50%; margin-bottom: 1px; margin-left: -1px; opacity: 0.4; position: absolute; top: auto; width: 2px; } ul.tabs-navigation li:hover { background-color: #ebebed; color: #323a4e; } ul.tabs-navigation li:first-child:before { display: none; } ul.tabs-navigation li:last-child { margin-bottom: 0; } ul.tabs-navigation li.active { background-color: #9351e5; border-color: #9351e5; color: #ffffff; } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 480px) { ul.tabs-navigation li { border-left: none; border-radius: 0; border-right: none; display: inline-block; font-size: 16px; line-height: 40px; margin: 0; padding: 0 20px; } ul.tabs-navigation li:before, ul.tabs-navigation li:after { background: none; border-bottom: solid transparent 21px; border-left-style: solid; border-left-width: 6px; border-top: solid transparent 21px; content: ''; display: block; left: 100%; opacity: 1; position: absolute; top: -1px; transition: border-color 0.25s; height: 42px; } ul.tabs-navigation li:before { border-left-color: #ffffff; margin-left: -1px; z-index: 2; } ul.tabs-navigation li:after { border-left-color: #ccced3; margin-left: 0; z-index: 1; } ul.tabs-navigation li:hover:before { border-left-color: #ebebed; } ul.tabs-navigation li:first-child { border-left: 1px solid #ccced3; border-radius: 5px 0 0 5px; } ul.tabs-navigation li:first-child:before { display: block; } ul.tabs-navigation li:last-child { border-radius: 0 5px 5px 0; border-right: 1px solid #ccced3; } ul.tabs-navigation li:last-child:before, ul.tabs-navigation li:last-child:after { display: none; } ul.tabs-navigation li.active:first-child, ul.tabs-navigation li.active:after, ul.tabs-navigation li.active:before { border-left-color: #9351e5; } ul.tabs-navigation li.active:last-child { border-right-color: #9351e5; } ul.tabs-navigation li.has-active-sibling:after { border-left-color: #ffffff; } } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 768px) { ul.tabs-navigation li { line-height: 40px; padding: 0 30px; } ul.tabs-navigation li:before, ul.tabs-navigation li:after { border-bottom: solid transparent 21px; border-left-width: 8px; border-top: solid transparent 21px; height: 42px; } } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 992px) { ul.tabs-navigation li { line-height: 60px; padding: 0 60px; } ul.tabs-navigation li:before, ul.tabs-navigation li:after { border-bottom: solid transparent 31px; border-left-width: 13px; border-top: solid transparent 31px; height: 62px; } } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Resolution: 2x ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/tooltip.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Styling ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Notch ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Tooltip -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .has-tooltip { position: relative; } .tooltip { position: absolute !important; z-index: 6000; display: block; visibility: visible; padding: 0px; opacity: 0; filter: alpha(opacity=0); transition: margin 0.5s ease, opacity 0.5s ease; } .tooltip.in { opacity: 1; filter: alpha(opacity=100); transition: margin 0.5s ease, opacity 0.5s ease; } .tooltip.in.top { margin-top: -11px; } .tooltip.in.right { margin-left: 11px; } .tooltip.in.bottom { margin-top: 11px; } .tooltip.in.left { margin-left: -11px; } .tooltip.top { margin-top: -1px; } .tooltip.right { margin-left: 1px; } .tooltip.bottom { margin-top: 1px; } .tooltip.left { margin-left: -1px; } .tooltip-inner { max-width: 300px; text-align: center; text-decoration: none; background: rgba(0, 0, 0, 0.8); border-radius: 5px; color: #ffffff; text-shadow: none; padding: 6px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: -6px; left: 50%; margin-left: -6px; border-width: 6px 6px 0; border-top-color: rgba(0, 0, 0, 0.8); } .tooltip.right .tooltip-arrow { top: 50%; left: -6px; margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: rgba(0, 0, 0, 0.8); } .tooltip.left .tooltip-arrow { top: 50%; right: -6px; margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: rgba(0, 0, 0, 0.8); } .tooltip.bottom .tooltip-arrow { top: -6px; left: 50%; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: rgba(0, 0, 0, 0.8); } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 768px) { padding: 8px; } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 992px) { padding: 12px; } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ @media (min-width: 1400px) { padding: 16px; } /* --------------------------------------------------------------------------- ------------------------------------------------------------------------------ Screen Resolution: 2x ------------------------------------------------------------------------------ --------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- template.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Word Wrap -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .text-color-purple { color: #9351e5; } .text-color-red { color: #f33745; } .text-color-white { color: #ffffff; } a.text-color-white:hover { color: #ffffff; } .no-text-wrap { white-space: nowrap; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Word Wrap -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { word-break: break-word; } h1, .h1 { word-break: break-word; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Stripe) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .stripe-purple { color: #ffffff; background: #9351e5; } .stripe-dark { color: #ffffff; background: #232937; } .stripe-light { color: #232937; background: #ffffff; } .stripe-gradient { color: #ffffff; background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* Select only h1s that contain a 'data-text' attribute */ .decorate-gradient { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; /* &[data-text] { position: relative; &:after { width: 100%; content: attr(data-text); z-index: 2; color: @pink; position: absolute; left: 0; top: 0; -webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)) ); } &.decorate-gradient-horizontal { &:after { -webkit-mask-image: -webkit-gradient( linear, left top, right top, from(rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)) ); } } &.text-align-center { &:after { text-align: center; } } &.text-align-right { &:after { text-align: right; } } } */ } .decorate-gradient.decorate-gradient-purple-to-pink { color: #9351e5 !important; background-image: -webkit-linear-gradient(90deg, #9351e5 0, #ef468b 100%); } .decorate-gradient.decorate-gradient-purple-to-pink.decorate-gradient-horizontal { background-image: -webkit-linear-gradient(0deg, #9351e5 0, #ef468b 100%); background-repeat: repeat-x; } .decorate-gradient.decorate-gradient-pink-to-purple { color: #9351e5 !important; background-image: -webkit-linear-gradient(90deg, #ef468b 0, #9351e5 100%); } .decorate-gradient.decorate-gradient-pink-to-purple.decorate-gradient-horizontal { background-image: -webkit-linear-gradient(0deg, #ef468b 0, #9351e5 100%); background-repeat: repeat-x; } html.no-cssmask .decorate-gradient[data-text]:after { content: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line ----------------------------------------------------------------------------- */ .decorate-line { position: relative; } .decorate-line:after { content: ''; display: block; width: 24px; height: 1px; position: absolute; bottom: 0px; left: 0px; background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } .decorate-line.decorate-line-large:after { width: 128px; } .decorate-line.text-align-center:after { left: 50%; margin-left: -24px; } .decorate-line.text-align-center.decorate-line-large:after { margin-left: -64px; } .decorate-line.text-align-right:after { left: auto; right: 0px; } .decorate-line.decorate-line-light:after { background: #ffffff; opacity: 0.4; filter: alpha(opacity=40); } .decorate-line.decorate-line-dark:after { background: #323a4e; opacity: 0.4; filter: alpha(opacity=40); } .decorate-line.decorate-line-semi-dark:after { background: #323a4e; opacity: 0.2; filter: alpha(opacity=20); } .decorate-line.decorate-line-underline:after { bottom: 0px; } .decorate-line.decorate-line-overline:after { top: 0px; } .decorate-line.decorate-line-right:after { margin-top: -0.15em; left: 100%; top: 50%; } .decorate-line.decorate-line-right.decorate-line-right-vertical:after { height: 100%; left: auto; right: -1px; top: 0; width: 1px; background-image: linear-gradient(to bottom, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Anchors -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .text-link--contains-icon:hover { text-decoration: none; } .text-link--contains-icon:hover .text-link__label { text-decoration: underline; } .text-link__icon-wrap { padding-right: 2px; position: relative; top: -2px; } a.italicized, .italicized { font-style: italic; } .emphasize a { color: #9351e5; font-weight: 400; } .emphasize a:hover { color: #7641b7; } a.emphasize { color: #9351e5; font-weight: 400; } a.emphasize:hover { color: #7641b7; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { /* ----------------------------------------------------------------------------- Light ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } p.light { color: rgba(255, 255, 255, 0.6); } p.decorate-line:after { width: 20px; } p.decorate-line.text-align-center:after { margin-left: -10px; } p.decorate-line.decorate-line-underline { padding-bottom: 12px; } p.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6px; } p.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 24px; } p.decorate-line.decorate-line-overline { padding-top: 12px; } p.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6px; } p.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { display: block; color: #1e232f; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 54.6px; font-style: normal; font-weight: 700; line-height: 45.5px; text-transform: uppercase; text-shadow: none; margin-top: 87.0912px; margin-bottom: 43.5456px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Thin ----------------------------------------------------------------------------- */ } .h1-large.short { margin-top: 43.5456px; margin-bottom: 21.7728px; } .h1-large.short-top { margin-top: 43.5456px; } .h1-large.short-bottom { margin-bottom: 21.7728px; } .h1-large.tall { margin-top: 174.1824px; margin-bottom: 87.0912px; } .h1-large.tall-top { margin-top: 174.1824px; } .h1-large.tall-bottom { margin-bottom: 87.0912px; } .h1-large.decorate-line:after { width: 45.5px; } .h1-large.decorate-line.text-align-center:after { margin-left: -22.75px; } .h1-large.decorate-line.decorate-line-underline { padding-bottom: 43.5456px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 21.7728px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 87.0912px; } .h1-large.decorate-line.decorate-line-overline { padding-top: 43.5456px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 21.7728px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 87.0912px; } .h1-large.thin { font-weight: 100; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Thin ----------------------------------------------------------------------------- */ } h1.decorate-line:after, .h1.decorate-line:after { width: 35px; } h1.decorate-line.text-align-center:after, .h1.decorate-line.text-align-center:after { margin-left: -17.5px; } h1.decorate-line.decorate-line-underline, .h1.decorate-line.decorate-line-underline { padding-bottom: 43.5456px; } h1.decorate-line.decorate-line-underline.decorate-line-short, .h1.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 21.7728px; } h1.decorate-line.decorate-line-underline.decorate-line-tall, .h1.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 87.0912px; } h1.decorate-line.decorate-line-overline, .h1.decorate-line.decorate-line-overline { padding-top: 43.5456px; } h1.decorate-line.decorate-line-overline.decorate-line-short, .h1.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 21.7728px; } h1.decorate-line.decorate-line-overline.decorate-line-tall, .h1.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 87.0912px; } h1.thin, .h1.thin { font-weight: 100; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h2.decorate-line:after, .h2.decorate-line:after { width: 32.2px; } h2.decorate-line.text-align-center:after, .h2.decorate-line.text-align-center:after { margin-left: -16.1px; } h2.decorate-line.decorate-line-underline, .h2.decorate-line.decorate-line-underline { padding-bottom: 31.104px; } h2.decorate-line.decorate-line-underline.decorate-line-short, .h2.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 15.552px; } h2.decorate-line.decorate-line-underline.decorate-line-tall, .h2.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 62.208px; } h2.decorate-line.decorate-line-overline, .h2.decorate-line.decorate-line-overline { padding-top: 31.104px; } h2.decorate-line.decorate-line-overline.decorate-line-short, .h2.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 15.552px; } h2.decorate-line.decorate-line-overline.decorate-line-tall, .h2.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 62.208px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h3.decorate-line:after, .h3.decorate-line:after { width: 21px; } h3.decorate-line.text-align-center:after, .h3.decorate-line.text-align-center:after { margin-left: -10.5px; } h3.decorate-line.decorate-line-underline, .h3.decorate-line.decorate-line-underline { padding-bottom: 20.736px; } h3.decorate-line.decorate-line-underline.decorate-line-short, .h3.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 10.368px; } h3.decorate-line.decorate-line-underline.decorate-line-tall, .h3.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 41.472px; } h3.decorate-line.decorate-line-overline, .h3.decorate-line.decorate-line-overline { padding-top: 20.736px; } h3.decorate-line.decorate-line-overline.decorate-line-short, .h3.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 10.368px; } h3.decorate-line.decorate-line-overline.decorate-line-tall, .h3.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 41.472px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h4.decorate-line:after, .h4.decorate-line:after { width: 22px; } h4.decorate-line.text-align-center:after, .h4.decorate-line.text-align-center:after { margin-left: -11px; } h4.decorate-line.decorate-line-underline, .h4.decorate-line.decorate-line-underline { padding-bottom: 17.28px; } h4.decorate-line.decorate-line-underline.decorate-line-short, .h4.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 8.64px; } h4.decorate-line.decorate-line-underline.decorate-line-tall, .h4.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 34.56px; } h4.decorate-line.decorate-line-overline, .h4.decorate-line.decorate-line-overline { padding-top: 17.28px; } h4.decorate-line.decorate-line-overline.decorate-line-short, .h4.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 8.64px; } h4.decorate-line.decorate-line-overline.decorate-line-tall, .h4.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 34.56px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { /* ----------------------------------------------------------------------------- Light ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h5.light, .h5.light { color: #ffffff; } h5.decorate-line:after, .h5.decorate-line:after { width: 16px; } h5.decorate-line.text-align-center:after, .h5.decorate-line.text-align-center:after { margin-left: -8px; } h5.decorate-line.decorate-line-underline, .h5.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } h5.decorate-line.decorate-line-underline.decorate-line-short, .h5.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } h5.decorate-line.decorate-line-underline.decorate-line-tall, .h5.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } h5.decorate-line.decorate-line-overline, .h5.decorate-line.decorate-line-overline { padding-top: 14.4px; } h5.decorate-line.decorate-line-overline.decorate-line-short, .h5.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } h5.decorate-line.decorate-line-overline.decorate-line-tall, .h5.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h6.decorate-line:after, .h6.decorate-line:after { width: 16px; } h6.decorate-line.text-align-center:after, .h6.decorate-line.text-align-center:after { margin-left: -8px; } h6.decorate-line.decorate-line-underline, .h6.decorate-line.decorate-line-underline { padding-bottom: 12px; } h6.decorate-line.decorate-line-underline.decorate-line-short, .h6.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6px; } h6.decorate-line.decorate-line-underline.decorate-line-tall, .h6.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 24px; } h6.decorate-line.decorate-line-overline, .h6.decorate-line.decorate-line-overline { padding-top: 12px; } h6.decorate-line.decorate-line-overline.decorate-line-short, .h6.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6px; } h6.decorate-line.decorate-line-overline.decorate-line-tall, .h6.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line ----------------------------------------------------------------------------- */ .decorate-line:after { width: 24px; } .decorate-line.text-align-center:after { margin-left: -24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } p.decorate-line:after { width: 20px; } p.decorate-line.text-align-center:after { margin-left: -10px; } p.decorate-line.decorate-line-underline { padding-bottom: 12px; } p.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6px; } p.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 24px; } p.decorate-line.decorate-line-overline { padding-top: 12px; } p.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6px; } p.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { font-size: 54.6px; line-height: 45.5px; margin-top: 87.0912px; margin-bottom: 43.5456px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } .h1-large.short { margin-top: 43.5456px; margin-bottom: 21.7728px; } .h1-large.short-top { margin-top: 43.5456px; } .h1-large.short-bottom { margin-bottom: 21.7728px; } .h1-large.tall { margin-top: 174.1824px; margin-bottom: 87.0912px; } .h1-large.tall-top { margin-top: 174.1824px; } .h1-large.tall-bottom { margin-bottom: 87.0912px; } .h1-large.decorate-line:after { width: 45.5px; } .h1-large.decorate-line.text-align-center:after { margin-left: -22.75px; } .h1-large.decorate-line.decorate-line-underline { padding-bottom: 43.5456px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 21.7728px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 87.0912px; } .h1-large.decorate-line.decorate-line-overline { padding-top: 43.5456px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 21.7728px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 87.0912px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h1.decorate-line:after, .h1.decorate-line:after { width: 35px; } h1.decorate-line.text-align-center:after, .h1.decorate-line.text-align-center:after { margin-left: -17.5px; } h1.decorate-line.decorate-line-underline, .h1.decorate-line.decorate-line-underline { padding-bottom: 43.5456px; } h1.decorate-line.decorate-line-underline.decorate-line-short, .h1.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 21.7728px; } h1.decorate-line.decorate-line-underline.decorate-line-tall, .h1.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 87.0912px; } h1.decorate-line.decorate-line-overline, .h1.decorate-line.decorate-line-overline { padding-top: 43.5456px; } h1.decorate-line.decorate-line-overline.decorate-line-short, .h1.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 21.7728px; } h1.decorate-line.decorate-line-overline.decorate-line-tall, .h1.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 87.0912px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h2.decorate-line:after, .h2.decorate-line:after { width: 32.2px; } h2.decorate-line.text-align-center:after, .h2.decorate-line.text-align-center:after { margin-left: -16.1px; } h2.decorate-line.decorate-line-underline, .h2.decorate-line.decorate-line-underline { padding-bottom: 31.104px; } h2.decorate-line.decorate-line-underline.decorate-line-short, .h2.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 15.552px; } h2.decorate-line.decorate-line-underline.decorate-line-tall, .h2.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 62.208px; } h2.decorate-line.decorate-line-overline, .h2.decorate-line.decorate-line-overline { padding-top: 31.104px; } h2.decorate-line.decorate-line-overline.decorate-line-short, .h2.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 15.552px; } h2.decorate-line.decorate-line-overline.decorate-line-tall, .h2.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 62.208px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h3.decorate-line:after, .h3.decorate-line:after { width: 21px; } h3.decorate-line.text-align-center:after, .h3.decorate-line.text-align-center:after { margin-left: -10.5px; } h3.decorate-line.decorate-line-underline, .h3.decorate-line.decorate-line-underline { padding-bottom: 20.736px; } h3.decorate-line.decorate-line-underline.decorate-line-short, .h3.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 10.368px; } h3.decorate-line.decorate-line-underline.decorate-line-tall, .h3.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 41.472px; } h3.decorate-line.decorate-line-overline, .h3.decorate-line.decorate-line-overline { padding-top: 20.736px; } h3.decorate-line.decorate-line-overline.decorate-line-short, .h3.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 10.368px; } h3.decorate-line.decorate-line-overline.decorate-line-tall, .h3.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 41.472px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h4.decorate-line:after, .h4.decorate-line:after { width: 22px; } h4.decorate-line.text-align-center:after, .h4.decorate-line.text-align-center:after { margin-left: -11px; } h4.decorate-line.decorate-line-underline, .h4.decorate-line.decorate-line-underline { padding-bottom: 17.28px; } h4.decorate-line.decorate-line-underline.decorate-line-short, .h4.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 8.64px; } h4.decorate-line.decorate-line-underline.decorate-line-tall, .h4.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 34.56px; } h4.decorate-line.decorate-line-overline, .h4.decorate-line.decorate-line-overline { padding-top: 17.28px; } h4.decorate-line.decorate-line-overline.decorate-line-short, .h4.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 8.64px; } h4.decorate-line.decorate-line-overline.decorate-line-tall, .h4.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 34.56px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h5.decorate-line:after, .h5.decorate-line:after { width: 16px; } h5.decorate-line.text-align-center:after, .h5.decorate-line.text-align-center:after { margin-left: -8px; } h5.decorate-line.decorate-line-underline, .h5.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } h5.decorate-line.decorate-line-underline.decorate-line-short, .h5.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } h5.decorate-line.decorate-line-underline.decorate-line-tall, .h5.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } h5.decorate-line.decorate-line-overline, .h5.decorate-line.decorate-line-overline { padding-top: 14.4px; } h5.decorate-line.decorate-line-overline.decorate-line-short, .h5.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } h5.decorate-line.decorate-line-overline.decorate-line-tall, .h5.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h6.decorate-line:after, .h6.decorate-line:after { width: 16px; } h6.decorate-line.text-align-center:after, .h6.decorate-line.text-align-center:after { margin-left: -8px; } h6.decorate-line.decorate-line-underline, .h6.decorate-line.decorate-line-underline { padding-bottom: 12px; } h6.decorate-line.decorate-line-underline.decorate-line-short, .h6.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6px; } h6.decorate-line.decorate-line-underline.decorate-line-tall, .h6.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 24px; } h6.decorate-line.decorate-line-overline, .h6.decorate-line.decorate-line-overline { padding-top: 12px; } h6.decorate-line.decorate-line-overline.decorate-line-short, .h6.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6px; } h6.decorate-line.decorate-line-overline.decorate-line-tall, .h6.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line ----------------------------------------------------------------------------- */ .decorate-line:after { width: 32px; } .decorate-line.text-align-center:after { margin-left: -32px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } p.decorate-line:after { width: 22px; } p.decorate-line.text-align-center:after { margin-left: -11px; } p.decorate-line.decorate-line-underline { padding-bottom: 13.2px; } p.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6.6px; } p.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 26.4px; } p.decorate-line.decorate-line-overline { padding-top: 13.2px; } p.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6.6px; } p.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 26.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { font-size: 66.066px; line-height: 52.5525px; margin-top: 95.80032px; margin-bottom: 47.90016px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } .h1-large.short { margin-top: 47.90016px; margin-bottom: 23.95008px; } .h1-large.short-top { margin-top: 47.90016px; } .h1-large.short-bottom { margin-bottom: 23.95008px; } .h1-large.tall { margin-top: 191.60064px; margin-bottom: 95.80032px; } .h1-large.tall-top { margin-top: 191.60064px; } .h1-large.tall-bottom { margin-bottom: 95.80032px; } .h1-large.decorate-line:after { width: 52.5525px; } .h1-large.decorate-line.text-align-center:after { margin-left: -26.27625px; } .h1-large.decorate-line.decorate-line-underline { padding-bottom: 47.90016px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 23.95008px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 95.80032px; } .h1-large.decorate-line.decorate-line-overline { padding-top: 47.90016px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 23.95008px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 95.80032px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h1.decorate-line:after, .h1.decorate-line:after { width: 38.5px; } h1.decorate-line.text-align-center:after, .h1.decorate-line.text-align-center:after { margin-left: -19.25px; } h1.decorate-line.decorate-line-underline, .h1.decorate-line.decorate-line-underline { padding-bottom: 47.90016px; } h1.decorate-line.decorate-line-underline.decorate-line-short, .h1.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 23.95008px; } h1.decorate-line.decorate-line-underline.decorate-line-tall, .h1.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 95.80032px; } h1.decorate-line.decorate-line-overline, .h1.decorate-line.decorate-line-overline { padding-top: 47.90016px; } h1.decorate-line.decorate-line-overline.decorate-line-short, .h1.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 23.95008px; } h1.decorate-line.decorate-line-overline.decorate-line-tall, .h1.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 95.80032px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h2.decorate-line:after, .h2.decorate-line:after { width: 35.42px; } h2.decorate-line.text-align-center:after, .h2.decorate-line.text-align-center:after { margin-left: -17.71px; } h2.decorate-line.decorate-line-underline, .h2.decorate-line.decorate-line-underline { padding-bottom: 34.2144px; } h2.decorate-line.decorate-line-underline.decorate-line-short, .h2.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 17.1072px; } h2.decorate-line.decorate-line-underline.decorate-line-tall, .h2.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 68.4288px; } h2.decorate-line.decorate-line-overline, .h2.decorate-line.decorate-line-overline { padding-top: 34.2144px; } h2.decorate-line.decorate-line-overline.decorate-line-short, .h2.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 17.1072px; } h2.decorate-line.decorate-line-overline.decorate-line-tall, .h2.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 68.4288px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h3.decorate-line:after, .h3.decorate-line:after { width: 24.255px; } h3.decorate-line.text-align-center:after, .h3.decorate-line.text-align-center:after { margin-left: -12.1275px; } h3.decorate-line.decorate-line-underline, .h3.decorate-line.decorate-line-underline { padding-bottom: 22.8096px; } h3.decorate-line.decorate-line-underline.decorate-line-short, .h3.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 11.4048px; } h3.decorate-line.decorate-line-underline.decorate-line-tall, .h3.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 45.6192px; } h3.decorate-line.decorate-line-overline, .h3.decorate-line.decorate-line-overline { padding-top: 22.8096px; } h3.decorate-line.decorate-line-overline.decorate-line-short, .h3.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 11.4048px; } h3.decorate-line.decorate-line-overline.decorate-line-tall, .h3.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 45.6192px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h4.decorate-line:after, .h4.decorate-line:after { width: 24.2px; } h4.decorate-line.text-align-center:after, .h4.decorate-line.text-align-center:after { margin-left: -12.1px; } h4.decorate-line.decorate-line-underline, .h4.decorate-line.decorate-line-underline { padding-bottom: 19.008px; } h4.decorate-line.decorate-line-underline.decorate-line-short, .h4.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 9.504px; } h4.decorate-line.decorate-line-underline.decorate-line-tall, .h4.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 38.016px; } h4.decorate-line.decorate-line-overline, .h4.decorate-line.decorate-line-overline { padding-top: 19.008px; } h4.decorate-line.decorate-line-overline.decorate-line-short, .h4.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 9.504px; } h4.decorate-line.decorate-line-overline.decorate-line-tall, .h4.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 38.016px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h5.decorate-line:after, .h5.decorate-line:after { width: 17.6px; } h5.decorate-line.text-align-center:after, .h5.decorate-line.text-align-center:after { margin-left: -8.8px; } h5.decorate-line.decorate-line-underline, .h5.decorate-line.decorate-line-underline { padding-bottom: 15.84px; } h5.decorate-line.decorate-line-underline.decorate-line-short, .h5.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.92px; } h5.decorate-line.decorate-line-underline.decorate-line-tall, .h5.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 31.68px; } h5.decorate-line.decorate-line-overline, .h5.decorate-line.decorate-line-overline { padding-top: 15.84px; } h5.decorate-line.decorate-line-overline.decorate-line-short, .h5.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.92px; } h5.decorate-line.decorate-line-overline.decorate-line-tall, .h5.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 31.68px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h6.decorate-line:after, .h6.decorate-line:after { width: 17.6px; } h6.decorate-line.text-align-center:after, .h6.decorate-line.text-align-center:after { margin-left: -8.8px; } h6.decorate-line.decorate-line-underline, .h6.decorate-line.decorate-line-underline { padding-bottom: 13.2px; } h6.decorate-line.decorate-line-underline.decorate-line-short, .h6.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 6.6px; } h6.decorate-line.decorate-line-underline.decorate-line-tall, .h6.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 26.4px; } h6.decorate-line.decorate-line-overline, .h6.decorate-line.decorate-line-overline { padding-top: 13.2px; } h6.decorate-line.decorate-line-overline.decorate-line-short, .h6.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 6.6px; } h6.decorate-line.decorate-line-overline.decorate-line-tall, .h6.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 26.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line ----------------------------------------------------------------------------- */ .decorate-line:after { width: 48px; } .decorate-line.text-align-center:after { margin-left: -48px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } p.decorate-line:after { width: 24px; } p.decorate-line.text-align-center:after { margin-left: -12px; } p.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } p.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } p.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } p.decorate-line.decorate-line-overline { padding-top: 14.4px; } p.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } p.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { font-size: 93.6936px; line-height: 74.529px; margin-top: 104.50944px; margin-bottom: 52.25472px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } .h1-large.short { margin-top: 52.25472px; margin-bottom: 26.12736px; } .h1-large.short-top { margin-top: 52.25472px; } .h1-large.short-bottom { margin-bottom: 26.12736px; } .h1-large.tall { margin-top: 209.01888px; margin-bottom: 104.50944px; } .h1-large.tall-top { margin-top: 209.01888px; } .h1-large.tall-bottom { margin-bottom: 104.50944px; } .h1-large.decorate-line:after { width: 74.529px; } .h1-large.decorate-line.text-align-center:after { margin-left: -37.2645px; } .h1-large.decorate-line.decorate-line-underline { padding-bottom: 52.25472px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 26.12736px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 104.50944px; } .h1-large.decorate-line.decorate-line-overline { padding-top: 52.25472px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 26.12736px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 104.50944px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h1.decorate-line:after, .h1.decorate-line:after { width: 54.6px; } h1.decorate-line.text-align-center:after, .h1.decorate-line.text-align-center:after { margin-left: -27.3px; } h1.decorate-line.decorate-line-underline, .h1.decorate-line.decorate-line-underline { padding-bottom: 52.25472px; } h1.decorate-line.decorate-line-underline.decorate-line-short, .h1.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 26.12736px; } h1.decorate-line.decorate-line-underline.decorate-line-tall, .h1.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 104.50944px; } h1.decorate-line.decorate-line-overline, .h1.decorate-line.decorate-line-overline { padding-top: 52.25472px; } h1.decorate-line.decorate-line-overline.decorate-line-short, .h1.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 26.12736px; } h1.decorate-line.decorate-line-overline.decorate-line-tall, .h1.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 104.50944px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h2.decorate-line:after, .h2.decorate-line:after { width: 42.504px; } h2.decorate-line.text-align-center:after, .h2.decorate-line.text-align-center:after { margin-left: -21.252px; } h2.decorate-line.decorate-line-underline, .h2.decorate-line.decorate-line-underline { padding-bottom: 37.3248px; } h2.decorate-line.decorate-line-underline.decorate-line-short, .h2.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 18.6624px; } h2.decorate-line.decorate-line-underline.decorate-line-tall, .h2.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 74.6496px; } h2.decorate-line.decorate-line-overline, .h2.decorate-line.decorate-line-overline { padding-top: 37.3248px; } h2.decorate-line.decorate-line-overline.decorate-line-short, .h2.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 18.6624px; } h2.decorate-line.decorate-line-overline.decorate-line-tall, .h2.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 74.6496px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h3.decorate-line:after, .h3.decorate-line:after { width: 28.224px; } h3.decorate-line.text-align-center:after, .h3.decorate-line.text-align-center:after { margin-left: -14.112px; } h3.decorate-line.decorate-line-underline, .h3.decorate-line.decorate-line-underline { padding-bottom: 24.8832px; } h3.decorate-line.decorate-line-underline.decorate-line-short, .h3.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 12.4416px; } h3.decorate-line.decorate-line-underline.decorate-line-tall, .h3.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 49.7664px; } h3.decorate-line.decorate-line-overline, .h3.decorate-line.decorate-line-overline { padding-top: 24.8832px; } h3.decorate-line.decorate-line-overline.decorate-line-short, .h3.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 12.4416px; } h3.decorate-line.decorate-line-overline.decorate-line-tall, .h3.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 49.7664px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h4.decorate-line:after, .h4.decorate-line:after { width: 26.4px; } h4.decorate-line.text-align-center:after, .h4.decorate-line.text-align-center:after { margin-left: -13.2px; } h4.decorate-line.decorate-line-underline, .h4.decorate-line.decorate-line-underline { padding-bottom: 20.736px; } h4.decorate-line.decorate-line-underline.decorate-line-short, .h4.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 10.368px; } h4.decorate-line.decorate-line-underline.decorate-line-tall, .h4.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 41.472px; } h4.decorate-line.decorate-line-overline, .h4.decorate-line.decorate-line-overline { padding-top: 20.736px; } h4.decorate-line.decorate-line-overline.decorate-line-short, .h4.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 10.368px; } h4.decorate-line.decorate-line-overline.decorate-line-tall, .h4.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 41.472px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h5.decorate-line:after, .h5.decorate-line:after { width: 19.2px; } h5.decorate-line.text-align-center:after, .h5.decorate-line.text-align-center:after { margin-left: -9.6px; } h5.decorate-line.decorate-line-underline, .h5.decorate-line.decorate-line-underline { padding-bottom: 17.28px; } h5.decorate-line.decorate-line-underline.decorate-line-short, .h5.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 8.64px; } h5.decorate-line.decorate-line-underline.decorate-line-tall, .h5.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 34.56px; } h5.decorate-line.decorate-line-overline, .h5.decorate-line.decorate-line-overline { padding-top: 17.28px; } h5.decorate-line.decorate-line-overline.decorate-line-short, .h5.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 8.64px; } h5.decorate-line.decorate-line-overline.decorate-line-tall, .h5.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 34.56px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h6.decorate-line:after, .h6.decorate-line:after { width: 19.2px; } h6.decorate-line.text-align-center:after, .h6.decorate-line.text-align-center:after { margin-left: -9.6px; } h6.decorate-line.decorate-line-underline, .h6.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } h6.decorate-line.decorate-line-underline.decorate-line-short, .h6.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } h6.decorate-line.decorate-line-underline.decorate-line-tall, .h6.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } h6.decorate-line.decorate-line-overline, .h6.decorate-line.decorate-line-overline { padding-top: 14.4px; } h6.decorate-line.decorate-line-overline.decorate-line-short, .h6.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } h6.decorate-line.decorate-line-overline.decorate-line-tall, .h6.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Decoration (Line) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Line ----------------------------------------------------------------------------- */ .decorate-line:after { width: 64px; } .decorate-line.text-align-center:after { margin-left: -64px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } p.decorate-line:after { width: 24px; } p.decorate-line.text-align-center:after { margin-left: -12px; } p.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } p.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } p.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } p.decorate-line.decorate-line-overline { padding-top: 14.4px; } p.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } p.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1-large { font-size: 102.2112px; line-height: 85.995px; margin-top: 104.50944px; margin-bottom: 52.25472px; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } .h1-large.short { margin-top: 52.25472px; margin-bottom: 26.12736px; } .h1-large.short-top { margin-top: 52.25472px; } .h1-large.short-bottom { margin-bottom: 26.12736px; } .h1-large.tall { margin-top: 209.01888px; margin-bottom: 104.50944px; } .h1-large.tall-top { margin-top: 209.01888px; } .h1-large.tall-bottom { margin-bottom: 104.50944px; } .h1-large.decorate-line:after { width: 85.995px; } .h1-large.decorate-line.text-align-center:after { margin-left: -42.9975px; } .h1-large.decorate-line.decorate-line-underline { padding-bottom: 52.25472px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 26.12736px; } .h1-large.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 104.50944px; } .h1-large.decorate-line.decorate-line-overline { padding-top: 52.25472px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 26.12736px; } .h1-large.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 104.50944px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h1.decorate-line:after, .h1.decorate-line:after { width: 63px; } h1.decorate-line.text-align-center:after, .h1.decorate-line.text-align-center:after { margin-left: -31.5px; } h1.decorate-line.decorate-line-underline, .h1.decorate-line.decorate-line-underline { padding-bottom: 52.25472px; } h1.decorate-line.decorate-line-underline.decorate-line-short, .h1.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 26.12736px; } h1.decorate-line.decorate-line-underline.decorate-line-tall, .h1.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 104.50944px; } h1.decorate-line.decorate-line-overline, .h1.decorate-line.decorate-line-overline { padding-top: 52.25472px; } h1.decorate-line.decorate-line-overline.decorate-line-short, .h1.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 26.12736px; } h1.decorate-line.decorate-line-overline.decorate-line-tall, .h1.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 104.50944px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h2.decorate-line:after, .h2.decorate-line:after { width: 42.504px; } h2.decorate-line.text-align-center:after, .h2.decorate-line.text-align-center:after { margin-left: -21.252px; } h2.decorate-line.decorate-line-underline, .h2.decorate-line.decorate-line-underline { padding-bottom: 37.3248px; } h2.decorate-line.decorate-line-underline.decorate-line-short, .h2.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 18.6624px; } h2.decorate-line.decorate-line-underline.decorate-line-tall, .h2.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 74.6496px; } h2.decorate-line.decorate-line-overline, .h2.decorate-line.decorate-line-overline { padding-top: 37.3248px; } h2.decorate-line.decorate-line-overline.decorate-line-short, .h2.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 18.6624px; } h2.decorate-line.decorate-line-overline.decorate-line-tall, .h2.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 74.6496px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h3.decorate-line:after, .h3.decorate-line:after { width: 28.224px; } h3.decorate-line.text-align-center:after, .h3.decorate-line.text-align-center:after { margin-left: -14.112px; } h3.decorate-line.decorate-line-underline, .h3.decorate-line.decorate-line-underline { padding-bottom: 24.8832px; } h3.decorate-line.decorate-line-underline.decorate-line-short, .h3.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 12.4416px; } h3.decorate-line.decorate-line-underline.decorate-line-tall, .h3.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 49.7664px; } h3.decorate-line.decorate-line-overline, .h3.decorate-line.decorate-line-overline { padding-top: 24.8832px; } h3.decorate-line.decorate-line-overline.decorate-line-short, .h3.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 12.4416px; } h3.decorate-line.decorate-line-overline.decorate-line-tall, .h3.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 49.7664px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h4.decorate-line:after, .h4.decorate-line:after { width: 26.4px; } h4.decorate-line.text-align-center:after, .h4.decorate-line.text-align-center:after { margin-left: -13.2px; } h4.decorate-line.decorate-line-underline, .h4.decorate-line.decorate-line-underline { padding-bottom: 20.736px; } h4.decorate-line.decorate-line-underline.decorate-line-short, .h4.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 10.368px; } h4.decorate-line.decorate-line-underline.decorate-line-tall, .h4.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 41.472px; } h4.decorate-line.decorate-line-overline, .h4.decorate-line.decorate-line-overline { padding-top: 20.736px; } h4.decorate-line.decorate-line-overline.decorate-line-short, .h4.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 10.368px; } h4.decorate-line.decorate-line-overline.decorate-line-tall, .h4.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 41.472px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h5.decorate-line:after, .h5.decorate-line:after { width: 19.2px; } h5.decorate-line.text-align-center:after, .h5.decorate-line.text-align-center:after { margin-left: -9.6px; } h5.decorate-line.decorate-line-underline, .h5.decorate-line.decorate-line-underline { padding-bottom: 17.28px; } h5.decorate-line.decorate-line-underline.decorate-line-short, .h5.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 8.64px; } h5.decorate-line.decorate-line-underline.decorate-line-tall, .h5.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 34.56px; } h5.decorate-line.decorate-line-overline, .h5.decorate-line.decorate-line-overline { padding-top: 17.28px; } h5.decorate-line.decorate-line-overline.decorate-line-short, .h5.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 8.64px; } h5.decorate-line.decorate-line-overline.decorate-line-tall, .h5.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 34.56px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Large Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { /* ----------------------------------------------------------------------------- Text Decoration (Line) ----------------------------------------------------------------------------- */ } h6.decorate-line:after, .h6.decorate-line:after { width: 19.2px; } h6.decorate-line.text-align-center:after, .h6.decorate-line.text-align-center:after { margin-left: -9.6px; } h6.decorate-line.decorate-line-underline, .h6.decorate-line.decorate-line-underline { padding-bottom: 14.4px; } h6.decorate-line.decorate-line-underline.decorate-line-short, .h6.decorate-line.decorate-line-underline.decorate-line-short { padding-bottom: 7.2px; } h6.decorate-line.decorate-line-underline.decorate-line-tall, .h6.decorate-line.decorate-line-underline.decorate-line-tall { padding-bottom: 28.8px; } h6.decorate-line.decorate-line-overline, .h6.decorate-line.decorate-line-overline { padding-top: 14.4px; } h6.decorate-line.decorate-line-overline.decorate-line-short, .h6.decorate-line.decorate-line-overline.decorate-line-short { padding-top: 7.2px; } h6.decorate-line.decorate-line-overline.decorate-line-tall, .h6.decorate-line.decorate-line-overline.decorate-line-tall { padding-top: 28.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Views ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- views/about/index.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- About ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.about { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Contributions ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Careers ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.about #about-team .about-team-grid { *zoom: 1; display: none; margin-top: -2%; margin-left: -2%; } #canvas.about #about-team .about-team-grid:before, #canvas.about #about-team .about-team-grid:after { display: table; content: ""; line-height: 0; } #canvas.about #about-team .about-team-grid:after { clear: both; } #canvas.about #about-team .about-team-grid .about-team-grid-item { float: left; width: 10.75%; height: 10.75%; margin-top: 2%; margin-left: 2%; } #canvas.about #about-team .about-team-grid .about-team-grid-item .about-team-grid-item-image { width: 100%; height: 100%; background-color: #ebebed; position: relative; border-radius: 1000px; overflow: hidden; line-height: 1; font-size: 0; } #canvas.about #about-team .about-team-grid .about-team-grid-item .about-team-grid-item-image img { width: 100%; height: auto; } #canvas.about #about-team .about-team-grid .about-team-grid-item .about-team-grid-item-image a { position: absolute; top: 0px; let: 0px; display: block; width: 100%; height: 100%; } #canvas.about #about-contributions .about-contributions-grid { margin-bottom: -12px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item { margin-bottom: 12px; box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1); border-radius: 5px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item .about-contributions-grid-item-content { padding: 12px; display: block; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item .about-contributions-grid-item-content:hover { text-decoration: none; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item:hover { background: rgba(255, 255, 255, 0.025); box-shadow: 0px 0px 0px 1px #9351e5; } #canvas.about #about-careers .about-careers-benefits-grid { margin-bottom: -12px; } #canvas.about #about-careers .about-careers-benefits-grid .about-careers-benefits-grid-item { margin-bottom: 12px; } #canvas.about #about-career-openings #about-career-openings-listings li { *zoom: 1; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #ebebed; } #canvas.about #about-career-openings #about-career-openings-listings li:before, #canvas.about #about-career-openings #about-career-openings-listings li:after { display: table; content: ""; line-height: 0; } #canvas.about #about-career-openings #about-career-openings-listings li:after { clear: both; } #canvas.about #about-career-openings #about-career-openings-listings li h4 { float: left; } #canvas.about #about-career-openings #about-career-openings-listings li .button { float: right; } #canvas.about #about-career-openings #about-career-openings-listings li:before { display: none; } #canvas.about #about-career-openings #about-career-openings-listings li:last-child { margin-bottom: 0px; padding-bottom: 0px; border-bottom: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- About ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.about { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.about #about-team .about-team-grid { margin-top: -2%; margin-left: -2%; } #canvas.about #about-team .about-team-grid .about-team-grid-item { width: 10.75%; height: 10.75%; margin-top: 2%; margin-left: 2%; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- About ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.about { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Contributions ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Careers ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.about #about-team .about-team-grid { display: block; margin-top: 16px; margin-left: -16px; } #canvas.about #about-team .about-team-grid .about-team-grid-item { width: 77.25px; height: 77.25px; margin-top: 16px; margin-left: 16px; } #canvas.about #about-contributions .about-contributions-grid { margin-bottom: -16px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item { margin-bottom: 16px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item .about-contributions-grid-item-content { padding: 16px; } #canvas.about #about-careers .about-careers-benefits-grid { margin-bottom: -16px; } #canvas.about #about-careers .about-careers-benefits-grid .about-careers-benefits-grid-item { margin-bottom: 16px; } #canvas.about #about-career-openings #about-career-openings-listings li { padding-bottom: 8px; margin-bottom: 8px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- About ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.about { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Contributions ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Careers ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.about #about-team .about-team-grid { margin-top: 36px; margin-left: -12px; } #canvas.about #about-team .about-team-grid .about-team-grid-item { width: 104.5px; height: 104.5px; margin-top: 12px; margin-left: 12px; } #canvas.about #about-contributions .about-contributions-grid { margin-bottom: -24px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item { margin-bottom: 24px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item .about-contributions-grid-item-content { padding: 24px; } #canvas.about #about-careers .about-careers-benefits-grid { margin-bottom: -24px; } #canvas.about #about-careers .about-careers-benefits-grid .about-careers-benefits-grid-item { margin-bottom: 24px; } #canvas.about #about-career-openings #about-career-openings-listings li { padding-bottom: 12px; margin-bottom: 12px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- About ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.about { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Contributions ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Careers ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Team ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.about #about-team .about-team-grid { margin-top: 48px; margin-left: -16px; } #canvas.about #about-team .about-team-grid .about-team-grid-item { width: 95.6px; height: 95.6px; margin-top: 16px; margin-left: 16px; } #canvas.about #about-contributions .about-contributions-grid { margin-bottom: -32px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item { margin-bottom: 32px; } #canvas.about #about-contributions .about-contributions-grid .about-contributions-grid-item .about-contributions-grid-item-content { padding: 32px; } #canvas.about #about-careers .about-careers-benefits-grid { margin-bottom: -32px; } #canvas.about #about-careers .about-careers-benefits-grid .about-careers-benefits-grid-item { margin-bottom: 32px; } #canvas.about #about-career-openings #about-career-openings-listings li { padding-bottom: 16px; margin-bottom: 16px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/amazon/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Overview ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.amazon #page-header .page-header-image { display: block; width: 120px; height: 46.2px; background-image: url("../images/views/amazon/page-header-image.png"); background-size: 100% 100%; margin-left: auto; margin-right: auto; } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { display: block; margin: 0 auto; background-size: 480px 80px; width: 80px; height: 80px; background-image: url("../images/views/amazon/amazon-features.png"); } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-scale .amazon-feature-image { background-position: 0px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-portability .amazon-feature-image { background-position: -80px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-high-availability .amazon-feature-image { background-position: -160px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-multi-tenancy .amazon-feature-image { background-position: -240px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-automation .amazon-feature-image { background-position: -320px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-develop .amazon-feature-image { background-position: -400px 0px; } #canvas.amazon #amazon-overview { overflow: hidden; padding-bottom: 200px; } #canvas.amazon #amazon-overview .amazon-overview-graphic { display: block; width: 400px; height: 400px; background-image: url("../images/views/amazon/amazon-overview.jpg"); background-size: 100% 100%; position: absolute; bottom: -400px; left: 50%; margin-left: -200px; } #canvas.amazon #amazon-services { overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { background-size: 480px 80px; width: 80px; height: 80px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-scale-screen-mini .amazon-feature-image { background-position: 0px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-portability .amazon-feature-image { background-position: -80px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-high-availability .amazon-feature-image { background-position: -160px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-multi-tenancy .amazon-feature-image { background-position: -240px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-automation .amazon-feature-image { background-position: -320px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-develop .amazon-feature-image { background-position: -400px 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ } #canvas.amazon #page-header .page-header-image { width: 160px; height: 61.6px; } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { background-size: 600px 100px; width: 100px; height: 100px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-scale-screen-small .amazon-feature-image { background-position: 0px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-portability .amazon-feature-image { background-position: -100px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-high-availability .amazon-feature-image { background-position: -200px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-multi-tenancy .amazon-feature-image { background-position: -300px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-automation .amazon-feature-image { background-position: -400px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-develop .amazon-feature-image { background-position: -500px 0px; } #canvas.amazon #amazon-overview { padding-bottom: 0px; } #canvas.amazon #amazon-overview .amazon-overview-graphic { width: 500px; height: 500px; top: 50%; bottom: auto; left: 50%; margin-top: -250px; margin-left: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ } #canvas.amazon #page-header .page-header-image { width: 180px; height: 69.3px; } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { background-size: 768px 128px; width: 128px; height: 128px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-scale-screen-medium .amazon-feature-image { background-position: 0px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-portability .amazon-feature-image { background-position: -128px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-high-availability .amazon-feature-image { background-position: -256px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-multi-tenancy .amazon-feature-image { background-position: -384px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-automation .amazon-feature-image { background-position: -512px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-develop .amazon-feature-image { background-position: -640px 0px; } #canvas.amazon #amazon-overview .amazon-overview-graphic { width: 500px; height: 500px; margin-top: -250px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ } #canvas.amazon #page-header .page-header-image { width: 200px; height: 77px; } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { background-size: 768px 128px; width: 128px; height: 128px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-scale-screen-large .amazon-feature-image { background-position: 0px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-portability .amazon-feature-image { background-position: -128px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-high-availability .amazon-feature-image { background-position: -256px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-multi-tenancy .amazon-feature-image { background-position: -384px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-automation .amazon-feature-image { background-position: -512px 0px; } #canvas.amazon #amazon-features .amazon-feature.amazon-feature-develop .amazon-feature-image { background-position: -640px 0px; } #canvas.amazon #amazon-overview .amazon-overview-graphic { width: 600px; height: 600px; margin-top: -300px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Amazon -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.amazon { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Overview ----------------------------------------------------------------------------- */ } #canvas.amazon #page-header .page-header-image { background-image: url("../images/views/amazon/page-header-image@2x.png"); } #canvas.amazon #amazon-features .amazon-feature .amazon-feature-image { background-image: url("../images/views/amazon/amazon-features@2x.png"); } #canvas.amazon #amazon-overview .amazon-overview-graphic { background-image: url("../images/views/amazon/amazon-overview@2x.jpg"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/azure/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Overview ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.azure #page-header .page-header-image { display: block; width: 80px; height: 81.2px; background-image: url("../images/views/azure/page-header-image.png"); background-size: 100% 100%; margin-left: auto; margin-right: auto; } #canvas.azure #azure-features .azure-feature .azure-feature-image { display: block; margin: 0 auto; background-size: 480px 80px; width: 80px; height: 80px; background-image: url("../images/views/azure/azure-features.png"); } #canvas.azure #azure-features .azure-feature.azure-feature-scale .azure-feature-image { background-position: 0px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-portability .azure-feature-image { background-position: -80px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-high-availability .azure-feature-image { background-position: -160px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-multi-tenancy .azure-feature-image { background-position: -240px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-automation .azure-feature-image { background-position: -320px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-develop .azure-feature-image { background-position: -400px 0px; } #canvas.azure #azure-overview { overflow: hidden; padding-bottom: 200px; } #canvas.azure #azure-overview .azure-overview-graphic { display: block; width: 400px; height: 400px; background-image: url("../images/views/azure/azure-overview.jpg"); background-size: 100% 100%; position: absolute; bottom: -400px; left: 50%; margin-left: -200px; } #canvas.azure #azure-services { overflow: hidden; } #canvas.azure #azure-services .services-icons { margin: 0 auto; text-align: center; *zoom: 1; margin-top: -12px; margin-left: -12px; } #canvas.azure #azure-services .services-icons:before, #canvas.azure #azure-services .services-icons:after { display: table; content: ""; line-height: 0; } #canvas.azure #azure-services .services-icons:after { clear: both; } #canvas.azure #azure-services .services-icons .services-icon { display: inline-block; margin-left: 12px; margin-top: 12px; vertical-align: top; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper { position: relative; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { position: relative; display: block; width: 48px; height: 48px; border-radius: 18%; overflow: hidden; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image:after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; border-radius: 18%; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } #canvas.azure #azure-services .services-icons .services-icon .services-icon-label { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.azure #azure-features .azure-feature .azure-feature-image { background-size: 480px 80px; width: 80px; height: 80px; } #canvas.azure #azure-features .azure-feature.azure-feature-scale-screen-mini .azure-feature-image { background-position: 0px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-portability .azure-feature-image { background-position: -80px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-high-availability .azure-feature-image { background-position: -160px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-multi-tenancy .azure-feature-image { background-position: -240px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-automation .azure-feature-image { background-position: -320px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-develop .azure-feature-image { background-position: -400px 0px; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 57.6px; height: 57.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.azure #page-header .page-header-image { width: 80px; height: 81.2px; } #canvas.azure #azure-features .azure-feature .azure-feature-image { background-size: 600px 100px; width: 100px; height: 100px; } #canvas.azure #azure-features .azure-feature.azure-feature-scale-screen-small .azure-feature-image { background-position: 0px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-portability .azure-feature-image { background-position: -100px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-high-availability .azure-feature-image { background-position: -200px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-multi-tenancy .azure-feature-image { background-position: -300px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-automation .azure-feature-image { background-position: -400px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-develop .azure-feature-image { background-position: -500px 0px; } #canvas.azure #azure-overview { padding-bottom: 0px; } #canvas.azure #azure-overview .azure-overview-graphic { width: 500px; height: 500px; top: 50%; bottom: auto; left: 50%; margin-top: -250px; margin-left: 0px; } #canvas.azure #azure-services .services-icons { margin-left: -16px; margin-top: -16px; } #canvas.azure #azure-services .services-icons .services-icon { margin-left: 16px; margin-top: 16px; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 76.8px; height: 76.8px; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-label { text-align: center; display: inline-block; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.azure #page-header .page-header-image { width: 100px; height: 101.5px; } #canvas.azure #azure-features .azure-feature .azure-feature-image { background-size: 768px 128px; width: 128px; height: 128px; } #canvas.azure #azure-features .azure-feature.azure-feature-scale-screen-medium .azure-feature-image { background-position: 0px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-portability .azure-feature-image { background-position: -128px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-high-availability .azure-feature-image { background-position: -256px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-multi-tenancy .azure-feature-image { background-position: -384px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-automation .azure-feature-image { background-position: -512px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-develop .azure-feature-image { background-position: -640px 0px; } #canvas.azure #azure-overview .azure-overview-graphic { width: 500px; height: 500px; margin-top: -250px; } #canvas.azure #azure-services .services-icons { margin-left: -24px; margin-top: -24px; } #canvas.azure #azure-services .services-icons .services-icon { margin-left: 24px; margin-top: 24px; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 96px; height: 96px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Formfactor ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Services ----------------------------------------------------------------------------- */ } #canvas.azure #page-header .page-header-image { width: 120px; height: 121.8px; } #canvas.azure #azure-features .azure-feature .azure-feature-image { background-size: 768px 128px; width: 128px; height: 128px; } #canvas.azure #azure-features .azure-feature.azure-feature-scale-screen-large .azure-feature-image { background-position: 0px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-portability .azure-feature-image { background-position: -128px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-high-availability .azure-feature-image { background-position: -256px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-multi-tenancy .azure-feature-image { background-position: -384px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-automation .azure-feature-image { background-position: -512px 0px; } #canvas.azure #azure-features .azure-feature.azure-feature-develop .azure-feature-image { background-position: -640px 0px; } #canvas.azure #azure-overview .azure-overview-graphic { width: 600px; height: 600px; margin-top: -300px; } #canvas.azure #azure-services .services-icons { margin-left: -32px; margin-top: -32px; } #canvas.azure #azure-services .services-icons .services-icon { margin-left: 32px; margin-top: 32px; } #canvas.azure #azure-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 105.6px; height: 105.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- azure -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.azure { /* ----------------------------------------------------------------------------- Page Header ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Overview ----------------------------------------------------------------------------- */ } #canvas.azure #page-header .page-header-image { background-image: url("../images/views/azure/page-header-image@2x.png"); } #canvas.azure #azure-features .azure-feature .azure-feature-image { background-image: url("../images/views/azure/azure-features@2x.png"); } #canvas.azure #azure-overview .azure-overview-graphic { background-image: url("../images/views/azure/azure-overview@2x.jpg"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/blog/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Blog -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body.blog #canvas, body.search #canvas, body.single-post #canvas, body.archive.author #canvas, body.archive.category #canvas, body.archive.tag #canvas { background: #f9f9fa; } .blog-sidebar { position: relative; } .blog-sidebar .blog-sidebar-categories-trigger { color: #323a4e; transition: color 0.25s; } .blog-sidebar .blog-sidebar-categories-trigger:hover { color: #9351e5; text-decoration: none; } .blog-sidebar .blog-sidebar-categories-trigger:hover .blog-sidebar-categories-icon { fill: #9351e5; } .blog-sidebar .blog-sidebar-categories-icon { margin-right: 3px; transition: fill 0.25s; } .blog-sidebar .blog-sidebar-item-categories { text-align: right; position: absolute; top: 5px; margin-top: 0; z-index: 10; width: auto; right: 12px; padding: 2px 0; } .search-form .search-form-input-wrapper { position: relative; } .search-form .search-form-input { color: #323a4e; background: transparent; border-radius: 0; border: none; position: relative; padding-left: 36px; transition: color 0.25s; z-index: 2; } .search-form .search-form-input::-webkit-input-placeholder { transition: color 0.25s; } .search-form .search-form-input::-moz-placeholder { transition: color 0.25s; } .search-form .search-form-input:-ms-input-placeholder { transition: color 0.25s; } .search-form .search-form-input::placeholder { transition: color 0.25s; } .search-form .search-form-input:focus { color: #9351e5; } .search-form .search-form-input:focus + .search-form-icon { fill: #9351e5; } .search-form .search-form-input:focus + .search-form-icon + .search-form-decoration { background: #9351e5; transform: scale(1); } .search-form .search-form-icon { left: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: fill 0.25s; } .search-form .search-form-decoration { background: transparent; bottom: 0; display: block; height: 1px; left: 36px; position: absolute; right: 0; transform: scaleX(0); transform-origin: 0 0; transition: background 0.125s, transform 0.125s; width: auto; } .blog-posts-wrapper .blog-post { display: -ms-flexbox; display: flex; } .blog-posts-wrapper .blog-post .panel-header { padding-top: 12px; } .blog-posts-wrapper .blog-post .panel-content { padding-top: 0; } .blog-posts-wrapper .blog-post-content-wrapper { color: #ffffff; display: -ms-flexbox; display: flex; padding: 0; } .blog-posts-wrapper .blog-post-content-wrapper:hover { color: #ffffff; text-decoration: none; } .blog-posts-wrapper .blog-post-content { position: relative; width: 100%; } .blog-posts-wrapper .blog-post-header, .blog-posts-wrapper .blog-post-title, .blog-posts-wrapper .blog-post-cta { color: inherit; position: relative; z-index: 2; } .blog-posts-wrapper .blog-post-header .h6 { color: inherit; font-weight: 500; } .blog-posts-wrapper .blog-post-title { min-height: 66px; } .blog-posts-wrapper .blog-post-category, .blog-posts-wrapper .blog-post-date { display: block; padding-left: 0; padding-right: 0; } .blog-posts-wrapper .blog-post-category { text-align: left; } .blog-posts-wrapper .blog-post-date { opacity: 0.75; text-align: right; } .blog-posts-wrapper .blog-post-cta { font-size: 0.85em; font-weight: 600; } .blog-posts-wrapper .blog-post-image { background-position: center; background-size: cover; -webkit-filter: gray; filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0; width: 100%; z-index: 1; } .modal-blog-categories-heading { font-size: 1.5em; } .modal-blog-categories-list { list-style: none; } .modal-blog-categories-list li { font-size: 42px; line-height: 35px; margin: 0 0 48px 0; padding-left: 0; } .modal-blog-categories-list li:first-child { margin-top: 48px; } .modal-blog-categories-list li:last-child { margin-bottom: 0; } .modal-blog-categories-list li:before { display: none; } .no-search-results-icon { height: 72px; width: 72px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .blog-sidebar .blog-sidebar-item-categories { text-align: right; position: relative; top: 0; margin-top: 0; z-index: 10; width: auto; right: 0; } .blog-posts-wrapper .blog-post .panel-header { padding-top: 12px; } .blog-posts-wrapper .blog-post-title { min-height: 66px; } .blog-posts-wrapper .blog-post-content-wrapper { padding: 0; } .blog-post-featured .blog-post-content { padding: 20px 20px 50px 20px; } .blog-post-featured .blog-post-cta { bottom: 20px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .blog-posts-wrapper .blog-post .panel-header { padding-top: 16px; } .blog-posts-wrapper .blog-post-title { min-height: 72.6px; } .blog-posts-wrapper .blog-post-content-wrapper { padding: 0; } .blog-post-featured .blog-post-content-wrapper { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .blog-post-featured .blog-post-content { padding: 32px 32px 56px 32px; } .blog-post-featured .blog-post-image { -ms-flex: 1 1 41.25%; flex: 1 1 41.25%; } .blog-post-featured .blog-post-cta { bottom: 22.85714286px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .blog-posts-wrapper .blog-post .panel-header { padding-top: 24px; } .blog-posts-wrapper .blog-post-title { min-height: 79.2px; } .blog-post-featured .blog-post-content { padding: 48px 48px 84px 48px; } .blog-post-featured .blog-post-cta { bottom: 34.28571429px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .blog-posts-wrapper .blog-post .panel-header { padding-top: 32px; } .blog-posts-wrapper .blog-post-title { min-height: 79.2px; } .blog-posts-wrapper .blog-post-content-wrapper { padding: 0; } .blog-post-featured .blog-post-content { padding: 44.8px 44.8px 86.4px 44.8px; } .blog-post-featured .blog-post-cta { bottom: 38.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/blog/article.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Blog Article -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas .post .article-content img, #canvas .post .article-content .wp-caption { height: auto; max-width: 100% !important; } .wp-caption.aligncenter { margin: 0 auto; } .wp-caption-text { margin-bottom: 12px !important; padding-bottom: 6px; border-bottom: 1px solid #ebebed; } .blog-post-single .blog-post-header { padding: 48px 0; } .blog-post-single .blog-post-header-content { position: relative; z-index: 2; } .blog-post-single .blog-post-super-header { color: #ffffff; font-weight: 500; padding-bottom: 0.85em; } .blog-post-single .blog-post-image { background-position: center; background-size: cover; -webkit-filter: gray; filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0; width: 100%; z-index: 1; } .blog-post-single .article-content p:last-child { margin-bottom: 0; } .blog-post-author { display: inline-block; margin-top: -48px; position: relative; z-index: 2; } .blog-post-author-link { color: #323a4e; } .blog-post-author-link:hover { color: #323a4e; } .blog-post-author-photo-wrapper { border-radius: 96px; font-size: 0; height: 96px; margin-left: auto; margin-bottom: 12px; margin-right: auto; position: relative; width: 96px; } .blog-post-author-photo-wrapper img, .blog-post-author-photo-wrapper .blog-post-author-photo-border { display: block; height: 100%; position: absolute; left: 0; top: 0; width: 100%; } .blog-post-author-photo-wrapper img { height: auto; z-index: 1; } .blog-post-author-photo-wrapper img.blog-post-author-photo-employee-headshot { top: -5%; } .blog-post-author-photo-border { border-radius: 96px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); z-index: 2; } .blog-post-author-photo-default { background: #ffffff; } .blog-post-author-photo-default .icon { height: 96px; width: 96px; } .blog-post-author-name { font-weight: 400; } .blog-post-date { color: rgba(50, 58, 78, 0.6); } .blog-post-media { margin-bottom: 24px; margin-top: 24px; } .blog-post-media img { display: block; } .blog-post-media:first-child { margin-top: 0; } .blog-post-media:last-child { margin-bottom: 0; } .blog-post-media.blog-post-media-full img { height: auto; width: 100%; } p.decorate-line.decorate-line-underline.decorate-line-tall.blog-details-excerpt { padding-bottom: 42px; } .blog-post-tags { color: rgba(50, 58, 78, 0.65); } .blog-post-comments { background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.1); } .comments-toggle-button { cursor: pointer; } .comments-toggle-button .icon { fill: #323a4e; margin-left: 16px; height: 22px; width: 22px; } .comments-toggle-button-collapse .icon { transform: rotate(180deg); } html.email-signup-form, html.email-signup-form body, html.email-signup-form #canvas { background: transparent; } html.email-signup-form .blog-post-signup-input, html.email-signup-form .text { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px 0 0 100px; border-right: none; color: #ffffff; outline: none; } html.email-signup-form .blog-post-signup-input:hover, html.email-signup-form .text:hover, html.email-signup-form .blog-post-signup-input:focus, html.email-signup-form .text:focus { border-color: rgba(255, 255, 255, 0.4); } html.email-signup-form .blog-post-signup-input::-webkit-input-placeholder, html.email-signup-form .text::-webkit-input-placeholder { color: #ffffff; } html.email-signup-form .blog-post-signup-input::-moz-placeholder, html.email-signup-form .text::-moz-placeholder { color: #ffffff; } html.email-signup-form .blog-post-signup-input:-ms-input-placeholder, html.email-signup-form .text:-ms-input-placeholder { color: #ffffff; } html.email-signup-form .blog-post-signup-input::placeholder, html.email-signup-form .text::placeholder { color: #ffffff; } html.email-signup-form .blog-post-signup-button { background: #ffffff; border-radius: 0 100px 100px 0; color: #9351e5; } html.email-signup-form .blog-post-signup-button:hover { background: rgba(255, 255, 255, 0.9); } html.email-signup-form p { color: #ffffff; text-align: center; } .blog-post-signup { -ms-flex-align: stretch; align-items: stretch; background: url('../images/views/blog/signup-background.jpg') center center no-repeat; background-size: cover; display: -ms-flexbox; display: flex; padding-right: 0; } .blog-post-signup .blog-post-signup-content-wrapper { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .blog-post-signup .blog-post-signup-header { color: #ffffff; } .blog-post-signup-content { padding: 0 24px; } .blog-related-post-container { -ms-flex-align: stretch; align-items: stretch; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .blog-related-post-container:hover { text-decoration: none; } .blog-related-post-container .blog-related-post { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; margin-bottom: 0; } .blog-related-post-container .blog-related-post-content { -ms-flex: 1 0 50%; flex: 1 0 50%; padding: 24px 24px 48px 24px; position: relative; } .blog-related-post-container .panel, .blog-related-post-container .panel-content { background: transparent; } .blog-related-post-container .blog-related-post-category { color: rgba(50, 58, 78, 0.65); } .blog-related-post-container .blog-related-post-heading { font-size: 18.2px; } .blog-related-post-container .blog-related-post-excerpt { font-size: inherit; } .blog-related-post-container .blog-related-post-cta { bottom: 24px; font-weight: 600; position: absolute; } .blog-related-post-container .blog-related-post-item-photo { background-position: center; background-repeat: no-repeat; background-size: cover; -ms-flex: 1 1 50%; flex: 1 1 50%; position: relative; } .blog-related-post-container-comments-disabled { background: #ffffff; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .blog-post-single .blog-post-header { padding: 72px 0; } html.email-signup-form .blog-post-signup-button { height: 40px; } .blog-post-media.blog-post-media-left { float: left; margin-right: 36px; max-width: 57%; } .blog-post-media.blog-post-media-right { float: right; margin-left: 36px; max-width: 57%; } .blog-related-post-container .blog-related-post-heading { font-size: 18.2px; line-height: 22px; } .blog-related-post-container .blog-related-post-content { padding: 36px 36px 48px 36px; } .blog-related-post-container .blog-related-post-cta { bottom: 24px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .blog-post-single .blog-post-header { padding: 96px 0; } .blog-post-media.blog-post-media-full { margin-left: -16.6667%; margin-right: -16.6667%; padding-left: 36px; padding-right: 36px; } .blog-post-media.blog-post-media-left { margin-left: -16.66667%; padding-left: 24px; } .blog-post-media.blog-post-media-right { margin-right: -16.66667%; padding-right: 24px; } .blog-related-post-container { padding: 0; } .blog-related-post-container .blog-related-post-heading { font-size: 20.02px; line-height: 24.2px; } .blog-related-post-container .blog-related-post-content { padding: 32px 32px 64px 32px; } .blog-related-post-container .blog-related-post-cta { bottom: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .blog-post-single .blog-post-header { padding: 120px 0; } html.email-signup-form .blog-post-signup-button { height: 42px; } .blog-related-post-container .blog-related-post-heading { font-size: 21.84px; line-height: 26.4px; } .blog-related-post-container .blog-related-post-content { padding: 36px 36px 72px 36px; } .blog-related-post-container .blog-related-post-cta { bottom: 36px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .blog-post-single .blog-post-header { padding: 156px 0; } .blog-related-post-container .blog-related-post-heading { font-size: 21.84px; line-height: 26.4px; } .blog-related-post-container .blog-related-post-content { padding: 32px 32px 96px 32px; } .blog-related-post-container .blog-related-post-cta { bottom: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/careers/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Careers Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.careers-v2 { /* --------------------------------------------------------------------------- Page Header Background Image --------------------------------------------------------------------------- */ } #canvas.careers-v2 #page-header .backstretch img { opacity: 0.2; } /* --------------------------------------------------------------------------- Careers Categories Grid --------------------------------------------------------------------------- */ .careers-categories .careers-category-icon { fill: url(#gradient-horizontal-purple-to-pink); } .careers-categories .panel-content { background: #ffffff; border-radius: 5px; text-align: center; } .careers-categories .careers-category-title { font-size: 1.25em; } .careers-categories .careers-category-links { font-size: 0.9em; line-height: 1.3; margin-bottom: 0; padding: 0 1em; } .careers-categories .careers-category-links a { text-decoration: underline; } /* --------------------------------------------------------------------------- Careers --------------------------------------------------------------------------- */ .career-department { border-bottom: 1px solid #ebebed; } .career-department:last-child { border-bottom: none; } .career-department .career-department-icon { fill: url(#gradient-horizontal-purple-to-pink); } @keyframes timeline-event-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes timeline-event-slide-up { 0% { transform: translateY(30px); } 100% { transform: translateY(0); } } @keyframes timeline-event-slide-down { 0% { transform: translateY(-30px); } 100% { transform: translateY(0); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/company/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Company Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.company { /* --------------------------------------------------------------------------- Page Header Background Image --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Company Introduction --------------------------------------------------------------------------- */ } #canvas.company #page-header .backstretch img { opacity: 0.2; } #canvas.company .statistics h5 { font-weight: 100; } #canvas.company .statistic-label.light { color: #ffffff; } /* --------------------------------------------------------------------------- Events Timeline --------------------------------------------------------------------------- */ .timeline-events { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; list-style: none; transition: transform 1s; width: auto; } .timeline-background { background: #323a4e; } .timeline-event { background: #323a4e; color: #ffffff; display: -ms-flexbox; display: flex; -ms-flex: 1 0 350px; flex: 1 0 350px; margin: 0; min-height: 290px; max-width: 350px; min-width: 350px; padding: 0; transition: background 0.5s, margin 1s, max-width 1s, min-width 1s; } .timeline-event.active { margin: -20px 0; max-width: 400px; min-width: 400px; } .timeline-event.active a { padding-left: 61px; padding-right: 61px; } .timeline-event.active:before { opacity: 1; } .timeline-event a { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex: 1 0 100%; flex: 1 0 100%; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; padding: 0 36px; position: relative; text-decoration: none !important; transition: padding 1s; z-index: 3; } .timeline-event:before { background: linear-gradient(135deg, #9351e5, #2f81f7); border-radius: 0; content: ''; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 1s; z-index: 1; width: 100%; } .timeline-event-image { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0; width: 100%; z-index: 2; } .timeline-event-title, .timeline-event-date-type, .timeline-event-description, .timeline-event-cta { color: #ffffff; -ms-flex: 0 0 auto; flex: 0 0 auto; min-width: 100%; visibility: hidden; } .timeline-event-date-type, .timeline-event-cta { left: 0; margin: 0; position: absolute; width: 100%; } .timeline-event-title { line-height: 1.2; margin: 16px 0; transition: font-size 1s; visibility: visible; } .timeline-event.active .timeline-event-title { font-size: 1.5em; } .timeline-event-date-type { font-weight: 500; top: 30px; } .timeline-event-date-type .timeline-event-type { border-right: 1px solid rgba(255, 255, 255, 0.2); margin-right: 0.8em; padding-right: 0.8em; } .timeline-event-date-type .timeline-event-date { color: rgba(255, 255, 255, 0.75); } .timeline-event.active .timeline-event-date-type { animation: timeline-event-fade-in 1s, timeline-event-slide-up 1s; margin: 0 0 16px 0; visibility: visible; } .timeline-event-description { margin: 0; max-height: 0; position: absolute; transition: max-height 1s linear; } .timeline-event.active .timeline-event-description { animation: timeline-event-fade-in 1s; max-height: 100px; position: relative; visibility: visible; } .timeline-event-cta { bottom: 30px; font-size: 1.1em; font-weight: 600; } .timeline-event.active .timeline-event-cta { animation: timeline-event-fade-in 1s, timeline-event-slide-down 1s; margin-top: 42px; visibility: visible; } .timeline-navigation { display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; width: 100%; } .timeline-navigation .timeline-navigation-group:before { display: none; } .timeline-navigation-group { display: block; -ms-flex: 1 1 25%; flex: 1 1 25%; margin: 0; padding: 0; position: relative; } .timeline-navigation-items { display: block; height: 11px; margin: 0 0 10px 0; padding: 0; position: relative; } .timeline-navigation-items:after { background: rgba(147, 81, 229, 0.1); content: ''; display: block; height: 1px; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1; } .timeline-navigation-item { height: 13px; cursor: pointer; margin: 0; padding: 2px; position: absolute; transform: translateY(-50%); top: 50%; width: 13px; z-index: 2; } .timeline-navigation-item:before, .timeline-navigation-item:after { border-radius: 100%; content: ''; display: block; height: 9px; left: 2px; margin: 0; padding: 0; position: absolute; top: 2px; transition: background 0.5s, box-shadow 0.5s; width: 9px; } .timeline-navigation-item:before { background: #ffffff; } .timeline-navigation-item:after { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(147, 81, 229, 0.25), 0 0 0 1px #ffffff; } .timeline-navigation-item:hover:after { background: rgba(147, 81, 229, 0.25); } .timeline-navigation-item.active:after { background: #9351e5; box-shadow: 0 0 0 1px #ffffff; } .timeline-navigation-label { color: #9351e5; font-family: 'DIN Next W01', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.6em; opacity: 0.75; } /* --------------------------------------------------------------------------- Employees Grid --------------------------------------------------------------------------- */ .employees-filters { margin-bottom: 1em; } .employees-grid { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 1.5em -0.5em 0 -0.5em; } .employees-grid .employee { -ms-flex: 1 1 20%; flex: 1 1 20%; margin-bottom: 1em; max-width: 20%; padding: 0 0.5em; position: relative; } .employees-grid .employee.hidden { display: none; } .employees-grid .employee-photo { display: block; height: auto; width: 100%; } .employees-grid .employee-info { position: absolute; visibility: hidden; } /* --------------------------------------------------------------------------- Employees Grid --------------------------------------------------------------------------- */ .company-investors { text-align: center; } .company-investors .company-investor { display: inline-block; margin: 0 1em; vertical-align: middle; } .company-investors .company-investor a { background: rgba(50, 58, 78, 0.15); min-height: 50px; min-width: 100px; display: block; } .company-investors .company-investor a span { display: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- views/contact/index.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Contact ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #contact .panel { overflow: visible; } #contact .panel-content { padding: 24px 36px 0 36px; position: relative; } #contact .panel-content:hover { box-shadow: none; } #contact .panel-content .icon { height: 64px; left: 50%; position: absolute; top: 0; transform: translate(-50%, -50%); width: 64px; } .contact-channels .contact-channel { margin-bottom: 48px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Office Locations ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .contact-offices { background: url("../images/views/contact/stars.svg") center no-repeat #1c202b; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .offices-globe-wrapper { display: -ms-flexbox; display: flex; } .offices-globe { -ms-flex-item-align: start; align-self: flex-start; -ms-flex: 1; flex: 1; position: relative; } .offices-globe canvas { left: 0; position: absolute; top: 0; } .offices-globe:after { content: ''; display: block; padding-bottom: 100%; } .offices-location-list { -ms-flex-item-align: center; align-self: center; } .offices-location-list li { margin-bottom: 0; } .offices-location-list li + li { margin-top: 24px; } .offices-location-list .row { margin-left: 0; margin-right: 0; } .offices-location-list .row .column-2, .offices-location-list .row .column-10 { padding-left: 0; padding-right: 0; } .offices-location { color: rgba(255, 255, 255, 0.4); margin-bottom: 24px; padding-top: 12px; transition: color 0.25s; } .offices-location:hover { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .offices-location.is-active { color: #ffffff; } .offices-location.is-active .offices-location-city:after { opacity: 1; } .offices-location.is-active .offices-location-city:before { opacity: 0; } .offices-location-city, .offices-location-address { color: inherit; -ms-flex: 1; flex: 1; } .offices-location-city { font-weight: 400; min-width: 60px; max-width: 60px; width: 60px; position: relative; text-align: right; white-space: nowrap; } .offices-location-city:after, .offices-location-city:before { background: #ffffff; content: ''; display: block; height: 2px; opacity: 0.2; pointer-events: none; position: absolute; right: 0; top: -12px; transition: opacity 0.25s; width: 100vw; width: calc(24px + 100%); } .offices-location-city:after { background: linear-gradient(90deg, #9351e5, #ef468b); opacity: 0; } .offices-location-address { font-weight: normal; padding-left: 30px; } .offices-location-address-label, .offices-location-address-street-address { display: block; } .offices-location-address-label { font-size: 19.6px; } .offices-location-address-street-address { opacity: 0.8; } .location-tracker { left: 50%; margin-left: 0; margin-top: -17px; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%; transition: opacity 0.25s, transform 0.25s; z-index: 2; } .location-tracker.is-visible { opacity: 1; transform: translate(-50%, -100%) scale(1); } .location-tracker-details { background: #ffffff; color: #323a4e; font-size: 14px; padding: 24px; position: relative; width: 250px; } .location-tracker-details:after { content: ''; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #ffffff; left: 50%; position: absolute; top: 100%; transform: translateX(-50%); } .location-tracker-map { background: grey; height: 133px; } .location-tracker-map .gm-style a[href^="http://maps.google.com/maps"] { display: none !important; } .location-tracker-map .gm-style a[href^="https://maps.google.com/maps"] { display: none !important; } .location-tracker-map .gm-style .gmnoprint a, .location-tracker-map .gm-style .gmnoprint span, .location-tracker-map .gm-style .gm-style-cc { display: none; } .location-tracker-map .gm-style .gmnoprint div { background: none !important; } .location-tracker-label, .location-tracker-address { display: block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .location-tracker-label { color: #323a4e; font-size: 15.75px; font-weight: 400; } .location-tracker-address { font-size: 14px; opacity: 0.8; } .contact-phone .icon { height: 64px; margin-bottom: 24px; width: 64px; } .contact-phone-number { font-weight: 300; } .contact-phone-number a { color: #ffffff; } .contact-phone-number a:hover { color: #ffffff; text-decoration: none; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { .contact-channels .contact-channel { margin-bottom: 64px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .contact-panel-grid .panel-container { margin-top: 0; } .offices-location-list li { margin-bottom: 0; } .offices-location-list li + li { margin-top: 36px; } .offices-location-city:after, .offices-location-city:before { width: calc((100vw - 730px) / 2 + 100%); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { .offices-location-list li { margin-bottom: 0; } .offices-location-list li + li { margin-top: 48px; } .offices-location-city:after, .offices-location-city:before { width: calc((100vw - 920px) / 2 + 100%); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { .offices-location-city:after, .offices-location-city:before { width: calc((100vw - 1100px) / 2 + 100%); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/developer-program/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonial Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-developer-program .header-inner .header-actions { display: none !important; } #canvas.developer-program { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Support -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Certification -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.developer-program #page-header { /* ---------------------------------------------------------------------------------------------------- Page Header Background Video ---------------------------------------------------------------------------------------------------- */ } #canvas.developer-program #page-header #page-header-background-video video { opacity: 0.15; filter: alpha(opacity=15); } #canvas.developer-program #page-header #page-header-background-video #page-header-background-video-swf { opacity: 0.15; filter: alpha(opacity=15); } #canvas.developer-program #developer-program-developer-support .icon { background: url("../images/views/developer-program/developer-support-options.png"); background-size: 112px 336px; height: 112px; width: 112px; } #canvas.developer-program #developer-program-developer-support .icon-google-groups { background-position: 0 -224px; } #canvas.developer-program #developer-program-developer-support .icon-intercom { background-position: 0 0; } #canvas.developer-program #developer-program-developer-support .icon-slack { background-position: 0 -112px; } #canvas.developer-program #developer-program-certification .developer-program-certification-icon { display: block; width: 180px; height: 180px; background-size: 100% 100%; background-image: url("../images/views/developer-program/certified-badge.png"); margin: 0 auto; } #canvas.developer-program #developer-program-customer-experience { overflow: hidden; } #canvas.developer-program #developer-program-customer-experience .terminal { width: 350px; margin-bottom: -50%; margin-left: -175px; left: 50%; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content { height: 300px; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content .h4 { font-size: 12px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner a { display: block; padding: 20px 0 40px 0; text-align: center; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner a .developer-program-featured-partner-logo { background-image: url("../images/views/developer-program/developer-program-logos.png"); background-size: 128px 457.6px; display: inline-block; height: 35.2px; text-indent: -9999em; width: 72px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-arangodb .developer-program-featured-partner-logo { width: 128px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-basho .developer-program-featured-partner-logo { width: 100px; background-position: 0px -35.2px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-calico .developer-program-featured-partner-logo { width: 106px; background-position: 0px -70.4px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-cisco .developer-program-featured-partner-logo { width: 65.2px; background-position: 0px -105.6px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-concord .developer-program-featured-partner-logo { width: 102px; background-position: 0px -145.024px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-confluent .developer-program-featured-partner-logo { width: 118px; background-position: 0px -176px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-crate .developer-program-featured-partner-logo { width: 121.2px; background-position: 0px -211.2px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-datastax .developer-program-featured-partner-logo { width: 128px; background-position: 0px -246.4px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-mapr .developer-program-featured-partner-logo { width: 108px; background-position: 0px -281.6px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-memsql .developer-program-featured-partner-logo { width: 120px; background-position: 0px -316.8px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-quobyte .developer-program-featured-partner-logo { width: 116px; background-position: 0px -352px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-typesafe .developer-program-featured-partner-logo { width: 128px; background-position: 0px -387.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial { text-align: center; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-content { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; padding-bottom: 3px; padding-top: 3px; margin-right: auto; margin-left: auto; width: 100%; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { display: inline-block; margin: 0 auto; margin-bottom: 2.4px; height: 35.2px; background-size: 128px 457.6px; background-image: url("../images/views/developer-program/developer-program-logos.png"); position: relative; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo span { display: none; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-arangodb { width: 128px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-basho { width: 100px; background-position: 0px -35.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-calico { width: 106px; background-position: 0px -70.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-cisco { width: 65.2px; background-position: 0px -105.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-concord { width: 102px; background-position: 0px -140.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-confluent { width: 118px; background-position: 0px -176px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-crate { width: 121.2px; background-position: 0px -211.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datastax { width: 128px; background-position: 0px -246.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-mapr { width: 108px; background-position: 0px -281.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-memsql { width: 120px; background-position: 0px -316.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-quobyte { width: 116px; background-position: 0px -352px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-typesafe { width: 128px; background-position: 0px -387.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datadog { width: 124px; background-position: 0px -422.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination { margin-top: 15px; margin-bottom: -15px; } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination li { background: rgba(255, 255, 255, 0.1); } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination li.active { background: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.developer-program { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner a .developer-program-featured-partner-logo { height: 44px; background-size: 160px 572px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-arangodb .developer-program-featured-partner-logo { width: 160px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-basho .developer-program-featured-partner-logo { width: 125px; background-position: 0px -44px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-calico .developer-program-featured-partner-logo { width: 132.5px; background-position: 0px -88px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-cisco .developer-program-featured-partner-logo { width: 81.5px; background-position: 0px -132px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-concord .developer-program-featured-partner-logo { width: 127.5px; background-position: 0px -176px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-confluent .developer-program-featured-partner-logo { width: 147.5px; background-position: 0px -220px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-crate .developer-program-featured-partner-logo { width: 151.5px; background-position: 0px -264px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-datastax .developer-program-featured-partner-logo { width: 160px; background-position: 0px -308px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-mapr .developer-program-featured-partner-logo { width: 135px; background-position: 0px -352px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-memsql .developer-program-featured-partner-logo { width: 150px; background-position: 0px -396px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-quobyte .developer-program-featured-partner-logo { width: 145px; background-position: 0px -440px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-typesafe .developer-program-featured-partner-logo { width: 160px; background-position: 0px -484px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-content { width: 80%; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { margin-bottom: 3.2px; height: 44px; background-size: 160px 572px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-arangodb { width: 160px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-basho { width: 125px; background-position: 0px -44px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-calico { width: 132.5px; background-position: 0px -88px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-cisco { width: 81.5px; background-position: 0px -132px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-concord { width: 127.5px; background-position: 0px -176px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-confluent { width: 147.5px; background-position: 0px -220px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-crate { width: 151.5px; background-position: 0px -264px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datastax { width: 160px; background-position: 0px -308px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-mapr { width: 135px; background-position: 0px -352px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-memsql { width: 150px; background-position: 0px -396px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-quobyte { width: 145px; background-position: 0px -440px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-typesafe { width: 160px; background-position: 0px -484px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datadog { width: 155px; background-position: 0px -528px; } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination { margin-top: 21px; margin-bottom: -21px; } #canvas.developer-program #developer-program-customer-experience .terminal { width: auto; margin-left: auto; margin-right: auto; left: auto; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content { height: 300px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.developer-program { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonails -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner a .developer-program-featured-partner-logo { height: 52.8px; background-size: 192px 686.4px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-arangodb .developer-program-featured-partner-logo { width: 192px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-basho .developer-program-featured-partner-logo { width: 150px; background-position: 0px -52.8px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-calico .developer-program-featured-partner-logo { width: 159px; background-position: 0px -105.6px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-cisco .developer-program-featured-partner-logo { width: 97.8px; background-position: 0px -158.4px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-concord .developer-program-featured-partner-logo { width: 153px; background-position: 0px -211.2px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-confluent .developer-program-featured-partner-logo { width: 177px; background-position: 0px -264px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-crate .developer-program-featured-partner-logo { width: 181.8px; background-position: 0px -316.8px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-datastax .developer-program-featured-partner-logo { width: 192px; background-position: 0px -369.6px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-mapr .developer-program-featured-partner-logo { width: 162px; background-position: 0px -422.4px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-memsql .developer-program-featured-partner-logo { width: 180px; background-position: 0px -475.2px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-quobyte .developer-program-featured-partner-logo { width: 174px; background-position: 0px -528px; } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-typesafe .developer-program-featured-partner-logo { width: 192px; background-position: 0px -580.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-content { width: 65%; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { margin-bottom: 4.8px; height: 52.8px; background-size: 192px 686.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-arangodb { width: 192px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-basho { width: 150px; background-position: 0px -52.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-calico { width: 159px; background-position: 0px -105.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-cisco { width: 97.8px; background-position: 0px -158.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-concord { width: 153px; background-position: 0px -211.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-confluent { width: 177px; background-position: 0px -264px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-crate { width: 181.8px; background-position: 0px -316.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datastax { width: 192px; background-position: 0px -369.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-mapr { width: 162px; background-position: 0px -422.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-memsql { width: 180px; background-position: 0px -475.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-quobyte { width: 174px; background-position: 0px -528px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-typesafe { width: 192px; background-position: 0px -580.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datadog { width: 186px; background-position: 0px -633.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination { margin-top: 32.7px; margin-bottom: -32.7px; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content { height: 300px; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content .h4 { font-size: 20.02px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #developer-program-featured-partners-logos .developer-program-featured-partner a .developer-program-featured-partner-logo { height: 52.8px; background-size: 192px 686.4px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-arangodb .developer-program-featured-partner-logo { width: 192px; background-position: 0px 0px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-basho .developer-program-featured-partner-logo { width: 150px; background-position: 0px -52.8px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-calico .developer-program-featured-partner-logo { width: 159px; background-position: 0px -105.6px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-cisco .developer-program-featured-partner-logo { width: 97.8px; background-position: 0px -158.4px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-concord .developer-program-featured-partner-logo { width: 153px; background-position: 0px -211.2px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-confluent .developer-program-featured-partner-logo { width: 177px; background-position: 0px -264px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-crate .developer-program-featured-partner-logo { width: 181.8px; background-position: 0px -316.8px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-datastax .developer-program-featured-partner-logo { width: 192px; background-position: 0px -369.6px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-mapr .developer-program-featured-partner-logo { width: 162px; background-position: 0px -422.4px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-memsql .developer-program-featured-partner-logo { width: 180px; background-position: 0px -475.2px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-quobyte .developer-program-featured-partner-logo { width: 174px; background-position: 0px -528px; } #developer-program-featured-partners-logos .developer-program-featured-partner.developer-program-featured-partner-typesafe .developer-program-featured-partner-logo { width: 192px; background-position: 0px -580.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonails -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { margin-bottom: 6.4px; height: 52.8px; background-size: 192px 686.4px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-arangodb { width: 192px; background-position: 0px 0px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-basho { width: 150px; background-position: 0px -52.8px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-calico { width: 159px; background-position: 0px -105.6px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-cisco { width: 97.8px; background-position: 0px -158.4px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-concord { width: 153px; background-position: 0px -211.2px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-confluent { width: 177px; background-position: 0px -264px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-crate { width: 181.8px; background-position: 0px -316.8px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datastax { width: 192px; background-position: 0px -369.6px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-mapr { width: 162px; background-position: 0px -422.4px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-memsql { width: 180px; background-position: 0px -475.2px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-quobyte { width: 174px; background-position: 0px -528px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-typesafe { width: 192px; background-position: 0px -580.8px; } #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datadog { width: 186px; background-position: 0px -633.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.developer-program { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-content { width: 65%; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { margin-bottom: 6.4px; height: 52.8px; background-size: 192px 686.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-arangodb { width: 192px; background-position: 0px 0px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-basho { width: 150px; background-position: 0px -52.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-calico { width: 159px; background-position: 0px -105.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-cisco { width: 97.8px; background-position: 0px -158.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-concord { width: 153px; background-position: 0px -211.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-confluent { width: 177px; background-position: 0px -264px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-crate { width: 181.8px; background-position: 0px -316.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-datastax { width: 192px; background-position: 0px -369.6px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-mapr { width: 162px; background-position: 0px -422.4px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-memsql { width: 180px; background-position: 0px -475.2px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-quobyte { width: 174px; background-position: 0px -528px; } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo.developer-program-testimonial-logo-typesafe { width: 192px; background-position: 0px -580.8px; } #canvas.developer-program #developer-program-featured-partners-testimonials .carousel-pagination { margin-top: 44.4px; margin-bottom: -44.4px; } #canvas.developer-program #developer-program-customer-experience .terminal .device-browser-content { height: 300px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.developer-program { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partners -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Certification -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.developer-program #developer-program-featured-partners-logos .developer-program-featured-partner a .developer-program-featured-partner-logo { background-image: url("../images/views/developer-program/developer-program-logos@2x.png"); } #canvas.developer-program #developer-program-featured-partners-testimonials .developer-program-testimonials .developer-program-testimonial .developer-program-testimonial-logo { background-image: url("../images/views/developer-program/developer-program-logos@2x.png"); } #canvas.developer-program #developer-program-certification .developer-program-certification-icon { background-image: url("../images/views/developer-program/certified-badge@2x.png"); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- views/downloads/index.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Overview Benefits ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Features Products ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Core Products ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Collection Grid ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms { position: relative; } #canvas.downloads #downloads-platforms .container-pod { padding-top: 0px; } #canvas.downloads #downloads-platforms .divider { position: absolute; display: none; background: #f9f9fa; } #canvas.downloads #downloads-platforms .divider.divider-vertical { width: 1px; height: 100%; top: 0px; } #canvas.downloads #downloads-platforms .divider.divider-vertical.divider-vertical-one-third { left: 33%; } #canvas.downloads #downloads-platforms .divider.divider-vertical.divider-vertical-two-thirds { left: 66%; } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { list-style: none; display: block; margin: 0 auto; height: 70px; background-size: 140px 280px; background-image: url("../images/views/downloads/downloads-platforms.png"); position: relative; margin-bottom: 9px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-google-cloud .downloads-platform-icon { width: 63px; background-position: 0px 0px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-digitalocean .downloads-platform-icon { width: 106.4px; background-position: 0px -70px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-amazon .downloads-platform-icon { width: 128.1px; background-position: 0px -140px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-mesos .downloads-platform-icon { width: 54.6px; background-position: 0px -210px; } #canvas.downloads #downloads-core-products { position: relative; } #canvas.downloads .collection-grid-apps { position: relative; margin-top: -24px; } #canvas.downloads .collection-grid-apps .collection-grid-app { width: 100%; margin-top: 24px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 12px; background-color: #ffffff; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon { display: block; width: 64px; height: 64px; border-radius: 14px; background: #2f81f7; margin: 0 auto; margin-bottom: 6px; text-align: center; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05); } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon .collection-grid-app-product-icon-label { position: relative; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; line-height: 64px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon .collection-grid-app-product-icon-label .collection-grid-app-product-icon-label-lowercase { display: inline; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; color: #ffffff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"], #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"] { color: #ffffff; line-height: 64px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"]:before, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"]:before { line-height: 64px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"].icon-large, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"].icon-large { margin-top: 8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-mesos { background-image: linear-gradient(to bottom, #448ef8 0%, #2a74de 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-marathon { background-image: linear-gradient(to bottom, #0f1117 0%, #050608 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-chronos { background-image: linear-gradient(to bottom, #27c97b 0%, #23b56f 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-hadoop { background-image: linear-gradient(to bottom, #00adee 0%, #009cd6 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-spark { background-image: linear-gradient(to bottom, #f06124 0%, #d85720 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-storm { background-image: linear-gradient(to bottom, #6a43df 0%, #5f3cc9 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-aurora { background-image: linear-gradient(to bottom, #1ad2ff 0%, #17bde6 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-jenkins { background-image: linear-gradient(to bottom, #4639cf 0%, #3f33ba 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon.collection-grid-app-icon-cassandra { background-image: linear-gradient(to bottom, #ed54bd 0%, #d54caa 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app.collection-grid-app-large { background: #f9f9fa; } #canvas.downloads .collection-grid-apps .collection-grid-app.collection-grid-app-large .collection-grid-app-description:after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f9f9fa 100%); background-repeat: repeat-x; } #canvas.downloads .collection-grid-apps .collection-grid-app.collection-grid-app-big-data .collection-grid-app-icon { background-image: linear-gradient(to bottom, #27c97b 0%, #23b56f 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app.collection-grid-app-scheduling .collection-grid-app-icon { background-image: linear-gradient(to bottom, #9351e5 0%, #8449ce 100%); background-repeat: repeat-x; background-color: transparent; } #canvas.downloads .collection-grid-apps .collection-grid-app.collection-grid-app-storage .collection-grid-app-icon { background-image: linear-gradient(to bottom, #ef468b 0%, #bf386f 100%); background-repeat: repeat-x; background-color: transparent; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { height: 70px; background-size: 140px 280px; margin-bottom: 9px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-google-cloud .downloads-platform-icon { width: 63px; background-position: 0px 0px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-digitalocean .downloads-platform-icon { width: 106.4px; background-position: 0px -70px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-amazon .downloads-platform-icon { width: 128.1px; background-position: 0px -140px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-mesos .downloads-platform-icon { width: 54.6px; background-position: 0px -210px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Collection Grid ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { height: 80px; background-size: 160px 320px; margin-bottom: 12px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-google-cloud .downloads-platform-icon { width: 72px; background-position: 0px 0px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-digitalocean .downloads-platform-icon { width: 121.6px; background-position: 0px -80px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-amazon .downloads-platform-icon { width: 146.4px; background-position: 0px -160px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-mesos .downloads-platform-icon { width: 62.4px; background-position: 0px -240px; } #canvas.downloads .collection-grid-apps { margin-left: -32px; margin-top: -32px; } #canvas.downloads .collection-grid-apps .collection-grid-app { float: left; width: 349px; margin-left: 32px; margin-top: 32px; padding: 16px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon { width: 76.8px; height: 76.8px; border-radius: 16.8px; margin-bottom: 8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon .collection-grid-app-product-icon-label { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"], #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"] { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"]:before, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"]:before { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"].icon-large, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"].icon-large { margin-top: 14.4px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description { position: relative; white-space: normal; text-overflow: clip; overflow: hidden; height: 44px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description:after { content: ''; display: block; position: absolute; bottom: 0px; right: 0px; width: 10%; height: 22px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); background-repeat: repeat-x; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Collection Grid ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { height: 90px; background-size: 180px 360px; margin-bottom: 18px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-google-cloud .downloads-platform-icon { width: 81px; background-position: 0px 0px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-digitalocean .downloads-platform-icon { width: 136.8px; background-position: 0px -90px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-amazon .downloads-platform-icon { width: 164.7px; background-position: 0px -180px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-mesos .downloads-platform-icon { width: 70.2px; background-position: 0px -270px; } #canvas.downloads .collection-grid-apps { margin-left: -48px; margin-top: -48px; } #canvas.downloads .collection-grid-apps .collection-grid-app { float: left; width: 274.66666667px; margin-left: 48px; margin-top: 48px; padding: 24px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon { width: 76.8px; height: 76.8px; border-radius: 16.8px; margin-bottom: 12px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon .collection-grid-app-product-icon-label { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"], #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"] { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"]:before, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"]:before { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"].icon-large, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"].icon-large { margin-top: 14.4px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description { height: 48px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description:after { height: 24px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Collection Grid ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { height: 100px; background-size: 200px 400px; margin-bottom: 24px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-google-cloud .downloads-platform-icon { width: 90px; background-position: 0px 0px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-digitalocean .downloads-platform-icon { width: 152px; background-position: 0px -100px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-amazon .downloads-platform-icon { width: 183px; background-position: 0px -200px; } #canvas.downloads #downloads-platforms .downloads-platform.downloads-platform-mesos .downloads-platform-icon { width: 78px; background-position: 0px -300px; } #canvas.downloads .collection-grid-apps { margin-left: -64px; margin-top: -64px; } #canvas.downloads .collection-grid-apps .collection-grid-app { float: left; width: 324px; margin-left: 64px; margin-top: 64px; padding: 32px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon { width: 76.8px; height: 76.8px; border-radius: 16.8px; margin-bottom: 16px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon .collection-grid-app-product-icon-label { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"], #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"] { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"]:before, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"]:before { line-height: 76.8px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class^="icon-"].icon-large, #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-icon [class*=" icon-"].icon-large { margin-top: 14.4px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description { height: 48px; } #canvas.downloads .collection-grid-apps .collection-grid-app .collection-grid-app-description:after { height: 24px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Downloads ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.downloads { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #canvas.downloads #downloads-platforms .downloads-platform .downloads-platform-icon { background-image: url("../images/views/downloads/downloads-platforms@2x.png"); } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- views/enterprise/index.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Enterprise ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #canvas.product .page-header-actions .button { line-height: 1; } #canvas.product .page-header-actions .button:before { border-bottom: 10px solid transparent; border-left: 14px solid #ffffff; border-top: 10px solid transparent; content: ''; display: inline-block; margin-top: -5px; margin-right: 12px; vertical-align: middle; } .enterprise-diagram .enterprise-diagram-graphic-services { margin-bottom: -5%; margin-top: -33%; } .enterprise-diagram .enterprise-diagram-graphic-dcos { margin-top: -16%; } .enterprise-diagram .enterprise-diagram-graphic-mesos { margin-bottom: -9%; margin-top: -16%; } .enterprise-diagram .enterprise-diagram-graphic-agents { margin-bottom: -5%; margin-top: -28%; } .enterprise-diagram .shadow-group, .enterprise-diagram .agent-bottom-shadow-bottom { opacity: 0; } .enterprise-diagram-section .enterprise-diagram-annotation { will-change: opacity; } .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5 { color: #9351e5; } .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5 { color: #2f81f7; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .feature-matrix-enterprise .feature-matrix-row-heading { border-bottom: 1px solid rgba(50, 58, 78, 0.1); } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-dcos:after { box-shadow: inset 1px 1px 0 rgba(50, 58, 78, 0.1); left: -1px; top: -1px; } .enterprise-diagram { position: relative; z-index: 1; } .enterprise-diagram:after { content: ''; display: block; padding-bottom: 119.79166667%; } .enterprise-diagram .enterprise-diagram-graphic-services, .enterprise-diagram .enterprise-diagram-graphic-dcos, .enterprise-diagram .enterprise-diagram-graphic-mesos, .enterprise-diagram .enterprise-diagram-graphic-agents { margin-bottom: 0; margin-top: 0; } .enterprise-diagram .shadow-group, .enterprise-diagram .agent-bottom-shadow-bottom { opacity: 1; } .enterprise-diagram .enterprise-diagram-section { position: static; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation { opacity: 0; position: absolute; transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1); width: 160px; z-index: 10; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5, .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation p { font-size: 12.6px; line-height: 18px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5 { margin-bottom: 0; position: relative; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5:before, .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5:after { background: currentColor; content: ''; position: absolute; top: 50%; transform: translateY(-50%); } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5:before { border-radius: 10px; height: 10px; width: 10px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5:after { height: 1px; width: auto; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left { right: 100%; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left h5 span { background: #ffffff; display: inline-block; margin: 0 -8px; padding: 0 8px; position: relative; z-index: 2; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left h5:before { right: -35px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left h5:after { left: 0; right: -30px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-right { left: calc(100% + 20px); } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-right h5:before { left: -35px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-right h5:after { left: -30px; right: calc(100% + 8px); } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation { top: 21.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:before { right: -92px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:after { right: -87px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation { top: 41%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:before { left: -23px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:after { left: -18px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation { top: 45.8%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:before { right: -2px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:after { right: 3px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation { top: 63.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:before { left: -58px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:after { left: -53px; } .enterprise-diagram .enterprise-diagram-graphic { height: auto; left: 0; position: absolute; width: 100%; } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-services { bottom: 41.15%; z-index: 4; } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service, .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow { opacity: 0; transform: translateY(-400px); transition: all 0.7s cubic-bezier(0.39, 0.575, 0.565, 1); } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos { bottom: 28.2%; opacity: 0; transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); z-index: 3; } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos .dcos, .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos .shadow-dcos { transform: translateY(-60px); transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos { bottom: 18.345%; opacity: 0; transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); z-index: 2; } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos .mesos, .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos .shadow-mesos { transform: translateY(-60px); transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-agents { bottom: 0.04%; z-index: 1; } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-agents .agents-group { opacity: 0; transform: translateY(-100px); transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); } .enterprise-diagram .enterprise-diagram-graphic.enterprise-diagram-graphic-agents .agent-shadow { opacity: 0; transition: all 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); } .enterprise-diagram.is-visible .enterprise-diagram-section .enterprise-diagram-annotation { opacity: 1; } .enterprise-diagram.is-visible .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation { transition-delay: 4.75s; } .enterprise-diagram.is-visible .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation { transition-delay: 2.5s; } .enterprise-diagram.is-visible .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation { transition-delay: 1.5s; } .enterprise-diagram.is-visible .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation { transition-delay: 0.8s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow { opacity: 1; transform: translateY(0); } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-1, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-1 { transition-delay: 3.005s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-2, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-2 { transition-delay: 3.02s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-3, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-3 { transition-delay: 3.045s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-4, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-4 { transition-delay: 3.08s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-5, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-5 { transition-delay: 3.125s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-6, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-6 { transition-delay: 3.18s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-7, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-7 { transition-delay: 3.245s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-8, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-8 { transition-delay: 3.3200000000000003s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-9, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-9 { transition-delay: 3.4050000000000002s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-10, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-10 { transition-delay: 3.5s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-11, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-11 { transition-delay: 3.605s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-12, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-12 { transition-delay: 3.72s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-13, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-13 { transition-delay: 3.845s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-14, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-14 { transition-delay: 3.98s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-15, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-15 { transition-delay: 4.125s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-16, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-services .service-shadow-16 { transition-delay: 4.28s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos { opacity: 1; transition-delay: 2s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos .dcos, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-dcos .shadow-dcos { transform: translateY(0); transition-delay: 2s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos { opacity: 1; transition-delay: 1s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos .mesos, .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-mesos .shadow-mesos { transform: translateY(0); transition-delay: 1s; } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-agents .agents-group { opacity: 1; transition-delay: 0; transform: translateY(0); } .enterprise-diagram.is-visible .enterprise-diagram-graphic.enterprise-diagram-graphic-agents .agent-shadow { opacity: 1; transition-delay: 0; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation { width: 200px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5, .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation p { font-size: 14px; line-height: 20px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5 { margin-bottom: 6px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left { right: calc(100% + 50px); } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-right { left: calc(100% + 50px); } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation { top: 21.7%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:before { right: -164px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:after { right: -160px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation { top: 41%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:before { left: -53px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:after { left: -48px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation { top: 46.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:before { right: -52px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:after { right: -47px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation { top: 63.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:before { left: -93px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:after { left: -88px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation { width: 225px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation h5, .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation p { font-size: 15.4px; line-height: 22px; } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-left { right: calc(100% + 50px); } .enterprise-diagram .enterprise-diagram-section .enterprise-diagram-annotation.enterprise-diagram-annotation-right { left: calc(100% + 50px); } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation { top: 22.2%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:before { right: -184px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-services .enterprise-diagram-annotation h5:after { right: -179px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation { top: 41%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:before { left: -55px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-dcos .enterprise-diagram-annotation h5:after { left: -50px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation { top: 46.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:before { right: -53px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-mesos .enterprise-diagram-annotation h5:after { right: -48px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation { top: 63.5%; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:before { left: -103px; } .enterprise-diagram .enterprise-diagram-section.enterprise-diagram-section-agents .enterprise-diagram-annotation h5:after { left: -98px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/events/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Events Index -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .event-list-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .event-list-date { min-height: 270px; } .event-list-filters-container { display: none; } .event-list-filters-heading { border-bottom: 1px solid rgba(50, 58, 78, 0.1); font-weight: 500; padding-bottom: 4px; } .event-list-item-heading, .event-list-item-icon { color: #9351e5; } .event-list-item-heading { display: block; font-weight: 500; vertical-align: middle; } .event-list-item-heading .event-list-item-icon { height: 24px; width: 24px; } .event-list-item-icon { margin-right: 8px; position: relative; top: -2px; } .event-list-item-photo { background-position: center; background-size: cover; display: block; position: relative; } .panel .event-list-item-photo { padding: 0; } .event-list-item-photo:before, .event-list-item-photo:after { content: ''; display: block; width: 100%; } .event-list-item-photo:before { background: rgba(0, 0, 0, 0.1); height: 100%; left: 0; position: absolute; top: 0; z-index: 2; } .event-list-item-photo.panel-header:before { display: block; } .event-list-item-photo:after { max-height: 190px; padding-bottom: 56.5%; position: relative; z-index: 3; } .event-list-item-featured .event-list-item-photo:after { max-height: none; padding-bottom: 100%; } .event-list-item-date { background: #ffffff; left: 30px; padding: 9.6px 24px; position: absolute; top: 30px; z-index: 3; } .event-list-item-date-day { color: rgba(50, 58, 78, 0.5); display: block; font-size: 1.5em; font-weight: 300; margin: 0 0 4px 0; padding: 0 0 4px 0; position: relative; } .event-list-item-date-day:after { left: 50%; margin-left: -8px; width: 16px; } .event-list-item-date-month { color: rgba(50, 58, 78, 0.8); display: block; font-size: 0.9em; margin-bottom: -10px; } .event-list-item-rsvp .button { font-weight: 500; } .event-list-item-featured .event-list-item-label { font-size: 2em; line-height: 1.2em; } .event-list-item-featured .event-list-item-excerpt { font-size: 1.2em; line-height: 1.5em; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .event-list-item { -ms-flex-preferred-size: 50%; flex-basis: 50%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .event-list-filters-container { display: block; } .event-list-item-featured .event-list-item-copy { -ms-flex: 1 1 51.7%; flex: 1 1 51.7%; } .event-list-item-featured .event-list-item-photo { -ms-flex: 1 1 48.3%; flex: 1 1 48.3%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .event-list-item-featured .event-list-item-photo { -ms-flex: 1 1 48%; flex: 1 1 48%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/events-detail/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Events Index -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .event-detail-location__detial-info-container { background: #2c1845; } .mesos-static-map { width: 100%; } .event-detail-location__detial-list-title, .event-detail-location__detial-list-definition { margin-left: 0; } .event-detail-location__map-container { padding-left: 0; padding-right: 0; } .event-detail__headline-logo-img { max-width: 50%; width: 100%; } .speakers__speaker-grid { margin-bottom: 0; clear: both; } .speakers__item-image-wrap.aspect-1x1 { height: auto; overflow: hidden; padding-bottom: initial; } .speakers__item-image-wrap.aspect-1x1:after { height: 0; padding-bottom: 100%; position: relative; width: 100%; display: block; content: ''; } .speakers__item-image-wrap.aspect-5x3 { height: auto; overflow: hidden; padding-bottom: initial; } .speakers__item-image-wrap.aspect-5x3:after { height: 0; padding-bottom: 60%; position: relative; width: 100%; display: block; content: ''; } .event-detail-location__detial-content { color: #e6e6e6; } .event-detail-location__detial-info-funsies { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .event-detail-location__detial-info-funsies .icon-wrap { position: absolute; } .event-detail-location__detial-info-funsies .icon-wrap svg { fill: #9351e5; } .event-detail-location__detial-info-funsies .icon-1 { right: 30px; top: 40px; } .event-detail-location__detial-info-funsies .icon-2 { right: 26%; top: 72px; } .event-detail-location__detial-info-funsies .icon-3 { top: 150px; right: 7%; } .event-detail-location__detial-info-funsies .icon-4 { top: 275px; right: 15%; } .event-detail-location__detial-info-funsies .icon-5 { top: 315px; right: 4%; } .event-detail-location__detial-info-funsies .icon-6 { top: 385px; right: 15%; } .event-detail-location__detial-info-funsies .icon-6 { top: 385px; right: 15%; } .event-detail-location__detial-info-funsies .icon-7 { bottom: 85px; right: -10px; } .event-detail-location__detial-info-funsies .icon-8 { bottom: 125px; right: 50%; } .event-detail-location__detial-info-funsies .icon-9 { bottom: 35px; right: 40%; } .event-detail-location__detial-info-funsies .icon-10 { bottom: 20px; left: 10%; } .icon-animate--twerk-reverse { animation-name: icon-twerk-reverse; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 50% 50%; } .icon-animate--twerk { animation-name: icon-twerk; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 50% 50%; } .icon-animate--wiggle { animation-name: icon-wiggle; animation-duration: 6s; animation-delay: 4s; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 50% 50%; } .icon-animate--spin { animation-name: icon-spin; animation-duration: 12s; animation-delay: 0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-origin: 50% 46%; } @keyframes icon-twerk-reverse { 0% { transform: rotate(0deg); } 5% { transform: rotate(0deg); } 30% { transform: rotate(0deg); } 30.5% { transform: rotate(45deg); } 65% { transform: rotate(45deg); } 65.5% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes icon-twerk { 0% { transform: rotate(0deg); } 5% { transform: rotate(0deg); } 5.5% { transform: rotate(-45deg); } 65% { transform: rotate(-45deg); } 65.5% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes icon-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(720deg); } 50% { transform: rotate(720deg); } 100% { transform: rotate(720deg); } } @keyframes icon-wiggle { 0% { transform: rotate(0deg); } 5% { transform: rotate(0deg); } 6% { transform: rotate(-45deg); } 7% { transform: rotate(0deg); } 8% { transform: rotate(45deg); } 9% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .border-wrap { position: relative; border-left: 2px solid #e0e1e4; border-right: 2px solid #e0e1e4; border-bottom: 2px solid #e0e1e4; } .border-wrap__title { position: absolute; top: -16px; width: 100%; } .border-wrap__title:after, .border-wrap__title:before { content: ''; display: block; position: absolute; width: 20%; top: 15px; height: 2px; background: #e0e1e4; } .border-wrap__title:after { right: -2px; } .border-wrap__title:before { left: -2px; } .border-wrap__title-text { padding: 4px 0 0; } .border-wrap__content { padding: 24px; } .border-wrap__icon-wrap { padding: 0 0 24px; } .border-wrap .icon { fill: #9351e5; } @media (min-width: 480px) { .event-detail__headline { font-size: 30.8px; line-height: 32.2px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .event-detail__headline { font-size: 33.88px; line-height: 35.42px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .event-detail__headline { font-size: 40.656px; line-height: 42.504px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .event-detail__headline { font-size: 40.656px; line-height: 42.504px; margin-top: 52.25472px; margin-bottom: 37.3248px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/general/introducing-dcos.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- DCOS Diagram -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .dcos-diagram .dcos-diagram-section { border: 1px solid transparent; border-radius: 5px; margin: 0 0 24px; padding: 4px; position: relative; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-heading { color: currentColor; font-size: 12.6px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation { display: none; position: absolute; width: 210px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation p { font-size: 12.6px; line-height: 18px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5 { font-weight: 600; position: relative; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5 span { background: #ffffff; display: inline-block; margin: 0 -4px; padding: 0 4px; position: relative; z-index: 2; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5:before, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5:after { background: currentColor; content: ''; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5:before { height: 1px; width: calc(100% + 24px); } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5:after { border-radius: 9px; height: 9px; width: 9px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation p { font-weight: 400; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-left { padding-right: 24px; right: calc(100% + 4px); } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-left h5:before, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-left h5:after { right: -24px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-right { left: calc(100% + 4px); padding-left: 24px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-right h5 span { display: block; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-right h5:before, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-right h5:after { left: -24px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-middle { top: calc(60% - 24px); } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-top { top: 0; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation-bottom { top: calc(90% - 24px); } .dcos-diagram .dcos-diagram-section-green { border-color: #27c97b; background: rgba(39, 201, 123, 0.05); color: #27c97b; } .dcos-diagram .dcos-diagram-section-green .dcos-diagram-section-annotation h5:before, .dcos-diagram .dcos-diagram-section-green .dcos-diagram-section-annotation h5:after { background: #27c97b; } .dcos-diagram .dcos-diagram-section-purple { border-color: #9351e5; background: rgba(147, 81, 229, 0.05); color: #9351e5; } .dcos-diagram .dcos-diagram-section-purple .dcos-diagram-section-annotation h5:before, .dcos-diagram .dcos-diagram-section-purple .dcos-diagram-section-annotation h5:after { background: #9351e5; } .dcos-diagram .dcos-diagram-section-neutral { border-color: #323a4e; background: rgba(50, 58, 78, 0.05); color: #323a4e; } .dcos-diagram .dcos-diagram-row { -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .dcos-diagram .dcos-diagram-row + .dcos-diagram-row { padding-top: 4px; } .dcos-diagram .dcos-diagram-row li { -ms-flex-align: center; align-items: center; background: #ffffff; border: 1px solid currentColor; border-radius: 2px; display: -ms-flexbox; display: flex; -ms-flex: 1 1 50%; flex: 1 1 50%; font-size: 9.8px; font-weight: 400; -ms-flex-pack: center; justify-content: center; line-height: 16px; margin: 0 2px; padding: 4px; text-align: center; } .dcos-diagram .dcos-diagram-row li:first-child { margin-left: 0; } .dcos-diagram .dcos-diagram-row li:last-child { margin-right: 0; } .dcos-diagram .dcos-diagram-row-icons li { padding: 0; position: relative; } .dcos-diagram .dcos-diagram-row-icons li:after { content: ''; display: block; padding-bottom: 100%; } .dcos-diagram .dcos-diagram-row-icons li.dcos-diagram-icon-flud { position: static; } .dcos-diagram .dcos-diagram-row-icons li.dcos-diagram-icon-flud:after { display: none; } .dcos-diagram .dcos-diagram-row-icons .icon { background-repeat: no-repeat; background-size: contain; bottom: 0; left: 0; position: absolute; right: 0; text-indent: -99999em; top: 0; } .dcos-diagram .dcos-diagram-row-icons .icon.icon-spark { background-image: url("../images/components/services/spark-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-cassandra { background-image: url("../images/components/services/cassandra-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-jenkins { background-image: url("../images/components/services/jenkins-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-jenkins { background-image: url("../images/components/services/jenkins-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-kubernetes { background-image: url("../images/components/services/kubernetes-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-docker { background-image: url("../images/components/services/docker-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-marathon { background-image: url("../images/components/services/marathon-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-hdfs { background-image: url("../images/components/services/hdfs-isolated.png"); } .dcos-diagram .dcos-diagram-row-icons .icon.icon-mesos { background-image: url("../images/components/services/mesos-logo.png"); background-position: center; margin: 6px 0; position: static; height: 30px; width: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .dcos-diagram .dcos-diagram-row li { font-size: 12.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .dcos-diagram .dcos-diagram-section { padding: 8px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation { display: block; } .dcos-diagram .dcos-diagram-row li { font-size: 12.6px; margin: 0 4px; } .dcos-diagram .dcos-diagram-row + .dcos-diagram-row { padding-top: 8px; } .dcos-diagram .dcos-diagram-row.dcos-diagram-row-icons li { padding: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation { width: 245px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation p { font-size: 15.4px; line-height: 22px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation h5 span { margin: 0 -8px; padding: 0 8px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-left { padding-right: 48px; right: calc(100% + 8px); } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-left h5:before, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-left h5:after { right: -48px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-left h5:before { width: calc(100% + 48px); } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-right { left: calc(100% + 8px); padding-left: 48px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-right h5:before, .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-right h5:after { left: -48px; } .dcos-diagram .dcos-diagram-section .dcos-diagram-section-annotation.dcos-diagram-section-annotation-right h5:before { width: calc(100% + 48px); } .dcos-diagram .dcos-diagram-row li { font-size: 15.4px; padding: 16px 8px; } .dcos-diagram .dcos-diagram-row.dcos-diagram-row-icons li { padding: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/home.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services Cluster -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Quote Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.home .button-video .icon { left: -10px; position: relative; display: inline-block; } .gartner-banner { position: relative; left: 0; width: 100%; } .gartner-banner__content { background: #f9f9fa; display: inline-block; padding: 0 20px; } .gartner-banner__icon { width: 70px; height: 12px; top: 1px; position: relative; } .gartner-banner__wrapper:before { content: ''; display: block; height: 1px; width: 100%; position: absolute; top: 50%; margin-top: -1px; left: 0; background: #ebebed; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Page Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .home #page-header #page-header-background-video video { opacity: .10; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Announcements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-announcements .carousel-pagination { margin-top: 6px; margin-bottom: -6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { position: relative; display: block; width: 60px; height: 60px; background-size: 100% 100%; background-image: url("../images/views/home/home-mesos-logo.png"); margin: 0 auto; margin-top: -54px; margin-bottom: 6px; z-index: 1; } #home-mesos .border { padding: 24px; } #home-mesos .border:after { content: ''; display: block; width: 84px; height: 10px; background: #ffffff; position: absolute; top: -5px; left: 50%; margin-left: -52px; } #home-mesos .home-mesos-platforms { *zoom: 1; } #home-mesos .home-mesos-platforms:before, #home-mesos .home-mesos-platforms:after { display: table; content: ""; line-height: 0; } #home-mesos .home-mesos-platforms:after { clear: both; } #home-mesos .home-mesos-platforms .home-mesos-platform { position: relative; } #home-mesos .home-mesos-platforms .home-mesos-platform a { position: relative; top: 0px; left: 0px; display: block; width: 100%; height: 100%; } #home-mesos .home-mesos-platforms .home-mesos-platform span { display: none; } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { display: block; margin: 0 auto; height: 40px; background-size: 120px 360px; background-image: url("../images/views/home/home-mesos-platform-logos.png"); position: relative; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-amazon .home-mesos-platform-logo { width: 83.6px; background-position: 0px 0px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-openstack .home-mesos-platform-logo { width: 104.8px; background-position: 0px -40px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-redhat .home-mesos-platform-logo { width: 97.6px; background-position: 0px -80px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-ubuntu .home-mesos-platform-logo { width: 97.2px; background-position: 0px -120px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-vmware .home-mesos-platform-logo { width: 101.2px; background-position: 0px -160px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-coreos .home-mesos-platform-logo { width: 101.6px; background-position: 0px -200px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-google .home-mesos-platform-logo { width: 93.2px; background-position: 0px -240px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-azure .home-mesos-platform-logo { width: 92.8px; background-position: 0px -280px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-centos .home-mesos-platform-logo { width: 99.6px; background-position: 0px -320px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-services { height: 550px; } #home-services .row { position: relative; z-index: 2; } #home-services .home-services-cluster { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; } #home-services .home-services-cluster .home-services-cluster-service { display: block; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; border-radius: 20%; background: #ffffff; overflow: hidden; } #home-services .home-services-cluster .home-services-cluster-service img { width: 100%; height: auto; } #home-services .home-services-cluster .home-services-cluster-service:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border-radius: 20%; box-shadow: inset 0px 0px 0px 1px #000000; opacity: 0.1; filter: alpha(opacity=10); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 { box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15); width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; z-index: 6; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 img { opacity: 1; filter: alpha(opacity=100); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1:after { opacity: 0.1; filter: alpha(opacity=10); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.12); width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; z-index: 5; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 img { opacity: 0.95; filter: alpha(opacity=95); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2:after { opacity: 0.095; filter: alpha(opacity=9.5); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 { box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.09); width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; z-index: 4; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 img { opacity: 0.9; filter: alpha(opacity=90); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3:after { opacity: 0.09; filter: alpha(opacity=9.000000000000002); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; z-index: 3; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 img { opacity: 0.8; filter: alpha(opacity=80); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4:after { opacity: 0.08; filter: alpha(opacity=8.000000000000002); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.045); width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; z-index: 2; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 img { opacity: 0.75; filter: alpha(opacity=75); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5:after { opacity: 0.075; filter: alpha(opacity=7.500000000000001); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03); width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; z-index: 1; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 img { opacity: 0.6; filter: alpha(opacity=60); } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6:after { opacity: 0.06; filter: alpha(opacity=6); } #home-services .home-services-cluster .home-services-cluster-service.service-0 { top: 24%; left: 82%; } #home-services .home-services-cluster .home-services-cluster-service.service-1 { top: 5%; left: 55%; } #home-services .home-services-cluster .home-services-cluster-service.service-2 { top: 88%; left: 58%; } #home-services .home-services-cluster .home-services-cluster-service.service-3 { top: 82%; left: 104%; } #home-services .home-services-cluster .home-services-cluster-service.service-4 { top: 15%; left: 100%; } #home-services .home-services-cluster .home-services-cluster-service.service-5 { top: 82%; left: 68%; } #home-services .home-services-cluster .home-services-cluster-service.service-6 { top: 17%; left: 55%; } #home-services .home-services-cluster .home-services-cluster-service.service-7 { top: 87%; left: 37%; } #home-services .home-services-cluster .home-services-cluster-service.service-8 { top: 94%; left: 84%; } #home-services .home-services-cluster .home-services-cluster-service.service-9 { top: 8%; left: 29%; } #home-services .home-services-cluster .home-services-cluster-service.service-10 { top: 1%; left: 81%; } #home-services .home-services-cluster .home-services-cluster-service.service-11 { top: 91%; left: 23%; } #home-services .home-services-cluster .home-services-cluster-service.service-12 { top: 79%; left: 90%; } #home-services .home-services-cluster .home-services-cluster-service.service-13 { top: 35%; left: 100%; } #home-services .home-services-cluster .home-services-cluster-service.service-14 { top: 90%; left: 96%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Interface -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-interface { overflow: hidden; } #home-interface .home-interface-device-slider { margin-bottom: -56px; } #home-interface .home-interface-device-slider .device-browser { width: 300px; margin: 0 auto; z-index: 1; } #home-interface .home-interface-device-slider .device-browser .device-browser-content { position: relative; height: 180px; z-index: 2; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen { position: absolute; height: 180px; width: 100%; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-image { width: 100%; height: 100%; overflow: hidden; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen img { width: 300px; height: auto; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen.device-browser-content-screen-left { background: #adb0b8; width: 50%; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen.device-browser-content-screen-right { background: #d6d8dc; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-slider { position: absolute; top: 50%; right: 0px; display: block; width: 24px; height: 24px; background: #ffffff; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1); border-radius: 50%; margin-top: -12px; margin-right: -12px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-slider .icon { opacity: 0.25; filter: alpha(opacity=25); position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Products -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Quotes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-quotes .home-quotes .home-quote { text-align: center; } #home-quotes .home-quotes .home-quote .home-quote-content { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; margin-right: auto; margin-left: auto; padding-bottom: 3px; padding-top: 3px; width: 100%; } #home-quotes .home-quotes .home-quote .home-quote-logo { display: inline-block; margin: 0 auto; margin-bottom: 2.4px; height: 32px; background-size: 152px 192px; background-image: url("../images/views/home/home-quotes-logos.png"); position: relative; } #home-quotes .home-quotes .home-quote .home-quote-logo a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #home-quotes .home-quotes .home-quote .home-quote-logo span { display: none; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-digital-ocean { width: 152px; background-position: 0px 0px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-twitter { width: 34.4px; background-position: 0px -32px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-fuel-capital { width: 56.8px; background-position: 0px -64px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-yelp { width: 57.6px; background-position: 0px -96px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-memsql { width: 105.6px; background-position: 0px -128px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-cisco { width: 53.6px; background-position: 0px -160px; } #home-quotes .carousel-pagination { margin-top: 15px; margin-bottom: -15px; } #home-quotes .carousel-pagination li { background: rgba(255, 255, 255, 0.1); } #home-quotes .carousel-pagination li.active { background: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor { overflow: visible; } #learn-formfactor .learn-formfactor-datacenter-wrapper { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Announcements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-announcements .carousel-pagination { margin-top: 6px; margin-bottom: -6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Overview -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer { padding-bottom: 12px; margin-bottom: 12px; text-align: left; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .stack-line { height: 24px; bottom: -24px; display: block; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { padding: 4.8px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-interface .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 120px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-apps .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 160px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-mesos .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 160px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-infrastructure .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 100px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { width: 60px; height: 60px; margin-top: -54px; margin-bottom: 6px; } #home-mesos .border { padding: 5%; } #home-mesos .border:after { width: 124px; margin-left: -62px; } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { height: 40px; background-size: 120px 360px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-amazon .home-mesos-platform-logo { width: 83.6px; background-position: 0px 0px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-openstack .home-mesos-platform-logo { width: 104.8px; background-position: 0px -40px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-redhat .home-mesos-platform-logo { width: 97.6px; background-position: 0px -80px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-ubuntu .home-mesos-platform-logo { width: 97.2px; background-position: 0px -120px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-vmware .home-mesos-platform-logo { width: 101.2px; background-position: 0px -160px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-coreos .home-mesos-platform-logo { width: 101.6px; background-position: 0px -200px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-google .home-mesos-platform-logo { width: 93.2px; background-position: 0px -240px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-azure .home-mesos-platform-logo { width: 92.8px; background-position: 0px -280px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-centos .home-mesos-platform-logo { width: 99.6px; background-position: 0px -320px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-services { height: 550px; } #home-services .home-services-cluster .home-services-cluster-service { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 { box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15); width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.12); width: 128px; height: 128px; margin-top: -64px; margin-left: -64px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 { box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.09); width: 96px; height: 96px; margin-top: -48px; margin-left: -48px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); width: 64px; height: 64px; margin-top: -32px; margin-left: -32px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.045); width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03); width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; } #home-services .home-services-cluster .home-services-cluster-service.service-0 { top: 37%; left: 80%; } #home-services .home-services-cluster .home-services-cluster-service.service-1 { top: 12%; left: 56%; } #home-services .home-services-cluster .home-services-cluster-service.service-2 { top: 62%; left: 58%; } #home-services .home-services-cluster .home-services-cluster-service.service-3 { top: 60%; left: 104%; } #home-services .home-services-cluster .home-services-cluster-service.service-4 { top: 15%; left: 95%; } #home-services .home-services-cluster .home-services-cluster-service.service-5 { top: 74%; left: 66%; } #home-services .home-services-cluster .home-services-cluster-service.service-6 { top: 22%; left: 43%; } #home-services .home-services-cluster .home-services-cluster-service.service-7 { top: 82%; left: 40%; } #home-services .home-services-cluster .home-services-cluster-service.service-8 { top: 66%; left: 77%; } #home-services .home-services-cluster .home-services-cluster-service.service-9 { top: 12%; left: 26%; } #home-services .home-services-cluster .home-services-cluster-service.service-10 { top: 3%; left: 84%; } #home-services .home-services-cluster .home-services-cluster-service.service-11 { top: 88%; left: 30%; } #home-services .home-services-cluster .home-services-cluster-service.service-12 { top: 75%; left: 95%; } #home-services .home-services-cluster .home-services-cluster-service.service-13 { top: 35%; left: 112%; } #home-services .home-services-cluster .home-services-cluster-service.service-14 { top: 84%; left: 107%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Interface -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-interface .home-interface-device-slider { margin-bottom: -56px; } #home-interface .home-interface-device-slider .device-browser { width: 400px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content { height: 220px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen { height: 220px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen img { width: 400px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-front-page-variant-1 .page-header-headline { margin-left: -100px; margin-right: -100px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Announcements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-announcements .carousel-pagination { margin-top: 9px; margin-bottom: -9px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Overview -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer { padding-bottom: 16px; margin-bottom: 16px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .stack-line { height: 32px; bottom: -32px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { padding: 6.4px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-interface .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 175px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-apps .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 200px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-mesos .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 200px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-infrastructure .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 125px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { width: 100px; height: 100px; margin-top: -82px; margin-bottom: 8px; } #home-mesos .border { padding: 32px; } #home-mesos .border:after { width: 132px; margin-left: -66px; } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { height: 60px; background-size: 180px 540px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-amazon .home-mesos-platform-logo { width: 125.4px; background-position: 0px 0px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-openstack .home-mesos-platform-logo { width: 157.2px; background-position: 0px -60px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-redhat .home-mesos-platform-logo { width: 146.4px; background-position: 0px -120px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-ubuntu .home-mesos-platform-logo { width: 145.8px; background-position: 0px -180px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-vmware .home-mesos-platform-logo { width: 151.8px; background-position: 0px -240px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-coreos .home-mesos-platform-logo { width: 152.4px; background-position: 0px -300px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-google .home-mesos-platform-logo { width: 139.8px; background-position: 0px -360px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-azure .home-mesos-platform-logo { width: 139.2px; background-position: 0px -420px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-centos .home-mesos-platform-logo { width: 149.4px; background-position: 0px -480px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-services { height: 600px; } #home-services .home-services-cluster .home-services-cluster-service { width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 { box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15); width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.12); width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 { box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.09); width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.045); width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03); width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Interface -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-interface .home-interface-device-slider { margin-bottom: -68px; } #home-interface .home-interface-device-slider .device-browser { width: 600px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content { height: 350px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen { height: 350px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen img { width: 600px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-slider { width: 32px; height: 32px; margin-top: -16px; margin-right: -16px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Quotes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-quotes .home-quotes .home-quote .home-quote-content { width: 80%; } #home-quotes .home-quotes .home-quote .home-quote-logo { margin-bottom: 3.2px; height: 40px; background-size: 190px 240px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-digital-ocean { width: 190px; background-position: 0px 0px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-twitter { width: 43px; background-position: 0px -40px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-fuel-capital { width: 71px; background-position: 0px -80px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-yelp { width: 72px; background-position: 0px -120px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-memsql { width: 132px; background-position: 0px -160px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-cisco { width: 67px; background-position: 0px -200px; } #home-quotes .carousel-pagination { margin-top: 21px; margin-bottom: -21px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .gartner-banner { top: -14px; } .gartner-banner__icon { width: 90px; height: 15px; } #canvas.template-front-page-variant-1 .page-header-headline { margin-left: -100px; margin-right: -100px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Announcements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-announcements .carousel-pagination { margin-top: 14.7px; margin-bottom: -14.7px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Overview -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer { padding-bottom: 24px; margin-bottom: 24px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .stack-line { height: 48px; bottom: -48px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { padding: 9.6px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-interface .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 150px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-apps .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 200px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-mesos .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 200px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-infrastructure .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 125px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { width: 100px; height: 100px; margin-top: -98px; margin-bottom: 12px; } #home-mesos .border { padding: 48px; } #home-mesos .border:after { width: 148px; margin-left: -74px; } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { height: 70px; background-size: 210px 630px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-amazon .home-mesos-platform-logo { width: 146.3px; background-position: 0px 0px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-openstack .home-mesos-platform-logo { width: 183.4px; background-position: 0px -70px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-redhat .home-mesos-platform-logo { width: 170.8px; background-position: 0px -140px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-ubuntu .home-mesos-platform-logo { width: 170.1px; background-position: 0px -210px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-vmware .home-mesos-platform-logo { width: 177.1px; background-position: 0px -280px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-coreos .home-mesos-platform-logo { width: 177.8px; background-position: 0px -350px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-google .home-mesos-platform-logo { width: 163.1px; background-position: 0px -420px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-azure .home-mesos-platform-logo { width: 162.4px; background-position: 0px -490px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-centos .home-mesos-platform-logo { width: 174.3px; background-position: 0px -560px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-services { height: 700px; } #home-services .home-services-cluster .home-services-cluster-service { width: 240px; height: 240px; margin-top: -120px; margin-left: -120px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 { box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15); width: 240px; height: 240px; margin-top: -120px; margin-left: -120px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.12); width: 192px; height: 192px; margin-top: -96px; margin-left: -96px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 { box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.09); width: 144px; height: 144px; margin-top: -72px; margin-left: -72px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); width: 96px; height: 96px; margin-top: -48px; margin-left: -48px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.045); width: 72px; height: 72px; margin-top: -36px; margin-left: -36px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03); width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Interface -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-interface .home-interface-device-slider { margin-bottom: -92px; } #home-interface .home-interface-device-slider .device-browser { width: 700px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content { height: 400px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen { height: 400px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen img { width: 700px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-slider { width: 48px; height: 48px; margin-top: -24px; margin-right: -24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Quotes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-quotes .home-quotes .home-quote .home-quote-content { width: 65%; } #home-quotes .home-quotes .home-quote .home-quote-logo { margin-bottom: 4.8px; height: 48px; background-size: 228px 288px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-digital-ocean { width: 228px; background-position: 0px 0px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-twitter { width: 51.6px; background-position: 0px -48px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-fuel-capital { width: 85.2px; background-position: 0px -96px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-yelp { width: 86.4px; background-position: 0px -144px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-memsql { width: 158.4px; background-position: 0px -192px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-cisco { width: 80.4px; background-position: 0px -240px; } #home-quotes .carousel-pagination { margin-top: 32.7px; margin-bottom: -32.7px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-front-page-variant-1 .page-header-headline { margin-left: -100px; margin-right: -100px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Announcements -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-announcements .carousel-pagination { margin-top: 20.4px; margin-bottom: -20.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Overview -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer { padding-bottom: 32px; margin-bottom: 32px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .stack-line { height: 64px; bottom: -64px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { padding: 12.8px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-interface .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 150px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-apps .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 200px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-mesos .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 175px; } #home-dcos-overview .home-dcos-overview-stack .home-dcos-overview-stack-layer.home-dcos-overview-stack-layer-infrastructure .home-dcos-overview-stack-layer-box .home-dcos-overview-stack-layer-box-cell { height: 125px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { width: 120px; height: 120px; margin-top: -124px; margin-bottom: 16px; } #home-mesos .border { padding: 64px; } #home-mesos .border:after { width: 184px; margin-left: -92px; } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { height: 80px; background-size: 240px 720px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-amazon .home-mesos-platform-logo { width: 167.2px; background-position: 0px 0px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-openstack .home-mesos-platform-logo { width: 209.6px; background-position: 0px -80px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-redhat .home-mesos-platform-logo { width: 195.2px; background-position: 0px -160px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-ubuntu .home-mesos-platform-logo { width: 194.4px; background-position: 0px -240px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-vmware .home-mesos-platform-logo { width: 202.4px; background-position: 0px -320px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-coreos .home-mesos-platform-logo { width: 203.2px; background-position: 0px -400px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-google .home-mesos-platform-logo { width: 186.4px; background-position: 0px -480px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-azure .home-mesos-platform-logo { width: 185.6px; background-position: 0px -560px; } #home-mesos .home-mesos-platforms .home-mesos-platform.home-mesos-platform-centos .home-mesos-platform-logo { width: 199.2px; background-position: 0px -640px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home DCOS Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-services { height: 750px; } #home-services .home-services-cluster .home-services-cluster-service { width: 280px; height: 280px; margin-top: -140px; margin-left: -140px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-1 { box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15); width: 280px; height: 280px; margin-top: -140px; margin-left: -140px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-2 { box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.12); width: 224px; height: 224px; margin-top: -112px; margin-left: -112px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-3 { box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.09); width: 168px; height: 168px; margin-top: -84px; margin-left: -84px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-4 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); width: 112px; height: 112px; margin-top: -56px; margin-left: -56px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-5 { box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.045); width: 84px; height: 84px; margin-top: -42px; margin-left: -42px; } #home-services .home-services-cluster .home-services-cluster-service.service-depth-6 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03); width: 56px; height: 56px; margin-top: -28px; margin-left: -28px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Interface -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-interface .home-interface-device-slider { margin-bottom: -116px; } #home-interface .home-interface-device-slider .device-browser { width: 800px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content { height: 450px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen { height: 450px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen img { width: 800px; } #home-interface .home-interface-device-slider .device-browser .device-browser-content .device-browser-content-screen .device-browser-content-screen-slider { width: 48px; height: 48px; margin-top: -24px; margin-right: -24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Quotes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-quotes .home-quotes .home-quote .home-quote-content { width: 65%; } #home-quotes .home-quotes .home-quote .home-quote-logo { margin-bottom: 6.4px; height: 52px; background-size: 247px 312px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-digital-ocean { width: 247px; background-position: 0px 0px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-twitter { width: 55.9px; background-position: 0px -52px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-fuel-capital { width: 92.3px; background-position: 0px -104px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-yelp { width: 93.6px; background-position: 0px -156px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-memsql { width: 171.6px; background-position: 0px -208px; } #home-quotes .home-quotes .home-quote .home-quote-logo.home-quote-logo-cisco { width: 87.1px; background-position: 0px -260px; } #home-quotes .carousel-pagination { margin-top: 44.4px; margin-bottom: -44.4px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Page Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .home-page-header h1.home-page-header-logo { background-image: url("../images/views/home/dcos-logo@2x.png"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-mesos .home-mesos-logo { background-image: url("../images/views/home/home-mesos-logo@2x.png"); } #home-mesos .home-mesos-platforms .home-mesos-platform .home-mesos-platform-logo { background-image: url("../images/views/home/home-mesos-platform-logos@2x.png"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home Quotes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #home-quotes .home-quotes .home-quote .home-quote-logo { background-image: url("../images/views/home/home-quotes-logos@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/infinity/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonial Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- "How it Works" Graphic -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animations -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @keyframes animate-stroke-in { to { stroke-dashoffset: 0; } } @keyframes animate-stroke-out { from { stroke-dashoffset: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Infinity -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-infinity .header-inner .header-actions { display: none !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .infinity-services .icon { background-size: 100%; border-radius: 20%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.095); display: inline-block; height: auto; max-width: 128px; position: relative; width: 100%; } .infinity-services .icon:after { content: ''; display: block; padding-bottom: 100%; } .infinity-services .icon-kafka { background-image: url("../images/components/services/kafka.jpg"); } .infinity-services .icon-cassandra { background-image: url("../images/components/services/cassandra.jpg"); } .infinity-services .icon-spark { background-image: url("../images/components/services/spark.jpg"); } .infinity-services .icon-akka { background-image: url("../images/components/services/akka.jpg"); } .infinity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- How it Works -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Partners -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .infinity .infinity-how-it-works .stroke-gradient-stop-blue { stop-color: #2f81f7; } .infinity .infinity-how-it-works .stroke-gradient-stop-purple { stop-color: #9351e5; } .infinity .infinity-how-it-works .stroke-gradient-stop-pink { stop-color: #ef468b; } .infinity .infinity-how-it-works .stroke-blue { stroke: #2f81f7; } .infinity .infinity-how-it-works .stroke-purple { stroke: #9351e5; } .infinity .infinity-how-it-works .stroke-pink { stroke: #ef468b; } .infinity .infinity-how-it-works .tabs-navigation { display: none; margin-top: 30px; } .infinity .infinity-how-it-works .tabs-content-container svg { max-width: 1060px; } .infinity .infinity-how-it-works .tabs-content-container .tabs-content-graphic { display: none; } .infinity .infinity-how-it-works .tabs-content-container .icon { fill: #a9abb2; transition: fill 1s; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .icon-devices, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .icon-gauge, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .icon-website, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .text-labels-devices, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .text-labels-sensors, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .text-labels-client { fill: #2f81f7; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-produce .how-it-works-copy li.how-it-works-copy-produce { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .icon-devices, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .icon-gauge, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .icon-website, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .text-labels-devices, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .text-labels-sensors, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .text-labels-client, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .text-labels-event-bus { fill: #2f81f7; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .icon-event-bus, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .text-labels-event-bus { fill: #9351e5; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .arrow-produce-to-ingest { opacity: 1; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-ingest .how-it-works-copy li.how-it-works-copy-ingest { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .icon-event-bus, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .text-labels-event-bus { fill: #9351e5; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .icon-chart, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .text-labels-analytics { fill: #ef468b; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .arrow-ingest-to-analyze, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .arrow-analytics-to-event-bus { opacity: 1; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-analyze .how-it-works-copy li.how-it-works-copy-analyze { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .icon-chart, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .icon-database, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .text-labels-analytics, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .text-labels-database { fill: #ef468b; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .arrow-store-to-analyze, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .arrow-analyze-to-store { opacity: 1; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-store .how-it-works-copy li.how-it-works-copy-store { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .icon-database, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .text-labels-database { fill: #ef468b; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .icon-microservices, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .text-labels-reactive-app { fill: #9351e5; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .edge-serve-dashed, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .arrow-act-to-serve, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .arrow-serve-to-act, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .arrow-act-to-store, .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .arrow-store-to-act { opacity: 1; } .infinity .infinity-how-it-works .tabs-content-container.tabs-content-act .how-it-works-copy li.how-it-works-copy-act { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .infinity .how-it-works-placeholder { fill: none; stroke: #d6d7da; stroke-width: 2px; } .infinity .how-it-works-placeholder circle { stroke: #e2e4e5; } .infinity .how-it-works-placeholder .placeholder-arrows { fill: #d6d7da; stroke: none; transition: fill 1s; } .infinity .how-it-works-colored { fill: none; stroke-width: 2px; } .infinity .how-it-works-colored circle, .infinity .how-it-works-colored path { transition: stroke-dashoffset 1s; } .infinity .how-it-works-colored .arrow { opacity: 0; stroke: none; transition: opacity 0.25s; } .infinity .how-it-works-colored .arrow-blue { fill: #2f81f7; } .infinity .how-it-works-colored .arrow-purple { fill: #9351e5; } .infinity .how-it-works-colored .arrow-pink { fill: #ef468b; } .infinity .how-it-works-colored .edge-serve-dashed { opacity: 0; transition: opacity 0.25s; } .infinity .how-it-works-colored .text-labels { fill: #898d98; } .infinity .how-it-works-colored .text-labels text { font-size: 0.9em; font-weight: 300; text-anchor: middle; transition: fill 1s; } .infinity .how-it-works-colored .logo-mesosphere { fill: #3e4351; } .infinity .motion-forward .arrow, .infinity .motion-forward .edge-serve-dashed { transition-delay: 0.55s; } .infinity .motion-forward .arrow-store-to-analyze, .infinity .motion-forward .arrow-act-to-store, .infinity .motion-forward .arrow-serve-to-act, .infinity .motion-forward .arrow-analytics-to-event-bus { transition-delay: 0s; } .infinity .motion-backward .arrow, .infinity .motion-backward .edge-serve-dashed { transition-delay: 0s; } .infinity .motion-backward .arrow-store-to-analyze, .infinity .motion-backward .arrow-act-to-store, .infinity .motion-backward .arrow-serve-to-act, .infinity .motion-backward .arrow-analytics-to-event-bus { transition-delay: 0.55s; } .infinity .how-it-works-copy { display: block; } .infinity .how-it-works-copy li { display: block; margin: 60px 0; opacity: 1; padding: 0; } .infinity .how-it-works-copy li:first-child { margin-top: 0; } .infinity .how-it-works-copy li:before { display: none; } .infinity .how-it-works-copy li p { margin-left: auto; margin-right: auto; max-width: 80%; } .infinity .how-it-works-copy .icon { margin-bottom: 15px; } .infinity .infinity-testimonials .infinity-testimonial { text-align: center; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-content { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; padding-bottom: 3px; padding-top: 3px; margin-right: auto; margin-left: auto; width: 100%; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo { display: inline-block; margin: 0 auto; margin-bottom: 2.4px; height: 40px; background-size: 120px 200px; background-image: url("../images/views/infinity/infinity-quote-logos.png"); position: relative; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo span { display: none; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-cisco { width: 62px; background-position: 0px 0px; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-intel { width: 62px; background-position: 0px -40px; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-typesafe { width: 120px; background-position: 0px -80px; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-elodina { width: 100px; background-position: 0px -120px; } .infinity .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-confluent { width: 117.6px; background-position: 0px -160px; } .infinity .carousel-pagination { margin-top: 15px; margin-bottom: -15px; } .infinity .carousel-pagination li { background: rgba(255, 255, 255, 0.1); } .infinity .carousel-pagination li.active { background: none; } .infinity #infinity-partners .infinity-partner a { display: block; padding: 20px 0 40px 0; text-align: center; } .infinity #infinity-partners .infinity-partner a .infinity-partner-logo { background-image: url("../images/views/infinity/partner-logos.png"); background-size: 120px 200px; display: inline-block; height: 40px; text-indent: -9999em; width: 72px; } .infinity #infinity-partners .infinity-partner.infinity-partner-cisco .infinity-partner-logo { width: 62px; background-position: 0px 0px; } .infinity #infinity-partners .infinity-partner.infinity-partner-intel .infinity-partner-logo { width: 61.6px; background-position: 0px -40px; } .infinity #infinity-partners .infinity-partner.infinity-partner-typesafe .infinity-partner-logo { width: 118px; background-position: 0px -80px; } .infinity #infinity-partners .infinity-partner.infinity-partner-elodina .infinity-partner-logo { width: 98px; background-position: 0px -120px; } .infinity #infinity-partners .infinity-partner.infinity-partner-confluent .infinity-partner-logo { width: 120px; background-position: 0px -160px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .infinity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* --------------------------------------------------------------------- ------------------------------------------------------------------------ How it Works ------------------------------------------------------------------------ --------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-content { width: 80%; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo { margin-bottom: 3.2px; height: 50px; background-size: 150px 250px; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-cisco { width: 77.5px; background-position: 0px 0px; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-intel { width: 77.5px; background-position: 0px -50px; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-typesafe { width: 150px; background-position: 0px -100px; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-elodina { width: 125px; background-position: 0px -150px; } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-confluent { width: 147px; background-position: 0px -200px; } .infinity .infinity-testimonials .carousel-pagination { margin-top: 21px; margin-bottom: -21px; } .infinity #infinity-customer-experience .terminal { width: auto; margin-left: auto; margin-right: auto; left: auto; } .infinity #infinity-customer-experience .terminal .device-browser-content { height: 300px; } .infinity .infinity-how-it-works .tabs-navigation { display: block; } .infinity .infinity-how-it-works .tabs-content-container .tabs-content-graphic { display: block; } .infinity .how-it-works-colored .text-labels text { font-size: 1.15em; font-weight: 400; } .infinity .how-it-works-copy { display: -ms-flexbox; display: flex; } .infinity .how-it-works-copy li { -ms-flex: 1 0 100%; flex: 1 0 100%; -ms-flex-order: 2; order: 2; margin: 0; opacity: 0; padding: 0; transform: translateY(30px); } .infinity .how-it-works-copy li:before { display: none; } .infinity .how-it-works-copy li p { margin-left: auto; margin-right: auto; max-width: 80%; } .infinity .how-it-works-copy .icon { display: none; } .infinity #infinity-partners .infinity-partner a .infinity-partner-logo { height: 50px; background-size: 150px 250px; } .infinity #infinity-partners .infinity-partner.infinity-partner-cisco .infinity-partner-logo { width: 77.5px; background-position: 0px 0px; } .infinity #infinity-partners .infinity-partner.infinity-partner-intel .infinity-partner-logo { width: 77px; background-position: 0px -50px; } .infinity #infinity-partners .infinity-partner.infinity-partner-typesafe .infinity-partner-logo { width: 147.5px; background-position: 0px -100px; } .infinity #infinity-partners .infinity-partner.infinity-partner-confluent .infinity-partner-logo { width: 150px; background-position: 0px -200px; } .infinity #infinity-partners .infinity-partner.infinity-partner-elodina .infinity-partner-logo { width: 122.5px; background-position: 0px -150px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Developer Program -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonails -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .infinity-testimonials .infinity-testimonial .infinity-testimonial-content { width: 80%; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo { margin-bottom: 4.8px; height: 60px; background-size: 180px 300px; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-cisco { width: 93px; background-position: 0px 0px; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-intel { width: 93px; background-position: 0px -60px; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-typesafe { width: 180px; background-position: 0px -120px; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-elodina { width: 150px; background-position: 0px -180px; } .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-confluent { width: 176.4px; background-position: 0px -240px; } .infinity-carousel-pagination { margin-top: 32.7px; margin-bottom: -32.7px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #infinity-customer-experience .terminal .device-browser-content { height: 300px; } #infinity-customer-experience .terminal .device-browser-content .h4 { font-size: 20.02px; } /* --------------------------------------------------------------------- ------------------------------------------------------------------------ How it Works ------------------------------------------------------------------------ --------------------------------------------------------------------- */ .how-it-works-copy li p { width: 55%; } .how-it-works-colored .text-labels text { font-size: 0.9em; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #infinity-partners .infinity-partner a .infinity-partner-logo { height: 60px; background-size: 180px 300px; } #infinity-partners .infinity-partner.infinity-partner-cisco .infinity-partner-logo { width: 93px; background-position: 0px 0px; } #infinity-partners .infinity-partner.infinity-partner-intel .infinity-partner-logo { width: 92.4px; background-position: 0px -60px; } #infinity-partners .infinity-partner.infinity-partner-typesafe .infinity-partner-logo { width: 177px; background-position: 0px -120px; } #infinity-partners .infinity-partner.infinity-partner-confluent .infinity-partner-logo { width: 180px; background-position: 0px -240px; } #infinity-partners .infinity-partner.infinity-partner-elodina .infinity-partner-logo { width: 147px; background-position: 0px -180px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Infinity -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* --------------------------------------------------------------------- ------------------------------------------------------------------------ How it Works ------------------------------------------------------------------------ --------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-content { width: 80%; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo { margin-bottom: 6.4px; height: 60px; background-size: 180px 300px; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-cisco { width: 93px; background-position: 0px 0px; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-intel { width: 93px; background-position: 0px -60px; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-typesafe { width: 180px; background-position: 0px -120px; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-elodina { width: 150px; background-position: 0px -180px; } .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo.infinity-testimonial-logo-confluent { width: 176.4px; background-position: 0px -240px; } .infinity-testimonials .carousel-pagination { margin-top: 44.4px; margin-bottom: -44.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Customer Experience -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #infinity-customer-experience .terminal .device-browser-content { height: 300px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #infinity-partners .infinity-partner a .infinity-partner-logo { height: 60px; background-size: 180px 300px; } #infinity-partners .infinity-partner.infinity-partner-cisco .infinity-partner-logo { width: 93px; background-position: 0px 0px; } #infinity-partners .infinity-partner.infinity-partner-intel .infinity-partner-logo { width: 92.4px; background-position: 0px -60px; } #infinity-partners .infinity-partner.infinity-partner-typesafe .infinity-partner-logo { width: 177px; background-position: 0px -120px; } #infinity-partners .infinity-partner.infinity-partner-confluent .infinity-partner-logo { width: 180px; background-position: 0px -240px; } #infinity-partners .infinity-partner.infinity-partner-elodina .infinity-partner-logo { width: 147px; background-position: 0px -180px; } .how-it-works-colored .text-labels text { font-weight: 300; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .infinity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .infinity .infinity-testimonials .infinity-testimonials .infinity-testimonial .infinity-testimonial-logo { background-image: url("../images/views/infinity/infinity-quote-logos@2x.png"); } .infinity #infinity-partners .infinity-partner a .infinity-partner-logo { background-image: url("../images/views/infinity/partner-logos@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/learn.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Self Healing ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Features -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.learn { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Page Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } #canvas.learn #page-header .canvas-pod-background { opacity: 0.1; filter: alpha(opacity=10); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Formfactor -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor { padding-bottom: 200px; } #learn-formfactor .learn-formfactor-datacenter-wrapper { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #learn-formfactor .learn-formfactor-datacenter { display: block; width: 500px; height: 500px; background-image: url("../images/views/learn/learn-formfactor-datacenter.jpg"); background-size: 100% 100%; position: absolute; bottom: -500px; left: 50%; margin-left: -250px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-services { overflow: hidden; } #learn-services .services-icons { margin: 0 auto; text-align: center; *zoom: 1; margin-bottom: -12px; } #learn-services .services-icons:before, #learn-services .services-icons:after { display: table; content: ""; line-height: 0; } #learn-services .services-icons:after { clear: both; } #learn-services .services-icons .services-icon { display: inline-block; margin-right: 12px; margin-bottom: 12px; vertical-align: top; } #learn-services .services-icons .services-icon:last-child { margin-right: 0px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper { position: relative; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { position: relative; display: block; width: 48px; height: 48px; border-radius: 18%; overflow: hidden; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image:after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; border-radius: 18%; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check { display: block; width: 14.4px; height: 14.4px; border-radius: 50%; background: #27c97b; position: absolute; bottom: -3.6px; right: -3.6px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8.64px; height: 8.64px; line-height: 8.64px; font-size: 8.64px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon:before { line-height: 9px; } #learn-services .services-icons .services-icon .services-icon-label { display: none; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper .services-icon-image { border: 1px dashed #d6d8dc; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper .services-icon-image:after { display: none; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before, #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { content: ''; display: block; width: 24px; height: 1px; background: #323a4e; position: absolute; top: 50%; left: 50%; margin-left: -12px; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before { background-image: linear-gradient(90deg, #9351e5 0%, #ef468b 100%); background-repeat: repeat-x; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { transform: rotate(90deg); background: #c34fb3; } #learn-services .terminal { width: 350px; margin-bottom: -50%; margin-left: -175px; left: 50%; } #learn-services .terminal .device-browser-content { height: 300px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-apps { overflow: hidden; padding-bottom: 200px; } #learn-scale-apps .learn-scale-apps { display: block; width: 400px; height: 400px; background-image: url("../images/views/learn/learn-scale-apps.jpg"); background-size: 100% 100%; position: absolute; bottom: -400px; left: 50%; margin-left: -200px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilization -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-utilization .learn-utilization-image { position: relative; width: 70%; margin: 0 auto; } #learn-utilization .learn-utilization-image img { display: block; } #learn-utilization .learn-utilization-benchmark { display: none; position: absolute; bottom: 0px; left: -12px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label { position: absolute; bottom: 0px; right: 4.8px; width: 200px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label h1 { display: inline-block; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label .icon { vertical-align: baseline; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { position: absolute; top: 0px; right: 4.8px; width: 200px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line:before { content: ''; display: block; width: 2px; height: 100%; position: absolute; top: 0px; left: 0px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line:after { content: ''; display: block; width: 6px; height: 6px; background: #f33745; border-radius: 50%; position: absolute; top: -2px; left: -2px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-before { height: 25%; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-before h5 { font-size: 0.9em; color: #5b6171; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-before .learn-utilization-benchmark-line:before { background-image: linear-gradient(to bottom, #5b6171 0%, #adb0b8 100%); background-repeat: repeat-x; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-before .learn-utilization-benchmark-line:after { background: #5b6171; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after { left: auto; right: -12px; height: 80%; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after h5 { font-size: 0.9em; color: #9351e5; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-label { right: auto; left: 4.8px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line { border-right: none; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { right: auto; left: 4.8px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line:before { background-image: linear-gradient(to bottom, #ef468b 0%, #9351e5 100%); background-repeat: repeat-x; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line:after { background: #ef468b; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-datacenter { overflow: hidden; padding-bottom: 200px; } #learn-scale-datacenter .learn-scale-datacenter { display: block; width: 500px; height: 500px; background-image: url("../images/views/learn/learn-scale-datacenter.jpg"); background-size: 100% 100%; position: absolute; bottom: -500px; left: 50%; margin-left: -250px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Portability -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-portability { overflow: hidden; padding-bottom: 100px; } #learn-portability .learn-portability { display: block; width: 500px; background-size: 100% 100%; position: absolute; bottom: -100px; left: 50%; margin-left: -250px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing { overflow: hidden; padding-bottom: 250px; } #learn-self-healing .learn-self-healing { display: block; width: 250px; height: 400px; background-image: url("../images/views/learn/learn-self-healing.jpg"); background-size: 100% 100%; position: absolute; bottom: -380px; left: 50%; margin-left: -125px; } .typed-cursor { opacity: 1; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 57.6px; height: 57.6px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check { width: 17.28px; height: 17.28px; bottom: -4.32px; right: -4.32px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon { width: 10.368px; height: 10.368px; line-height: 10.368px; font-size: 10.368px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon:before { line-height: 11px; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before, #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { width: 28.8px; margin-left: -14.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilization -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-utilization .learn-utilization-image { width: 80%; display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Portability -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-portability { padding-bottom: 120px; } #learn-portability .learn-portability { width: 500px; bottom: -200px; margin-left: -250px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing { padding-bottom: 240px; } #learn-self-healing .learn-self-healing { width: 300px; height: 480px; bottom: -440px; margin-left: -150px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Formfactor -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor { padding-bottom: 0px; } #learn-formfactor .learn-formfactor-datacenter { width: 700px; height: 700px; top: 50%; bottom: auto; left: 60%; margin-top: -350px; margin-left: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-services .services-icons { margin-bottom: -16px; } #learn-services .services-icons .services-icon { margin-right: 16px; margin-bottom: 16px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 96px; height: 96px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check { width: 28.8px; height: 28.8px; bottom: -7.2px; right: -7.2px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon { width: 17.28px; height: 17.28px; line-height: 17.28px; font-size: 17.28px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon:before { line-height: 19px; } #learn-services .services-icons .services-icon .services-icon-label { text-align: center; display: inline-block; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before, #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { width: 48px; margin-left: -24px; } #learn-services .terminal { width: auto; margin-left: auto; margin-right: auto; left: auto; } #learn-services .terminal .device-browser-content { height: 300px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-apps { padding-bottom: 0px; } #learn-scale-apps .learn-scale-apps { width: 500px; height: 500px; top: 50%; bottom: auto; left: 55%; margin-top: -250px; margin-left: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilization -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-utilization .learn-utilization-image { width: 80%; } #learn-utilization .learn-utilization-benchmark { display: block; left: -16px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label { right: 6.4px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { right: 6.4px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after { right: -16px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-label { left: 6.4px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { left: 6.4px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-datacenter { padding-bottom: 0px; } #learn-scale-datacenter .learn-scale-datacenter { width: 500px; height: 500px; top: 50%; bottom: auto; left: -20%; margin-top: -250px; margin-left: 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Portability -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-portability { padding-bottom: 150px; } #learn-portability .learn-portability { width: 900px; bottom: -180px; margin-left: -450px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing { padding-bottom: 0px; } #learn-self-healing .learn-self-healing { width: 300px; height: 480px; margin-top: -240px; top: 50%; bottom: auto; left: auto; right: 0px; margin-left: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Formfactor -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor .learn-formfactor-datacenter { width: 800px; height: 800px; margin-top: -400px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-services .services-icons { margin-bottom: -24px; } #learn-services .services-icons .services-icon { margin-right: 24px; margin-bottom: 24px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 105.6px; height: 105.6px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check { width: 31.68px; height: 31.68px; bottom: -7.92px; right: -7.92px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon { width: 19.008px; height: 19.008px; line-height: 19.008px; font-size: 19.008px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon:before { line-height: 21px; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before, #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { width: 52.8px; margin-left: -26.4px; } #learn-services .terminal .device-browser-content { height: 300px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-apps .learn-scale-apps { width: 600px; height: 600px; margin-top: -300px; left: 55%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilization -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-utilization .learn-utilization-image { width: 100%; } #learn-utilization .learn-utilization-benchmark { left: -24px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label { right: 9.6px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { right: 9.6px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after { right: -24px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-label { left: 9.6px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { left: 9.6px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-datacenter .learn-scale-datacenter { width: 700px; height: 700px; margin-top: -350px; left: -25%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Portability -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-portability { padding-bottom: 200px; } #learn-portability .learn-portability { width: 1200px; bottom: -200px; margin-left: -600px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing .learn-self-healing { width: 350px; height: 560px; margin-top: -280px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Formfactor -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor .learn-formfactor-datacenter { width: 900px; height: 900px; margin-top: -450px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-services .services-icons { margin-bottom: -32px; } #learn-services .services-icons .services-icon { margin-right: 32px; margin-bottom: 32px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image { width: 115.2px; height: 115.2px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check { width: 34.56px; height: 34.56px; bottom: -8.64px; right: -8.64px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon { width: 20.736px; height: 20.736px; line-height: 20.736px; font-size: 20.736px; } #learn-services .services-icons .services-icon .services-icon-image-wrapper .services-icon-image-check .icon:before { line-height: 22px; } #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:before, #learn-services .services-icons .services-icon.services-icon-add .services-icon-image-wrapper:after { width: 57.6px; margin-left: -28.8px; } #learn-services .terminal .device-browser-content { height: 300px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-datacenter .learn-scale-datacenter { width: 700px; height: 700px; margin-top: -350px; left: -15%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Portability -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-portability { padding-bottom: 200px; } #learn-portability .learn-portability { width: 1400px; bottom: -250px; margin-left: -700px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing .learn-self-healing { width: 400px; height: 640px; margin-top: -320px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Formfactor -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-formfactor .learn-formfactor-datacenter { background-image: url("../images/views/learn/learn-formfactor-datacenter@2x.jpg"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-apps .learn-scale-apps { background-image: url("../images/views/learn/learn-scale-apps@2x.jpg"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Utilization -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-utilization .learn-utilization-benchmark { left: -32px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-label { right: 12.8px; } #learn-utilization .learn-utilization-benchmark .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { right: 12.8px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after { right: -32px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-label { left: 12.8px; } #learn-utilization .learn-utilization-benchmark.learn-utilization-benchmark-after .learn-utilization-benchmark-line .learn-utilization-benchmark-line-label { left: 12.8px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Scale Datacenter -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-scale-datacenter .learn-scale-datacenter { background-image: url("../images/views/learn/learn-scale-datacenter@2x.jpg"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Self-Healing -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #learn-self-healing .learn-self-healing { background-image: url("../images/views/learn/learn-self-healing@2x.jpg"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/google/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Google -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.google #page-header .page-header-image { display: block; width: 80px; height: 71.2px; background-image: url("../images/views/google/page-header-image.png"); background-size: 100% 100%; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Google -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.google #page-header .page-header-image { width: 100px; height: 89px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Google -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.google #page-header .page-header-image { width: 120px; height: 106.8px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Google -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.google #page-header .page-header-image { width: 140px; height: 124.6px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Google -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.google #page-header .page-header-image { background-image: url("../images/views/google/page-header-image@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/kubernetes/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Variables -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Kubernetes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-kubernetes #page-header .page-header-image { display: block; width: 80px; height: 80px; background-image: url("../images/views/kubernetes/page-header-image.png"); background-size: 100% 100%; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Kubernetes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-kubernetes #page-header .page-header-image { width: 100px; height: 100px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Kubernetes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-kubernetes #page-header .page-header-image { width: 120px; height: 120px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Kubernetes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-kubernetes #page-header .page-header-image { width: 140px; height: 140px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Kubernetes -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-kubernetes #page-header .page-header-image { background-image: url("../images/views/kubernetes/page-header-image@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- template.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Setup Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-page-platform-setup #page-header .page-header-image { max-width: 300px; } #canvas.template-page-platform-setup .instruction-steps { margin-bottom: -72px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step { margin-bottom: 72px; position: relative; } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow { display: block; width: 1px; height: 36px; position: absolute; top: -54px; left: 50%; background: #323a4e; opacity: 0.2; filter: alpha(opacity=20); } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow:before { content: ''; display: block; width: 1px; height: 10px; background: #323a4e; transform: rotate(45deg); position: absolute; bottom: -1px; left: 4px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow:after { content: ''; display: block; width: 1px; height: 10px; background: #323a4e; transform: rotate(-45deg); position: absolute; bottom: -1px; right: 4px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:first-child .instruction-step-arrow { height: 49.5px; top: -67.5px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count { display: block; width: 54.6px; height: 54.6px; background-size: 100% 100%; background-image: url("../images/views/platform-setup/step-complete.png"); margin-left: auto; margin-right: auto; background-clip: padding-box; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count span { display: none; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count:after { display: none !important; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Setup Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-page-platform-setup .instruction-steps { margin-bottom: -96px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step { margin-bottom: 96px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow { height: 48px; top: -72px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:first-child .instruction-step-arrow { height: 66px; top: -90px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count { width: 63.063px; height: 63.063px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Setup Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-page-platform-setup .instruction-steps { margin-bottom: -144px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step { margin-bottom: 144px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow { height: 72px; top: -108px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:first-child .instruction-step-arrow { height: 99px; top: -135px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count { width: 89.4348px; height: 89.4348px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Setup Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-page-platform-setup .instruction-steps { margin-bottom: -192px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step { margin-bottom: 192px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step .instruction-step-arrow { height: 96px; top: -144px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:first-child .instruction-step-arrow { height: 132px; top: -180px; } #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count { width: 103.194px; height: 103.194px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Setup Page -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.template-page-platform-setup .instruction-steps .instruction-step:last-child .step-count { background-image: url("../images/views/platform-setup/step-complete@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/press/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Press -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.type-press .press-list-item .press-list-item-image { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Press -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.type-press .press-list-item .press-list-item-image { display: block; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/product/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Product -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body.page-name-product #canvas, body.page-name-products #canvas { background: #f9f9fa; } #products-header .page-header-content { padding-bottom: 144px; } .product-grid-offset { margin-top: -144px; } .products-grid { background: #ffffff; position: relative; zoom: 1; } .products-grid .products-grid-row { border: 1px solid rgba(50, 58, 78, 0.1); } .products-grid .products-grid-row + .products-grid-row { border-top: none; } .products-grid .products-grid-row .products-grid-product.products-grid-product-featured h3 { font-size: 28px; line-height: 26.25px; } .products-grid .products-grid-row .products-grid-product + .products-grid-product { border-top: 1px solid rgba(50, 58, 78, 0.1); } .products-grid .products-grid-row .products-grid-product .list { color: #323a4e; display: inline-block; font-weight: 400; } .products-grid .products-grid-row .products-grid-product .list li { display: inline-block; float: none; white-space: nowrap; } .products-grid .products-grid-row .products-grid-product .list li .icon { margin-right: 6px; } .products-grid .products-grid-logo { margin-bottom: 12px; } .products-grid .products-grid-product-dcos .products-grid-logo { height: auto; max-width: 100%; width: 204px; } .products-grid .products-grid-product-velocity .products-grid-logo, .products-grid .products-grid-product-infinity .products-grid-logo { border-radius: 18px; height: 80; max-width: 80px; } #product-faq .questions { margin-bottom: -24px; } #product-faq .questions .question { margin-bottom: 24px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .products-grid-offset { margin-top: -144px; } .products-grid .products-grid-row { display: -ms-flexbox; display: flex; } .products-grid .products-grid-row .products-grid-product { -ms-flex: 1 0 50%; flex: 1 0 50%; } .products-grid .products-grid-row .products-grid-product.products-grid-product-featured { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .products-grid .products-grid-row .products-grid-product.products-grid-product-featured h3 { font-size: 33.6px; line-height: 31.5px; } .products-grid .products-grid-row .products-grid-product + .products-grid-product { border-top: none; border-left: 1px solid rgba(50, 58, 78, 0.1); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .products-grid .products-grid-row .products-grid-product.products-grid-product-featured h3 { font-size: 43.12px; line-height: 40.425px; } #product-faq .questions { margin-bottom: -32px; } #product-faq .questions .question { margin-bottom: 32px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .products-grid .products-grid-row .products-grid-product.products-grid-product-featured h3 { font-size: 53.76px; line-height: 50.4px; } #product-faq .questions { margin-bottom: -48px; } #product-faq .questions .question { margin-bottom: 48px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .products-grid .products-grid-row .products-grid-product.products-grid-product-featured h3 { font-size: 60.48px; line-height: 56.7px; } #product-faq .questions { margin-bottom: -64px; } #product-faq .questions .question { margin-bottom: 64px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .course-content__divider { border-bottom: 1px solid #d6d8dc; } .course-content__scheudle-content { line-height: 0; } .course-content__class-item { border-bottom: 1px solid #d6d8dc; margin: 0 0 10px; padding: 0 0 10px; } .course-content__class-item:last-of-type, .course-content__class-item--borderless { border-bottom: none; } .course-content__class-time { white-space: nowrap; line-height: 24px; } .course-content__link-wrap, .course-content__link-title { display: inline; } .course-content__link-icon-wrap { padding-left: 2px; position: relative; top: -2px; } .course-content__registration-link-wrap { text-align: left; } @media (min-width: 768px) { .course-content__registration-link-wrap { text-align: right; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/velocity/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ .velocity-feature .velocity-feature-image { display: block; margin: 0 auto; background-size: 640px 80px; width: 80px; height: 80px; background-image: url("../images/views/velocity/velocity-features.png?v3"); } .velocity-feature.velocity-feature-scale .velocity-feature-image { background-position: 0px 0px; } .velocity-feature.velocity-feature-portability .velocity-feature-image { background-position: -80px 0px; } .velocity-feature.velocity-feature-high-availability .velocity-feature-image { background-position: -160px 0px; } .velocity-feature.velocity-feature-multi-tenancy .velocity-feature-image { background-position: -240px 0px; } .velocity-feature.velocity-feature-automation .velocity-feature-image { background-position: -320px 0px; } .velocity-feature.velocity-feature-develop .velocity-feature-image { background-position: -400px 0px; } .velocity-feature.velocity-feature-marathon .velocity-feature-image { background-position: -480px 0px; } .velocity-feature.velocity-feature-enterprise .velocity-feature-image { background-position: -560px 0px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonial Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- "How it Works" Graphic -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Animations -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @keyframes animate-stroke-in { to { stroke-dashoffset: 0; } } @keyframes animate-stroke-out { from { stroke-dashoffset: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- velocity -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #canvas.root-velocity .header-inner .header-actions { display: none !important; } .velocity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- How it Works -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Services -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Partners -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .velocity--how-it-works .stroke-gradient-stop-blue { stop-color: #2f81f7; } .velocity--how-it-works .stroke-gradient-stop-purple { stop-color: #9351e5; } .velocity--how-it-works .stroke-gradient-stop-pink { stop-color: #ef468b; } .velocity--how-it-works .stroke-blue { stroke: #2f81f7; } .velocity--how-it-works .stroke-purple { stroke: #9351e5; } .velocity--how-it-works .stroke-pink { stroke: #ef468b; } .velocity--how-it-works .tabs-navigation { display: none; margin-top: 30px; } .velocity--how-it-works .tabs-content-container svg { max-width: 1060px; } .velocity--how-it-works .tabs-content-container .tabs-content-graphic { display: none; } .velocity--how-it-works .tabs-content-container .icon { fill: #a9abb2; transition: fill 1s; } .velocity--how-it-works .tabs-content-container.tabs-content-produce .icon-devices, .velocity--how-it-works .tabs-content-container.tabs-content-produce .icon-gauge, .velocity--how-it-works .tabs-content-container.tabs-content-produce .icon-website, .velocity--how-it-works .tabs-content-container.tabs-content-produce .text-labels-devices, .velocity--how-it-works .tabs-content-container.tabs-content-produce .text-labels-sensors, .velocity--how-it-works .tabs-content-container.tabs-content-produce .text-labels-client { fill: #2f81f7; } .velocity--how-it-works .tabs-content-container.tabs-content-produce .how-it-works-copy li.how-it-works-copy-produce { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .velocity--how-it-works .tabs-content-container.tabs-content-ingest .icon-devices, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .icon-gauge, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .icon-website, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .text-labels-devices, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .text-labels-sensors, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .text-labels-client, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .text-labels-event-bus { fill: #2f81f7; } .velocity--how-it-works .tabs-content-container.tabs-content-ingest .icon-event-bus, .velocity--how-it-works .tabs-content-container.tabs-content-ingest .text-labels-event-bus { fill: #9351e5; } .velocity--how-it-works .tabs-content-container.tabs-content-ingest .arrow-produce-to-ingest { opacity: 1; } .velocity--how-it-works .tabs-content-container.tabs-content-ingest .how-it-works-copy li.how-it-works-copy-ingest { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .velocity--how-it-works .tabs-content-container.tabs-content-analyze .icon-event-bus, .velocity--how-it-works .tabs-content-container.tabs-content-analyze .text-labels-event-bus { fill: #9351e5; } .velocity--how-it-works .tabs-content-container.tabs-content-analyze .icon-chart, .velocity--how-it-works .tabs-content-container.tabs-content-analyze .text-labels-analytics { fill: #ef468b; } .velocity--how-it-works .tabs-content-container.tabs-content-analyze .arrow-ingest-to-analyze, .velocity--how-it-works .tabs-content-container.tabs-content-analyze .arrow-analytics-to-event-bus { opacity: 1; } .velocity--how-it-works .tabs-content-container.tabs-content-analyze .how-it-works-copy li.how-it-works-copy-analyze { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .velocity--how-it-works .tabs-content-container.tabs-content-store .icon-chart, .velocity--how-it-works .tabs-content-container.tabs-content-store .icon-database, .velocity--how-it-works .tabs-content-container.tabs-content-store .text-labels-analytics, .velocity--how-it-works .tabs-content-container.tabs-content-store .text-labels-database { fill: #ef468b; } .velocity--how-it-works .tabs-content-container.tabs-content-store .arrow-store-to-analyze, .velocity--how-it-works .tabs-content-container.tabs-content-store .arrow-analyze-to-store { opacity: 1; } .velocity--how-it-works .tabs-content-container.tabs-content-store .how-it-works-copy li.how-it-works-copy-store { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .velocity--how-it-works .tabs-content-container.tabs-content-act .icon-database, .velocity--how-it-works .tabs-content-container.tabs-content-act .text-labels-database { fill: #ef468b; } .velocity--how-it-works .tabs-content-container.tabs-content-act .icon-microservices, .velocity--how-it-works .tabs-content-container.tabs-content-act .text-labels-reactive-app { fill: #9351e5; } .velocity--how-it-works .tabs-content-container.tabs-content-act .edge-serve-dashed, .velocity--how-it-works .tabs-content-container.tabs-content-act .arrow-act-to-serve, .velocity--how-it-works .tabs-content-container.tabs-content-act .arrow-serve-to-act, .velocity--how-it-works .tabs-content-container.tabs-content-act .arrow-act-to-store, .velocity--how-it-works .tabs-content-container.tabs-content-act .arrow-store-to-act { opacity: 1; } .velocity--how-it-works .tabs-content-container.tabs-content-act .how-it-works-copy li.how-it-works-copy-act { opacity: 1; -ms-flex-order: 1; order: 1; transform: translateY(0); transition: opacity 1s, transform 1s; } .velocity .how-it-works-placeholder { fill: none; stroke: #d6d7da; stroke-width: 2px; } .velocity .how-it-works-placeholder circle { stroke: #e2e4e5; } .velocity .how-it-works-placeholder .placeholder-arrows { fill: #d6d7da; stroke: none; transition: fill 1s; } .velocity .how-it-works-colored { fill: none; stroke-width: 2px; } .velocity .how-it-works-colored circle, .velocity .how-it-works-colored path { transition: stroke-dashoffset 1s; } .velocity .how-it-works-colored .arrow { opacity: 0; stroke: none; transition: opacity 0.25s; } .velocity .how-it-works-colored .arrow-blue { fill: #2f81f7; } .velocity .how-it-works-colored .arrow-purple { fill: #9351e5; } .velocity .how-it-works-colored .arrow-pink { fill: #ef468b; } .velocity .how-it-works-colored .edge-serve-dashed { opacity: 0; transition: opacity 0.25s; } .velocity .how-it-works-colored .text-labels { fill: #898d98; } .velocity .how-it-works-colored .text-labels text { font-size: 0.9em; font-weight: 300; text-anchor: middle; transition: fill 1s; } .velocity .how-it-works-colored .logo-mesosphere { fill: #3e4351; } .velocity .motion-forward .arrow, .velocity .motion-forward .edge-serve-dashed { transition-delay: 0.55s; } .velocity .motion-forward .arrow-store-to-analyze, .velocity .motion-forward .arrow-act-to-store, .velocity .motion-forward .arrow-serve-to-act, .velocity .motion-forward .arrow-analytics-to-event-bus { transition-delay: 0s; } .velocity .motion-backward .arrow, .velocity .motion-backward .edge-serve-dashed { transition-delay: 0s; } .velocity .motion-backward .arrow-store-to-analyze, .velocity .motion-backward .arrow-act-to-store, .velocity .motion-backward .arrow-serve-to-act, .velocity .motion-backward .arrow-analytics-to-event-bus { transition-delay: 0.55s; } .velocity .how-it-works-copy { display: block; } .velocity .how-it-works-copy li { display: block; margin: 60px 0; opacity: 1; padding: 0; } .velocity .how-it-works-copy li:first-child { margin-top: 0; } .velocity .how-it-works-copy li:before { display: none; } .velocity .how-it-works-copy li p { margin-left: auto; margin-right: auto; max-width: 80%; } .velocity .how-it-works-copy .icon { margin-bottom: 15px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial { text-align: center; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-content { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; padding-bottom: 3px; padding-top: 3px; margin-right: auto; margin-left: auto; width: 100%; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo { display: inline-block; margin: 0 auto; margin-bottom: 2.4px; height: 60px; background-size: 180px 300px; background-image: url("../images/views/velocity/velocity-quote-logos.png?03242016"); position: relative; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo span { display: none; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo.velocity-testimonial-logo-jfrog { width: 56.4px; background-position: 0px 0px; } .velocity--testimonials .carousel-pagination { margin-top: 15px; margin-bottom: -15px; } .velocity--testimonials .carousel-pagination li { background: rgba(255, 255, 255, 0.1); } .velocity--testimonials .carousel-pagination li.active { background: none; } .velocity .icon--badge { background-size: 100%; border-radius: 20%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.095); display: inline-block; height: auto; max-width: 128px; position: relative; width: 100%; } .velocity .icon--badge:after { content: ''; display: block; padding-bottom: 100%; } .velocity .icon-jenkins { background-image: url("../images/components/services/jenkins.jpg"); } .velocity .icon-git { background-image: url("../images/components/services/git.jpg"); } .velocity .icon-jfrog { background-image: url("../images/components/services/jfrog.jpg"); } .velocity .icon-marathon { background-image: url("../images/components/services/marathon.jpg"); } .velocity--partners .velocity-partner a { display: block; padding: 10px 0 20px 0; text-align: center; } .velocity--partners .velocity-partner a .velocity-partner-logo { background-image: url("../images/views/velocity/partner-logos.png?03242016"); background-size: 180px 270px; display: inline-block; height: 90px; text-indent: -9999em; width: 72px; } .velocity--partners .velocity-partner.velocity-partner-containersolutions .velocity-partner-logo { width: 99.6px; background-position: 0px 0px; } .velocity--partners .velocity-partner.velocity-partner-jfrog .velocity-partner-logo { width: 56.4px; background-position: 0px -90px; } .velocity--partners .velocity-partner.velocity-partner-github .velocity-partner-logo { width: 114.6px; background-position: 0px -180px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ .velocity-feature .velocity-feature-image { background-size: 800px 100px; width: 100px; height: 100px; } .velocity-feature.velocity-feature-scale-screen-small .velocity-feature-image { background-position: 0px 0px; } .velocity-feature.velocity-feature-portability .velocity-feature-image { background-position: -100px 0px; } .velocity-feature.velocity-feature-high-availability .velocity-feature-image { background-position: -200px 0px; } .velocity-feature.velocity-feature-multi-tenancy .velocity-feature-image { background-position: -300px 0px; } .velocity-feature.velocity-feature-automation .velocity-feature-image { background-position: -400px 0px; } .velocity-feature.velocity-feature-develop .velocity-feature-image { background-position: -500px 0px; } .velocity-feature.velocity-feature-marathon .velocity-feature-image { background-position: -600px 0px; } .velocity-feature.velocity-feature-enterprise .velocity-feature-image { background-position: -700px 0px; } .velocity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-content { width: 80%; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo { margin-bottom: 3.2px; height: 70px; background-size: 210px 350px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo.velocity-testimonial-logo-jfrog { width: 65.8px; background-position: 0px 0px; } .velocity--testimonials .carousel-pagination { margin-top: 21px; margin-bottom: -21px; } /* --------------------------------------------------------------------- ------------------------------------------------------------------------ How it Works ------------------------------------------------------------------------ --------------------------------------------------------------------- */ .velocity--how-it-works .tabs-navigation { display: block; } .velocity--how-it-works .tabs-content-container .tabs-content-graphic { display: block; } .how-it-works-colored .text-labels text { font-size: 1.15em; font-weight: 400; } .how-it-works-copy { display: -ms-flexbox; display: flex; } .how-it-works-copy li { -ms-flex: 1 0 100%; flex: 1 0 100%; -ms-flex-order: 2; order: 2; margin: 0; opacity: 0; padding: 0; transform: translateY(30px); } .how-it-works-copy li:before { display: none; } .how-it-works-copy li p { margin-left: auto; margin-right: auto; max-width: 80%; } .how-it-works-copy .icon { display: none; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ --partners .velocity-partner a .velocity-partner-logo { height: 105px; background-size: 210px 315px; } --partners .velocity-partner.velocity-partner-containersolutions .velocity-partner-logo { width: 116.2px; background-position: 0px 0px; } --partners .velocity-partner.velocity-partner-jfrog .velocity-partner-logo { width: 65.8px; background-position: 0px -105px; } --partners .velocity-partner.velocity-partner-github .velocity-partner-logo { width: 133.7px; background-position: 0px -210px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Velocity -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .velocity { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonails -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* --------------------------------------------------------------------- ------------------------------------------------------------------------ How it Works ------------------------------------------------------------------------ --------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .velocity .velocity-feature .velocity-feature-image { background-size: 1024px 128px; width: 128px; height: 128px; } .velocity .velocity-feature.velocity-feature-scale-screen-medium .velocity-feature-image { background-position: 0px 0px; } .velocity .velocity-feature.velocity-feature-portability .velocity-feature-image { background-position: -128px 0px; } .velocity .velocity-feature.velocity-feature-high-availability .velocity-feature-image { background-position: -256px 0px; } .velocity .velocity-feature.velocity-feature-multi-tenancy .velocity-feature-image { background-position: -384px 0px; } .velocity .velocity-feature.velocity-feature-automation .velocity-feature-image { background-position: -512px 0px; } .velocity .velocity-feature.velocity-feature-develop .velocity-feature-image { background-position: -640px 0px; } .velocity .velocity-feature.velocity-feature-marathon .velocity-feature-image { background-position: -768px 0px; } .velocity .velocity-feature.velocity-feature-enterprise .velocity-feature-image { background-position: -896px 0px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-content { width: 80%; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo { margin-bottom: 4.8px; height: 80px; background-size: 240px 400px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo.velocity-testimonial-logo-jfrog { width: 75.2px; background-position: 0px 0px; } .velocity--testimonials .carousel-pagination { margin-top: 32.7px; margin-bottom: -32.7px; } .velocity .how-it-works-copy li p { width: 55%; } .velocity .how-it-works-colored .text-labels text { font-size: 0.9em; } .velocity--partners .velocity-partner a .velocity-partner-logo { height: 120px; background-size: 240px 360px; } .velocity--partners .velocity-partner.velocity-partner-containersolutions .velocity-partner-logo { width: 132.8px; background-position: 0px 0px; } .velocity--partners .velocity-partner.velocity-partner-jfrog .velocity-partner-logo { width: 75.2px; background-position: 0px -120px; } .velocity--partners .velocity-partner.velocity-partner-github .velocity-partner-logo { width: 152.8px; background-position: 0px -240px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* --------------------------------------------------------------------- ------------------------------------------------------------------------ velocity ------------------------------------------------------------------------ --------------------------------------------------------------------- */ .velocity { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Featured Partner Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .velocity .velocity-feature .velocity-feature-image { background-size: 1024px 128px; width: 128px; height: 128px; } .velocity .velocity-feature.velocity-feature-scale-screen-large .velocity-feature-image { background-position: 0px 0px; } .velocity .velocity-feature.velocity-feature-portability .velocity-feature-image { background-position: -128px 0px; } .velocity .velocity-feature.velocity-feature-high-availability .velocity-feature-image { background-position: -256px 0px; } .velocity .velocity-feature.velocity-feature-multi-tenancy .velocity-feature-image { background-position: -384px 0px; } .velocity .velocity-feature.velocity-feature-automation .velocity-feature-image { background-position: -512px 0px; } .velocity .velocity-feature.velocity-feature-develop .velocity-feature-image { background-position: -640px 0px; } .velocity .velocity-feature.velocity-feature-marathon .velocity-feature-image { background-position: -768px 0px; } .velocity .velocity-feature.velocity-feature-enterprise .velocity-feature-image { background-position: -896px 0px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-content { width: 80%; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo { margin-bottom: 6.4px; height: 100px; background-size: 300px 500px; } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo.velocity-testimonial-logo-jfrog { width: 94px; background-position: 0px 0px; } .velocity--testimonials .carousel-pagination { margin-top: 44.4px; margin-bottom: -44.4px; } .velocity--partners .velocity-partner a .velocity-partner-logo { height: 150px; background-size: 300px 450px; } .velocity--partners .velocity-partner.velocity-partner-containersolutions .velocity-partner-logo { width: 166px; background-position: 0px 0px; } .velocity--partners .velocity-partner.velocity-partner-jfrog .velocity-partner-logo { width: 94px; background-position: 0px -150px; } .velocity--partners .velocity-partner.velocity-partner-github .velocity-partner-logo { width: 191px; background-position: 0px -300px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- Features ----------------------------------------------------------------------------- */ .velocity-feature .velocity-feature-image { background-image: url("../images/views/velocity/velocity-features@2x.png?v3"); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Home -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .velocity { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } .velocity--testimonials .velocity-testimonials__carousel-wrap .velocity-testimonial .velocity-testimonial-logo { background-image: url("../images/views/velocity/velocity-quote-logos@2x.png?03242016"); } .velocity--partners .velocity-partner a .velocity-partner-logo { background-image: url("../images/views/velocity/partner-logos@2x.png?03242016"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views/why-mesos/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Platform Logos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #why-mesos-what-is-mesos .why-mesos-logo img { display: inline-block; max-width: 90%; width: 340px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Why Mesos Partners -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #why-mesos-partners .why-mesos-platforms { *zoom: 1; } #why-mesos-partners .why-mesos-platforms:before, #why-mesos-partners .why-mesos-platforms:after { display: table; content: ""; line-height: 0; } #why-mesos-partners .why-mesos-platforms:after { clear: both; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform { position: relative; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform a { position: relative; top: 0px; left: 0px; display: block; width: 100%; height: 100%; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform span { display: none; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform .why-mesos-platform-logo { display: block; margin: 0 auto; height: 40px; background-size: 120px 360px; background-image: url("../images/views/why-mesos/why-mesos-platform-logos.png"); position: relative; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-amazon .why-mesos-platform-logo { width: 83.6px; background-position: 0px 0px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-openstack .why-mesos-platform-logo { width: 104.8px; background-position: 0px -40px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-redhat .why-mesos-platform-logo { width: 97.6px; background-position: 0px -80px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-ubuntu .why-mesos-platform-logo { width: 97.2px; background-position: 0px -120px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-vmware .why-mesos-platform-logo { width: 101.2px; background-position: 0px -160px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-coreos .why-mesos-platform-logo { width: 101.6px; background-position: 0px -200px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-google .why-mesos-platform-logo { width: 93.2px; background-position: 0px -240px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-azure .why-mesos-platform-logo { width: 92.8px; background-position: 0px -280px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-centos .why-mesos-platform-logo { width: 99.6px; background-position: 0px -320px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- why-mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Why Mesos -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #why-mesos-partners .border { padding: 64px; } #why-mesos-partners .border:after { width: 184px; margin-left: -92px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform .why-mesos-platform-logo { height: 80px; background-size: 240px 720px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-amazon .why-mesos-platform-logo { width: 167.2px; background-position: 0px 0px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-openstack .why-mesos-platform-logo { width: 209.6px; background-position: 0px -80px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-redhat .why-mesos-platform-logo { width: 195.2px; background-position: 0px -160px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-ubuntu .why-mesos-platform-logo { width: 194.4px; background-position: 0px -240px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-vmware .why-mesos-platform-logo { width: 202.4px; background-position: 0px -320px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-coreos .why-mesos-platform-logo { width: 203.2px; background-position: 0px -400px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-google .why-mesos-platform-logo { width: 186.4px; background-position: 0px -480px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-azure .why-mesos-platform-logo { width: 185.6px; background-position: 0px -560px; } #why-mesos-partners .why-mesos-platforms .why-mesos-platform.why-mesos-platform-centos .why-mesos-platform-logo { width: 199.2px; background-position: 0px -640px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Why Mesos Partners -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #why-mesos-partners .why-mesos-platforms .why-mesos-platform .why-mesos-platform-logo { background-image: url("../images/views/why-mesos/why-mesos-platform-logos@2x.png"); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .flex-grid { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-align: center; align-items: center; width: 100%; } .flex-grid--home { margin: 0 0 -16px; } .flex-grid--home .flex-grid__logo { margin: 16px 13px; height: 20%; } .flex-grid--solutions { -ms-flex-pack: distribute; justify-content: space-around; } .flex-grid--partner .flex-grid__logo { height: 20%; } .flex-grid__logo { height: 35%; margin: 16px; } .flex-grid__logo img, .flex-grid__logo svg { height: 30px; } .partners__cta-wrapper { display: inline-block; margin-left: 15px; } .partners__program-image-wrap { margin: 0 auto; max-width: 200px; width: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .flex-grid--home { margin: 0 0 -24px; } .flex-grid--home .flex-grid__logo { height: 20%; } .flex-grid--solutions { -ms-flex-pack: distribute; justify-content: space-around; } .flex-grid--solutions .flex-grid__logo { height: 25%; } .flex-grid--solutions .flex-grid__logo img, .flex-grid--solutions .flex-grid__logo svg { height: 42px; } .flex-grid--partner .flex-grid__logo { height: 25%; } .flex-grid--partner .flex-grid__logo img, .flex-grid--partner .flex-grid__logo svg { height: 42px; } } @media (min-width: 768px) { .partners__program { margin-bottom: 0 !important; } .flex-grid--home { margin: 0; } .flex-grid--home .flex-grid__logo { height: 15%; margin: 0 13px; } .flex-grid--solutions { -ms-flex-pack: distribute; justify-content: space-around; } .flex-grid--solutions .flex-grid__logo { height: 18%; margin: 32px 16px; } .flex-grid--solutions .flex-grid__logo img, .flex-grid--solutions .flex-grid__logo svg { height: 52px; } .flex-grid--partner .flex-grid__logo { height: 18%; margin: 32px 16px; } .flex-grid--partner .flex-grid__logo img, .flex-grid--partner .flex-grid__logo svg { height: 52px; } } @media (min-width: 992px) { .flex-grid { -ms-flex-pack: justify; justify-content: space-between; } .flex-grid--home .flex-grid__logo { height: 10%; margin: 0 13px; } .flex-grid--home .flex-grid__logo img, .flex-grid--home .flex-grid__logo svg { height: 40px; } .flex-grid--home .flex-grid__logo:first-of-type { margin-left: 0; } .flex-grid--home .flex-grid__logo:last-of-type { margin-right: 0; } .flex-grid--solutions { -ms-flex-pack: distribute; justify-content: space-around; } .flex-grid--solutions .flex-grid__logo { margin: 16px 13px; } .flex-grid--solutions .flex-grid__logo img, .flex-grid--solutions .flex-grid__logo svg { height: 52px; } .flex-grid--partner .flex-grid__logo { margin: 16px 13px; } .flex-grid--partner .flex-grid__logo img, .flex-grid--partner .flex-grid__logo svg { height: 52px; } } @media (min-width: 1400px) { .flex-grid--home .flex-grid__logo { height: 10%; margin: 0 13px; } .flex-grid--home .flex-grid__logo img, .flex-grid--home .flex-grid__logo svg { height: 52px; } .flex-grid--solutions { -ms-flex-pack: distribute; justify-content: space-around; } .flex-grid--solutions .flex-grid__logo { margin: 16px 13px; } .flex-grid--solutions .flex-grid__logo img, .flex-grid--solutions .flex-grid__logo svg { height: 62px; } .flex-grid--partner .flex-grid__logo { margin: 16px 13px; } .flex-grid--partner .flex-grid__logo img, .flex-grid--partner .flex-grid__logo svg { height: 62px; } } .featured-partner-grid__logo-wrap a { display: block; padding: 10px 0 10px 0; text-align: center; } .featured-partner-grid__logo-wrap a .featured-partner-grid__logo { height: 90px; } .featured-partner-grid__logo-wrap a .featured-partner-grid__logo img { display: block; margin: 0 auto; max-height: 100%; } .append-workloads-wrapper { margin: 35px 0 0; } .text-bubble-stack__image.container-mesos-image { height: 20px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .featured-partner-grid__logo-wrap .featured-partner-grid__logo { height: 105px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .featured-partner-grid__logo-wrap .featured-partner-grid__logo { height: 120px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .featured-partner-grid__logo-wrap .featured-partner-grid__logo { height: 150px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modules ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ .featured-tile-container { margin-left: 0; margin-right: 0; } .tile-grid__media { height: 100%; position: absolute; top: 0; left: 0; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-align: center; align-items: center; overflow: hidden; } .tile-grid__item-inner:hover { text-decoration: none; } .tile-grid__media--video { -ms-flex: 1; flex: 1; } .tile-grid__media--video object { display: block; } html.video .tile-grid__media--video object { display: none; } .tile-grid__media--video video { display: none; background-size: cover; position: absolute; } html.video .tile-grid__media--video video { display: block; } .tile-grid__content { position: relative; z-index: 10; } .tile-grid__overlay { width: 100%; padding: 48px 48px 120px; position: relative; background: #232937; } .tile-grid__overlay--dark:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #232937; opacity: .80; } .tile-grid__overlay:hover { text-decoration: none; } .tile-grid__title, .tile-grid__eyebrow-title { text-transform: uppercase; color: #ffffff; } .tile-grid__title { font-size: 22.4px; line-height: 21px; } .tile-grid__cta-container { position: absolute; left: 0; bottom: 48px; width: 100%; z-index: 10; } .tile-grid__item--featured .tile-grid__overlay { padding: 72px 72px 96px; } .tile-grid__item--featured .tile-grid__cta-container { position: absolute; left: 0; bottom: 96px; width: 100%; z-index: 10; } .tile-grid__item .decorate-line:after { height: 2px; } .tile-grid__item .button.tile-grid__button { background: none; } .tile-grid__item .button.tile-grid__button .icon-mini { position: relative; top: -1px; margin-right: 5px; } .tile-grid__item--folded .tile-grid__item-inner:before, .tile-grid__item--folded .tile-grid__item-inner:after { display: block; content: ''; position: absolute; } .canvas-pod-light .tile-grid__item--folded .tile-grid__item-inner:after { border-color: transparent #f9f9fa transparent transparent; } .tile-grid__item--folded .tile-grid__item-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 64px 0 0 64px; border-color: transparent transparent transparent #ffffff; } .tile-grid__item--folded .tile-grid__item-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 64px 64px 0; border-color: transparent #ffffff transparent transparent; } .tile-grid__item--folded.tile-grid__item--color-orange .tile-grid__item-inner:before { border-color: transparent transparent transparent #f56753; } .tile-grid__item--folded.tile-grid__item--color-green .tile-grid__item-inner:before { border-color: transparent transparent transparent #27c97b; } .tile-grid__item--folded.tile-grid__item--color-purple .tile-grid__item-inner:before { border-color: transparent transparent transparent #9351e5; } .tile-grid__item--folded.tile-grid__item--color-cyan .tile-grid__item-inner:before { border-color: transparent transparent transparent #20d5ff; } .tile-grid__item--folded.tile-grid__item--color-blue .tile-grid__item-inner:before { border-color: transparent transparent transparent #2f81f7; } .tile-grid__item--folded.tile-grid__item--color-pink .tile-grid__item-inner:before { border-color: transparent transparent transparent #ef468b; } .tile-grid__item--color-orange .decorate-line:after { background: #f56753; } .tile-grid__item--color-orange .button.tile-grid__button { border-color: #f56753; } .tile-grid__item--color-orange .button.tile-grid__button:hover { border-color: #f56753 !important; background: #f56753; } .tile-grid__item--color-green .decorate-line:after { background: #27c97b; } .tile-grid__item--color-green .button.tile-grid__button { border-color: #27c97b; } .tile-grid__item--color-green .button.tile-grid__button:hover { border-color: #27c97b !important; background: #27c97b; } .tile-grid__item--color-purple .decorate-line:after { background: #9351e5; } .tile-grid__item--color-purple .button.tile-grid__button { border-color: #9351e5; } .tile-grid__item--color-purple .button.tile-grid__button:hover { border-color: #9351e5 !important; background: #9351e5; } .tile-grid__item--color-cyan .decorate-line:after { background: #20d5ff; } .tile-grid__item--color-cyan .button.tile-grid__button { border-color: #20d5ff; } .tile-grid__item--color-cyan .button.tile-grid__button:hover { border-color: #20d5ff !important; background: #20d5ff; } .tile-grid__item--color-blue .decorate-line:after { background: #2f81f7; } .tile-grid__item--color-blue .button.tile-grid__button { border-color: #2f81f7; } .tile-grid__item--color-blue .button.tile-grid__button:hover { border-color: #2f81f7 !important; background: #2f81f7; } .tile-grid__item--color-pink .decorate-line:after { background: #ef468b; } .tile-grid__item--color-pink .button.tile-grid__button { border-color: #ef468b; } .tile-grid__item--color-pink .button.tile-grid__button:hover { border-color: #ef468b !important; background: #ef468b; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .featured-tile-container { margin-left: auto; margin-right: auto; } } .feature-item-grid__icon-wrap, .feature-item-grid__title { display: inline-block; } .feature-item-grid__title { margin-left: 42px; } .feature-item-grid__title-wrap { position: relative; } .feature-item-grid__icon-wrap { position: absolute; top: -5px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .feature-thumbnail-tout { position: relative; } .feature-thumbnail-tout__image-wrap { max-width: 48px; margin: 0 auto; width: 100%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Feature Matrix -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .feature-matrix .feature-matrix-row { -ms-flex-align: stretch; align-items: stretch; border-bottom: 1px solid rgba(50, 58, 78, 0.1); display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .feature-matrix .feature-matrix-row--title-row { border-top: none; border-bottom: none; } .feature-matrix .feature-matrix-row--title-row .feature-matrix--column-feature { padding: 18px 0 0; } .feature-matrix .feature-matrix-row--borderless-bottom { border-bottom: none; } .feature-matrix .feature-matrix-row-heading { -ms-flex-wrap: wrap; flex-wrap: wrap; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column, .feature-matrix .feature-matrix-row-heading .feature-matrix-column { display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: initial; justify-content: initial; text-align: center; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column .feature-matrix-checklist, .feature-matrix .feature-matrix-row-heading .feature-matrix-column .feature-matrix-checklist { margin-top: 24px; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column.feature-matrix-column-product-enterprise .feature-matrix-checklist, .feature-matrix .feature-matrix-row-heading .feature-matrix-column.feature-matrix-column-product-enterprise .feature-matrix-checklist { color: #ffffff; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column.feature-matrix-column-product-enterprise .feature-matrix-checklist li:before, .feature-matrix .feature-matrix-row-heading .feature-matrix-column.feature-matrix-column-product-enterprise .feature-matrix-checklist li:before { background-color: currentColor; } .feature-matrix .feature-matrix-row-heading .feature-matrix-column-feature { display: none; } .feature-matrix .feature-matrix--column { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; white-space: break-all; } .feature-matrix .feature-matrix--column-feature { -ms-flex: 0 1 100%; flex: 0 1 100%; padding: 0; } .feature-matrix .feature-matrix-column { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; white-space: break-all; } .feature-matrix .feature-matrix-column-feature { border-bottom: 1px solid rgba(50, 58, 78, 0.1); -ms-flex: 0 1 100%; flex: 0 1 100%; padding: 18px 0; } .feature-matrix .feature-matrix-column-product { -ms-flex: 1 0 50%; flex: 1 0 50%; padding: 6px 0; } .feature-matrix-enterprise .feature-matrix-row-heading { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; border-bottom: none; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix--column, .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column { border-right: none; padding: 0; margin-top: 24px; margin-bottom: 24px; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix--column .feature-matrix-column-product-logo, .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column .feature-matrix-column-product-logo { margin-bottom: 6px; margin-top: 6px; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix--column .feature-matrix-column-product-logo img, .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column .feature-matrix-column-product-logo img { max-width: 100%; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix--column.feature-matrix--column-feature, .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column.feature-matrix--column-feature { text-align: left; margin-top: 0; margin-bottom: 0; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-dcos-logo { position: relative; margin: 0 0 10px; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-dcos { background: rgba(50, 58, 78, 0.05); position: relative; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-dcos:after { bottom: 0; box-shadow: inset 0 0 0 1px rgba(50, 58, 78, 0.1); content: ''; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; z-index: 1; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-dcos .feature-matrix-column-content { position: relative; z-index: 2; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-enterprise { background: #9351e5; } .feature-matrix-enterprise .feature-matrix-row-heading .feature-matrix-column-product-enterprise h3 { color: #ffffff; } .feature-matrix-checklist { margin-bottom: 48px; margin-top: 24px; width: 100%; } .feature-matrix-checklist ul { display: inline-block; } .feature-matrix-checklist__list { padding: 0; } .feature-matrix-checklist__list li { position: relative; display: block; border-bottom: 1px solid rgba(50, 58, 78, 0.1); padding-top: 5px; padding-left: 25px !important; padding-bottom: 5px; padding-right: 0; } .feature-matrix-checklist__list li .icon { position: absolute; left: 0; top: 8px; } .dcos-feature .dcos-feature-image { background-size: contain; margin: 0 auto; max-width: 128px; width: 100%; } .dcos-feature .dcos-feature-image:after { content: ''; display: block; padding-bottom: 100%; } .dcos-feature.dcos-feature-all-workloads .dcos-feature-image { background-image: url("../images/views/enterprise/all-workloads.png"); } .dcos-feature.dcos-feature-distributed-ecosystem .dcos-feature-image { background-image: url("../images/views/enterprise/distributed-ecosystem.png"); } .dcos-feature.dcos-feature-open-core .dcos-feature-image { background-image: url("../images/views/enterprise/built-on-mesos.png"); } .dcos-feature.dcos-feature-enterprise-capabilities .dcos-feature-image { background-image: url("../images/views/enterprise/enterprise-capabilities.png"); } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .feature-matrix .feature-matrix-row-heading { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .feature-matrix .feature-matrix-row-heading .feature-matrix-column-feature { display: -ms-flexbox; display: flex; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column { padding: 0 36px 6px; margin-top: 0; margin-bottom: 0; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column.feature-matrix--column-feature { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .feature-matrix .feature-matrix-row-heading .feature-matrix--column.feature-matrix--column-feature [class*="column-"] { padding-left: 0; } .feature-matrix .feature-matrix-row-heading .feature-matrix-column-product-dcos-logo img { margin: 0 auto; } .feature-matrix .feature-matrix-row-heading .feature-matrix-column { padding: 36px 30px; -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; } .feature-matrix .feature-matrix-row { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .feature-matrix .feature-matrix-column { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .feature-matrix .feature-matrix-column-feature { border-bottom: none; -ms-flex-preferred-size: 33.337%; flex-basis: 33.337%; -ms-flex-pack: start; justify-content: flex-start; } .feature-matrix .feature-matrix--column { border-bottom: none; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .feature-matrix .feature-matrix--column-feature { border-bottom: none; -ms-flex-preferred-size: 50%; flex-basis: 50%; -ms-flex-pack: start; justify-content: flex-start; padding: 6px 0; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { .dcos-feature.dcos-feature-all-workloads .dcos-feature-image { background-image: url("../images/views/enterprise/all-workloads@2x.png"); } .dcos-feature.dcos-feature-distributed-ecosystem .dcos-feature-image { background-image: url("../images/views/enterprise/distributed-ecosystem@2x.png"); } .dcos-feature.dcos-feature-open-core .dcos-feature-image { background-image: url("../images/views/enterprise/built-on-mesos@2x.png"); } .dcos-feature.dcos-feature-enterprise-capabilities .dcos-feature-image { background-image: url("../images/views/enterprise/enterprise-capabilities@2x.png"); } } .text-bubble-stack__title-wrap { border-top: 1px solid #9351e5; } .text-bubble-stack__title-wrap--inset { border-top: none; padding: 0 20px; position: absolute; width: 100%; z-index: 100; top: -10px; } .text-bubble-stack__title-wrap--inset .text-bubble-stack__title { background: #ffffff; display: inline-block; width: auto; padding: 0 5px; } .text-bubble-stack__content { display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 10; } .text-bubble-stack__row--has-arrow { padding-top: 36px; padding-bottom: 36px; } .text-bubble-stack__row.row-pod-shortest { padding-bottom: 10px !important; } .text-bubble-stack__row.flush-top { padding-top: 0 !important; } .text-bubble-stack__row.flush-top { padding-top: 0 !important; } .text-bubble-stack__row.flush-bottom { padding-bottom: 0 !important; } .text-bubble-stack__content--server-wrap, .text-bubble-stack__content--mobile-half { -ms-flex-wrap: wrap; flex-wrap: wrap; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item, .text-bubble-stack__content--mobile-half .text-bubble-stack__item { width: 49%; margin-bottom: 10px; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:nth-of-type(odd), .text-bubble-stack__content--mobile-half .text-bubble-stack__item:nth-of-type(odd) { margin-left: 0; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:nth-of-type(even), .text-bubble-stack__content--mobile-half .text-bubble-stack__item:nth-of-type(even) { margin-right: 0; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item { min-width: 0; width: 100%; } .text-bubble-stack__content--mobile-full { -ms-flex-wrap: wrap; flex-wrap: wrap; } .text-bubble-stack__content--mobile-full .text-bubble-stack__item { width: 100%; margin-right: 0; } .text-bubble-stack__content--mobile-full .text-bubble-stack__item:last-of-type { margin-bottom: 0; } .text-bubble-stack__content--one-two-thirds--mobile-full { -ms-flex-wrap: wrap; flex-wrap: wrap; } .text-bubble-stack__content--one-two-thirds--mobile-full .text-bubble-stack__item { width: 100%; margin-right: 0; margin-bottom: 10px; } .text-bubble-stack__content--one-two-thirds--mobile-full .text-bubble-stack__item:last-of-type { margin-bottom: 0; } .text-bubble-stack__content--one-two-thirds { -ms-flex-wrap: wrap; flex-wrap: wrap; } .text-bubble-stack__content--one-two-thirds .text-bubble-stack__item:last-of-type { width: 100%; margin-left: 0; margin-top: 10px; } .text-bubble-stack__content--one-two-thirds .text-bubble-stack__item:first-of-type { margin-right: 0; width: 100%; } .text-bubble-stack__content--inset { border-radius: 5px; padding: 10px; } .text-bubble-stack__content--inset--light { background: #f5f5f6; } .text-bubble-stack__content--border-purple { border: 1px solid #9351e5; } .text-bubble-stack__content--full .text-bubble-stack__item { width: 100%; } .text-bubble-stack__item { border-radius: 5px; margin: 0 .5%; padding: 10px 10px; } .text-bubble-stack__item:last-of-type { margin-right: 0; } .text-bubble-stack__item:first-of-type { margin-left: 0; } .text-bubble-stack__item--justify-column { -ms-flex-direction: column; flex-direction: column; } .text-bubble-stack__item-content-column { position: relative; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; height: 100%; width: 100%; padding: 0 5px; } .text-bubble-stack__item-content-column:after { content: ''; display: block; position: absolute; width: 2px; height: 100%; right: 0; top: 0; background: #f5f5f6; } .text-bubble-stack__item-content-column:first-of-type { padding-left: 0; } .text-bubble-stack__item-content-column:last-of-type { padding-right: 0; } .text-bubble-stack__item-content-column:last-of-type:after { display: none; } .text-bubble-stack__item-content-row { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .text-bubble-stack__item--white { background: #ffffff; } .text-bubble-stack__item--white .text-bubble-stack__item-content { color: #adb0b8; } .text-bubble-stack__item--white--text-purple .text-bubble-stack__item-content { color: #9351e5; } .text-bubble-stack__item--white--text-purple .icon { fill: #9351e5; } .text-bubble-stack__item--white--text-green .text-bubble-stack__item-content { color: #27c97b; } .text-bubble-stack__item--white--text-green .icon { fill: #27c97b; } .text-bubble-stack__item--white--text-blue .text-bubble-stack__item-content { color: #2f81f7; } .text-bubble-stack__item--white--text-blue .icon { fill: #2f81f7; } .text-bubble-stack__item--default { background: #e9dcfa; } .text-bubble-stack__item--blue { background: #d5e6fd; } .text-bubble-stack__item--blue .text-bubble-stack__item-content { color: #2f81f7; } .text-bubble-stack__item--server-box { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-align: end; align-items: flex-end; position: relative; background: #eaeaec; height: 65px; } .text-bubble-stack__item--server-box .text-bubble-stack__item-content { color: #ffffff; } .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap { border-radius: 5px; height: 24px; width: 24px; background: #ffffff; } .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap:nth-child(4n) { display: none; } .text-bubble-stack__item--server-box:before, .text-bubble-stack__item--server-box:after { display: block; content: ''; position: absolute; top: 13px; height: 6px; width: 6px; background: #27c97b; border-radius: 100%; } .text-bubble-stack__item--server-box:before { left: 11px; } .text-bubble-stack__item--server-box:after { left: 25px; } .text-bubble-stack__title, .text-bubble-stack__item-content { color: #9351e5; display: inline-block; width: 100%; } .text-bubble-stack__icon-wrap { display: block; width: 100%; } .text-bubble-stack__image-wrap { position: relative; width: 100%; height: 100%; } .text-bubble-stack__image { height: 35px; } .text-bubble-stack__arrow-icon-wrap { border-radius: 5px; position: absolute; height: 24px; width: 24px; border: 1px solid #e6e6e6; background: #ffffff; z-index: 100; } .text-bubble-stack__arrow-wrap { position: relative; height: 36px; } .text-bubble-stack__arrow-wrap--tall { height: 72px; } .text-bubble-stack__arrow-wrap .text-bubble-stack__arrow--down { position: absolute; height: 90%; } .text-bubble-stack__arrow { position: relative; } .text-bubble-stack__arrow__pointer-down { display: block; position: relative; height: 7px; width: 7px; border-left: 2px solid #767A86; border-bottom: 2px solid #767A86; transform: rotate(-45deg); transform-origin: center; } .text-bubble-stack__arrow--down { display: block; position: relative; height: 35px; background: #767A86; width: 2px; } .text-bubble-stack__arrow--down .text-bubble-stack__arrow__pointer-down { position: absolute; bottom: 0; right: -2.5px; z-index: 200; } .text-bubble-stack__arrow--down--medium { top: 0; height: 105px; } .text-bubble-stack__arrow--multi-arrow-down { border-top-left-radius: 3.5px; border-top-right-radius: 3.5px; height: 35px; width: 80%; margin: 0 auto 5px; border-top-style: solid; border-top-width: 2px; border-top-color: #767A86; border-left-style: solid; border-left-width: 2px; border-left-color: #767A86; border-right-style: solid; border-right-width: 2px; border-right-color: #767A86; } .text-bubble-stack__arrow--multi-arrow-down:before { background: #767A86; content: ''; display: block; top: -40px; height: 40px; width: 2px; left: 50%; position: absolute; z-index: 0; } .text-bubble-stack__arrow--multi-arrow-down .text-bubble-stack__arrow--down, .text-bubble-stack__arrow--multi-arrow-down .text-bubble-stack__arrow-right, .text-bubble-stack__arrow--multi-arrow-down .text-bubble-stack__arrow-left { position: absolute; bottom: 0; } .text-bubble-stack__arrow--multi-arrow-down .text-bubble-stack__arrow-right { right: -4.5px; } .text-bubble-stack__arrow--multi-arrow-down .text-bubble-stack__arrow-left { left: -4.5px; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .text-bubble-stack__item { margin: 0 5px; padding: 15px 10px; } .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap:nth-child(4n) { display: none; } .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap:nth-child(5n) { display: none; } .text-bubble-stack__title-wrap--inset { top: -13px; } .text-bubble-stack__title-wrap--inset .text-bubble-stack__title { padding: 0 25px; } .text-bubble-stack__content--inset .text-bubble-stack__item { margin-bottom: 0; } .text-bubble-stack__content--server-wrap, .text-bubble-stack__content--mobile-half { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item, .text-bubble-stack__content--mobile-half .text-bubble-stack__item { min-width: 0; width: 100%; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:nth-of-type(odd), .text-bubble-stack__content--mobile-half .text-bubble-stack__item:nth-of-type(odd) { margin-left: 5px; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:nth-of-type(even), .text-bubble-stack__content--mobile-half .text-bubble-stack__item:nth-of-type(even) { margin-right: 5px; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:last-of-type, .text-bubble-stack__content--mobile-half .text-bubble-stack__item:last-of-type { margin-right: 0; } .text-bubble-stack__content--server-wrap .text-bubble-stack__item:first-of-type, .text-bubble-stack__content--mobile-half .text-bubble-stack__item:first-of-type { margin-left: 0; } .text-bubble-stack__content--one-two-thirds { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .text-bubble-stack__content--one-two-thirds .text-bubble-stack__item:last-of-type { width: 75%; margin-left: 5px; margin-top: 0; } .text-bubble-stack__content--one-two-thirds .text-bubble-stack__item:first-of-type { width: 25%; margin-right: 5px; } .text-bubble-stack__content--one-two-thirds--mobile-full { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .text-bubble-stack__content--one-two-thirds--mobile-full .text-bubble-stack__item { margin-bottom: 0; } .text-bubble-stack__content--one-two-thirds--mobile-full .text-bubble-stack__item:last-of-type { width: 75%; margin-left: 5px; margin-top: 0; } .text-bubble-stack__content--one-two-thirds--mobile-full .text-bubble-stack__item:first-of-type { width: 25%; margin-right: 5px; } .text-bubble-stack__content--mobile-full { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .text-bubble-stack__content--mobile-full .text-bubble-stack__item { min-width: 0; margin-left: 5px; margin-right: 5px; margin-bottom: 0; } .text-bubble-stack__content--mobile-full .text-bubble-stack__item:last-of-type { margin-right: 0; } .text-bubble-stack__content--mobile-full .text-bubble-stack__item:first-of-type { margin-left: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .text-bubble-stack__item { padding: 15px 10px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap:nth-child(4n) { display: block; } .text-bubble-stack__item--server-box .text-bubble-stack__server-icon-wrap:nth-child(5n) { display: block; } } .resource-landing__item-tile { padding-right: 0; } .resource-landing__item-content { background: #ffffff; display: block; } .resource-landing__item-content:hover { text-decoration: none; } .resource-landing .resouce-landing-title { padding-left: 0; } .resource-landing__button-container { z-index: 10; } .button.resource-landing__button { height: 42px; width: 42px; padding: 0; position: relative; } .resource-landing__button-icon { top: 12px; margin: 0 auto; } .resource-landing__item-content-eyebrow { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; overflow: hidden; } .resource-landing__eyebrow-icon-wrap { display: -ms-flexbox; display: flex; padding-right: 10px; } .resource-landing__eyebrow-label { display: -ms-flexbox; display: flex; padding-top: 3px; } .resource-landing__pill-wrap { display: inline-block; margin: -3px 5px 0; } .resource-landing__pill { border-radius: 1000px; text-transform: uppercase; display: inline-block; position: relative; vertical-align: middle; border-style: solid; box-sizing: border-box; background-clip: padding-box; padding: 0 10px; font-size: 12px; } .resource-landing__pill--featured { background: #9351e5; } .resource-landing__item--featured .resource-landing__item-tile .resource-landing__item-inner:before { border-width: 48px 0 0 48px; } .resource-landing__item--featured .resource-landing__item-tile .resource-landing__item-inner:after { border-width: 0 48px 48px 0; } .resource-landing__item--featured .button.resource-landing__button { border-width: 2px; height: 64px; width: 64px; } .resource-landing__item:last-child { padding-bottom: 0 !important; } .resource-landing__item-tile-overlay { display: block; position: relative; background: #232937; } .resource-landing__item-tile-overlay--dark:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #232937; opacity: .80; } .resource-landing__item-tile-overlay:hover { text-decoration: none; } .resource-landing__item-tile .button.tile-grid__button { background: none; } .resource-landing__item-tile .button.tile-grid__button .icon-mini { position: relative; top: -1px; margin-right: 5px; } .resource-landing__item-tile--color-orange .resource-landing__item-inner:before { border-color: transparent transparent transparent #f56753; } .resource-landing__item-tile--color-green .resource-landing__item-inner:before { border-color: transparent transparent transparent #27c97b; } .resource-landing__item-tile--color-purple .resource-landing__item-inner:before { border-color: transparent transparent transparent #9351e5; } .resource-landing__item-tile--color-cyan .resource-landing__item-inner:before { border-color: transparent transparent transparent #20d5ff; } .resource-landing__item-tile--color-blue .resource-landing__item-inner:before { border-color: transparent transparent transparent #2f81f7; } .resource-landing__item-tile--color-pink .resource-landing__item-inner:before { border-color: transparent transparent transparent #ef468b; } .resource-landing__item-tile--folded .resource-landing__item-inner:before, .resource-landing__item-tile--folded .resource-landing__item-inner:after { display: block; content: ''; position: absolute; z-index: 10; } .canvas-pod-light .resource-landing__item-tile--folded .resource-landing__item-inner:after { border-color: transparent #f9f9fa transparent transparent; } .resource-landing__item-tile--folded .resource-landing__item-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 24px 0 0 24px; } .resource-landing__item-tile--folded .resource-landing__item-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 24px 24px 0; border-color: transparent #ffffff transparent transparent; } .resource-landing__item-tile--color-orange .decorate-line:after { background: #f56753; } .resource-landing__item-tile--color-orange .button.resource-landing__button { border-color: #f56753; } .resource-landing__item-tile--color-orange .button.resource-landing__button:hover { border-color: #f56753 !important; background: #f56753; } .resource-landing__item-tile--color-green .decorate-line:after { background: #27c97b; } .resource-landing__item-tile--color-green .button.resource-landing__button { border-color: #27c97b; } .resource-landing__item-tile--color-green .button.resource-landing__button:hover { border-color: #27c97b !important; background: #27c97b; } .resource-landing__item-tile--color-purple .decorate-line:after { background: #9351e5; } .resource-landing__item-tile--color-purple .button.resource-landing__button { border-color: #9351e5; } .resource-landing__item-tile--color-purple .button.resource-landing__button:hover { border-color: #9351e5 !important; background: #9351e5; } .resource-landing__item-tile--color-cyan .decorate-line:after { background: #20d5ff; } .resource-landing__item-tile--color-cyan .button.resource-landing__button { border-color: #20d5ff; } .resource-landing__item-tile--color-cyan .button.resource-landing__button:hover { border-color: #20d5ff !important; background: #20d5ff; } .resource-landing__item-tile--color-blue .decorate-line:after { background: #2f81f7; } .resource-landing__item-tile--color-blue .button.resource-landing__button { border-color: #2f81f7; } .resource-landing__item-tile--color-blue .button.resource-landing__button:hover { border-color: #2f81f7 !important; background: #2f81f7; } .resource-landing__item-tile--color-pink .decorate-line:after { background: #ef468b; } .resource-landing__item-tile--color-pink .button.resource-landing__button { border-color: #ef468b; } .resource-landing__item-tile--color-pink .button.resource-landing__button:hover { border-color: #ef468b !important; background: #ef468b; } @media (max-width: 768px) { .resource-landing__item-content { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .resource-landing__item-content { transition: box-shadow 150ms ease-in; } .resource-landing__item-content:hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15), 0 6px 10px 0 rgba(0, 0, 0, 0.1); } } .resource-single__document-title-inner:before, .resource-single__document-title-inner:after { display: block; content: ''; position: absolute; } .canvas-pod-light .resource-single__document-title-inner:after { border-color: transparent #f9f9fa transparent transparent; } .resource-single__document-title-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent #ffffff; } .resource-single__document-title-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #ffffff transparent transparent; } .resource-single .button.resource-single__button .icon-mini { position: relative; top: -2px; margin-right: 5px; } .resource-single__document-title-overlay-wrap { display: none; -ms-flex-item-align: baseline; align-self: baseline; } .resource-single__document-media-wrap { background: #232937; position: relative; } .resource-single__document-media-wrap--overlay:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #232937; opacity: .80; } .resource-single__document-media-wrap--overlay .button.resource-single__button { color: #ffffff !important; } .resource-single__document-media-wrap .resource-single__cta-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .resource-single__document-media-wrap .resource-single__cta-container-inner { width: 100%; } .resource-single__document-media-wrap iframe { height: 100%; } .resource-single__cta-container { position: relative; } .resource-single__document-title-watermark { display: none; position: absolute; left: 0; bottom: 1.83486239%; width: 100%; opacity: .30; } .resource-single__document-title-watermark-title { color: #ffffff; } .resource-single__document-title-overlay { width: 100%; position: relative; background: #232937; } .resource-single__document-title-wrap { position: absolute; padding: 10px 5px 10px; top: 21.10091743%; min-height: 27.52293578%; left: 0; width: 100%; } .resource-single__document-title { color: #ffffff; } .resource-single--color-orange .resource-single__document-title-wrap { background-color: #f56753; } .resource-single--color-orange .resource-single__document-title-inner:before { border-color: transparent transparent transparent #f56753; } .resource-single--color-orange .resource-single__eyebrow-title { display: inline-block; } .resource-single--color-orange .resource-single__eyebrow-title:after { background: #f56753; } .resource-single--color-orange .button.resource-single__button { border-color: #f56753; color: #f56753; } .resource-single--color-orange .button.resource-single__button:hover { color: #ffffff; border-color: #f56753 !important; background: #f56753; } .resource-single--color-green .resource-single__document-title-wrap { background-color: #27c97b; } .resource-single--color-green .resource-single__document-title-inner:before { border-color: transparent transparent transparent #27c97b; } .resource-single--color-green .resource-single__eyebrow-title:after { background: #27c97b; } .resource-single--color-green .resource-single__eyebrow-title:after { background: #27c97b; } .resource-single--color-green .button.resource-single__button { border-color: #27c97b; color: #27c97b; } .resource-single--color-green .button.resource-single__button:hover { color: #ffffff; border-color: #27c97b !important; background: #27c97b; } .resource-single--color-purple .resource-single__document-title-wrap { background-color: #9351e5; } .resource-single--color-purple .resource-single__document-title-inner:before { border-color: transparent transparent transparent #9351e5; } .resource-single--color-purple .resource-single__eyebrow-title:after { background: #9351e5; } .resource-single--color-purple .button.resource-single__button { border-color: #9351e5; color: #9351e5; } .resource-single--color-purple .button.resource-single__button:hover { color: #ffffff; border-color: #9351e5 !important; background: #9351e5; } .resource-single--color-cyan .resource-single__document-title-wrap { background-color: #20d5ff; } .resource-single--color-cyan .resource-single__document-title-inner:before { border-color: transparent transparent transparent #20d5ff; } .resource-single--color-cyan .resource-single__eyebrow-title:after { background: #20d5ff; } .resource-single--color-cyan .button.resource-single__button { border-color: #20d5ff; color: #20d5ff; } .resource-single--color-cyan .button.resource-single__button:hover { color: #ffffff; border-color: #20d5ff !important; background: #20d5ff; } .resource-single--color-blue .resource-single__document-title-wrap { background-color: #2f81f7; } .resource-single--color-blue .resource-single__document-title-inner:before { border-color: transparent transparent transparent #2f81f7; } .resource-single--color-blue .resource-single__eyebrow-title:after { background: #2f81f7; } .resource-single--color-blue .button.resource-single__button { border-color: #2f81f7; color: #2f81f7; } .resource-single--color-blue .button.resource-single__button:hover { color: #ffffff; border-color: #2f81f7 !important; background: #2f81f7; } .resource-single--color-pink .resource-single__document-title-wrap { background-color: #ef468b; } .resource-single--color-pink .resource-single__document-title-inner:before { border-color: transparent transparent transparent #ef468b; } .resource-single--color-pink .resource-single__eyebrow-title:after { background: #ef468b; } .resource-single--color-pink .button.resource-single__button { border-color: #ef468b; color: #ef468b; } .resource-single--color-pink .button.resource-single__button:hover { color: #ffffff; border-color: #ef468b !important; background: #ef468b; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 480px) { .resource-single__document-title-wrap { padding: 15px 5px 15px; } .resource-single__document-title-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent #ffffff; } .resource-single__document-title-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #ffffff transparent transparent; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .resource-single__document-title-overlay-wrap { display: block; } .resource-single__document-title-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 40px; border-color: transparent transparent transparent #ffffff; } .resource-single__document-title-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #ffffff transparent transparent; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .resource-single__document-title-wrap { padding: 20px 30px 20px; } .resource-single__document-title-watermark { display: block; } .resource-single__document-title-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 60px 0 0 60px; border-color: transparent transparent transparent #ffffff; } .resource-single__document-title-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 60px 60px 0; border-color: transparent #ffffff transparent transparent; } .related-resources .row-grid { margin-bottom: 0 !important; } .related-resources .tile-grid__item { margin-bottom: 0; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { .resource-single__document-title-wrap { padding: 20px 30px 20px; } .resource-single__document-title-inner:before { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 72px 0 0 72px; border-color: transparent transparent transparent #ffffff; } .resource-single__document-title-inner:after { top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 72px 72px 0; border-color: transparent #ffffff transparent transparent; } } .dual-panel__wrapper { border: 1px solid #ebebed; border-radius: 7px; overflow: hidden; position: relative; } .dual-panel__wrapper:after { background: #ebebed; content: ''; display: block; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; } .dual-panel__image-container .image { margin: 0 auto; } .dual-panel__image-container--small .image { width: 184px; } .dual-panel__image-container--medium .image { width: 75%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { .dual-panel__wrapper:after { height: 100%; left: 50%; top: 0; width: 1px; } .dual-panel__image-container--small .image { width: 60%; } .dual-panel__image-container--medium .image { width: 75%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .dual-panel__image-container--small .image { width: 50%; } .dual-panel__image-container--medium .image { width: 75%; } } .full-height { height: 100%; } .vertical-carousel--slide { position: relative; overflow: hidden; } .vertical-carousel__content--slide-copy { -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; text-align: left; background-color: #9351e5; overflow: hidden; padding: 24px; padding-bottom: 48px; } .vertical-carousel__quote-wrapper { padding-left: 30px; border-left: 1px solid #d6d8dc; } .vertical-carousel__quote { font-style: italic; } .vertical-carousel__quote-context { color: #d6d8dc; } .vertical-carousel__column-wrap { position: absolute; top: 0; } .bullet-list { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; z-index: 100; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); } .bullet-list__item { margin: 0 16px 0 0; cursor: pointer; } .bullet-list__bullet { display: block; height: 10px; width: 10px; background-color: #adb0b8; border-radius: 50%; transition: background-color 0.5s; margin: 0; } .bullet-list__bullet.active { background-color: #5b6171; } .vertical-carousel__slide { width: 100%; background: #9351e5; } .vertical-carousel__slide + .vertical-carousel__slide { position: absolute; top: 0; left: 0; } .vertical-carousel-fade-wrapper { position: relative; } .vertical-carousel__background-img { height: 350px; position: relative; } .vertical-carousel__content-container .ghost-center-wrap::before { display: none; } .vertical-carousel__slide .vertical-carousel__content--slide-image-wrapper, .vertical-carousel__slide .vertical-carousel-fade-wrapper { opacity: 0; transition: all 0.5s; } .vertical-carousel__slide.active .vertical-carousel__content--slide-image-wrapper, .vertical-carousel__slide.active .vertical-carousel-fade-wrapper { opacity: 1; z-index: 1; } @media (min-width: 768px) { .vertical-carousel__background-img { width: 100%; height: 100%; top: 0; left: 0; position: absolute; margin: 0; } .vertical-carousel__slide { height: 500px; } .vertical-carousel__column-wrap { left: 384px; } .vertical-carousel__image-column { width: 320px; } .vertical-carousel__content-container { padding-bottom: 0 !important; padding-top: 0 !important; } .vertical-carousel__content-container .ghost-center-wrap::before { display: inline-block; } .vertical-carousel__content--slide-copy { padding: 64px 64px; } .vertical-carousel--slide { width: 100%; margin-left: auto; margin-right: auto; } .vertical-carousel__content--slide-image-wrapper { background-color: #9351e5; } .case-study-image { max-width: 256px; } .case-study-copy { max-width: 384px; } .vertical-carousel__content--slide-copy { -ms-flex-order: 2; order: 2; -ms-flex-preferred-size: 50%; flex-basis: 50%; background-color: #9351e5; padding: 48px 32px; } .bullet-list { position: absolute; bottom: 48px; z-index: 100; transform: none; left: auto; } .bullet-list__bullet { height: 8px; width: 8px; } } @media (min-width: 1400px) { .vertical-carousel__content--slide-copy { padding: 80px; } .bullet-list { bottom: 80px; } } .content-lead-block__button--contains-icon { padding-right: 0; } .content-lead-block__button--contains-icon .icon { margin-right: 10px; } .content-lead-block__button--gray { color: #848995 !important; } .content-lead-block__button--gray .icon { fill: #848995; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { .content-lead-block--flush-top-medium .content-lead-block__content { padding-top: 0 !important; } .content-lead-block--flush-bottom-medium .content-lead-block__content { padding-bottom: 0 !important; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modals ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- modals/modal-prompt-amazon-cloudformation.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Get Started) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #modal-prompt-amazon-cloudformation #modal-prompt-amazon-cloudformation-stack-configuration .button { width: 50%; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- modals/modal-get-started.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Get Started) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform { position: relative; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform a:hover { text-decoration: none; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform a:hover .modal-get-started-platform-logo { box-shadow: inset 0px 0px 0px 1px #9351e5; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform a:hover .modal-get-started-platform-title { color: #9351e5; opacity: 1; filter: alpha(opacity=100); } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform.modal-get-started-platform-amazon a .modal-get-started-platform-logo { box-shadow: inset 0px 0px 0px 1px #27c97b; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform.modal-get-started-platform-amazon a:hover .modal-get-started-platform-logo { box-shadow: inset 0px 0px 0px 1px #27c97b; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform.modal-get-started-platform-amazon a:hover .modal-get-started-platform-title { color: #27c97b; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label-wrapper { position: absolute; top: 0px; left: 0px; display: block; width: 100%; text-align: center; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label { background: #ebebed; display: inline-block; margin: 0 auto; font-size: 0.8em; position: relative; top: -10px; padding: 0px 10px; border-radius: 10px; color: #848995; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label.label-primary { color: #ffffff; background: #9351e5; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label.label-success { color: #ffffff; background: #27c97b; font-weight: 400; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .modal-get-started-platform-logo { width: 100%; height: auto; box-shadow: inset 0px 0px 0px 1px #ebebed; border-radius: 6px; padding: 12px; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .modal-get-started-platform-title { display: block; text-align: center; text-decoration: none; opacity: 0.5; filter: alpha(opacity=50); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Get Started) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .modal-get-started-platform-logo { padding: 8px; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label { border-radius: 11px; top: -11px; padding: 0px 11px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Get Started) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .modal-get-started-platform-logo { padding: 12px; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label { border-radius: 12px; top: -12px; padding: 0px 12px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Get Started) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .modal-get-started-platform-logo { padding: 16px; } #modal-prompt-product-cloud .modal-get-started-platforms .modal-get-started-platform .label { border-radius: 12px; top: -12px; padding: 0px 12px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- modals/modal-login.less ------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Variables ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Overview Benefits ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: #ffffff; padding: 6px; width: 100%; position: relative; } #modal-login .modal-login-platforms .modal-login-platform:hover { box-shadow: 0px 0px 0px 1px #9351e5; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-label { background: #2f81f7; color: #ffffff; text-align: center; width: 50px; border-radius: 4px; position: absolute; top: -10px; left: 50%; margin-left: -25px; box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { list-style: none; display: block; margin: 0 auto; height: 70px; background-size: 140px 280px; background-image: url("../images/views/downloads/downloads-platforms.png"); position: relative; margin-bottom: 9px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-google-cloud .modal-login-platform-icon { width: 63px; background-position: 0px 0px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-digitalocean .modal-login-platform-icon { width: 106.4px; background-position: 0px -70px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-mesos .modal-login-platform-icon { width: 54.6px; background-position: 0px -210px; } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 480px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform { padding: 1.25%; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-label { width: 50px; top: -10px; margin-left: -25px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { height: 70px; background-size: 140px 280px; margin-bottom: 9px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-google-cloud .modal-login-platform-icon { width: 63px; background-position: 0px 0px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-digitalocean .modal-login-platform-icon { width: 106.4px; background-position: 0px -70px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-mesos .modal-login-platform-icon { width: 54.6px; background-position: 0px -210px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform { padding: 8px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-label { width: 60px; top: -11px; margin-left: -30px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { height: 80px; background-size: 160px 320px; margin-bottom: 9px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-google-cloud .modal-login-platform-icon { width: 72px; background-position: 0px 0px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-digitalocean .modal-login-platform-icon { width: 121.6px; background-position: 0px -80px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-mesos .modal-login-platform-icon { width: 62.4px; background-position: 0px -240px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 992px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform { padding: 12px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-label { width: 60px; top: -12px; margin-left: -30px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { height: 80px; background-size: 160px 320px; margin-bottom: 9px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-google-cloud .modal-login-platform-icon { width: 72px; background-position: 0px 0px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-digitalocean .modal-login-platform-icon { width: 121.6px; background-position: 0px -80px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-mesos .modal-login-platform-icon { width: 62.4px; background-position: 0px -240px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1400px) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform { padding: 16px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-label { width: 60px; top: -12px; margin-left: -30px; } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { height: 80px; background-size: 160px 320px; margin-bottom: 9px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-google-cloud .modal-login-platform-icon { width: 72px; background-position: 0px 0px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-digitalocean .modal-login-platform-icon { width: 121.6px; background-position: 0px -80px; } #modal-login .modal-login-platforms .modal-login-platform.modal-login-platform-mesos .modal-login-platform-icon { width: 62.4px; background-position: 0px -240px; } } /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Screen Resolution: 2x ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ #modal-login { /* ---------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------- Modal (Login) Platforms ------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- */ } #modal-login .modal-login-platforms .modal-login-platform .modal-login-platform-icon { background-image: url("../images/views/downloads/downloads-platforms@2x.png"); } } /*# sourceMappingURL=styles.css.map */