/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /*! variables.css */ /****************************** V A R I A B L E S ******************************/ :root { --transition: transition: all 0.5s ease-in-out; --border-radius: 8px; } /****************************** C O L O R S ******************************/ :root { --primary500: #11221B; /* dark green */ --primary400: #224536; --primary300: #224536; --primary200: #54AB86; --primary100: #BBDDCE; --accent500: #E2FFCC; --accent400: #9CFF4C; --accent300: #B7F089; --accent300_filter: invert(100%) sepia(18%) saturate(7421%) hue-rotate(314deg) brightness(108%) contrast(112%); --accent200: #5BCC00; --accent200_filter: invert(55%) sepia(99%) saturate(875%) hue-rotate(51deg) brightness(99%) contrast(103%); --accent100: #2D6600; --neutral06: #1A1A1A; /* dark grey */ --neutral05: #4C4C4C; --neutral04: #7F7F7F; --neutral03: #B2B2B2; --neutral02: #B2B2B2; --neutral01: #F2F2F2; /* white grey */ --black: #000000; --white: #FFFFFF; --text-color-dark: #1A1A1A; --text-color-light: #FFFFFF; --button_dark : var(--primary500); --darkgreen: #224536; --darkgreen_filter: invert(17%) sepia(75%) saturate(314%) hue-rotate(102deg) brightness(98%) contrast(86%); --darkgreen_gradient: linear-gradient(180deg,rgba(34, 69, 54, 1) 0%, rgba(31, 51, 43, 1) 100%); --freshgreen: #B7F089; --feshgreen_filter: invert(88%) sepia(10%) saturate(1598%) hue-rotate(43deg) brightness(106%) contrast(88%); --freshgreen_gradient:linear-gradient(180deg,rgba(183, 240, 137, 1) 0%, rgba(212, 255, 166, 1) 100%); --brightgreen: #EEFAE1; --brightgreen_filter: invert(96%) sepia(15%) saturate(312%) hue-rotate(34deg) brightness(102%) contrast(96%); --brightgreen_gradient: linear-gradient(90deg,rgba(238, 250, 225, 0.3) 0%, rgba(238, 250, 225, 0.05) 100%); --brightgreen5: rgba(238,250,225,.05); --brightgreen15: rgba(238,250,225,.15); --brightgreen30: rgba(238,250,225,.3); --gradient-green: linear-gradient(98deg, #BFF593 -6.41%, #72FF00 79.82%); } /****************************** E X P L A N A T I O N ******************************/ /* name of variables: --TAG_DEFINITION: value using clamp E.g. clamp(1.6rem, calc(1.67rem + -0.19vw), 1.4rem); clamp generator: https://observablehq.com/@saneef/fluid-typography-css-clamp-value-generator Viewport: min = 360px Viewport: max = 1440 RemBase = 10 Color Filter for SVG: https://codepen.io/sosuke/pen/Pjoqqp px to em https://www.w3schools.com/cssref/css_pxtoemconversion.php */ /****************************** C L A M P S ******************************/ /* https://observablehq.com/@saneef/fluid-typography-css-clamp-value-generator * * Viewport: min = 360px * Viewport: max = 1280px (22.12.25 - b24) * RemBase = 10 * * Column Width: 80px * Gaps: 25px * 80 x 12 + 25 x 11 = 960 + 275 = 1235 */ :root { /* --clamp_392-220 : clamp(22rem, calc(14.93rem + 19.63vw), 39.2rem); --clamp_316-158 : clamp(15.8rem, calc(9.31rem + 18.04vw), 31.6rem); --clamp_300-150 : clamp(15rem, calc(8.04rem + 19.33vw), 30rem); --clamp_210-120 :clamp(12rem, calc(8.3rem + 10.27vw), 21rem); --clamp_178-120 : clamp(12rem, calc(9.95rem + 5.71vw), 17rem); --clamp_120-48 : clamp(4.8rem, calc(1.84rem + 8.22vw), 12rem); --clamp_108-40 : clamp(4rem, calc(1.21rem + 7.76vw), 10.8rem); --clamp_107-20 : clamp(2rem, calc(-1.58rem + 9.93vw), 10.7rem); --clamp_100-40 : clamp(4rem, calc(1.66rem + 7.32vw), 10rem); --clamp_96-48 : clamp(4.8rem, calc(2.93rem + 5.85vw), 9.6rem); --clamp_64-32 : clamp(3.2rem, calc(1.95rem + 3.9vw), 6.4rem); --clamp_56-36: clamp(3.6rem, calc(2.78rem + 2.28vw), 5.6rem); --clamp_50-30 : clamp(3rem, calc(2.18rem + 2.28vw), 5rem); --clamp_48-24 : clamp(2.4rem, calc(1.41rem + 2.74vw), 4.8rem); --clamp_40-24 : clamp(2.4rem, calc(1.74rem + 1.83vw), 4rem); */ --clamp_120-60 : clamp(6rem, calc(3.764rem + 6.21vw), 12rem); /* Section Space Top/Bottom */ --clamp_84-48 : clamp(4.8rem, calc(3.458rem + 3.73vw), 8.4rem); /* h1 */ --clamp_60-44 : clamp(4.4rem, calc(3.804rem + 1.66vw), 6rem); /* h2 */ --clamp_48-32 : clamp(3.2rem, calc(2.604rem + 1.66vw), 4.8rem); /* h3 */ --clamp_40-24 : clamp(2.4rem, calc(1.804rem + 1.66vw), 4rem); /* h4 */ --clamp_32-20 : clamp(2rem, calc(1.553rem + 1.24vw), 3.2rem); /* h5 */ --clamp_26-18 : clamp(1.8rem, calc(1.502rem + 0.83vw), 2.6rem); /* h6 */ --clamp_16-16 : clamp(1.6rem, calc(1.6rem + 0vw), 1.6rem); /* Tagline/Topline */ --clamp_28-22 : clamp(2.2rem, calc(1.976rem + 0.62vw), 2.8rem); /* Hero Home Topline */ --clamp_26-20 : clamp(2rem, calc(1.776rem + 0.62vw), 2.6rem); /* Intro */ --clamp_30-20 : clamp(2rem, calc(1.627rem + 1.04vw), 3rem); /* Gap */ --clamp_57-24 : clamp(2.4rem, calc(1.17rem + 3.42vw), 5.7rem); /* Container Padding Left/Right */ --clamp_160-80 : clamp(8rem, calc(5.019rem + 8.28vw), 16rem); /* Hero: padding top */ /* others */ --clamp_56-28 : clamp(2.8rem, calc(1.757rem + 2.9vw), 5.6rem); /* Card Padding */ --clamp_48-24 : clamp(2.4rem, calc(1.506rem + 2.48vw), 4.8rem); /* Card Padding */ --clamp_24-12 : clamp(1.2rem, calc(0.753rem + 1.24vw), 2.4rem); /* Card Padding */ --clamp_32-16 : clamp(1.6rem, calc(1.004rem + 1.66vw), 3.2rem); --clamp_30-16 : clamp(1.6rem, calc(1.058rem + 1.51vw), 3rem); --clamp_24-16 : clamp(1.6rem, calc(1.302rem + 0.83vw), 2.4rem); } /****************************** E X P L A N A T I O N ******************************/ /* name of variables: --TAG_DEFINITION: value using clamp E.g. clamp(1.6rem, calc(1.67rem + -0.19vw), 1.4rem); clamp generator: https://observablehq.com/@saneef/fluid-typography-css-clamp-value-generator Viewport: min = 360px Viewport: max = Breite Container Viewport: max = 1344px RemBase = 10 Color Filter for SVG: https://codepen.io/sosuke/pen/Pjoqqp px to em https://www.w3schools.com/cssref/css_pxtoemconversion.php 100 – Thin. 200 – Extra Light (Ultra Light) 300 – Light. 400 – Normal. 500 – Medium. 600 – Semi Bold (Demi Bold) 700 – Bold. 800 – Extra Bold (Ultra Bold) 900 - Black */ :root { /* B R E A K P O I N T S cant be used :-( --breakpoint_min_sm: 688px; --breakpoint_min_md: 1018px; --breakpoint_min_lg: 1921px;*/ --container-width: 1440px; --row-width: 1326px; /* S E C T I O N P A D D I N G S */ --section_padding-top: var(--clamp_120-60); --section_padding-bottom: var(--clamp_120-60); /* --section_padding-top_medium: var(--clamp_64-32); --section_padding-bottom_medium: var(--clamp_64-32); --section_padding-top_small: var(--clamp_32-16); --section_padding-bottom_small: var(--clamp_32-16); */ --section_padding-top_none: 0; --section_padding-bottom_none: 0; --section_padding-right: 0; --section_padding-left: 0; /* G A P S */ --section_row-gap: var(--clamp_30-20); /* space between rows */ --section_column-gap: var(--clamp_30-20); /* space between columns */ } /****************************** T Y P O G R A P H Y ******************************/ :root { /* B O D Y */ --body_font-family: 'MaisonNeue', Arial, Helvetica, sans-serif; --body_color: var(--text-color-dark); --body_font-size: 1.8rem; --body_font-weight: 400; --body_line-height: 1.4; --body_margin-bottom: var(--clamp_24-16); --headline_font-family: 'MaisonNeueExtended', Arial, Helvetica, sans-serif; /* H 1 */ --h1_color: var(--text-color-dark); --h1_font-size: var(--clamp_84-48); --h1_font-weight: 500; --h1_line-height: 1.1; --h1_margin-bottom: 0.3em; --h1_text-transform: none; --h1_letter-spacing: 0.84; --h2_margin-bottom: var(--clamp_24-16); /* H 2 */ --h2_color: var(--text-color-dark); --h2_font-size: var(--clamp_60-44); --h2_font-weight: 500; --h2_line-height: 1.15; --h2_margin-top: clamp(5rem, calc(3.98rem + 2.83vw), 8rem); --h2_margin-bottom: var(--clamp_24-16); /* H 3 */ --h3_color: var(--text-color-dark); --h3_font-size: var(--clamp_48-32); --h3_font-weight: 500; --h3_line-height: 1.3333; --h3_margin-bottom: 0.8em; /* H 4 */ --h4_color: var(--text-color-dark); --h4_font-size: var(--clamp_40-24); --h4_font-weight: 400; --h4_line-height: 1.2; --h4_margin-bottom: 0.8em; /* H 5 */ --h5_color: var(--text-color-dark); --h5_font-size: var(--clamp_32-20); --h5_font-weight: 400; --h5_line-height: 1.2; --h5_margin-bottom: 0.8rem; /* H 6 */ --h6_color: var(--text-color-dark); --h6_font-size: var(--clamp_26-18); --h6_font-weight: 400; --h6_line-height: 1.2; --h6_margin-bottom: 0.8rem; /* T O P L I N E */ --topline_font-size: 1.6rem; --topline_font-weight: 700; --topline_color: var(--text-color-dark); --topline_line-height: 1.5; --topline_letter-spacing: normal; --topline_margin-bottom: 1em; --topline_text-transform: none; /* I N T R O */ --intro_font-size: var(--clamp_26-20); --intro_font-weight: 500; --intro_color: var(--text-color-dark); --intro_line-height: 1.4; --intro_letter-spacing: -0.86px; --intro_margin-bottom: 2.4rem; } /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; background-repeat: no-repeat; } html { height: 100%; scroll-behavior: smooth; font-size: 62.5%; } html, body, nav, h1, h2, h3, h4, h5, h6, p, a, i, q, button, span { margin: 0; padding: 0; } /****************************** A C C E S S I B I L I T Y ******************************/ .skip-link { position: absolute; top: -40px; left: 0; background: #005fcc; color: white; padding: 8px 16px; z-index: 100; text-decoration: none; } .skip-link:focus { top: 0; } .sr-only, .visuallyhidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /*! _grid.css */ /* S E C T I O N */ section, header, footer { position: relative; /*padding: var(--section_padding-top) var(--section_padding-right) var(--section_padding-bottom) var(--section_padding-left);*/ } section { overflow: hidden; } section.section_padding-top_half { padding-top: calc(var(--section_padding-top) / 2); } section.section_padding-bottom_half { padding-bottom: calc(var(--section_padding-bottom) / 2); } section.section_padding-top_medium { padding-top: calc(var(--section_padding-top) / 3 * 2); } section.section_padding-bottom_medium { padding-bottom: calc(var(--section_padding-bottom) / 3 * 2); } section.section_padding-top_small { padding-top: calc(var(--section_padding-top) / 3); } section.section_padding-bottom_small { padding-bottom: calc(var(--section_padding-bottom) / 3); } .container.section_padding-top_full { padding-top: var(--section_padding-top); } .container.section_padding-bottom_full { padding-bottom: var(--section_padding-bottom); } .container.section_padding-top_half { padding-top: calc(var(--section_padding-top) / 2); } .container.section_padding-bottom_half { padding-bottom: calc(var(--section_padding-bottom) / 2); } .container.section_padding-top_medium { padding-top: calc(var(--section_padding-top) / 3 * 2); } .container.section_padding-bottom_medium { padding-bottom: calc(var(--section_padding-bottom) / 3 * 2); } .container.section_padding-top_small { padding-top: calc(var(--section_padding-top) / 3); } .container.section_padding-bottom_small { padding-bottom: calc(var(--section_padding-bottom) / 3); } .container.section_padding-top_none { padding-top: var(--section_padding-top_none); } .container.section_padding-bottom_none { padding-bottom: var(--section_padding-bottom_none); } /* C O N T A I N E R */ .container { position: relative; max-width: var(--container-width); width: 100%; margin-right: auto; margin-left: auto; display: grid; column-gap: var(--section_column-gap); row-gap: var(--section_row-gap); padding-left: var(--clamp_57-24); padding-right: var(--clamp_57-24); } .container.rounded-corners { border-top-left-radius: 20px; border-top-right-radius: 20px; } /* R O W */ .row { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--section_column-gap); row-gap: var(--section_row-gap); width: 100%; max-width: var(--row-width); margin-right: auto; margin-left: auto; } .row.row_gap-none { row-gap: 0; } .row.col_gap-none { column-gap: 0; } .row.block { display: block; } .row.flex { display: flex; flex-wrap: wrap; gap: unset; } /* V E R T I C A L C E N T E R E D */ .vertical-centered { display: flex; align-items: center; } .vertical-alignment { width: 100%; } /* XS */ @media (min-width: 0px) { .row { column-gap: 0; } .row_xs { row-gap: var(--section_row-gap); } .row_xs_2 { row-gap: calc(var(--section_row-gap) * 2); } .row_xs_3 { row-gap: calc(var(--section_row-gap) * 3); } .col-start-xs-1 { grid-column-start: 1; } .col-start-xs-2 { grid-column-start: 2; } .col-start-xs-3 { grid-column-start: 3; } .col-start-xs-4 { grid-column-start: 4; } .col-start-xs-5 { grid-column-start: 5; } .col-start-xs-6 { grid-column-start: 6; } .col-start-xs-7 { grid-column-start: 7; } .col-start-xs-8 { grid-column-start: 8; } .col-start-xs-9 { grid-column-start: 9; } .col-start-xs-10 { grid-column-start: 10; } .col-start-xs-11 { grid-column-start: 11; } .col-start-xs-12 { grid-column-start: 12; } .col-xs-1 { grid-column-end: span 1; } .col-xs-2 { grid-column-end: span 2; } .col-xs-3 { grid-column-end: span 3; } .col-xs-4 { grid-column-end: span 4; } .col-xs-5 { grid-column-end: span 5; } .col-xs-6 { grid-column-end: span 6; } .col-xs-7 { grid-column-end: span 7; } .col-xs-8 { grid-column-end: span 8; } .col-xs-9 { grid-column-end: span 9; } .col-xs-10 { grid-column-end: span 10; } .col-xs-11 { grid-column-end: span 11; } .col-xs-12 { grid-column-end: span 12; } .xs_display-none { display: none !important; } .xs_display-block { display: block !important; } .xs_display-inline { display: inline !important; } .xs_display-inline-block { display: inline-block !important; } .xs_display-flex { display: flex !important; } .xs_display-grid { display: grid !important; } .text-left_xs { text-align: left !important; } .text-center_xs { text-align: center !important; } .text-right_xs { text-align: right !important; } .reverse-order_xs { grid-row: 1; } .column-count-2 { column-count: 1; } } /* SM */ @media (min-width: 600px) { .col-start-sm-1 { grid-column-start: 1; } .col-start-sm-2 { grid-column-start: 2; } .col-start-sm-3 { grid-column-start: 3; } .col-start-sm-4 { grid-column-start: 4; } .col-start-sm-5 { grid-column-start: 5; } .col-start-sm-6 { grid-column-start: 6; } .col-start-sm-7 { grid-column-start: 7; } .col-start-sm-8 { grid-column-start: 8; } .col-start-sm-9 { grid-column-start: 9; } .col-start-sm-10 { grid-column-start: 10; } .col-start-sm-11 { grid-column-start: 11; } .col-start-sm-12 { grid-column-start: 12; } .col-sm-1 { grid-column-end: span 1; } .col-sm-2 { grid-column-end: span 2; } .col-sm-3 { grid-column-end: span 3; } .col-sm-4 { grid-column-end: span 4; } .col-sm-5 { grid-column-end: span 5; } .col-sm-6 { grid-column-end: span 6; } .col-sm-7 { grid-column-end: span 7; } .col-sm-8 { grid-column-end: span 8; } .col-sm-9 { grid-column-end: span 9; } .col-sm-10 { grid-column-end: span 10; } .col-sm-11 { grid-column-end: span 11; } .col-sm-12 { grid-column-end: span 12; } .row { column-gap: var(--section_column-gap); } .sm_show { display: inline-block !important; } .sm_hide { display: none !important; } .sm_display-block { display: block !important; } .sm_display-inline { display: inline !important; } .sm_display-inline-block { display: inline-block !important; } .sm_display-flex { display: flex !important; } .sm_display-grid { display: grid !important; } .sm_display-none { display: none !important; } .text-left_sm { text-align: left !important; } .text-center_sm { text-align: center !important; } .text-right_sm { text-align: right !important; } .reverse-order_sm { grid-row: 1; } .column-count-2 { column-count: 2; column-gap: var(--section_row-gap); } } /* MD */ @media (min-width: 1080px) { .col-start-md-1 { grid-column-start:1; } .col-start-md-2 { grid-column-start:2; } .col-start-md-3 { grid-column-start:3; } .col-start-md-4 { grid-column-start:4; } .col-start-md-5 { grid-column-start:5; } .col-start-md-6 { grid-column-start:6; } .col-start-md-7 { grid-column-start:7; } .col-start-md-8 { grid-column-start:8; } .col-start-md-9 { grid-column-start:9; } .col-start-md-10 { grid-column-start:10; } .col-start-md-11 { grid-column-start:11; } .col-start-md-12 { grid-column-start:12; } .col-md-1 { grid-column-end: span 1; } .col-md-2 { grid-column-end: span 2; } .col-md-3 { grid-column-end: span 3; } .col-md-4 { grid-column-end: span 4; } .col-md-5 { grid-column-end: span 5; } .col-md-6 { grid-column-end: span 6; } .col-md-7 { grid-column-end: span 7; } .col-md-8 { grid-column-end: span 8; } .col-md-9 { grid-column-end: span 9; } .col-md-10 { grid-column-end: span 10; } .col-md-11 { grid-column-end: span 11; } .col-md-12 { grid-column-end: span 12; } .md_display-block { display: block !important; } .md_display-inline { display: inline !important; } .md_display-inline-block { display: inline-block !important; } .md_display-flex { display: flex !important; } .md_display-grid { display: grid !important; } .md_display-none { display: none !important; } .md_show { display: inline-block !important; } .md_hide { display: none !important; } .text-left_md { text-align: left !important; } .text-center_md { text-align: center !important; } .text-right_md { text-align: right !important; } } /* LG */ @media (min-width: 1921px) { .col-start-lg-1 { grid-column-start:1; } .col-start-lg-2 { grid-column-start:2; } .col-start-lg-3 { grid-column-start:3; } .col-start-lg-4 { grid-column-start:4; } .col-start-lg-5 { grid-column-start:5; } .col-start-lg-6 { grid-column-start:6; } .col-start-lg-7 { grid-column-start:7; } .col-start-lg-8 { grid-column-start:8; } .col-start-lg-9 { grid-column-start:9; } .col-start-lg-10 { grid-column-start:10; } .col-start-lg-11 { grid-column-start:11; } .col-start-lg-12 { grid-column-start:12; } .col-lg-1 { grid-column-end: span 1; } .col-lg-2 { grid-column-end: span 2; } .col-lg-3 { grid-column-end: span 3; } .col-lg-4 { grid-column-end: span 4; } .col-lg-5 { grid-column-end: span 5; } .col-lg-6 { grid-column-end: span 6; } .col-lg-7 { grid-column-end: span 7; } .col-lg-8 { grid-column-end: span 8; } .col-lg-9 { grid-column-end: span 9; } .col-lg-10 { grid-column-end: span 10; } .col-lg-11 { grid-column-end: span 11; } .col-lg-12 { grid-column-end: span 12; } .lg_display-block { display: block !important; } .lg_display-inline { display: inline !important; } .lg-display-inline-block { display: inline-block !important; } .lg_display-flex { display: flex !important; } .lg_display-grid { display: grid !important; } .lg_display-none { display: none !important; } .lg_show { display: inline-block !important; } .lg_hide { display: none !important; } .text-left_lg { text-align: left !important; } .text-center_lg { text-align: center !important; } .text-right_lg { text-align: right !important; } } /* Elements Base HTML elements are styled in this section (,

, ,

,