/* --------------------------------------------------- Author: uSkinned License: uSkinned Commercial License (https://uSkinned.net/license) --------------------------------------------------- */ /* --------------------------------------------------- Contents 1. Font Imports 2. Global non-generated variables 3. Global generated variables --------------------------------------------------- */ @import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap'); :root { /* Expand navigation width */ --expand-nav-width: 60px; /* More header sizes */ --small-header-half: calc(var(--small-header) / 2); --large-header-half: calc(var(--large-header) / 2); --large-header-quarter: calc(var(--large-header) / 4); /* Main navigation sizes */ --nav-main-height: var(--large-header); /* Generic palette */ --true-black:0,0,0; --true-white:255,255,255; --form-errors:144,62,60; --form-warning:240,173,78; --form-success:92,184,92; /* Item widths */ --items-1:100%; --items-2:50%; --items-3:33.3333333%; --items-4:25%; --items-5:20%; --items-6:16.6666667%; --items-7:14.2857143%; --items-8:12.5%; /* Window heights */ --windows_basic: 50vh; --windows_basic_PX: 375px; --windows-1_basic: 100vh; --windows-1_basic_PX: 62.5%; --windows-2_basic: 100vh; --windows-2_basic_PX: 75%; --windows-3_basic: 70vh; --windows-3_basic_PX: 100%; --windows-4_basic: 50vh; --windows-4_basic_PX: 75%; --windows-3_big-item: 100vh; --windows-3_big-item_PX: 750px; --windows-3_small-item: 50vh; --windows-3_small-item_PX: 375px; --windows-4_big-item: 55vh; --windows-4_big-item_PX: 475px; --windows-4_small-item: 45vh; --windows-4_small-item_PX: 375px; /* Banner heights */ --takeover-banner: 100vh; --medium-banner: 65vh; --medium-bannerPX: 450px; --short-banner: 50vh; --short-bannerPX: 340px; /* Lazyframe buttons*/ --youtube-bg: 229,45,39; --vimeo-bg: 0,173,239; /* Component max-width */ --component-max-width: 1366px; /* Modal max-width */ --modal-opacity: 0.75; --modal-components-max-width: 1800px; --modal-pods-max-width: 645px; /* All configurable variables below */ /* Spacing tab */ --site-max-width: 1600px; --site-spacing_sm: 0px; --site-spacing_lg: 0px; --notification-spacing_below_sm: 0px; --notification-spacing_side_sm: 0px; --notification-spacing_below_lg: 0px; --notification-spacing_side_lg: 0px; --backtotop-size_sm: 45px; --backtotop-size_lg: 60px; --backtotop-spacing_side_sm: 0px; --backtotop-spacing_below_sm: 0px; --backtotop-spacing_side_lg: 0px; --backtotop-spacing_below_lg: 0px; --site-box-shadow_h: 0px; --site-box-shadow_v: 0px; --site-box-shadow_b: 0px; --site-box-shadow_o: 0; --small-breakpoint: 1149px; --large-breakpoint: 1150px; --header-max-width: 1350px; --small-header: 60px; --large-header: 88px; --header-box-shadow_h: 0px; --header-box-shadow_v: 3px; --header-box-shadow_b: 10px; --header-box-shadow_o: 0.25; --nav-main-dropdown-width: 240px; --nav-main-dropdown-width_wide: 480px; --logo_sm-padding_top: 10px; --logo_sm-padding_right: 10px; --logo_sm-padding_bottom: 10px; --logo_sm-padding_left: 15px; --logo_lg-padding_top: 15px; --logo_lg-padding_right: 20px; --logo_lg-padding_bottom: 15px; --logo_lg-padding_left: 57px; --base-spacing: 32px; --base-half-spacing: 16px; --base-border-width: 1px; --base-border-radius: 16px; --base-box-shadow_h: 0px; --base-box-shadow_v: 0px; --base-box-shadow_b: 0px; --base-box-shadow_o: 0; --content-col_pc-spacing: 16px; --pc-spacing: 32px; --pc-spacing_sm: 32px; --pc-spacing_md: 32px; --pc-spacing_lg: 64px; --pc-spacing_xl: 64px; --intro-col: 100%; --intro-col_sm: 100%; --intro-col_md: 100%; --intro-col_lg: 100%; --intro-col_xl: 100%; --outro-col: 100%; --outro-col_sm: 100%; --outro-col_md: 100%; --outro-col_lg: 100%; --outro-col_xl: 100%; --center-col: 100%; --center-col_sm: 100%; --center-col_md: 100%; --center-col_lg: 100%; --center-col_xl: 100%; --banner-col: 100%; --banner-col_sm: 100%; --banner-col_md: 100%; --banner-col_lg: 100%; --banner-col_xl: 100%; --form-field-border-width: 1px; --form-field-border-radius: 8px; --btn-border-width: 1px; --btn-border-radius: 16px; --btn-box-shadow_h: 0px; --btn-box-shadow_v: 4px; --btn-box-shadow_b: 16px; --btn-box-shadow_o: 0.25; --btn_sm-padding_top: 4px; --btn_sm-padding_right: 8px; --btn_sm-padding_bottom: 4px; --btn_sm-padding_left: 8px; --btn-padding_top: 8px; --btn-padding_right: 18px; --btn-padding_bottom: 8px; --btn-padding_left: 16px; --btn_lg-padding_top: 12px; --btn_lg-padding_right: 24px; --btn_lg-padding_bottom: 12px; --btn_lg-padding_left: 24px; --footer-max-width: 1366px; /* Colors tab */ /* Body */ --body-bg-color1: 35, 41, 48; --body-bg-color2: 255, 255, 255; --body-bg-start-perc: 50%; --body-bg-stop-perc: 50%; --body-bg-angle: 90deg; /* Header */ --header-bg-color1: 35, 41, 48; --header-bg-color2: 255, 255, 255; --header-bg-start-perc: 50%; --header-bg-stop-perc: 50%; --header-bg-angle: 90deg; --header-text: 243, 243, 243; --header-borders: 204, 204, 204; --header-highlight: 0, 0, 0; /* Main Navigation */ --main-navigation-link: 255, 255, 255; --main-navigation-link-hover: 108, 108, 108; --main-navigation-link-active: 0, 0, 0; /* Logo */ --logo-link: 255, 255, 255; --logo-link-hover: 78, 78, 78; /* Secondary Navigation */ --secondary-navigation-link: 223, 223, 223; --secondary-navigation-link-hover: 108, 108, 108; /* Navigation dropdown */ --navigation-dropdown-color1: 216, 216, 216; --navigation-dropdown-color2: 255, 255, 255; --navigation-dropdown-start-perc: 50%; --navigation-dropdown-stop-perc: 50%; --navigation-dropdown-angle: 90deg; --navigation-dropdown-link: 0, 0, 0; --navigation-dropdown-link-hover: 108, 108, 108; --navigation-dropdown-link-active: 108, 108, 108; /* Content */ --base-bg-color1: 35, 41, 48; --base-bg-color2: 0, 0, 0; --base-bg-start-perc: 50%; --base-bg-stop-perc: 50%; --base-bg-angle: 90deg; --base-heading: 243, 243, 243; --base-secondary-heading: 243, 243, 243; --base-text: 243, 243, 243; --base-link: 186, 220, 20; --base-link-hover: 243, 243, 243; --base-borders: 243, 243, 243; --base-highlight: 53, 58, 65; --base-highlight-text: 243, 243, 243; /* Button */ --base-btn-bg-color1: 186, 220, 20; --base-btn-bg-color2: 0, 0, 0; --base-btn-bg-start-perc: 50%; --base-btn-bg-stop-perc: 50%; --base-btn-bg-angle: 90deg; --base-btn-text: 35, 41, 48; --base-btn-borders: 186, 220, 20; --base-btn-bg-hover-color1: 35, 41, 48; --base-btn-bg-hover-color2: 255, 255, 255; --base-btn-bg-hover-start-perc: 50%; --base-btn-bg-hover-stop-perc: 50%; --base-btn-bg-hover-angle: 90deg; --base-btn-text-hover: 186, 220, 20; --base-btn-borders-hover: 186, 220, 20; /* Footer */ --footer-max-width: 1366px; --footer-bg-color1: 35, 41, 48; --footer-bg-color2: 255, 255, 255; --footer-bg-start-perc: 50%; --footer-bg-stop-perc: 50%; --footer-bg-angle: 90deg; --footer-heading: 243, 243, 243; --footer-secondary-heading: 243, 243, 243; --footer-text: 243, 243, 243; --footer-link: 243, 243, 243; --footer-link-hover: 243, 243, 243; --footer-borders: 243, 243, 243; --footer-highlight: 243, 243, 243; --c1-bg-color1: 243, 243, 243; --c1-bg-color2: 0, 0, 0; --c1-bg-start-perc: 50%; --c1-bg-stop-perc: 50%; --c1-bg-angle: 90deg; --c1-heading: 35, 41, 48; --c1-secondary-heading: 35, 41, 48; --c1-text: 35, 41, 48; --c1-link: 35, 41, 48; --c1-link-hover: 35, 41, 48; --c1-borders: 35, 41, 48; --c1-highlight: 35, 41, 48; --c1-highlight-text: 243, 243, 243; --c2-bg-color1: 53, 58, 65; --c2-bg-color2: 0, 0, 0; --c2-bg-start-perc: 50%; --c2-bg-stop-perc: 50%; --c2-bg-angle: 90deg; --c2-heading: 243, 243, 243; --c2-secondary-heading: 243, 243, 243; --c2-text: 243, 243, 243; --c2-link: 243, 243, 243; --c2-link-hover: 255, 255, 255; --c2-borders: 186, 220, 20; --c2-highlight: 70, 75, 81; --c2-highlight-text: 243, 243, 243; --c1-btn-bg-color1: 186, 220, 20; --c1-btn-bg-color2: 0, 0, 0; --c1-btn-bg-start-perc: 50%; --c1-btn-bg-stop-perc: 50%; --c1-btn-bg-angle: 90deg; --c1-btn-text: 35, 41, 48; --c1-btn-borders: 186, 220, 20; --c1-btn-bg-hover-color1: 243, 243, 243; --c1-btn-bg-hover-color2: 255, 255, 255; --c1-btn-bg-hover-start-perc: 50%; --c1-btn-bg-hover-stop-perc: 50%; --c1-btn-bg-hover-angle: 90deg; --c1-btn-text-hover: 186, 220, 20; --c1-btn-borders-hover: 186, 220, 20; --c1-label-bg-color1: 0, 0, 0; --c1-label-bg-color2: 0, 0, 0; --c1-label-bg-start-perc: 50%; --c1-label-bg-stop-perc: 50%; --c1-label-bg-angle: 90deg; --c1-label-text: 255, 255, 255; /* Fonts tab */ --body-typography_font-name: 'Poppins',sans-serif; --body-typography_font-weight: 400; --body-typography_font-style: normal; --body-typography_font-line-height: 140%; --body-typography_font-letter-spacing: 0px; --body-typography_font-transform: None; --body-typography_font-size: 16px; --body-typography_font-size_sm: 16px; --body-typography_font-size_md: 16px; --body-typography_font-size_lg: 16px; --body-typography_font-size_xl: 16px; --h1-typography_font-name: 'Poppins',sans-serif; --h1-typography_font-weight: 600; --h1-typography_font-style: normal; --h1-typography_font-line-height: 140%; --h1-typography_font-letter-spacing: 0px; --h1-typography_font-transform: None; --h1-typography_font-size: 32px; --h1-typography_font-size_sm: 36px; --h1-typography_font-size_md: 36px; --h1-typography_font-size_lg: 40px; --h1-typography_font-size_xl: 40px; --h2-typography_font-name: 'Poppins',sans-serif; --h2-typography_font-weight: 600; --h2-typography_font-style: normal; --h2-typography_font-line-height: 140%; --h2-typography_font-letter-spacing: 0px; --h2-typography_font-transform: None; --h2-typography_font-size: 28px; --h2-typography_font-size_sm: 32px; --h2-typography_font-size_md: 32px; --h2-typography_font-size_lg: 36px; --h2-typography_font-size_xl: 36px; --h3-typography_font-name: 'Poppins',sans-serif; --h3-typography_font-weight: 600; --h3-typography_font-style: normal; --h3-typography_font-line-height: 140%; --h3-typography_font-letter-spacing: 0px; --h3-typography_font-transform: None; --h3-typography_font-size: 24px; --h3-typography_font-size_sm: 28px; --h3-typography_font-size_md: 28px; --h3-typography_font-size_lg: 32px; --h3-typography_font-size_xl: 32px; --h4-typography_font-name: 'Poppins',sans-serif; --h4-typography_font-weight: 600; --h4-typography_font-style: normal; --h4-typography_font-line-height: 140%; --h4-typography_font-letter-spacing: 0px; --h4-typography_font-transform: None; --h4-typography_font-size: 20px; --h4-typography_font-size_sm: 24px; --h4-typography_font-size_md: 24px; --h4-typography_font-size_lg: 28px; --h4-typography_font-size_xl: 28px; --h5-typography_font-name: 'Poppins',sans-serif; --h5-typography_font-weight: 600; --h5-typography_font-style: normal; --h5-typography_font-line-height: 140%; --h5-typography_font-letter-spacing: 0px; --h5-typography_font-transform: None; --h5-typography_font-size: 16px; --h5-typography_font-size_sm: 20px; --h5-typography_font-size_md: 20px; --h5-typography_font-size_lg: 24px; --h5-typography_font-size_xl: 24px; --h6-typography_font-name: 'Poppins',sans-serif; --h6-typography_font-weight: 600; --h6-typography_font-style: normal; --h6-typography_font-line-height: 140%; --h6-typography_font-letter-spacing: 0px; --h6-typography_font-transform: None; --h6-typography_font-size: 12px; --h6-typography_font-size_sm: 16px; --h6-typography_font-size_md: 16px; --h6-typography_font-size_lg: 20px; --h6-typography_font-size_xl: 20px; --p-heading-typography_font-name: 'Poppins',sans-serif; --p-heading-typography_font-weight: 600; --p-heading-typography_font-style: normal; --p-heading-typography_font-line-height: 140%; --p-heading-typography_font-letter-spacing: 0px; --p-heading-typography_font-transform: None; --p-heading-typography_font-size: 20px; --p-heading-typography_font-size_sm: 24px; --p-heading-typography_font-size_md: 24px; --p-heading-typography_font-size_lg: 28px; --p-heading-typography_font-size_xl: 28px; --p-heading_small-typography_font-name: 'Poppins',sans-serif; --p-heading_small-typography_font-weight: 600; --p-heading_small-typography_font-style: normal; --p-heading_small-typography_font-line-height: 140%; --p-heading_small-typography_font-letter-spacing: 0px; --p-heading_small-typography_font-transform: None; --p-heading_small-typography_font-size: 16px; --p-heading_small-typography_font-size_sm: 20px; --p-heading_small-typography_font-size_md: 20px; --p-heading_small-typography_font-size_lg: 24px; --p-heading_small-typography_font-size_xl: 24px; --p-heading_large-typography_font-name: 'Poppins',sans-serif; --p-heading_large-typography_font-weight: 600; --p-heading_large-typography_font-style: normal; --p-heading_large-typography_font-line-height: 140%; --p-heading_large-typography_font-letter-spacing: 0px; --p-heading_large-typography_font-transform: None; --p-heading_large-typography_font-size: 24px; --p-heading_large-typography_font-size_sm: 28px; --p-heading_large-typography_font-size_md: 28px; --p-heading_large-typography_font-size_lg: 32px; --p-heading_large-typography_font-size_xl: 32px; --p-intro-typography_font-name: 'Poppins',sans-serif; --p-intro-typography_font-weight: 400; --p-intro-typography_font-style: normal; --p-intro-typography_font-line-height: 140%; --p-intro-typography_font-letter-spacing: 0px; --p-intro-typography_font-transform: None; --p-intro-typography_font-size: 16px; --p-intro-typography_font-size_sm: 16px; --p-intro-typography_font-size_md: 16px; --p-intro-typography_font-size_lg: 20px; --p-intro-typography_font-size_xl: 20px; --p-intro_small-typography_font-name: 'Poppins',sans-serif; --p-intro_small-typography_font-weight: 400; --p-intro_small-typography_font-style: normal; --p-intro_small-typography_font-line-height: 140%; --p-intro_small-typography_font-letter-spacing: 0px; --p-intro_small-typography_font-transform: None; --p-intro_small-typography_font-size: 12px; --p-intro_small-typography_font-size_sm: 12px; --p-intro_small-typography_font-size_md: 12px; --p-intro_small-typography_font-size_lg: 16px; --p-intro_small-typography_font-size_xl: 16px; --p-intro_large-typography_font-name: 'Poppins',sans-serif; --p-intro_large-typography_font-weight: 400; --p-intro_large-typography_font-style: normal; --p-intro_large-typography_font-line-height: 140%; --p-intro_large-typography_font-letter-spacing: 0px; --p-intro_large-typography_font-transform: None; --p-intro_large-typography_font-size: 20px; --p-intro_large-typography_font-size_sm: 20px; --p-intro_large-typography_font-size_md: 20px; --p-intro_large-typography_font-size_lg: 24px; --p-intro_large-typography_font-size_xl: 24px; --secondary-heading-typography_font-name: 'Poppins',sans-serif; --secondary-heading-typography_font-weight: 600; --secondary-heading-typography_font-style: normal; --secondary-heading-typography_font-line-height: 140%; --secondary-heading-typography_font-letter-spacing: 0px; --secondary-heading-typography_font-transform: None; --secondary-heading-typography_font-size: 16px; --secondary-heading-typography_font-size_sm: 20px; --secondary-heading-typography_font-size_md: 20px; --secondary-heading-typography_font-size_lg: 24px; --secondary-heading-typography_font-size_xl: 24px; --secondary-heading_small-typography_font-name: 'Poppins',sans-serif; --secondary-heading_small-typography_font-weight: 600; --secondary-heading_small-typography_font-style: normal; --secondary-heading_small-typography_font-line-height: 140%; --secondary-heading_small-typography_font-letter-spacing: 0px; --secondary-heading_small-typography_font-transform: None; --secondary-heading_small-typography_font-size: 12px; --secondary-heading_small-typography_font-size_sm: 16px; --secondary-heading_small-typography_font-size_md: 16px; --secondary-heading_small-typography_font-size_lg: 20px; --secondary-heading_small-typography_font-size_xl: 20px; --secondary-heading_large-typography_font-name: 'Poppins',sans-serif; --secondary-heading_large-typography_font-weight: 600; --secondary-heading_large-typography_font-style: normal; --secondary-heading_large-typography_font-line-height: 140%; --secondary-heading_large-typography_font-letter-spacing: 0px; --secondary-heading_large-typography_font-transform: None; --secondary-heading_large-typography_font-size: 20px; --secondary-heading_large-typography_font-size_sm: 24px; --secondary-heading_large-typography_font-size_md: 24px; --secondary-heading_large-typography_font-size_lg: 28px; --secondary-heading_large-typography_font-size_xl: 28px; --blockquote-typography_font-name: 'Poppins',sans-serif; --blockquote-typography_font-weight: 600; --blockquote-typography_font-style: italic; --blockquote-typography_font-line-height: 140%; --blockquote-typography_font-letter-spacing: 0px; --blockquote-typography_font-transform: None; --blockquote-typography_font-size: 19px; --blockquote-typography_font-size_sm: 19px; --blockquote-typography_font-size_md: 19px; --blockquote-typography_font-size_lg: 19px; --blockquote-typography_font-size_xl: 19px; --blockquote_small-typography_font-name: 'Poppins',sans-serif; --blockquote_small-typography_font-weight: 600; --blockquote_small-typography_font-style: italic; --blockquote_small-typography_font-line-height: 140%; --blockquote_small-typography_font-letter-spacing: 0px; --blockquote_small-typography_font-transform: None; --blockquote_small-typography_font-size: 16px; --blockquote_small-typography_font-size_sm: 16px; --blockquote_small-typography_font-size_md: 16px; --blockquote_small-typography_font-size_lg: 16px; --blockquote_small-typography_font-size_xl: 16px; --blockquote_large-typography_font-name: 'Poppins',sans-serif; --blockquote_large-typography_font-weight: 600; --blockquote_large-typography_font-style: italic; --blockquote_large-typography_font-line-height: 140%; --blockquote_large-typography_font-letter-spacing: 0px; --blockquote_large-typography_font-transform: None; --blockquote_large-typography_font-size: 22px; --blockquote_large-typography_font-size_sm: 22px; --blockquote_large-typography_font-size_md: 22px; --blockquote_large-typography_font-size_lg: 22px; --blockquote_large-typography_font-size_xl: 22px; --btn-typography_font-name: 'Poppins',sans-serif; --btn-typography_font-weight: 600; --btn-typography_font-style: normal; --btn-typography_font-line-height: 140%; --btn-typography_font-letter-spacing: 0px; --btn-typography_font-transform: None; --btn-typography_font-size: 16px; --btn-typography_font-size_sm: 16px; --btn-typography_font-size_md: 16px; --btn-typography_font-size_lg: 16px; --btn-typography_font-size_xl: 16px; --btn_small-typography_font-name: 'Poppins',sans-serif; --btn_small-typography_font-weight: 600; --btn_small-typography_font-style: normal; --btn_small-typography_font-line-height: 140%; --btn_small-typography_font-letter-spacing: 0px; --btn_small-typography_font-transform: None; --btn_small-typography_font-size: 12px; --btn_small-typography_font-size_sm: 12px; --btn_small-typography_font-size_md: 12px; --btn_small-typography_font-size_lg: 12px; --btn_small-typography_font-size_xl: 12px; --btn_large-typography_font-name: 'Poppins',sans-serif; --btn_large-typography_font-weight: 600; --btn_large-typography_font-style: normal; --btn_large-typography_font-line-height: 140%; --btn_large-typography_font-letter-spacing: 0px; --btn_large-typography_font-transform: None; --btn_large-typography_font-size: 19px; --btn_large-typography_font-size_sm: 19px; --btn_large-typography_font-size_md: 19px; --btn_large-typography_font-size_lg: 19px; --btn_large-typography_font-size_xl: 19px; --main-navigation-typography_font-name: 'Poppins',sans-serif; --main-navigation-typography_font-weight: 400; --main-navigation-typography_font-style: normal; --main-navigation-typography_font-line-height: 140%; --main-navigation-typography_font-letter-spacing: 0px; --main-navigation-typography_font-transform: None; --main-navigation-typography_font-size: 16px; --main-navigation-typography_font-size_sm: 16px; --main-navigation-typography_font-size_md: 16px; --main-navigation-typography_font-size_lg: 16px; --main-navigation-typography_font-size_xl: 16px; --main-navigation_dropdowns-typography_font-name: 'Poppins',sans-serif; --main-navigation_dropdowns-typography_font-weight: 400; --main-navigation_dropdowns-typography_font-style: normal; --main-navigation_dropdowns-typography_font-line-height: 140%; --main-navigation_dropdowns-typography_font-letter-spacing: 0px; --main-navigation_dropdowns-typography_font-transform: None; --main-navigation_dropdowns-typography_font-size: 16px; --main-navigation_dropdowns-typography_font-size_sm: 16px; --main-navigation_dropdowns-typography_font-size_md: 16px; --main-navigation_dropdowns-typography_font-size_lg: 16px; --main-navigation_dropdowns-typography_font-size_xl: 16px; --secondary-navigation-typography_font-name: 'Poppins',sans-serif; --secondary-navigation-typography_font-weight: 400; --secondary-navigation-typography_font-style: normal; --secondary-navigation-typography_font-line-height: 140%; --secondary-navigation-typography_font-letter-spacing: 0px; --secondary-navigation-typography_font-transform: None; --secondary-navigation-typography_font-size: 14px; --secondary-navigation-typography_font-size_sm: 14px; --secondary-navigation-typography_font-size_md: 14px; --secondary-navigation-typography_font-size_lg: 14px; --secondary-navigation-typography_font-size_xl: 14px; --sub-navigation-typography_font-name: 'Poppins',sans-serif; --sub-navigation-typography_font-weight: 400; --sub-navigation-typography_font-style: normal; --sub-navigation-typography_font-line-height: 140%; --sub-navigation-typography_font-letter-spacing: 0px; --sub-navigation-typography_font-transform: None; --sub-navigation-typography_font-size: 16px; --sub-navigation-typography_font-size_sm: 16px; --sub-navigation-typography_font-size_md: 16px; --sub-navigation-typography_font-size_lg: 16px; --sub-navigation-typography_font-size_xl: 16px; --footer-navigation-typography_font-name: 'Poppins',sans-serif; --footer-navigation-typography_font-weight: 400; --footer-navigation-typography_font-style: normal; --footer-navigation-typography_font-line-height: 140%; --footer-navigation-typography_font-letter-spacing: 0px; --footer-navigation-typography_font-transform: None; --footer-navigation-typography_font-size: 12px; --footer-navigation-typography_font-size_sm: 12px; --footer-navigation-typography_font-size_md: 12px; --footer-navigation-typography_font-size_lg: 12px; --footer-navigation-typography_font-size_xl: 12px; --breadcrumb-navigation-typography_font-name: 'Poppins',sans-serif; --breadcrumb-navigation-typography_font-weight: 400; --breadcrumb-navigation-typography_font-style: normal; --breadcrumb-navigation-typography_font-line-height: 140%; --breadcrumb-navigation-typography_font-letter-spacing: 0px; --breadcrumb-navigation-typography_font-transform: None; --breadcrumb-navigation-typography_font-size: 12px; --breadcrumb-navigation-typography_font-size_sm: 12px; --breadcrumb-navigation-typography_font-size_md: 12px; --breadcrumb-navigation-typography_font-size_lg: 12px; --breadcrumb-navigation-typography_font-size_xl: 12px; --anchor-navigation-typography_font-name: 'Poppins',sans-serif; --anchor-navigation-typography_font-weight: 400; --anchor-navigation-typography_font-style: normal; --anchor-navigation-typography_font-line-height: 140%; --anchor-navigation-typography_font-letter-spacing: 0px; --anchor-navigation-typography_font-transform: None; --anchor-navigation-typography_font-size: 16px; --anchor-navigation-typography_font-size_sm: 16px; --anchor-navigation-typography_font-size_md: 16px; --anchor-navigation-typography_font-size_lg: 16px; --anchor-navigation-typography_font-size_xl: 16px; --acc-tab-typography_font-name: 'Poppins',sans-serif; --acc-tab-typography_font-weight: 400; --acc-tab-typography_font-style: normal; --acc-tab-typography_font-line-height: 140%; --acc-tab-typography_font-letter-spacing: 0px; --acc-tab-typography_font-transform: None; --acc-tab-typography_font-size: 16px; --acc-tab-typography_font-size_sm: 16px; --acc-tab-typography_font-size_md: 16px; --acc-tab-typography_font-size_lg: 16px; --acc-tab-typography_font-size_xl: 16px; --logo-typography_font-name: 'Poppins',sans-serif; --logo-typography_font-weight: 600; --logo-typography_font-style: normal; --logo-typography_font-line-height: 140%; --logo-typography_font-letter-spacing: 0px; --logo-typography_font-transform: None; --logo-typography_font-size: 32px; --logo-typography_font-size_sm: 32px; --logo-typography_font-size_md: 32px; --logo-typography_font-size_lg: 32px; --logo-typography_font-size_xl: 32px; } /* -------------------------------------------------- Additional Colors - Content -------------------------------------------------- */ /* Backgrounds */ /* Backgrounds Solid */ .c1-bg, .item.item_overlay .inner .image.c1-bg::before, .usn_cmp_banner .item.item_overlay.c1-bg .inner::before { background: rgba(var(--c1-bg-color1), 1); } /* Backgrounds Linear */ .c1-bg.c1-bg-linear, .item.item_overlay .inner .image.c1-bg.c1-bg-linear::before, .usn_cmp_banner .item.item_overlay.c1-bg.c1-bg-linear .inner::before { background: linear-gradient(var(--c1-bg-angle), rgba(var(--c1-bg-color1), 1) 0%, rgba(var(--c1-bg-color2), 1) 100%); } /* Backgrounds Radial */ .c1-bg.c1-bg-radial, .item.item_overlay .inner .image.c1-bg.c1-bg-radial::before, .usn_cmp_banner .item.item_overlay.c1-bg.c1-bg-radial .inner::before { background: radial-gradient(farthest-side at var(--c1-bg-start-perc) var(--c1-bg-stop-perc), rgba(var(--c1-bg-color1), 1) 0%, rgba(var(--c1-bg-color2), 1) 100%); } /* Headings */ .c1-bg h1:not(.heading), .c1-bg h2:not(.heading), .c1-bg h3:not(.heading), .c1-bg h4:not(.heading), .c1-bg h5:not(.heading), .c1-bg h6:not(.heading) { color: rgba(var(--c1-heading), 1); } .c1-heading, .c1-bg .heading { color: rgba(var(--c1-heading), 1); } /* Secondary Headings */ .c1-secondary-heading, .c1-bg .c1-secondary-heading { color: rgba(var(--c1-secondary-heading), 1); } /* Text */ .c1-bg, .c1-bg .c1-text, .c1-text { color: rgba(var(--c1-text), 1); } /* Text selection */ .c1-bg ::selection { color: rgba(var(--c1-highlight-text), 1); background-color: rgba(var(--c1-highlight), 1); } /* Borders */ .c1-borders { border-color: rgba(var(--c1-borders), 1); } /* Links */ .c1-link, .c1-link, .c1-bg a:not(.btn), .c1-text a:not(.btn), .c1-bg .c1-text a:not(.btn) { color: rgba(var(--c1-link), 1); } .c1-link:hover, .c1-link:focus, .c1-link:active, .c1-bg a:not(.btn):hover, .c1-bg a:not(.btn):focus, .c1-bg a:not(.btn):active, .c1-bg a:not(.btn):hover, .c1-bg a:not(.btn):focus, .c1-bg a:not(.btn):active, .c1-text a:not(.btn):hover, .c1-text a:not(.btn):focus, .c1-text a:not(.btn):active, .c1-bg .c1-text a:not(.btn):hover, .c1-bg .c1-text a:not(.btn):focus, .c1-bg .c1-text a:not(.btn):active { color: rgba(var(--c1-link-hover), 1); } /* Highlights */ .c1-highlight-bg { background-color: rgba(var(--c1-highlight), 1); } .c1-bg blockquote::before, .component .component.c1-bg div > blockquote::before { color: rgba(var(--c1-highlight), 1); } .c1-highlight-text { color: rgba(var(--c1-highlight-text), 1); } .c1-heading { color: rgba(var(--c1-heading), 1)!important; } .c1-secondary-heading { color: rgba(var(--c1-secondary-heading), 1)!important; } .c1-bg .heading { color: rgba(var(--c1-heading), 1); } .c1-bg .secondary-heading { color: rgba(var(--c1-secondary-heading), 1); } .c1-bg .quote, .c1-bg blockquote { color: rgba(var(--c1-heading), 1); } .c1-bg .quote::before, .c1-bg blockquote::before { color: rgba(var(--c1-highlight), 1); } /* Labels */ .c1-bg .label:not(.item-label) { background-color: rgba(var(--c1-highlight), 1); } .c1-bg .label:not(.item-label) { color: rgba(var(--c1-highlight-text), 1); } /* Tabs */ /* Basic Tabs */ .c1-bg .repeatable.tab-basic .tab .nav-link { color: rgba(var(--c1-link), 1); border-color: rgba(var(--c1-borders), 1); } .c1-bg .repeatable.tabbed.tab-basic .tab .nav-link:not(.active) { background: rgba(var(--c1-borders), 0.15); } .c1-bg .repeatable.tabbed.tab-basic .tab .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); background: rgba(var(--c1-borders), 0.25); } .c1-bg .repeatable.accordion.tab-basic .tab .nav-link.collapsed:hover { color: rgba(var(--c1-link-hover), 1); background: rgba(var(--c1-borders), 0.25); } .c1-bg .repeatable.tabbed.tab-basic .tab .nav-link.active { color: rgba(var(--c1-heading), 1); background: transparent; } .c1-bg .repeatable.accordion.tab-basic .tab .nav-link:not(.collapsed) { color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.tab-basic .repeatable-content { border-color: rgba(var(--c1-borders), 1); } .c1-bg .repeatable.tab-basic .tab .nav-link.active::after { background: rgba(var(--c1-highlight), 1); } /* Button Tabs */ .c1-bg .repeatable.tab-buttons .tab .nav-link { color: rgba(var(--c1-heading), 1); border-color: rgba(var(--c1-borders), 0.25); } .c1-bg .repeatable.tabbed.tab-buttons .tab .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); border-color: rgba(var(--c1-borders), 1); } .c1-bg .repeatable.accordion.tab-buttons .tab .nav-link.collapsed:hover { color: rgba(var(--c1-link-hover), 1); border-color: rgba(var(--c1-borders), 1); } .c1-bg .repeatable.tabbed.tab-buttons .tab .nav-link.active { color: rgba(var(--c1-heading), 1); border-color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.accordion.tab-buttons .tab .nav-link:not(.collapsed) { color: rgba(var(--c1-heading), 1); border-color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.tab-buttons .tab .nav-link { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), 0.25); } .c1-bg .repeatable.tabbed.tab-buttons .tab .nav-link:not(.active):hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } .c1-bg .repeatable.accordion.tab-buttons .tab .nav-link.collapsed:hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } .c1-bg .repeatable.tabbed.tab-buttons .tab .nav-link.active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } .c1-bg .repeatable.accordion.tab-buttons .tab .nav-link:not(.collapsed) { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } /* Underline Tabs */ .c1-bg .repeatable.tab-underline .tab .nav-link { color: rgba(var(--c1-link), 1); } .c1-bg .repeatable.tabbed.tab-underline .tab .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.accordion.tab-underline .tab .nav-link.collapsed:hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.tabbed.tab-underline .tab .nav-link:not(.active):hover::before { background: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.accordion.tab-underline .tab .nav-link.collapsed:hover::before { background: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.tabbed.tab-underline .tab .nav-link.active { color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.accordion.tab-underline .tab .nav-link:not(.collapsed) { color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.tabbed.tab-underline .tab .nav-link.active::before { background: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.accordion.tab-underline .tab .nav-link:not(.collapsed)::before { background: rgba(var(--c1-heading), 1); } /* Linethrough Tabs */ .c1-bg .repeatable.tab-linethrough .tab .nav-link { color: rgba(var(--c1-link), 1); } .c1-bg .repeatable.tabbed.tab-linethrough .tab .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.accordion.tab-linethrough .tab .nav-link.collapsed:hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.tabbed.tab-linethrough .tab .nav-link:not(.active):hover::before { background: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.accordion.tab-linethrough .tab .nav-link.collapsed:hover::before { background: rgba(var(--c1-link-hover), 1); } .c1-bg .repeatable.tabbed.tab-linethrough .tab .nav-link.active { color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.accordion.tab-linethrough .tab .nav-link:not(.collapsed) { color: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.tabbed.tab-linethrough .tab .nav-link.active::before { background: rgba(var(--c1-heading), 1); } .c1-bg .repeatable.accordion.tab-linethrough .tab .nav-link:not(.collapsed)::before { background: rgba(var(--c1-heading), 1); } /* Slider Navigation */ .c1-bg .slick-slider .slick-prev, .c1-bg .slick-slider .slick-next { color: rgba(var(--c1-link), 1); background-color: rgba(var(--c1-bg-color1), 1); } html.no-touch .c1-bg .slick-slider .slick-prev:hover, html.no-touch .c1-bg .slick-slider .slick-next:hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .slick-slider .slick-autoplay-toggle-button { color: rgba(var(--c1-link), 1); background-color: rgba(var(--c1-bg-color1), 1); } html.no-touch .c1-bg .slick-slider .slick-autoplay-toggle-button:hover { color: rgba(var(--c1-link-hover), 1); } .c1-bg .slick-slider .slick-dots li > button { background-color: rgba(var(--c1-text), 1); } html.no-touch .c1-bg .slick-slider .slick-dots li:not(.slick-active) > button:hover { background-color: rgba(var(--c1-link-hover), 1); } .c1-bg .slick-slider .slick-dots li.slick-active > button { background-color: rgba(var(--c1-highlight), 1); } /* Forms */ .form .c1-bg .form-control, .form .c1-bg .form-check-input { border-color: rgba(var(--c1-borders), 1); } .form .c1-bg .form-control:focus, .form .c1-bg .form-check-input:focus { border-color: rgba(var(--c1-highlight), 1); box-shadow: 0 0 5px var(--c1-highlight);} /* Ajax Loading */ .c1-bg .ajax-wrap .ajax-loading { background: rgba(var(--c1-bg-color1), 1); } .c1-bg.ajax-wrap .ajax-loading { background: rgba(var(--c1-bg-color1), 1); } .ajax-wrap .c1-bg .ajax-loading { background: rgba(var(--c1-bg-color1), 1); } .c1-bg .ajax-wrap .ajax-loading .loading span.message { border: 10px solid rgba(var(--c1-borders), 1); border-top: 10px solid rgba(var(--c1-highlight), 1); } .c1-bg.ajax-wrap .ajax-loading .loading span.message { border: 10px solid rgba(var(--c1-borders), 1); border-top: 10px solid rgba(var(--c1-highlight), 1); } .ajax-wrap .c1-bg .ajax-loading .loading span.message { border: 10px solid rgba(var(--c1-borders), 1); border-top: 10px solid rgba(var(--c1-highlight), 1); } .c1-bg .item_form-single_field .ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c1-borders), 1); border-top: 5px solid rgba(var(--c1-highlight), 1); } .c1-bg.item_form-single_field .ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c1-borders), 1); border-top: 5px solid rgba(var(--c1-highlight), 1); } .item_form-single_field .c1-bg.ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c1-borders), 1); border-top: 5px solid rgba(var(--c1-highlight), 1); } .item_form-single_field .ajax-wrap .c1-bg .ajax-loading .loading span.message { border: 5px solid rgba(var(--c1-borders), 1); border-top: 5px solid rgba(var(--c1-highlight), 1); } /* Links */ .c1-bg .listing.listing_links:not(.listing_links-mini), .c1-bg .listing.listing_links:not(.listing_links-mini) .item a { border-color: rgba(var(--c1-borders), 1); } .c1-bg .listing.listing_links:not(.listing_links-mini) .item a:hover { background-color: rgba(var(--c1-borders), 0.1); } .c1-bg .listing.listing_links.listing_links-mini .item a::after { background-color: rgba(var(--c1-link), 1); } .c1-bg .listing.listing_links.listing_links-mini .item a:hover::after { background-color: rgba(var(--c1-link-hover), 1); } /* Data List */ .c1-bg .listing.listing_data-list.data-list_boxed { border-color: rgba(var(--c1-borders), 1); } .c1-bg .listing.listing_data-list .item.items-1:not(:last-child)::before { background-color: rgba(var(--c1-borders), 1); } /* Pricing pod */ .item.usn_pod_pricingtable .c1-bg .pricing-features .feature, .item.usn_pod_pricingtable .c1-bg .pricing-features .feature-title + .feature { border-color: rgba(var(--c1-borders), 1); } /* Sitemap */ .c1-bg nav.sitemap ul li::before, .c1-bg nav.sitemap ul li::after { background-color: rgba(var(--c1-borders), 1); } .c1-bg nav.sitemap ul li:hover::after { background-color: rgba(var(--c1-borders), 0.5); } /* Tables */ .c1-bg thead { color: rgba(var(--c1-heading), 1); } .c1-bg table, .c1-bg table th, .c1-bg table td { border-color: rgba(var(--c1-borders), 1); } /* Anchor Navigtation */ .component.usn_cmp_anchornavigation.c1-bg .expand-anchor { color: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg .expand-anchor span:before { background: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg .expand-anchor span { background: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg .expand-anchor span:after { background: rgba(var(--c1-heading), 1); } /* Basic */ .component.usn_cmp_anchornavigation.c1-bg nav.tab-basic ul.nav li.nav-item .nav-link { color: rgba(var(--c1-link), 1); border-color: rgba(var(--c1-borders), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-basic ul.nav li.nav-item .nav-link:not(.active) { background: rgba(var(--c1-borders), 0.15); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-basic ul.nav li.nav-item .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); background: rgba(var(--c1-borders), 0.25); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-basic ul.nav li.nav-item .nav-link.active { color: rgba(var(--c1-heading), 1); background: transparent; } .component.usn_cmp_anchornavigation.c1-bg nav.tab-basic ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c1-highlight), 1); } /* Button */ .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item .nav-link { color: rgba(var(--c1-heading), 1); border-color: rgba(var(--c1-borders), 0.25); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item .nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); border-color: rgba(var(--c1-borders), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item .nav-link.active { color: rgba(var(--c1-heading), 1); border-color: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), 0.25); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item .nav-link:not(.active):hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-buttons ul.nav li.nav-item .nav-link.active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-borders), var(--btn-box-shadow_o)); } /* Underline */ .component.usn_cmp_anchornavigation.c1-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active) { color: rgba(var(--c1-link), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-underline ul.nav li.nav-item a.nav-link.active { color: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active):hover::after { background: rgba(var(--c1-link-hover), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-underline ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c1-heading), 1); } /* Linethrough */ .component.usn_cmp_anchornavigation.c1-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active) { color: rgba(var(--c1-link), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active):hover { color: rgba(var(--c1-link-hover), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link.active { color: rgba(var(--c1-heading), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active):hover::after { background: rgba(var(--c1-link-hover), 1); } .component.usn_cmp_anchornavigation.c1-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c1-heading), 1); } /* Scroll prompt */ .c1-bg .scroll-prompt .scroll-link { color: rgba(var(--c1-heading), 1); } .c1-bg .scroll-prompt .scroll-link i { color: rgba(var(--c1-heading), 1); } .c1-bg .scroll-prompt.scroll-prompt-wheel .mouse-scroll { border-color: rgba(var(--c1-heading), 1); } .c1-bg .scroll-prompt .mouse-scroll::before { background-color: rgba(var(--c1-heading), 1); } /* Shoppping Cart */ html#ecwid_html.usn body#ecwid_body .c1-bg .ec-size .ec-store h1 { color: rgba(var(--c1-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c1-bg .ec-size .ec-store .ec-header-h1 { color: rgba(var(--c1-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c1-bg .ec-size .ec-store .product-details__product-title { color: rgba(var(--c1-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c1-bg .ec-size .ec-store .grid-product__title-inner { color: rgba(var(--c1-heading), 1)!important; } /* Heading separators - on page */ .c1-bg h1::before, .c1-bg h2::before, .c1-bg h3::before, .c1-bg h4::before, .c1-bg h5::before, .c1-bg h6::before { background: rgba(var(--c1-highlight), 1); } .c1-bg h1::after, .c1-bg h2::after, .c1-bg h3::after, .c1-bg h4::after, .c1-bg h5::after, .c1-bg h6::after { background: rgba(var(--c1-highlight), 1); } /* Heading separators - on components */ .c1-bg .heading::before, .c1-bg .secondary-heading::before { background: rgba(var(--c1-highlight), 1); } .c1-bg .heading::after, .c1-bg .secondary-heading::after { background: rgba(var(--c1-highlight), 1); } /* Heading separators - on specific items */ .item.c1-bg .heading::before, .item.c1-bg .secondary-heading::before { background: rgba(var(--c1-highlight), 1); } .item.c1-bg .heading::after, .item.c1-bg .secondary-heading::after { background: rgba(var(--c1-highlight), 1); } .inner.c1-bg .heading::before, .inner.c1-bg .secondary-heading::before { background: rgba(var(--c1-highlight), 1); } .inner.c1-bg .heading::after, .inner.c1-bg .secondary-heading::after { background: rgba(var(--c1-highlight), 1); } /* Overlayicons */ .item.item_text-boxed.c1-bg .image .overlayicon::before, .item.item_text-boxed .inner.c1-bg .image .overlayicon::before, .item.item_text-boxed .image.c1-bg .overlayicon::before { background: rgba(var(--c1-bg), 1); } /* Overlayicons - Backgrounds Linear */ .item.item_text-boxed.c1-bg.c1-bg-linear .image .overlayicon::before, .item.item_text-boxed .inner.c1-bg.c1-bg-linear .image .overlayicon::before, .item.item_text-boxed .image.c1-bg.c1-bg-linear .overlayicon::before { background: linear-gradient(var(--c1-bg-angle), rgba(var(--c1-bg-color1), 1) 0%, rgba(var(--c1-bg-color2), 1) 100%); } /* Overlayicons - Backgrounds Radial */ .item.item_text-boxed.c1-bg.c1-bg-radial .image .overlayicon::before, .item.item_text-boxed .inner.c1-bg.c1-bg-radial .image .overlayicon::before, .item.item_text-boxed .image.c1-bg.c1-bg-radial .overlayicon::before { background: radial-gradient(farthest-side at var(--c1-bg-start-perc) var(--c1-bg-stop-perc), rgba(var(--c1-bg-color1), 1) 0%, rgba(var(--c1-bg-color2), 1) 100%); } .item.item_text-boxed.c1-bg .image .overlayicon .icon, .item.item_text-boxed .inner.c1-bg .image .overlayicon .icon, .item.item_text-boxed .image.c1-bg .overlayicon .icon { color: rgba(var(--c1-heading), 1); } /* Focus visibles */ .c1-bg a:focus-visible, .c1-bg .btn:focus-visible, .c1-bg button:focus-visible, .form .inner.c1-bg a:focus-visible, .form .inner.c1-bg .btn:focus-visible, .form .inner.c1-bg button:focus-visible, .c1-bg .item .image a:focus-visible, .c1-bg .item .image a:focus-visible img, .c1-bg .item .image a:focus-visible picture, .c1-bg .item .image a:focus-visible .overlayicon, .c1-bg .listing_no-spacing .item a:focus-visible .image, .c1-bg .listing_no-spacing .item a:focus-visible .image img, .c1-bg .listing_no-spacing .item a:focus-visible .image picture, .c1-bg .listing_no-spacing .item a:focus-visible .image .overlayicon, .item.item_text-boxed .inner.c1-bg a:focus-visible .image, .item.item_text-boxed .inner.c1-bg a:focus-visible .image::before, .item.item_text-boxed .inner.c1-bg a:focus-visible .image img, .item.item_text-boxed .inner.c1-bg a:focus-visible .image picture, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c1-bg, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c1-bg::before, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c1-bg img, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c1-bg picture, main:focus-visible > section.c1-bg:first-of-type, section.c1-bg:focus-visible { outline-color: rgba(var(--c1-highlight), 1)!important; } .c1-bg .form-control:focus-visible, .c1-bg .form-check-input:focus-visible, .form .inner.c1-bg .form-control:focus-visible, .form .inner.c1-bg .form-check-input:focus-visible, .form .inner.c1-bg .umbraco-forms-field input:focus-visible, .form .inner.c1-bg .umbraco-forms-field.longanswer textarea:focus-visible, .form .inner.c1-bg .umbraco-forms-field.dropdown select:focus-visible { outline-color: rgba(var(--c1-highlight), 1)!important; } /* Breadcrumbs */ .component.usn_cmp_breadcrumb.c1-bg .breadcrumb-trail { color: rgba(var(--c1-text), 1); } .component.usn_cmp_breadcrumb.c1-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item a, .component.usn_cmp_breadcrumb.c1-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item > span { color: rgba(var(--c1-text), 1); } .component.usn_cmp_breadcrumb.c1-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item:not(.active) a:hover { color: rgba(var(--c1-link), 1); } .component.usn_cmp_breadcrumb.c1-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item.active > span { color: rgba(var(--c1-text), 0.5); } /* -------------------------------------------------- Additional Colors - Content -------------------------------------------------- */ /* Backgrounds */ /* Backgrounds Solid */ .c2-bg, .item.item_overlay .inner .image.c2-bg::before, .usn_cmp_banner .item.item_overlay.c2-bg .inner::before { background: rgba(var(--c2-bg-color1), 1); } /* Backgrounds Linear */ .c2-bg.c2-bg-linear, .item.item_overlay .inner .image.c2-bg.c2-bg-linear::before, .usn_cmp_banner .item.item_overlay.c2-bg.c2-bg-linear .inner::before { background: linear-gradient(var(--c2-bg-angle), rgba(var(--c2-bg-color1), 1) 0%, rgba(var(--c2-bg-color2), 1) 100%); } /* Backgrounds Radial */ .c2-bg.c2-bg-radial, .item.item_overlay .inner .image.c2-bg.c2-bg-radial::before, .usn_cmp_banner .item.item_overlay.c2-bg.c2-bg-radial .inner::before { background: radial-gradient(farthest-side at var(--c2-bg-start-perc) var(--c2-bg-stop-perc), rgba(var(--c2-bg-color1), 1) 0%, rgba(var(--c2-bg-color2), 1) 100%); } /* Headings */ .c2-bg h1:not(.heading), .c2-bg h2:not(.heading), .c2-bg h3:not(.heading), .c2-bg h4:not(.heading), .c2-bg h5:not(.heading), .c2-bg h6:not(.heading) { color: rgba(var(--c2-heading), 1); } .c2-heading, .c2-bg .heading { color: rgba(var(--c2-heading), 1); } /* Secondary Headings */ .c2-secondary-heading, .c2-bg .c2-secondary-heading { color: rgba(var(--c2-secondary-heading), 1); } /* Text */ .c2-bg, .c2-bg .c2-text, .c2-text { color: rgba(var(--c2-text), 1); } /* Text selection */ .c2-bg ::selection { color: rgba(var(--c2-highlight-text), 1); background-color: rgba(var(--c2-highlight), 1); } /* Borders */ .c2-borders { border-color: rgba(var(--c2-borders), 1); } /* Links */ .c2-link, .c2-link, .c2-bg a:not(.btn), .c2-text a:not(.btn), .c2-bg .c2-text a:not(.btn) { color: rgba(var(--c2-link), 1); } .c2-link:hover, .c2-link:focus, .c2-link:active, .c2-bg a:not(.btn):hover, .c2-bg a:not(.btn):focus, .c2-bg a:not(.btn):active, .c2-bg a:not(.btn):hover, .c2-bg a:not(.btn):focus, .c2-bg a:not(.btn):active, .c2-text a:not(.btn):hover, .c2-text a:not(.btn):focus, .c2-text a:not(.btn):active, .c2-bg .c2-text a:not(.btn):hover, .c2-bg .c2-text a:not(.btn):focus, .c2-bg .c2-text a:not(.btn):active { color: rgba(var(--c2-link-hover), 1); } /* Highlights */ .c2-highlight-bg { background-color: rgba(var(--c2-highlight), 1); } .c2-bg blockquote::before, .component .component.c2-bg div > blockquote::before { color: rgba(var(--c2-highlight), 1); } .c2-highlight-text { color: rgba(var(--c2-highlight-text), 1); } .c2-heading { color: rgba(var(--c2-heading), 1)!important; } .c2-secondary-heading { color: rgba(var(--c2-secondary-heading), 1)!important; } .c2-bg .heading { color: rgba(var(--c2-heading), 1); } .c2-bg .secondary-heading { color: rgba(var(--c2-secondary-heading), 1); } .c2-bg .quote, .c2-bg blockquote { color: rgba(var(--c2-heading), 1); } .c2-bg .quote::before, .c2-bg blockquote::before { color: rgba(var(--c2-highlight), 1); } /* Labels */ .c2-bg .label:not(.item-label) { background-color: rgba(var(--c2-highlight), 1); } .c2-bg .label:not(.item-label) { color: rgba(var(--c2-highlight-text), 1); } /* Tabs */ /* Basic Tabs */ .c2-bg .repeatable.tab-basic .tab .nav-link { color: rgba(var(--c2-link), 1); border-color: rgba(var(--c2-borders), 1); } .c2-bg .repeatable.tabbed.tab-basic .tab .nav-link:not(.active) { background: rgba(var(--c2-borders), 0.15); } .c2-bg .repeatable.tabbed.tab-basic .tab .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); background: rgba(var(--c2-borders), 0.25); } .c2-bg .repeatable.accordion.tab-basic .tab .nav-link.collapsed:hover { color: rgba(var(--c2-link-hover), 1); background: rgba(var(--c2-borders), 0.25); } .c2-bg .repeatable.tabbed.tab-basic .tab .nav-link.active { color: rgba(var(--c2-heading), 1); background: transparent; } .c2-bg .repeatable.accordion.tab-basic .tab .nav-link:not(.collapsed) { color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.tab-basic .repeatable-content { border-color: rgba(var(--c2-borders), 1); } .c2-bg .repeatable.tab-basic .tab .nav-link.active::after { background: rgba(var(--c2-highlight), 1); } /* Button Tabs */ .c2-bg .repeatable.tab-buttons .tab .nav-link { color: rgba(var(--c2-heading), 1); border-color: rgba(var(--c2-borders), 0.25); } .c2-bg .repeatable.tabbed.tab-buttons .tab .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); border-color: rgba(var(--c2-borders), 1); } .c2-bg .repeatable.accordion.tab-buttons .tab .nav-link.collapsed:hover { color: rgba(var(--c2-link-hover), 1); border-color: rgba(var(--c2-borders), 1); } .c2-bg .repeatable.tabbed.tab-buttons .tab .nav-link.active { color: rgba(var(--c2-heading), 1); border-color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.accordion.tab-buttons .tab .nav-link:not(.collapsed) { color: rgba(var(--c2-heading), 1); border-color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.tab-buttons .tab .nav-link { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), 0.25); } .c2-bg .repeatable.tabbed.tab-buttons .tab .nav-link:not(.active):hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } .c2-bg .repeatable.accordion.tab-buttons .tab .nav-link.collapsed:hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } .c2-bg .repeatable.tabbed.tab-buttons .tab .nav-link.active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } .c2-bg .repeatable.accordion.tab-buttons .tab .nav-link:not(.collapsed) { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } /* Underline Tabs */ .c2-bg .repeatable.tab-underline .tab .nav-link { color: rgba(var(--c2-link), 1); } .c2-bg .repeatable.tabbed.tab-underline .tab .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.accordion.tab-underline .tab .nav-link.collapsed:hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.tabbed.tab-underline .tab .nav-link:not(.active):hover::before { background: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.accordion.tab-underline .tab .nav-link.collapsed:hover::before { background: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.tabbed.tab-underline .tab .nav-link.active { color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.accordion.tab-underline .tab .nav-link:not(.collapsed) { color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.tabbed.tab-underline .tab .nav-link.active::before { background: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.accordion.tab-underline .tab .nav-link:not(.collapsed)::before { background: rgba(var(--c2-heading), 1); } /* Linethrough Tabs */ .c2-bg .repeatable.tab-linethrough .tab .nav-link { color: rgba(var(--c2-link), 1); } .c2-bg .repeatable.tabbed.tab-linethrough .tab .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.accordion.tab-linethrough .tab .nav-link.collapsed:hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.tabbed.tab-linethrough .tab .nav-link:not(.active):hover::before { background: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.accordion.tab-linethrough .tab .nav-link.collapsed:hover::before { background: rgba(var(--c2-link-hover), 1); } .c2-bg .repeatable.tabbed.tab-linethrough .tab .nav-link.active { color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.accordion.tab-linethrough .tab .nav-link:not(.collapsed) { color: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.tabbed.tab-linethrough .tab .nav-link.active::before { background: rgba(var(--c2-heading), 1); } .c2-bg .repeatable.accordion.tab-linethrough .tab .nav-link:not(.collapsed)::before { background: rgba(var(--c2-heading), 1); } /* Slider Navigation */ .c2-bg .slick-slider .slick-prev, .c2-bg .slick-slider .slick-next { color: rgba(var(--c2-link), 1); background-color: rgba(var(--c2-bg-color1), 1); } html.no-touch .c2-bg .slick-slider .slick-prev:hover, html.no-touch .c2-bg .slick-slider .slick-next:hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .slick-slider .slick-autoplay-toggle-button { color: rgba(var(--c2-link), 1); background-color: rgba(var(--c2-bg-color1), 1); } html.no-touch .c2-bg .slick-slider .slick-autoplay-toggle-button:hover { color: rgba(var(--c2-link-hover), 1); } .c2-bg .slick-slider .slick-dots li > button { background-color: rgba(var(--c2-text), 1); } html.no-touch .c2-bg .slick-slider .slick-dots li:not(.slick-active) > button:hover { background-color: rgba(var(--c2-link-hover), 1); } .c2-bg .slick-slider .slick-dots li.slick-active > button { background-color: rgba(var(--c2-highlight), 1); } /* Forms */ .form .c2-bg .form-control, .form .c2-bg .form-check-input { border-color: rgba(var(--c2-borders), 1); } .form .c2-bg .form-control:focus, .form .c2-bg .form-check-input:focus { border-color: rgba(var(--c2-highlight), 1); box-shadow: 0 0 5px var(--c2-highlight);} /* Ajax Loading */ .c2-bg .ajax-wrap .ajax-loading { background: rgba(var(--c2-bg-color1), 1); } .c2-bg.ajax-wrap .ajax-loading { background: rgba(var(--c2-bg-color1), 1); } .ajax-wrap .c2-bg .ajax-loading { background: rgba(var(--c2-bg-color1), 1); } .c2-bg .ajax-wrap .ajax-loading .loading span.message { border: 10px solid rgba(var(--c2-borders), 1); border-top: 10px solid rgba(var(--c2-highlight), 1); } .c2-bg.ajax-wrap .ajax-loading .loading span.message { border: 10px solid rgba(var(--c2-borders), 1); border-top: 10px solid rgba(var(--c2-highlight), 1); } .ajax-wrap .c2-bg .ajax-loading .loading span.message { border: 10px solid rgba(var(--c2-borders), 1); border-top: 10px solid rgba(var(--c2-highlight), 1); } .c2-bg .item_form-single_field .ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c2-borders), 1); border-top: 5px solid rgba(var(--c2-highlight), 1); } .c2-bg.item_form-single_field .ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c2-borders), 1); border-top: 5px solid rgba(var(--c2-highlight), 1); } .item_form-single_field .c2-bg.ajax-wrap .ajax-loading .loading span.message { border: 5px solid rgba(var(--c2-borders), 1); border-top: 5px solid rgba(var(--c2-highlight), 1); } .item_form-single_field .ajax-wrap .c2-bg .ajax-loading .loading span.message { border: 5px solid rgba(var(--c2-borders), 1); border-top: 5px solid rgba(var(--c2-highlight), 1); } /* Links */ .c2-bg .listing.listing_links:not(.listing_links-mini), .c2-bg .listing.listing_links:not(.listing_links-mini) .item a { border-color: rgba(var(--c2-borders), 1); } .c2-bg .listing.listing_links:not(.listing_links-mini) .item a:hover { background-color: rgba(var(--c2-borders), 0.1); } .c2-bg .listing.listing_links.listing_links-mini .item a::after { background-color: rgba(var(--c2-link), 1); } .c2-bg .listing.listing_links.listing_links-mini .item a:hover::after { background-color: rgba(var(--c2-link-hover), 1); } /* Data List */ .c2-bg .listing.listing_data-list.data-list_boxed { border-color: rgba(var(--c2-borders), 1); } .c2-bg .listing.listing_data-list .item.items-1:not(:last-child)::before { background-color: rgba(var(--c2-borders), 1); } /* Pricing pod */ .item.usn_pod_pricingtable .c2-bg .pricing-features .feature, .item.usn_pod_pricingtable .c2-bg .pricing-features .feature-title + .feature { border-color: rgba(var(--c2-borders), 1); } /* Sitemap */ .c2-bg nav.sitemap ul li::before, .c2-bg nav.sitemap ul li::after { background-color: rgba(var(--c2-borders), 1); } .c2-bg nav.sitemap ul li:hover::after { background-color: rgba(var(--c2-borders), 0.5); } /* Tables */ .c2-bg thead { color: rgba(var(--c2-heading), 1); } .c2-bg table, .c2-bg table th, .c2-bg table td { border-color: rgba(var(--c2-borders), 1); } /* Anchor Navigtation */ .component.usn_cmp_anchornavigation.c2-bg .expand-anchor { color: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg .expand-anchor span:before { background: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg .expand-anchor span { background: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg .expand-anchor span:after { background: rgba(var(--c2-heading), 1); } /* Basic */ .component.usn_cmp_anchornavigation.c2-bg nav.tab-basic ul.nav li.nav-item .nav-link { color: rgba(var(--c2-link), 1); border-color: rgba(var(--c2-borders), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-basic ul.nav li.nav-item .nav-link:not(.active) { background: rgba(var(--c2-borders), 0.15); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-basic ul.nav li.nav-item .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); background: rgba(var(--c2-borders), 0.25); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-basic ul.nav li.nav-item .nav-link.active { color: rgba(var(--c2-heading), 1); background: transparent; } .component.usn_cmp_anchornavigation.c2-bg nav.tab-basic ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c2-highlight), 1); } /* Button */ .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item .nav-link { color: rgba(var(--c2-heading), 1); border-color: rgba(var(--c2-borders), 0.25); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item .nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); border-color: rgba(var(--c2-borders), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item .nav-link.active { color: rgba(var(--c2-heading), 1); border-color: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), 0.25); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item .nav-link:not(.active):hover { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-buttons ul.nav li.nav-item .nav-link.active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c2-borders), var(--btn-box-shadow_o)); } /* Underline */ .component.usn_cmp_anchornavigation.c2-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active) { color: rgba(var(--c2-link), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-underline ul.nav li.nav-item a.nav-link.active { color: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-underline ul.nav li.nav-item a.nav-link:not(.active):hover::after { background: rgba(var(--c2-link-hover), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-underline ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c2-heading), 1); } /* Linethrough */ .component.usn_cmp_anchornavigation.c2-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active) { color: rgba(var(--c2-link), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active):hover { color: rgba(var(--c2-link-hover), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link.active { color: rgba(var(--c2-heading), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link:not(.active):hover::after { background: rgba(var(--c2-link-hover), 1); } .component.usn_cmp_anchornavigation.c2-bg nav.tab-linethrough ul.nav li.nav-item a.nav-link.active::after { background: rgba(var(--c2-heading), 1); } /* Scroll prompt */ .c2-bg .scroll-prompt .scroll-link { color: rgba(var(--c2-heading), 1); } .c2-bg .scroll-prompt .scroll-link i { color: rgba(var(--c2-heading), 1); } .c2-bg .scroll-prompt.scroll-prompt-wheel .mouse-scroll { border-color: rgba(var(--c2-heading), 1); } .c2-bg .scroll-prompt .mouse-scroll::before { background-color: rgba(var(--c2-heading), 1); } /* Shoppping Cart */ html#ecwid_html.usn body#ecwid_body .c2-bg .ec-size .ec-store h1 { color: rgba(var(--c2-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c2-bg .ec-size .ec-store .ec-header-h1 { color: rgba(var(--c2-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c2-bg .ec-size .ec-store .product-details__product-title { color: rgba(var(--c2-heading), 1)!important; } html#ecwid_html.usn body#ecwid_body .c2-bg .ec-size .ec-store .grid-product__title-inner { color: rgba(var(--c2-heading), 1)!important; } /* Heading separators - on page */ .c2-bg h1::before, .c2-bg h2::before, .c2-bg h3::before, .c2-bg h4::before, .c2-bg h5::before, .c2-bg h6::before { background: rgba(var(--c2-highlight), 1); } .c2-bg h1::after, .c2-bg h2::after, .c2-bg h3::after, .c2-bg h4::after, .c2-bg h5::after, .c2-bg h6::after { background: rgba(var(--c2-highlight), 1); } /* Heading separators - on components */ .c2-bg .heading::before, .c2-bg .secondary-heading::before { background: rgba(var(--c2-highlight), 1); } .c2-bg .heading::after, .c2-bg .secondary-heading::after { background: rgba(var(--c2-highlight), 1); } /* Heading separators - on specific items */ .item.c2-bg .heading::before, .item.c2-bg .secondary-heading::before { background: rgba(var(--c2-highlight), 1); } .item.c2-bg .heading::after, .item.c2-bg .secondary-heading::after { background: rgba(var(--c2-highlight), 1); } .inner.c2-bg .heading::before, .inner.c2-bg .secondary-heading::before { background: rgba(var(--c2-highlight), 1); } .inner.c2-bg .heading::after, .inner.c2-bg .secondary-heading::after { background: rgba(var(--c2-highlight), 1); } /* Overlayicons */ .item.item_text-boxed.c2-bg .image .overlayicon::before, .item.item_text-boxed .inner.c2-bg .image .overlayicon::before, .item.item_text-boxed .image.c2-bg .overlayicon::before { background: rgba(var(--c2-bg), 1); } /* Overlayicons - Backgrounds Linear */ .item.item_text-boxed.c2-bg.c2-bg-linear .image .overlayicon::before, .item.item_text-boxed .inner.c2-bg.c2-bg-linear .image .overlayicon::before, .item.item_text-boxed .image.c2-bg.c2-bg-linear .overlayicon::before { background: linear-gradient(var(--c2-bg-angle), rgba(var(--c2-bg-color1), 1) 0%, rgba(var(--c2-bg-color2), 1) 100%); } /* Overlayicons - Backgrounds Radial */ .item.item_text-boxed.c2-bg.c2-bg-radial .image .overlayicon::before, .item.item_text-boxed .inner.c2-bg.c2-bg-radial .image .overlayicon::before, .item.item_text-boxed .image.c2-bg.c2-bg-radial .overlayicon::before { background: radial-gradient(farthest-side at var(--c2-bg-start-perc) var(--c2-bg-stop-perc), rgba(var(--c2-bg-color1), 1) 0%, rgba(var(--c2-bg-color2), 1) 100%); } .item.item_text-boxed.c2-bg .image .overlayicon .icon, .item.item_text-boxed .inner.c2-bg .image .overlayicon .icon, .item.item_text-boxed .image.c2-bg .overlayicon .icon { color: rgba(var(--c2-heading), 1); } /* Focus visibles */ .c2-bg a:focus-visible, .c2-bg .btn:focus-visible, .c2-bg button:focus-visible, .form .inner.c2-bg a:focus-visible, .form .inner.c2-bg .btn:focus-visible, .form .inner.c2-bg button:focus-visible, .c2-bg .item .image a:focus-visible, .c2-bg .item .image a:focus-visible img, .c2-bg .item .image a:focus-visible picture, .c2-bg .item .image a:focus-visible .overlayicon, .c2-bg .listing_no-spacing .item a:focus-visible .image, .c2-bg .listing_no-spacing .item a:focus-visible .image img, .c2-bg .listing_no-spacing .item a:focus-visible .image picture, .c2-bg .listing_no-spacing .item a:focus-visible .image .overlayicon, .item.item_text-boxed .inner.c2-bg a:focus-visible .image, .item.item_text-boxed .inner.c2-bg a:focus-visible .image::before, .item.item_text-boxed .inner.c2-bg a:focus-visible .image img, .item.item_text-boxed .inner.c2-bg a:focus-visible .image picture, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c2-bg, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c2-bg::before, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c2-bg img, .usn_cmp_windows .item.item_text-boxed a:focus-visible .image.c2-bg picture, main:focus-visible > section.c2-bg:first-of-type, section.c2-bg:focus-visible { outline-color: rgba(var(--c2-highlight), 1)!important; } .c2-bg .form-control:focus-visible, .c2-bg .form-check-input:focus-visible, .form .inner.c2-bg .form-control:focus-visible, .form .inner.c2-bg .form-check-input:focus-visible, .form .inner.c2-bg .umbraco-forms-field input:focus-visible, .form .inner.c2-bg .umbraco-forms-field.longanswer textarea:focus-visible, .form .inner.c2-bg .umbraco-forms-field.dropdown select:focus-visible { outline-color: rgba(var(--c2-highlight), 1)!important; } /* Breadcrumbs */ .component.usn_cmp_breadcrumb.c2-bg .breadcrumb-trail { color: rgba(var(--c2-text), 1); } .component.usn_cmp_breadcrumb.c2-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item a, .component.usn_cmp_breadcrumb.c2-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item > span { color: rgba(var(--c2-text), 1); } .component.usn_cmp_breadcrumb.c2-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item:not(.active) a:hover { color: rgba(var(--c2-link), 1); } .component.usn_cmp_breadcrumb.c2-bg .breadcrumb-trail ol.breadcrumb li.breadcrumb-item.active > span { color: rgba(var(--c2-text), 0.5); } /* -------------------------------------------------- Additional Colors - Buttons -------------------------------------------------- */ /* Solid Buttons */ .btn.c1-btn-bg, .btn-bg_c1-btn-bg .btn { background: rgba(var(--c1-btn-bg-color1), 1); } .c1-btn-bg:hover, .btn-bg_c1-btn-bg .btn:hover, .btn.c1-btn-bg:focus, .btn-bg_c1-btn-bg .btn:focus, .btn.c1-btn-bg:active, .btn-bg_c1-btn-bg .btn:active { background: rgba(var(--c1-btn-bg-color1), 1); } /* Linear Buttons */ .btn.c1-btn-bg.c1-btn-bg-linear, .btn-bg_c1-btn-bg.c1-btn-bg-linear .btn { background: linear-gradient(var(--c1-btn-bg-angle), rgba(var(--c1-btn-bg-color1), 1) 0%, rgba(var(--c1-btn-bg-color2), 1) 100%); } .c1-btn-bg.c1-btn-bg-linear:hover, .btn-bg_c1-btn-bg.c1-btn-bg-linear .btn:hover, .btn.c1-btn-bg.c1-btn-bg-linear:focus, .btn-bg_c1-btn-bg.c1-btn-bg-linear .btn:focus, .btn.c1-btn-bg.c1-btn-bg-linear:active, .btn-bg_c1-btn-bg.c1-btn-bg-linear .btn:active { background: linear-gradient(var(--c1-btn-bg-angle), rgba(var(--c1-btn-bg-color1), 1) 0%, rgba(var(--c1-btn-bg-color2), 1) 100%); } /* Radial Buttons */ .btn.c1-btn-bg.c1-btn-bg-radial, .btn-bg_c1-btn-bg.c1-btn-bg-radial .btn { background: radial-gradient(farthest-side at var(--c1-btn-bg-start-perc) var(--c1-btn-bg-stop-perc), rgba(var(--c1-btn-bg-color1), 1) 0%, rgba(var(--c1-btn-bg-color2), 1) 100%); } .c1-btn-bg.c1-btn-bg-radial:hover, .btn-bg_c1-btn-bg.c1-btn-bg-radial .btn:hover, .btn.c1-btn-bg.c1-btn-bg-radial:focus, .btn-bg_c1-btn-bg.c1-btn-bg-radial .btn:focus, .btn.c1-btn-bg.c1-btn-bg-radial:active, .btn-bg_c1-btn-bg.c1-btn-bg-radial .btn:active { background: radial-gradient(farthest-side at var(--c1-btn-bg-start-perc) var(--c1-btn-bg-stop-perc), rgba(var(--c1-btn-bg-color1), 1) 0%, rgba(var(--c1-btn-bg-color2), 1) 100%); } /* Solid Buttons - inner hover */ .btn.c1-btn-bg-hover:hover > span, .btn.c1-btn-bg-hover:focus > span, .btn.c1-btn-bg-hover:active > span, .btn-bg_c1-btn-bg-hover .btn:hover > span, .btn-bg_c1-btn-bg-hover .btn:focus > span, .btn-bg_c1-btn-bg-hover .btn:active > span, a:hover .btn.c1-btn-bg-hover > span, a:focus .btn.c1-btn-bg-hover > span, a:active .btn.c1-btn-bg-hover > span, .btn.c1-btn-bg-hover-solid:hover > span, .btn.c1-btn-bg-hover-solid:focus > span, .btn.c1-btn-bg-hover-solid:active > span, .btn-bg_c1-btn-bg-hover-solid .btn:hover > span, .btn-bg_c1-btn-bg-hover-solid .btn:focus > span, .btn-bg_c1-btn-bg-hover-solid .btn:active > span, a:hover .btn.c1-btn-bg-hover-solid > span, a:focus .btn.c1-btn-bg-hover-solid > span, a:active .btn.c1-btn-bg-hover-solid > span { background: rgba(var(--c1-btn-bg-hover-color1), 1); } /* Linear Buttons - inner hover */ .btn.c1-btn-bg.c1-btn-bg-hover-linear:hover > span, .btn.c1-btn-bg.c1-btn-bg-hover-linear:focus > span, .btn.c1-btn-bg.c1-btn-bg-hover-linear:active > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-linear .btn:hover > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-linear .btn:focus > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-linear .btn:active > span, a:hover .btn.c1-btn-bg.c1-btn-bg-hover-linear > span, a:focus .btn.c1-btn-bg.c1-btn-bg-hover-linear > span, a:active .btn.c1-btn-bg.c1-btn-bg-hover-linear > span { background: linear-gradient(var(--c1-btn-bg-hover-angle), rgba(var(--c1-btn-bg-hover-color1), 1) 0%, rgba(var(--c1-btn-bg-hover-color2), 1) 100%); } /* Radial Buttons - inner hover */ .btn.c1-btn-bg.c1-btn-bg-hover-radial:hover > span, .btn.c1-btn-bg.c1-btn-bg-hover-radial:focus > span, .btn.c1-btn-bg.c1-btn-bg-hover-radial:active > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial .btn:hover > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial .btn:focus > span, .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial .btn:active > span, a:hover .btn.c1-btn-bg.c1-btn-bg-hover-radial > span, a:focus .btn.c1-btn-bg.c1-btn-bg-hover-radial > span, a:active .btn.c1-btn-bg.c1-btn-bg-hover-radial > span { background: radial-gradient(farthest-side at var(--c1-btn-bg-hover-start-perc) var(--c1-btn-bg-hover-stop-perc), rgba(var(--c1-btn-bg-hover-color1), 1) 0%, rgba(var(--c1-btn-bg-hover-color2), 1) 100%); } /* Button Borders */ .btn.c1-btn-borders, .btn-borders_c1-btn-borders .btn { border-color: rgba(var(--c1-btn-borders), 1); } /* Button Borders Hover */ .btn.c1-btn-borders:hover, .btn-borders_c1-btn-borders .btn:hover, .btn.c1-btn-borders:focus, .btn-borders_c1-btn-borders .btn:focus, .btn.c1-btn-borders:active, .btn-borders_c1-btn-borders .btn:active, a:hover .btn.c1-btn-borders, a:focus .btn.c1-btn-borders, a:active .btn.c1-btn-borders { border-color: rgba(var(--c1-btn-borders-hover), 1); } /* Button Text */ .btn.c1-btn-text, .btn-text_c1-btn-text .btn { color: rgba(var(--c1-btn-text), 1); } /* Button Text Hover */ .btn.c1-btn-text:hover, .btn-text_c1-btn-text .btn:hover, .btn.c1-btn-text:focus, .btn-text_c1-btn-text .btn:focus, .btn.c1-btn-text:active, .btn-text_c1-btn-text .btn:active, a:hover .btn.c1-btn-text, a:focus .btn.c1-btn-text, a:active .btn.c1-btn-text { color: rgba(var(--c1-btn-text-hover), 1); } /* Buttons box shadows */ .btn.c1-btn-borders:hover, .btn.c1-btn-borders:focus, .btn.c1-btn-borders:active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-btn-borders-hover), var(--btn-box-shadow_o)); } .btn-borders_c1-btn-borders .btn:hover, .btn-borders_c1-btn-borders .btn:focus, .btn-borders_c1-btn-borders .btn:active { box-shadow: var(--btn-box-shadow_h) var(--btn-box-shadow_v) var(--btn-box-shadow_b) rgba(var(--c1-btn-borders-hover), var(--btn-box-shadow_o)); } /* Basic buttons */ .basic-buttons .btn.c1-btn-text, .basic-buttons .btn-text_c1-btn-text .btn { color: rgba(var(--c1-btn-bg), 1); } .basic-buttons .btn.c1-btn-text:hover, .basic-buttons .btn.c1-btn-text:focus, .basic-buttons .btn.c1-btn-text:active, .basic-buttons .btn-text_c1-btn-text .btn:hover, .basic-buttons .btn-text_c1-btn-text .btn:focus, .basic-buttons .btn-text_c1-btn-text .btn:active { color: rgba(var(--c1-btn-bg-hover), 1); } /* Umbraco Form input submit button hovers */ /* Required so we do not change the HTML of Umbraco Forms source */ .umbraco-forms .btn-bg_c1-btn-bg input[type="submit"]:active, .umbraco-forms .btn-bg_c1-btn-bg input[type="submit"]:focus, .umbraco-forms .btn-bg_c1-btn-bg input[type="submit"]:hover { background: rgba(var(--c1-btn-bg-hover-color1),1); color: rgba(var(--c1-btn-text-hover),1); border-color: rgba(var(--c1-btn-borders-hover),1); } .umbraco-forms .btn-bg_base-btn-bg.c1-btn-bg-hover-linear input[type="submit"]:active, .umbraco-forms .btn-bg_base-btn-bg.c1-btn-bg-hover-linear input[type="submit"]:focus, .umbraco-forms .btn-bg_base-btn-bg.c1-btn-bg-hover-linear input[type="submit"]:hover { background: linear-gradient(var(--c1-btn-bg-hover-angle), rgba(var(--c1-btn-bg-hover-color1), 1) 0%, rgba(var(--c1-btn-bg-hover-color2), 1) 100%); } .umbraco-forms .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial input[type="submit"]:active, .umbraco-forms .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial input[type="submit"]:focus, .umbraco-forms .btn-bg_c1-btn-bg.c1-btn-bg-hover-radial input[type="submit"]:hover { background: radial-gradient(farthest-side at var(--c1-btn-bg-hover-start-perc) var(--c1-btn-bg-hover-stop-perc), rgba(var(--c1-btn-bg-hover-color1), 1) 0%, rgba(var(--c1-btn-bg-hover-color2), 1) 100%); } /* -------------------------------------------------- Additional Colors - Labels -------------------------------------------------- */ /* Label backgrounds Solid */ .c1-label-bg, .c1-label-bg.c1-label-bg-solid { background: rgba(var(--c1-label-bg-color1), 1); } /* Label backgrounds Linear */ .c1-label-bg.c1-label-bg-linear { background: linear-gradient(var(--c1-label-bg-angle), rgba(var(--c1-label-bg-color1), 1) 0%, rgba(var(--c1-label-bg-color2), 1) 100%); } /* Label backgrounds Radial */ .c1-label-bg.c1-label-bg-radial { background: radial-gradient(farthest-side at var(--c1-label-bg-start-perc) var(--c1-label-bg-stop-perc), rgba(var(--c1-label-bg-color1), 1) 0%, rgba(var(--c1-label-bg-color2), 1) 100%); } /* Label text */ .c1-label-text { color: rgba(var(--c1-label-text), 1); } /* -------------------------------- Custom CSS -------------------------------- */ :root { --gh-gutter: 1.5rem; /* horizontal padding on components */ /* ===== Color theme ===== */ --greenhous-green: 186, 220, 20; /* #BADC14 */ --secondary-black: 35, 41, 48; /* #232930 */ --light-grey: 243, 243, 243; /* #F3F3F3 */ --tertiary-black: 53, 58, 65; /* #353A41 */ --quaternary-black: 70, 75, 81; /* #464B51 */ --secondary-dark-black: 12, 12, 12; /* #0c0c0c - inverted light-grey*/ --tertiary-white: 202, 197, 190; /* #cac5be - inverted tertiary-black*/ --whitesmoke-50: 242, 242, 242; /* #f2f2f2 */ --whitesmoke-100: 217, 217, 217; /* #d9d9d9 */ --whitesmoke-200: 191, 191, 191; /* #bfbfbf */ --white: 255, 255, 255; /* #FFFFFF */ --black: 0, 0, 0; /* #000000 */ /* refurb */ --primary-50: 186, 220, 20; /* #badc14 */ --secondary-50: 171, 162, 155; /* #aba29b */ --neutral-dark-50: 35, 41, 48; /* #232930 */ --neutral-light-50: 243, 243, 243; /* #f3f3f3 */ --neutral-dark-45: 57, 62, 69; /* #393e45 */ --neutral-dark-40: 79, 84, 89; /* #4f5459 */ --neutral-light-55: 219, 219, 219; /* #dbdbdb */ --neutral-light-60: 194, 194, 194; /* #c2c2c2 */ /* bootstrap */ --bs-danger-text-emphasis: #580f08; --bs-danger-bg-subtle: #f8d4d0; --bs-danger-border-subtle: #f8d4d0; --bs-danger-text-emphasis: #580f08; --bs-info-text-emphasis: #082c58; --bs-info-bg-subtle: #d0e2f8; --bs-info-border-subtle: #d0e2f8; --bs-info-text-emphasis: #082c58; --specific-bg-color1: var(--neutral-light-50); --specific-bg-color2: var(--primary-50); --specific-border-color1: var(--white); } /* ===== Project color definitions ===== */ /* All places where color is specified in the project */ /* Dark Theme Styles */ [data-theme="dark"] { --theme-invert: 0; --base-bg-color1: var(--neutral-dark-50); --body-bg-color1: var(--neutral-dark-50); --base-heading: var(--neutral-light-50); --base-secondary-heading: var(--neutral-light-50); --base-text: var(--neutral-light-50); --c1-bg-color1: var(--neutral-light-50); --c1-heading: var(--neutral-dark-50); --c1-secondary-heading: var(--neutral-dark-50); --c1-text: var(--neutral-dark-50); --c1-link: var(--neutral-dark-50); --c2-bg-color1: var(--neutral-dark-45); --c2-heading: var(--neutral-light-50); --c2-text: var(--neutral-light-50); --c3-bg-color1: var(--neutral-dark-40); --specific-bg-color1: var(--neutral-light-50); --specific-bg-color2: var(--primary-50); --specific-border-color1: var(--white); --bs-body-bg: #393e45; --bs-body-color: #F3F3F3; --base-highlight: var(--neutral-light-50); --base-highlight-text: var(--neutral-dark-45); --base-borders: var(--neutral-dark-45); --base-link: var(--primary-50); --base-link-hover: var(--neutral-light-50); } /* Light Theme Styles */ [data-theme="light"] { --theme-invert: 1; --base-bg-color1: var(--neutral-light-50); --body-bg-color1: var(--neutral-light-50); --base-heading: var(--neutral-dark-50); --base-secondary-heading: var(--neutral-dark-50); --base-text: var(--neutral-dark-50); --c1-bg-color1: var(--neutral-dark-50); --c1-heading: var(--neutral-light-50); --c1-secondary-heading: var(--neutral-light-50); --c1-text: var(--neutral-light-50); --c1-link: var(--neutral-light-50); --c1-borders: var(--neutral-light-50); --c2-bg-color1: var(--neutral-light-55); --c2-heading: var(--neutral-dark-50); --c2-text: var(--neutral-dark-50); --c3-bg-color1: var(--neutral-light-60); --specific-bg-color1: var(--neutral-light-55); /* light-grey to whitesmoke */ --specific-bg-color2: var(--neutral-dark-50); /* greenhous-green to secondary-black */ --specific-border-color1: var(--black); --bs-body-bg: #dbdbdb; --bs-body-color: #232930; --base-highlight: var(--neutral-dark-45); --base-highlight-text: var(--neutral-light-50); --base-borders: var(--neutral-light-55); --base-link: var(--neutral-dark-50); --base-link-hover: var(--neutral-dark-50); } /* Tweaks */ .WidgetTitle__Header-sc-ruy1gu-2.cMztlf { color:rgba(var(--base-text), 1) !important;; } .container { /* Forces components to use all available width, overrides uSkinned component sizes */ max-width: var(--component-max-width); } .svg-404 div.image { /* Fixes 404 SVG sizing */ max-width: 480px !important; margin: 0 auto !important; } .inner.c1-bg.c1-bg-solid, .umbraco-forms.form, #iVFinanceWidget iframe { /* Adds border radius to specific elements */ overflow: hidden; border-radius: var(--base-border-radius); } #skip-to-content-link, #skip-to-footer-link { /* Hide uSkinned popups */ display: none !important; } .heading+.secondary-heading, .secondary-heading+.text, .heading+.text { margin: 8px 0 0 !important; } .c1-text { -webkit-line-clamp: unset !important; } div.item.usn_pod_textimage.text-center div.text ul > li { width: fit-content; margin: auto; } section.usn_cmp_pods.c2-bg .listing:not(.listing_window-mosaic) .item.item_has-bg .image:not(.rounded-circle), section.usn_cmp_pods.c2-bg .listing:not(.listing_window-mosaic) .item.item_has-bg .image:not(.rounded-circle) img { border-radius: var(--base-border-radius) !important; } @media (max-width: 576px) { section.usn_cmp_accordiontab nav.tabs > ul.nav { flex-direction: column; } section.usn_cmp_accordiontab nav.tabs > ul.nav > li.tab { margin-right: 0; } section.usn_cmp_accordiontab nav.tabs > ul.nav > li.tab:not(:first-of-type) > a { border-radius: 0; } section.usn_cmp_accordiontab div.repeatable-content.tab-content { border-radius: 0 0 var(--base-border-radius) var(--base-border-radius); } } section.usn_cmp_accordiontab div.repeatable-content.tab-content:has(table) { overflow-x: auto; } section.usn_cmp_code div.es-embed-root { max-width: 100% !important; } .full-width-trust-bar .es-embed-root { max-width: unset !important; } @media (max-width: 625px) { .full-width-trust-bar .trust-bar-container, .trust-bar-container { height: 34px !important; } } .breadcrumb-trail ol.breadcrumb li.breadcrumb-item.active > span { color: rgba(var(--base-text), .75); } /* END - Tweaks */ /* Mobile Padding Fix */ .row > * { /* adds a bit more padding on mobile */ padding-right: calc(var(--bs-gutter-x)* 1); padding-left: calc(var(--bs-gutter-x)* 1); } section.content.component.usn_cmp_code.base-bg.base-bg-solid.elfsight div.component-inner { margin: 0 auto !important; width: fit-content !important; } section.content.component.usn_cmp_code div.container, section.content.component.usn_cmp_text div.container { padding: 0 var(--gh-gutter) !important; } img#CookiebotSessionPixel { display: none !important; } /* END - Mobile Padding Fix */ /* Custom Lazyloading (for Search Listing Page and Used VDP) */ .fade-in { opacity: 0; transition: opacity .5s; } .fade-in.gh-lazyloaded { opacity: 1; } /* END - Custom Lazyloading */ /* == Custom Classes == */ /* .base-radius */ .base-radius > div { overflow: hidden !important; border-radius: var(--base-border-radius) !important; } /* .no-radius */ .no-radius > div, .no-radius img { border-radius: 0 !important; } /* .invert-images */ .invert-images img { filter: invert(var(--theme-invert)); } /* .info-container-third-black */ .info-container-third-black .container { color: rgba(var(--c1-text), 1) !important; background: rgba(var(--c2-bg-color1), 1) !important; border-radius: var(--base-border-radius); padding: var(--base-spacing) var(--base-spacing) 0; } .info-container-third-black.usn_cmp_splitcomponent .container { padding: var(--base-spacing) var(--base-spacing); } .info-container-third-black .info:not(.col) { height: 100%; display: flex; justify-content: center; flex-direction: column; } .info-container-third-black iframe { border-radius: var(--base-border-radius); } @media (max-width: 848px) { .info-container-third-black .container { padding: var(--base-half-spacing) var(--base-half-spacing) 0; } .info-container-third-black.usn_cmp_splitcomponent .container { padding: var(--base-half-spacing) var(--base-half-spacing); } } @media (max-width: 1417px) { .info-container-third-black .component-inner { margin: 0 var(--gh-gutter); } } /* .custom-info-container-vtwo */ .custom-info-container-vtwo > div > .container { max-width: 1414px; } .custom-info-container-vtwo .listing-pods > .item { padding: 0 var(--gh-gutter) var(--base-spacing); } .custom-info-container-vtwo .listing-pods > .item.items-1:last-child, .custom-info-container-vtwo .listing-pods > .item.items-2 { padding-bottom: 0 !important; } .custom-info-container-vtwo .listing-pods > .item > .inner { background-color: rgba(var(--c2-bg-color1), 1); border-radius: var(--base-border-radius); overflow: hidden; } .custom-info-container-vtwo .listing-pods > .item > .inner .info { padding: var(--base-spacing) !important; } .custom-info-container-vtwo .listing-pods > .item > .inner .image { height: 100%; border-radius: 0 !important; } .custom-info-container-vtwo .listing-pods > .item > .inner .image img { border-radius: 0 !important; } /* .no-margin */ .no-margin a { margin: 0 !important; } /* .2-line-cut-off */ .two-line-cut-off div a div div { height: 44.78px; } /* .btn-positioned-right */ /* this positions the button on an intro to the right */ @media (max-width: 1329px) { .btn-positioned-right .link { position: relative !important; right: 0 !important; top: 0 !important; margin: 16px !important; } } .btn-positioned-right .link { position: absolute; right: var(--pc-spacing); top: 3px; margin: 0; } /* .banner-width */ /* .banner-width-no-fill */ section.content.usn_cmp_banner { max-width: 1920px; margin: auto; } section.content.usn_cmp_banner > .component-inner { margin: 0 var(--pc-spacing); overflow: hidden; border-radius: var(--base-border-radius); } .banner-width-no-fill { max-width: 1366px !important; margin: auto; padding: 6px !important; } @media (max-width: 767px) { section.content.usn_cmp_banner > .component-inner { margin: 0; } } #site-content > .usn_cmp_newcarbannercomponent:not(:nth-child(4)) > div > div.custom-new-car-banner-component > div.ncb-background { max-width: 1366px; margin: 0 24px !important; } @media (max-width: 807px) { .custom-pod-height .info:not(.col) { position: relative !important; height: 150px !important; transform: translateY(-35%) !important; } } @media (max-width: 1299px) { .custom-pod-height-carousel .info:not(.col) { position: relative !important; top: unset !important; transform: translateY(-15%) !important; } .custom-pod-height-carousel div.item { height: auto !important; } .custom-pod-height-carousel div.item > div.inner { height: 100% !important; } } /* == END - Custom Classes == */ /* Style for Vincent Component */ .desktop { /* custom class that hides an element on everything except desktop */ display: none !important; } .tablet { /* custom class that hides an element on everything except tablet */ display: none !important; } .mobile { /* custom class that hides an element on everything except mobile */ display: none !important; } @media (max-width: 1199px) and (min-width: 768px) { .tablet { display: block !important; } .col-md-6 .btn { display: table-cell !important; } } @media (min-width: 1200px) { .desktop { display: block !important; } } @media (max-width: 991px) and (min-width: 768px) { .info.col img { height: 28px; } } @media (max-width: 767px) { .mobile { display: block !important; } .info.col img { height: 24px; } } .info.col img { /* aligns logo with header text */ position: relative; top: -1px; width: fit-content; height: 32px; } .tablet .container .row .col-md-6.column { /* centres image on tablet */ display: flex; justify-content: center; } .col-md-6 .read-more-btn-inside p { /* read more section for vincent component */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 16; -webkit-box-orient: vertical; -moz-box-orient: vertical; margin: 0; } .col-md-6 .read-more-btn-inside div { /* adds a gap under show more text */ margin-bottom: var(--base-half-spacing); } .col-md-6 .btn { /* centres button on mobile */ display: block; margin: 0 25%; } .vincent-image-max-width { max-width: 332px; } .btn-read-more, .btn-read-more-tablet { /* removes button style from read more text */ background: transparent; border: none; color: rgba(var(--greenhous-green), 1); font-weight: 600; padding: 0; } .mobile .container .row .col-md-6 img { /* adds gap between image and text on mobile */ margin: 0 0 var(--base-spacing) 0; } #site-content > section.content.component.usn_cmp_gridlayout.base-bg.base-bg-solid.no-radius .umb-grid img { border: 2px solid #badc14; } /* END - Style for Vincent Component */ /* Style for Blog Post Cards */ .cta-triangle div.item > div.c1-bg div.image:after { content: ""; border-right: 640px solid transparent; border-bottom: 64px solid rgba(var(--c1-bg-color1), 1); position: absolute; bottom: 0; right: 16px; } .cta-triangle div.item > div.c1-bg div.info { padding-top: 0 !important; } .c1-heading { /* responsiveness for card headings */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .c1-text { /* responsiveness for card body text */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .slick-arrow { /* carousel arrow style */ padding: 16px; border-radius: 50% !important; background-color: rgba(var(--greenhous-green), 1) !important; color: rgba(var(--secondary-black), 1) !important; } .slick-autoplay-toggle-button i.icon, .slick-slider .slick-prev i.icon, .slick-slider .slick-next i.icon { /* inside arrow size */ font-size: 24px; } .slick-slider ul.slick-dots { /* carousel dots container flex style */ display: flex; justify-content: center; flex-direction: row; align-items: center; } .slick-slider .slick-dots li { /* carousel dots wrapper style */ width: 24px; height: 24px; margin: 0 8px; display: flex; align-items: center; justify-content: center; } .slick-slider .slick-dots li > button { /* carousel dots style */ width: 20px; height: 20px; background: #ABA29B; } .slick-slider .slick-dots li.slick-active > button { /* carousel active dot style */ width: 24px; height: 24px; background: rgba(var(--greenhous-green), 1); } @media (max-width: 767px) { /* mobile view */ .date time { /* fixes postion of date on mobile */ bottom: -10px; position: relative; } } picture { /* positioning of photo */ display: block; height: 100%; } picture img { /* positioning of photo */ height: 100%; object-fit: cover; } /* END - Style for Blog Post Cards */ /* Footer */ nav.footer-navigation { /* smaller gap between footer content and footer navigation */ padding: 0; } .footer-text p { /* sets gap between footer p to 16px (instead of 15px) */ margin: 16px 0 0 0; } .link { /* sets gap between links/buttons to other parts */ margin-top: 16px; } @media (max-width: 1199px) { /* tablet view */ .col-lg-5 { /* contact sections takes up 100% width */ flex: 0 0 auto; width: 100%; } .col-lg-2 { /* page links go to second row and take up 100% width */ flex: 0 0 auto; width: 33.33333337%; } } @media (max-width: 767px) { /* mobile view */ nav.footer-navigation ul li { /* makes footer navigation more compact */ padding: 10px 0 0 0; } } /* END - Footer */ /* Footer Bar */ .usn_back-to-top { /* sets container width and height as well as centre button */ width: 64px; height: 64px; display: grid; justify-content: center; align-items: center; } #back-to-top-link { /* sets width and height for back to top button */ width: 48px; height: 48px; } #back-to-top-link, #back-to-top-link span { /* makes it a circle */ border-radius: 50%; } #back-to-top-link i.icon::before { /* sets size of back to top arrow */ font-size: 32px; font-weight: 600; } .usn_back-to-top { bottom: 64px !important; } /* END - Footer Bar */ /* Forms */ div.umbraco-forms.form input.btn.primary, div.umbraco-forms.form .umbraco-forms-caption { margin: 0 !important; } div.umbraco-forms.form .umbraco-forms-navigation.row-fluid, div.umbraco-forms.form .umbraco-forms-form.umbraco-forms- { padding: 0 !important; } div.umbraco-forms.form .umbraco-forms-field.consentforstoringsubmitteddata.checkbox { margin-bottom: 64px !important; } .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper label, .umbraco-forms-field.multiplechoice .umbraco-forms-field-wrapper label, .umbraco-forms-field.singlechoice .umbraco-forms-field-wrapper label { width: 100%; } .usn_cmp_splitcomponent div.item:last-of-type > div.info.text-left a.btn { margin: 0 !important; } div.form.contact-form div.form-inner input, div.form.contact-form div.form-inner textarea { background: rgba(var(--neutral-light-50), 1) !important; border: none; color: rgba(var(--neutral-dark-50), 1) !important; } /* END - Forms */ /* -------------------------------- END - Custom CSS -------------------------------- */