:root { /* Primary color */ --color-primary-background: #6fac2f; --color-primary-background-gradient-top: #6fac2f; --color-primary-background-gradient-bottom: #6fac2f; --color-primary-background-border: #6fac2f; --color-primary-background-shadow: #000; --color-primary-foreground: #f1f1f1; --color-primary-foreground-shadow: #000; /* Primary color - Active (used for hover/active states) */ --color-primary-active-background: #578B2D ; --color-primary-active-background-gradient-top: #578B2D ; --color-primary-active-background-gradient-bottom: #578B2D ; --color-primary-active-background-border: #578B2D ; --color-primary-active-background-shadow: #dc8840; --color-primary-active-foreground: #f1f1f1; --color-primary-active-foreground-shadow: #000; /* Secondary color */ --color-secondary-background: #578B2D ; --color-secondary-background-gradient-top: #578B2D ; --color-secondary-background-gradient-bottom: #578B2D ; --color-secondary-background-border: #000; --color-secondary-background-shadow: #578B2D ; --color-secondary-foreground: #f1f1f1; --color-secondary-foreground-shadow: #000; /* Secondary color - Active (used for hover/active states) */ --color-secondary-active-background: #578B2D ; --color-secondary-active-background-gradient-top: #4d4d4d; --color-secondary-active-background-gradient-bottom: #4d4d4d; --color-secondary-active-background-border: #000; --color-secondary-active-background-shadow: #3f3e3e; --color-secondary-active-foreground: #f1f1f1; --color-secondary-active-foreground-shadow: #000; /* Tertiary color */ --color-tertiary-background: #f5f5f5; --color-tertiary-background-gradient-top: #f5f5f5; --color-tertiary-background-gradient-bottom: #f5f5f5; --color-tertiary-background-border: #dddddd; --color-tertiary-background-shadow: #3f3e3e; --color-tertiary-foreground: #243141; --color-tertiary-foreground-shadow: #fff; /* Secondary color - Active (used for hover/active states) */ --color-tertiary-active-background: #f5f5f5; --color-tertiary-active-background-gradient-top: #f5f5f5; --color-tertiary-active-background-gradient-bottom: #f5f5f5; --color-tertiary-active-background-border: #dddddd; --color-tertiary-active-background-shadow: #3f3e3e; --color-tertiary-active-foreground: #243141; --color-tertiary-active-foreground-shadow: #fff; /* Box color */ --color-box-background: #f5f5f5; --color-box-background-gradient-top: #f5f5f5; --color-box-background-gradient-bottom: #f5f5f5; --color-box-background-border: #dddddd; --color-box-background-shadow: #dddddd; --color-box-background-divider: #dbdada; --color-box-foreground: var(--color-body); --color-box-foreground-shadow: #fff; --color-box-foreground-bold: #243141; --color-box-foreground-bold-shadow: #fff; --color-box-head-background: #6fac2f; --color-box-head-background-gradient-top: #6fac2f; --color-box-head-background-gradient-bottom: #6fac2f; --color-box-head-background-border: #dddddd; --color-box-head-foreground: #fff; --color-box-head-foreground-shadow: #000; --color-box-head-foreground-bold: #fff; --color-box-head-foreground-bold-shadow: #000; --color-box-footer-background: #dddddd; --color-box-footer-background-gradient-top: #dddddd; --color-box-footer-background-gradient-bottom: #dddddd; --color-box-footer-background-border: #cbcbcb; --color-box-footer-foreground: #3f3e3e; --color-box-footer-foreground-shadow: #3f3e3e; --color-box-footer-foreground-bold: #000; --color-box-footer-foreground-bold-shadow: #000; /* Box color - Active (used for hover/active states) */ --color-box-active-background: #2eacc5; --color-box-active-background-gradient-top: ##2eacc5; --color-box-active-background-gradient-bottom: ##2eacc5; --color-box-active-background-border: #a9aaac; --color-box-active-background-shadow: #a9aaac; --color-box-active-background-divider: #d0cece; --color-box-active-foreground: #578B2D; --color-box-active-foreground-shadow: #fff; --color-box-active-foreground-bold: #243141; --color-box-active-foreground-bold-shadow: #fff; --color-box-active-head-background: var(--color-primary-background); --color-box-active-head-background-gradient-top: var(--color-primary-background); --color-box-active-head-background-gradient-bottom: var(--color-primary-background); --color-box-active-head-background-border: #dddddd; --color-box-active-head-foreground: var(--color-primary-foreground); --color-box-active-head-foreground-shadow: var(--color-primary-foreground-shadow); --color-box-active-head-foreground-bold: transparent; --color-box-active-head-foreground-bold-shadow: transparent; --color-box-active-footer-background: #c4c2c2; --color-box-active-footer-background-gradient-top: #c4c2c2; --color-box-active-footer-background-gradient-bottom: #c4c2c2; --color-box-active-footer-background-border: #908f8f; --color-box-active-footer-foreground: #3f3e3e; --color-box-active-footer-foreground-shadow: #3f3e3e; --color-box-active-footer-foreground-bold: #000; --color-box-active-footer-foreground-bold-shadow: transparent; /* Badge - warning */ --color-badge-hot-background: #dc1010; --color-badge-hot-background-gradient-top: #dc1010; --color-badge-hot-background-gradient-bottom: #dc1010; --color-badge-hot-background-border: #dc1010; --color-badge-hot-foreground: #fff; /* Badge - new */ --color-badge-new-background: #45a523; --color-badge-new-background-gradient-top: #45a523; --color-badge-new-background-gradient-bottom: #45a523; --color-badge-new-background-border: #45a523; --color-badge-new-foreground: #fff; /* Badge - popular */ --color-badge-popular-background: #dc1010; --color-badge-popular-background-gradient-top: #dc1010; --color-badge-popular-background-gradient-bottom: #dc1010; --color-badge-popular-background-border: #dc1010; --color-badge-popular-foreground: #fff; /* Badge - free */ --color-badge-free-background: #15ace5; --color-badge-free-background-gradient-top: #15ace5; --color-badge-free-background-gradient-bottom: #15ace5; --color-badge-free-background-border: #15ace5; --color-badge-free-foreground: #fff; /* Default colors */ --background-body: #fff; /* Body background color */ --background-banner: #233141; /* Default background color for the banner */ --color-body: #696969; /* Used for body text */ --color-heading: #243141; /* Used for heading text */ --color-white: #f1f1f1; --color-black: #323f52; --color-border: #E8E8E8; --color-green: #43de04; --color-red: #dc1010; /* ---- Sizing ---- */ --container-width: 1250px; /* Template content width */ --logo-width: 225px; /* Set the max width of your logo */ --spacing-parent: 50px; /* Used for the spacing of main elements (e,g feature boxes, tables, slideshow bottom margin) */ --spacing-child: 30px; /* Used for the spacing of child elements (e.g bottom margin of paragraths, headings) */ --spacing-inner: 25px; /* Used for padding on boxes */ --text-size: 1.6em; /* Default text size (1.6em = 16px) */ --text-lineheight: 1.6em; /* Default text line height */ --border-radius: 5px; /* Set the default border radius - used through the template such as for buttons */ --border-bottom-width: 3px; /* Set the bottom border of all elements. Using a higher value than 1px creates a 3D bevel effect */ /* ---- Fonts ---- */ --font-body: 'Montserrat',sans-serif; /* The font used for all text other than headings */ --font-heading: 'Montserrat', sans-serif; /* The font used for headings */ /* ---- Misc ---- */ --shadow: 0 3px 8px 2px #999999; /* Default shadow color/spacing */ --gradient-degrees: 180deg; /* Set the angle for gradient colors */ } /* ------------------------------------------ ------------------------------------------ ----- Fonts ------------------------------------------ ------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&display=swap'); /* ------------------------------------------ ------------------------------------------ ----- Reset ------------------------------------------ ------------------------------------------ */ * { list-style: none; margin: 0; outline: none; padding: 0; box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { line-height: 1; font-size: 62.5%; /* Sets default font-size to 10px - 1em = 10px */ } img { border: none; display: block; max-width: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } ul { padding-left: 0; } table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: none; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; border-collapse: collapse; } input, textarea { font-family: var(--font-body); } /* ------------------------------------------ ------------------------------------------ ----- Defaults ------------------------------------------ ------------------------------------------ */ html { scroll-behavior: smooth; } body { background: var(--background-body); color: var(--color-body); font-family: var(--font-body); } .basecontainer { font-size: var(--text-size); line-height: var(--text-lineheight); } .contentcontainer { margin: 0 auto; width: 90%; max-width: 85%; } h1, h2, h3, h4, h5, h6, .headingstyle2, .headingstyle3 { color: var(--color-heading); font-weight: bold; margin: 0 0 var(--spacing-child) 0; font-family: var(--font-heading); text-align: center; } h1, h2, .headingstyle2 { font-size: 2em; line-height: 1.2em; text-transform: capitalize; } h3, h4, h5, h6, .headingstyle3 { line-height: 1.2em; font-weight: normal; } p { margin: 0 0 var(--spacing-child) 0; } ul, ol { margin: 0 0 var(--spacing-child) 0; } a { color: var(--color-primary-background); text-decoration: underline; } a:hover { color: var(--color-primary-background); text-decoration: none; } .far, .fas, .fab, .fad, .fal { margin: 0 5px 0 0; } /* ------------------------------------------ ------------------------------------------ ----- Common ------------------------------------------ ------------------------------------------ */ .clear { clear: both; height: 0; line-height: 0; } .center { text-align: center !important; } .cursor-pointer:hover { cursor: pointer !important; } .cursor-none:hover { cursor: default !important; } .padding0 { padding: 0 !important; } .paddingtop0 { padding-top: 0 !important; } .paddingbottom0 { padding-bottom: 0 !important; } .margintopparent { margin-top: var(--spacing-parent) !important; } .marginbottomparent { margin-bottom: var(--spacing-parent) !important; } .marginbottom0 { margin-bottom: 0 !important; } .marginright15 { margin-right: 15px !important; } .borderbottom0 { border-bottom: none !important; } .buttonspacing { margin: 5px !important; } .inline { display: inline; } .imageline { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 var(--spacing-child) 0; } .imgright { float: right; margin: 0 0 var(--spacing-child) var(--spacing-child); } .imgleft { float: left; margin: 0 var(--spacing-child) var(--spacing-child) 0; } .max-width-200 { max-width: 200px; } .red { color: var(--color-red); } .hiddencontent { display: none; } .icon-check { color: var(--color-green); } .icon-cross { color: var(--color-red); } .headingstyle1 { width: 100%; text-align: center; background: url("../images/heading-background.png") left center repeat-x; margin: 0 0 var(--spacing-child) 0; } .headingstyle1 h1, .headingstyle1 h2, .headingstyle1 h3, .headingstyle1 h4, .headingstyle1 h5, .headingstyle1 h6 { padding: 10px 15px; background: #fff; border: var(--color-border) 1px solid; border-radius: var(--border-radius); display: inline-block; margin: 0; } /* Display order */ .displayorder1 { order: 1; } .displayorder2 { order: 2; } .displayorder3 { order: 3; } .displayorder4 { order: 4; } .displayorder5 { order: 5; } .displayorder6 { order: 6; } .displayorder7 { order: 7; } .displayorder8 { order: 8; } .displayorder9 { order: 9; } .displayorder10 { order: 10; } .displayorder11 { order: 11; } .displayorder12 { order: 12; } .displayorder13 { order: 13; } .displayorder14 { order: 14; } .displayorder15 { order: 15; } .displayorder16 { order: 16; } .displayorder17 { order: 17; } .displayorder18 { order: 18; } .displayorder19 { order: 19; } .displayorder20 { order: 20; } .displayorder21 { order: 21; } .displayorder22 { order: 22; } .displayorder23 { order: 23; } .displayorder24 { order: 24; } .displayorder25 { order: 25; } .displayorder26 { order: 26; } .displayorder27 { order: 27; } .displayorder28 { order: 28; } .displayorder29 { order: 29; } .displayorder30 { order: 30; } /* ------------------------------------------ ------------------------------------------ ----- Layout ------------------------------------------ ------------------------------------------ */ /* Toolbar Main */ .toolbarmain-container { background: #6fac2f; border-bottom: var(--color-border) 1px solid; } .toolbarmain { display: flex; justify-content: space-between; align-items: center; color: var(--color-white); } /* Toolbar Google translate */ .toolbarmain .toolbarmain-googletranslate { position: absolute; left: 52%; transform: translateX(-50%); } .toolbarmain .toolbarmain-googletranslate img { display: inline; max-width: unset; } /* Toolbar menu */ .toolbarmain .toolbarmain-menu::after { clear: both; display: table; height: 0; content: ""; } .toolbarmain .toolbarmain-menu ul { margin: 0; } .toolbarmain .toolbarmain-menu ul li { float: left; } .toolbarmain .toolbarmain-menu ul li a { display: block; padding: 5px 10px; text-decoration: none; color: var(--color-white); } .toolbarmain .toolbarmain-menu ul li a:hover { color: var(--color-white); background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background) 0, var(--color-primary-active-background) 100%); } /* Toolbar highlight */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight a { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); } /* Toolbar language */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background) 0, var(--color-primary-background) 100%); } .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a .iti-flag { margin-right: 7px; } /* Toolbar welcome */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-welcome a { background-color: #fff; color: var(--color-primary-active-background); position: relative; } .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-welcome a span { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); padding: 1px 8px; margin: 0 0 0 5px; border-radius: 50%; line-height: 1; } /* Toolbar dropdown */ .toolbarmain .toolbarmain-menu ul li li { float: none; } .toolbarmain .toolbarmain-menu ul li li a, .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight li a { color: var(--color-secondary-foreground); background: var(--color-secondary-background); background: url("../images/toolbarli.png") 10px center no-repeat; background: url("../images/toolbarli.png") 10px center no-repeat, linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; border-top-width: 0; padding-left: var(--spacing-inner); } .toolbarmain .toolbarmain-menu ul li li a:hover, .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight li a:hover { color: var(--color-secondary-foreground); background: var(--color-secondary-active-background); background: url("../images/toolbarli.png") 10px center no-repeat; background: url("../images/toolbarli.png") 10px center no-repeat, linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); padding-left: 28px; } .toolbarmain .toolbarmain-menu ul li li.toolbarmain-menu-divider { height: 0; padding: 0; border-top: var(--color-primary-background) 1px solid; } .toolbarmain .toolbarmain-menu ul li ul { z-index: 9999; position: absolute; left: -999em; width: 200px; } .toolbarmain .toolbarmain-menu ul li:hover ul { left: auto; } /* Headermain */ .headermain { background: #fff; padding: 7px 0; /* border-bottom: var(--color-border) 1px solid; */ } .headermain .headermain-inner { display: flex; justify-content: space-between; align-items: center; } .headermain .headermain-logo { margin: 0; position: relative; } .headermain .headermain-logo img { max-width: var(--logo-width); } /* Navmain */ .navmain { position: relative; z-index: 5; line-height: 65px; } .navmain::after { content: ""; display: table; clear: both; } .navmain .navmain-mobile-icon, .navmain .navmain-mobile-home, .navmain .navmain-mobile-child, .navmain select, .navmain.navmain-select .navmain-mobile-icon, .navmain.navmain-select .navmain-mobile-home { /* Remove mobile menu elements */ display: none; } .navmain ul { margin: 0; } .navmain ul li { float: left; list-style: none; } .navmain ul li a { display: block; margin: 0; text-decoration: none; color: var(--color-black); padding: 0 16px; text-transform: uppercase; font-weight:bold; } .navmain ul li:hover, .navmain ul li.navmain-active { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .navmain ul li:hover a, .navmain ul li.navmain-active a { color: var(--color-secondary-foreground); } /* Home */ .navmain .navmain-home .far, .navmain .navmain-home .fas, .navmain .navmain-home .fab, .navmain .navmain-home .fad, .navmain .navmain-home .fal { margin: 0; } /* CTA */ .navmain .navmain-cta { background: none; } .navmain .navmain-cta a { padding: 0 20px; border: none !important; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; } /* Dropdown */ .navmain .navmain-dropdown a { background: url("../images/navmain-drop.png") 10px center no-repeat; padding-left: 25px; } .navmain .navmain-dropdown.navmain-active a { background: url("../images/navmain-drop-active.png") 10px center no-repeat; } .navmain .navmain-dropdown:hover a, .navmain .navmain-dropdown a:hover, .navmain .navmain-dropdown.navmain-active a:hover { background: url("../images/navmain-drop-hover.png") 10px center no-repeat; } .navmain .navmain-dropdown .navmain-subcontainer { position: absolute; left: -999em; margin: 0 auto; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); z-index: 9999; line-height: 1.4em; font-weight: normal; border-top: var(--color-secondary-background) 3px solid; border-bottom: var(--color-secondary-background) 3px solid; border-left: var(--color-secondary-background) 1px solid; border-right: var(--color-secondary-background) 1px solid; z-index: 5; } .navmain .navmain-dropdown:hover .navmain-subcontainer { right: auto; left: 0px; top: 65px; } .navmain .navmain-dropdown .navmain-subcontainer a { background: none; text-transform: none; } /* Dropdown - Single */ .navmain .navmain-dropdown-single { position: relative; } .navmain .navmain-dropdown-single .navmain-subcontainer { width: 200px; padding: 0; } .navmain .navmain-dropdown-single .navmain-subcontainer ul li { width: 198px; } .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-link a { padding: 12px 20px 12px 24px; display: block; color: var(--color-box-active-foreground-bold); text-shadow: var(--color-box-active-foreground-shadow) 1px 1px; font-weight: 700; border-top: var(--color-box-active-background-border) 1px solid; border-bottom: var(--color-box-active-background-border) 1px solid; background: url("../images/listitem.svg") 10px center no-repeat; background-size: 8px auto; } .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover { padding-left: 29px; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); background-position: 15px center; text-shadow: none; } .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-link .navmain-link-text { display: none; } /* Dropdown - Mega Menu */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer { width: 100%; padding: 25px; } /* Columns */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns { display: flex; justify-content: space-between; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col p:last-child { margin: 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col1 { flex-basis: 70%; padding: 0 35px 0 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { border-left: var(--color-box-background-divider) 1px solid; flex-basis: 30%; padding: 15px 0 15px 35px; min-height: 255px; color: var(--color-box-foreground); } /* Links */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-links { display: flex; flex-wrap: wrap; justify-content: space-between; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { flex-basis: 48%; margin: 15px 0px; position: relative; overflow: hidden; border-radius: var(--border-radius); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { display: block; padding: 15px; width: 100%; height: 100%; color: var(--color-box-active-foreground-bold); text-shadow: var(--color-box-active-foreground-shadow) 1px 1px; border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-radius: var(--border-radius); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:hover, .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:active { color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-heading { display: block; font-weight: bold; padding: 0 0 5px 0; font-family: var(--font-heading); font-size: 1.15em; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-text { display: block; margin: 0; text-shadow: none; text-align: left; font-size: 0.9em; font-weight: normal; } /* Active */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a, .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:hover, .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:active { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active .navmain-link-text { color: var(--color-primary-foreground); } /* Icons */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a, .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a:hover { padding-left: 75px; } /* Highlight */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-highlight::before { position: absolute; top: -11px; right: -67px; width: 150px; padding: 23px 0 6px 0; text-align: center; transform: rotate(45deg); font-size: 0.7em; font-weight: bold; line-height: 1; text-transform: uppercase; } /* Hot */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-highlight.navmain-highlight-hot::before { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } /* New */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-highlight.navmain-highlight-new::before { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } /* --- Sticky menu --- */ .headermain.isStuck { width: 100%; max-width: none; position: relative; z-index: 9999; padding: 0; /* box-shadow: var(--shadow); */ border-bottom: none; } /* Main */ .mainmain { padding: var(--spacing-parent) 0; overflow: hidden; /* Fix animation causing scrollbars */ } .mainmain img { display: inline; } /* Subbanner */ .subbanner { background: var(--background-banner) url("../images/background.jpg") center center no-repeat; } .subbanner .background { background: rgba(0, 0, 0, 0.6); display: inline-block; width: 100%; height: 100%; } .subbanner .subbanner-heading { color: var(--color-primary-background); text-shadow: var(--color-primary-background-shadow) 1px 1px; font-size: 3em; line-height: 1.2em; position: relative; z-index: 2; text-align: center; font-family: var(--font-heading); font-weight: bold; margin: 0; } .subbanner .contentcontainer { padding: var(--spacing-parent) 0; } /* Breadcrumb main */ .breadcrumbmain { text-align: center; color: var(--color-white); margin: var(--spacing-child) 0 0 0; } .breadcrumbmain a { color: var(--color-white); padding: 0 5px; } /* Partnersmain */ .partnersmain { width: 100%; margin: 0 0 var(--spacing-child) 0; padding: 0 0 var(--spacing-child) 0; border-bottom: var(--color-border) 1px solid; } .partnersmain img { padding: 0 var(--spacing-parent); } /* Footermain */ .footermain { background: #fff; border-top: var(--color-border) 1px solid; } .footermain .footermain-inner { display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--spacing-child) 0; } .footermain .footermain-col { flex-basis: 18.5%; } .footermain .footermain-col4 { flex-basis: 39%; } .footermain a, .footermain a:hover { color: var(--color-body); } .footermain .footermain-heading { color: var(--color-black); font-size: 1.3em; font-weight: bold; text-transform: uppercase; text-align: left; margin: 0 0 var(--spacing-child) 0; font-family: var(--font-heading); } .footermain .footermain-logo { display: table; margin: 0 0 15px 0; } .footermain .footermain-text { margin: 0 0 var(--spacing-child) 0; } .footermain .footermain-social { display: flex; flex-wrap: wrap; } .footermain .footermain-social .footermain-social-icon { margin: 8px 8px; } .footermain .footermain-social .footermain-social-icon img { border-radius: var(--border-radius); max-width: 50px; } .footermain .footermain-social img:hover { transition: transform .5s ease; transform: scale(1.1); } .footermain .footermain-links ul { display: flex; flex-direction: column; } .footermain .footermain-links ul li { position: relative; } .footermain .footermain-links ul li a { display: block; padding: 10px 10px 10px 10px; text-decoration: none; border-bottom: var(--color-border) 1px solid; } .footermain .footermain-links ul li a .far, .footermain .footermain-links ul li a .fas, .footermain .footermain-links ul li a .fab, .footermain .footermain-links ul li a .fad, .footermain .footermain-links ul li a .fal { margin-right: 10px; } .footermain .footermain-links ul li:first-child a { border-top: var(--color-border) 1px solid; } .footermain .footermain-links ul li a:hover { padding-left: 15px; font-weight: bold; color: var(--color-black); } /* Highlight */ .footermain .footermain-highlight::after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); text-align: center; padding: 3px 3px; font-size: 0.7em; line-height: 1; font-weight: bold; border-radius: var(--border-radius); text-transform: uppercase; } /* Hot */ .footermain .footermain-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } /* New */ .footermain .footermain-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } /* Link block */ .footermain .footermain-linkblocks { margin: 0 0 var(--spacing-child) 0; } .footermain .footermain-linkblocks .footermain-linkblock { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-radius: var(--border-radius); margin: 0 0 15px 0; border: var(--color-box-active-background-border) 0px; border-bottom-width: var(--border-bottom-width); color: var(--color-black); font-weight: bold; width: 100%; padding: 8px 15px; } .footermain .footermain-linkblocks .footermain-linkblock:last-child { margin-bottom: 0; } .footermain .footermain-linkblocks .footermain-linkblock a { display: block; color: var(--color-black); } .footermain .footermain-linkblocks .footermain-linkblock a:hover { color: var(--color-black); } .footermain .footermain-linkblocks .far, .footermain .footermain-linkblocks .fas, .footermain .footermain-linkblocks .fab, .footermain .footermain-linkblocks .fad, .footermain .footermain-linkblocks .fal { margin-right: 15px; } /* Copyrightmain */ .copyrightmain { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); padding: var(--spacing-child) 0; color: var(--color-box-foreground); } .copyrightmain::after { content: ""; clear: both; } .copyrightmain .copyrightmain-inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .copyrightmain a, .copyrightmain a:hover { color: var(--color-box-foreground); } .copyrightmain .copyrightmain-links ul { margin: 0; display: flex; } .copyrightmain .copyrightmain-links ul li a { display: block; padding: 0 15px; border-right: var(--color-box-background-divider) 1px solid; text-decoration: none; color: var(--color-box-foreground); } .copyrightmain .copyrightmain-links ul li a:hover { color: var(--color-primary-background); font-weight: bold; } .copyrightmain .copyrightmain-links ul li:last-child a { border-right: none; } .copyrightmain .copyright-logos { border-top: var(--color-box-background-divider) 1px solid; display: flex; justify-content: space-between; margin-top: var(--spacing-child); padding: var(--spacing-child) var(--spacing-child) 0 var(--spacing-child); max-width: 600px; } .copyrightmain .copyright-logos .copyright-logo { padding: 0 10px; } .copyrightmain .copyright-logos .copyright-logo img { width: 100%; max-width: 175px; } /* ------------------------------------------ ------------------------------------------ ----- Slideshow ------------------------------------------ ------------------------------------------ */ .slideshow:hover { cursor: grab; } .slideshow:active { cursor: grab; } /* ------------------------------------------ ------------------------------------------ ----- Banner ------------------------------------------ ------------------------------------------ */ .banner { background-size: cover; margin: 0; color: #444; /* text-shadow: var(--color-black) 1px 1px; */ overflow: hidden; } .banner .contentcontainer { padding: var(--spacing-parent) 0; position: relative; } .banner a, .banner a:hover { color: var(--color-white); } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: var(--color-secondary-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%) !important; } .banner .banner-price { position: absolute; top: 20px; right: 0; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); padding: 7px 10px; text-align: center; z-index: 2; display: flex; justify-content: center; } .banner .banner-price .banner-price-price { font-weight: bold; font-size: 1.3em; } .banner .banner-price .banner-price-before { border-right: var(--color-secondary-background-border) 1px solid; padding-right: 8px; margin-right: 8px; } .banner .banner-price .banner-price-term { margin-left: 8px; } .banner .banner-price .banner-price-currencyprefix, .banner .banner-price .banner-price-currencysuffix { font-weight: bold; font-size: 1em; display: inline; } .banner .banner-price .banner-price-currencyprefix { padding-right: 3px; } .banner .banner-price .banner-price-currencysuffix { padding-left: 3px; } .banner .banner-price .banner-price-free { text-transform: uppercase; } .banner .banner-heading { color: var(color-primary-active-foreground); text-shadow: var(--color-primary-background-shadow) 1px 1px; text-align: center; font-size: 3em; line-height: 1.2em; margin: 0 0 var(--spacing-child) 0; font-family: var(--font-heading); font-weight: bold; text-transform: capitalize; } .banner .banner-text { text-align: center; font-size: 1.6em; line-height: 1.3em; margin: 0 0 var(--spacing-child) 0; text-transform: capitalize; } .banner .list ul li { font-size: 1.2em; background-image: none; padding-left: 0; text-transform: capitalize; } .banner .list ul li .far, .banner .list ul li .fas, .banner .list ul li .fab, .banner .list ul li .fad, .banner .list ul li .fal { margin: 0 10px 0 0; color: var(--color-primary-background); } .banner .banner-twocolumn { display: flex; justify-content: space-between; flex-direction: row; } .banner .banner-twocolumn .banner-twocolumn-col1 { display: flex; justify-content: center; flex-direction: column; flex-basis: 55%; } .banner .banner-twocolumn .banner-twocolumn-col2 { display: flex; justify-content: center; align-items: center; flex-basis: 40%; } .banner .banner-twocolumn .banner-twocolumn-col2 a { position: relative; } .banner .banner-twocolumn .banner-twocolumn-col2 a:hover img { opacity: 0.9; } .banner .banner-video-badge { position: absolute; bottom: var(--spacing-child); right: 0; z-index: 1; background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow); font-weight: bold; text-transform: capitalize; padding: .5em 1em .5em; border-radius: var(--border-radius) 0 0 var(--border-radius); } .banner .banner-buttons { display: flex; justify-content: center; flex-wrap: wrap; } .banner .banner-buttons .button1 { margin: 5px 10px; } /* Banner - Backgrounds */ /* Banner 1 */ .banner.banner-banner1 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 2 */ .banner.banner-banner2 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 3 */ .banner.banner-banner3 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 4 */ .banner.banner-banner4 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 5 */ .banner.banner-banner5 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 6 */ .banner.banner-banner6 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 7 */ .banner.banner-banner7 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 8 */ .banner.banner-banner8 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 9 */ .banner.banner-banner9 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner 10 */ .banner.banner-banner10 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner static */ .banner.banner-bannerstatic { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom1 */ .banner.banner-custom1 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom2 */ .banner.banner-custom2 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom3 */ .banner.banner-custom3 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom4 */ .banner.banner-custom4 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom5 */ .banner.banner-custom5 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom6 */ .banner.banner-custom6 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom7 */ .banner.banner-custom7 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom8 */ .banner.banner-custom8 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom9 */ .banner.banner-custom9 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner custom10 */ .banner.banner-custom10 { background-color: var(--background-banner); background-position: center center; background-repeat: no-repeat; } /* Banner Logo Design */ .banner.banner-logodesign { background-color: var(--background-banner); background-position: center top; background-repeat: no-repeat; } /* Banner Banner Design */ .banner.banner-bannerdesign { background-color: var(--background-banner); background-position: center top; background-repeat: no-repeat; } /* Banner Affiliate Program */ .banner.banner-affiliateprogram { background-color: var(--background-banner); background-position: center top; background-repeat: no-repeat; } /* Banner Register Domain */ .banner.banner-registerdomain { background-color: var(--background-banner); background-position: center top; background-repeat: no-repeat; } /* Banner - Design 2 column */ .banner.banner-design2column .banner-heading, .banner.banner-design2column .banner-text { text-align: left; } .banner.banner-design2column .banner-buttons { justify-content: flex-start; } /* Screenshot enabled */ .banner.banner-design2column.banner-designscreenshot .banner-twocolumn .banner-twocolumn-col1 { margin: 0 0 var(--spacing-parent) 0; } .banner.banner-design2column.banner-designscreenshot .banner-twocolumn .banner-twocolumn-col2 { align-items: end; margin: var(--spacing-child) 0 0 0; } .banner.banner-design2column.banner-designscreenshot picture::before { /* background-color: #d7d7d7; */ /* background: url("../images/browsericons.png") 5px center no-repeat; */ /* background: url("../images/browsericons.png") 5px center no-repeat, linear-gradient(to bottom, #d7d7d7, #d0d0d0); */ /* background-size: auto 5px; */ /* border-bottom: #767676 1px solid; */ border-radius: 2px 2px 0 0; height: 9px; display: block; content: ""; } .banner.banner-design2column.banner-designscreenshot .contentcontainer { padding-bottom: 15px; } /* Banner - Domain Search */ .banner-domainsearch { width: 50%; position: relative; margin: 0 auto; } .banner-domainsearch input { font-size: 1.2em; height: 65px; } .banner-domainsearch input[type="text"] { width: 70%; padding: 0 var(--spacing-inner); border: #000 1px solid; border-radius: var(--border-radius) 0 0 var(--border-radius); } .banner-domainsearch input[type="submit"] { width: 30%; border-radius: 0 var(--border-radius) var(--border-radius) 0; } .banner-domainsearch::before { position: absolute; left: 5px; top: 5px; font-size: 18px; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border-radius: var(--border-radius) 0 0 var(--border-radius); color: var(--color-secondary-foreground); line-height: 1; padding: 19px; text-shadow: none; } /* ------------------------------------------ ------------------------------------------ ----- Elements ------------------------------------------ ------------------------------------------ */ /* Columns */ .columns { display: flex; flex-wrap: wrap; justify-content: space-between; } .columns.columns-verticle-center { align-items: center; } .columns.columns-horizontal-center { justify-content: center; } .columns .columns-col { margin: 0 0 var(--spacing-child) 0; } .columns.columns-1col .columns-col { flex-basis: 100%; } .columns.columns-2col .columns-col { flex-basis: 49%; } .columns.columns-3col .columns-col { flex-basis: 32%; } .columns.columns-4col .columns-col { flex-basis: 24%; } .columns.columns-5col .columns-col { flex-basis: 19%; } .columns.columns-style1 .columns-col1 { flex-basis: 60%; } .columns.columns-style1 .columns-col2 { flex-basis: 38%; } /* Accordion */ .accordion { margin: 0 0 var(--spacing-parent) 0; border-left: var(--color-box-background-border) 1px solid; border-right: var(--color-box-background-border) 1px solid; display: flex; flex-direction: column; } .accordion .accordion-block { width: 100%; } .accordion .accordion-block .accordion-heading { background: var(--color-box-background); background: url("../images/accordion-open.png") 20px center no-repeat; background: url("../images/accordion-open.png") 20px center no-repeat, linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-top: var(--color-box-background-border) 1px solid; padding: 10px 10px 10px 60px; cursor: pointer; color: var(--color-box-foreground); font-weight: bold; } .accordion .accordion-block .accordion-heading:hover { color: var(--color-primary-background); } .accordion .accordion-block .accordion-heading .accordion-tag { float: right; color: var(--color-body); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); padding: 5px 6px; border-radius: var(--border-radius); line-height: 1; } .accordion .accordion-block:last-child .accordion-heading { border-bottom: var(--color-box-background-border) 3px solid; } .accordion .accordion-block .accordion-close { background: var(--color-box-background); background: url("../images/accordion-close.png") 20px center no-repeat; background: url("../images/accordion-close.png") 20px center no-repeat, linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-primary-background); border-bottom: var(--color-box-background-border) 1px solid; } .accordion .accordion-block .accordion-answer { display: none; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); padding: var(--spacing-inner) var(--spacing-inner) var(--spacing-inner) 60px; color: var(--color-box-foreground); } .accordion .accordion-block:last-child .accordion-answer { border-bottom: var(--color-box-background-border) 3px solid; } .accordion .accordion-block .accordion-answer p:last-child { margin-bottom: 0; } /* Items In Cart */ .itemsincart { border-bottom: var(--color-border) 1px solid; } .itemsincart .contentcontainer { padding: var(--spacing-child) 0; } .itemsincart .itemsincart-heading { color: var(--color-primary-background); } .itemsincart p { text-align: center; font-size: 1.2em; line-height: 1.5em; } .itemsincart p:last-child { margin-bottom: 0; } .itemsincart .itemsincart-coupon { padding: 5px 10px; font-weight: bold; font-size: 1.1em; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 3px dashed; color: var(--color-box-foreground); } .itemsincart .itemsincart-buttons { text-align: center; } .itemsincart .itemsincart-buttons .color2 { margin-left: 15px; margin-right: 15px; } .itemsincart .itemsincart-buttons .button1 { margin-bottom: 10px; } /* Domainchecker */ .domainchecker { background: var(--color-white); background: linear-gradient(var(--gradient-degrees), var(--color-white) 0, var(--color-pwhite) 100%); background-size: cover; } .domainchecker .domainchecker-columns { display: flex; justify-content: space-between; padding: var(--spacing-parent) 0; align-items: center; } .domainchecker .domainchecker-columns-left { width: 49%; } .domainchecker .domainchecker-columns-right { width: 49%; } .domainchecker .domainchecker-heading { color: var(--color-black); text-shadow: var(--color-primary-foreground-shadow) 0px 0px; font-size: 3em; line-height: 1.2em; margin: 0 0 var(--spacing-child) 0; font-family: var(--font-heading); font-weight: bold; } .domainchecker .domainchecker-subheading { font-size: 1.6em; line-height: 1.3em; color: var(--color-body); font-weight: bold; } .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-price, .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-currencyprefix, .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-currencysuffix, .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-term { display: inline; } .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-currencyprefix, .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-currencysuffix { font-size: 0.8em; } .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-currencysuffix { padding-left: 5px; } .domainchecker .domainchecker-subheading .domainchecker-subheading-price .domainchecker-subheading-price-term { padding-left: 8px; } .domainchecker .domainsearch { position: relative; margin: 0 auto var(--spacing-child) auto; max-width: 650px; display: block; } .domainchecker .domainsearch::after { clear: both; display: table; content: ""; } .domainchecker .domainsearch::before { content: "www."; position: absolute; left: 5px; top: 5px; font-size: 18px; background: var(--color-black); background: linear-gradient(var(--gradient-degrees), var(--color-black) 0, var(--color-black) 100%); border-radius: var(--border-radius) 0 0 var(--border-radius); color: var(--color-secondary-foreground); line-height: 1; padding: 19px; text-shadow: none; } .domainchecker .domainsearch input { font-size: 1.2em; height: 65px; float: left; } .domainchecker .domainsearch input[type="text"] { width: 70%; padding: 0 var(--spacing-inner) 0 105px; border: var(--color-black) 1px solid; border-radius: var(--border-radius) 0 0 var(--border-radius); } .domainchecker .domainsearch input[type="submit"] { width: 30%; border-radius: 0 var(--border-radius) var(--border-radius) 0; text-transform: uppercase; } .domainchecker .domainpricing { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 650px; margin: 0 auto; } .domainchecker .domainpricing .domaintld { background: var(--color-secondary-active-foreground); border: var(--color-black) 0px; border-radius: var(--border-radius); text-align: center; margin: 10px; padding: 15px; } .domainchecker .domainpricing .domaintld .domaintld-heading { font-size: 1.3em; font-weight: bold; color: var(--color-secondary-background); } .domainchecker .domainpricing .domaintld .domaintld-price { } .domainchecker .domainpricing .domaintld .domaintld-price-price, .domainchecker .domainpricing .domaintld .domaintld-price-currencyprefix, .domainchecker .domainpricing .domaintld .domaintld-price-currencysuffix, .domainchecker .domainpricing .domaintld .domaintld-price-term { display: inline; } .domainchecker .domainpricing .domaintld .domaintld-price-currencyprefix { font-size: 0.8em; } .domainchecker .domainpricing .domaintld .domaintld-price-currencysuffix { font-size: 0.8em; } /* Linksbar */ .linksbar { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-bottom: var(--color-box-background-border) 3px solid; padding: 3px 0; } .linksbar ul { margin: 0; text-align: center; } .linksbar ul li { display: inline-block; font-size: 1.2em; font-weight: bold; } .linksbar ul li a { display: block; padding: 10px 10px; color: var(--color-box-foreground-bold); border-right: var(--color-box-background-divider) 1px solid; text-decoration: none; } .linksbar ul li.linksbar-active a, .linksbar ul li:hover a { color: var(--color-primary-background); } .linksbar ul li:last-child a { border-right: none; } /* List */ .list ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; } .list ul li { display: inline-block; padding: 5px 10px 5px 39px; margin: 0 0 5px 0; background: url("../images/bullet-icon.png") left center no-repeat; background-size: auto 20px; } .list ul li:last-child { margin-bottom: 0; } .list.list-col1 ul li { width: 100%; } .list.list-col2 ul li { width: 49%; } .list.list-col3 ul li { width: 32%; } /* CTA */ .cta-container { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .cta { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-parent); } .cta .cta-col1 { color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; font-size: 2.5em; line-height: 1.2em; font-weight: bold; text-align: center; } .cta .cta-col2 { display: flex; justify-content: flex-end; flex-grow: 1; padding: 0 0 0 var(--spacing-child); font-size: 1.4em; } .cta .cta-col2 .button1 { white-space: nowrap; } /* CTA 2 */ .cta2 { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-child); margin: 0 0 var(--spacing-child) 0; position: relative; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); } .cta2 .cta2-col1 { color: var(--color-box-foreground-bold); text-shadow: var(--color-box-foreground-bold-shadow) 1px 1px; font-size: 2.5em; line-height: 1.2em; font-weight: bold; text-align: center; } .cta2 .cta2-col2 { display: flex; justify-content: flex-end; flex-grow: 1; padding: 0 0 0 var(--spacing-child); font-size: 1.4em; } .cta2 .cta2-col2 .button1 { white-space: nowrap; } /* ------------------------------------------ ------------------------------------------ ----- Buttons - Used on various pages ------------------------------------------ ------------------------------------------ */ .button1 { display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; outline: none; cursor: pointer; text-align: center; text-decoration: none; border-radius: var(--border-radius); font-style: normal; padding: .5em 1em .5em; font-weight: bold; text-transform: uppercase; } .button1:hover { text-decoration: none; } .button1-more { padding: 4px 8px; line-height: 1; font-size: 0.8em; } /* Primary Button */ .color1, .color1:active, .color1:visited, .btn-primary, .btn-primary:visited, .btn-primary:active, .btn-success, .btn-success:visited, .btn-success:active, .btn-warning, .btn-warning:visited, .btn-warning:active, .btn-outline-primary, .btn-outline-primary:visited, .btn-outline-primary:active { color: var(--color-primary-foreground) !important; border: solid 1px var(--color-primary-background-border) !important; background: var(--color-primary-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%) !important; text-shadow: var(--color-primary-foreground-shadow) 1px 1px !important; } .color1:hover, .color1:focus, .btn-primary:hover, .btn-success:hover, .btn-warning:hover, .btn-warning:focus, .btn-outline-primary:hover { color: var(--color-primary-active-foreground) !important; border: solid 1px var(--color-primary-active-background-border) !important; background: var(--color-primary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%) !important; text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px !important; } /* Secondary Button */ .color2, .color2:active, .color2:visited, .btn-info, .btn-info:active, .btn-info:visited, .btn-danger, .btn-danger:active, .btn-danger:visited, .btn-default, .btn-default:active, .btn-default:visited { color: var(--color-secondary-foreground) !important; border: solid 0px var(--color-secondary-background-border) !important; background: var(--color-box-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-black) 0, var(--color-black) 100%) !important; text-shadow: var(--color-secondary-foreground-shadow) 1px 1px !important; } .color2:hover, .color2:focus, .btn-info:hover, .btn-danger:hover, .btn-default:hover, .btn-default:focus { color: var(--color-secondary-active-foreground) !important; border: solid 0px var(--color-secondary-active-background-border) !important; background: var(--color-primary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background) 0, var(--color-primary-active-background) 100%) !important; text-shadow: var(--color-secondary-active-foreground-shadow) 1px 1px !important; } /* Tertiary Button */ .color3, .color3:active, .color3:visited { color: var(--color-tertiary-foreground) !important; border: solid 1px var(--color-tertiary-background-border) !important; background: var(--color-tertiary-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-tertiary-background-gradient-top) 0, var(--color-tertiary-background-gradient-bottom) 100%) !important; text-shadow: var(--color-tertiary-foreground-shadow) 1px 1px !important; } .color3:hover, .color3:focus { color: var(--color-tertiary-active-foreground) !important; border: solid 1px var(--color-tertiary-active-background-border) !important; background: var(--color-tertiary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-tertiary-active-background-gradient-top) 0, var(--color-tertiary-active-background-gradient-bottom) 100%) !important; text-shadow: var(--color-tertiary-active-foreground-shadow) 1px 1px !important; } /* ------------------------------------------ ------------------------------------------ ----- Product - Boxes1 - Used for the homepage feature boxes and on the Wizard Panel service pages with the boxes layout selected ------------------------------------------ ------------------------------------------ */ /* Feature Boxes */ .product-boxes1 { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; align-items: flex-start; margin: 0 0 var(--spacing-parent) 0; } .product-boxes1 .product-boxes1-box { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-top: none; border-bottom-width: var(--border-bottom-width); margin: 0 0 var(--spacing-child) 0; position: relative; overflow: hidden; color: var(--color-box-foreground); border-radius: var(--border-radius); } .product-boxes1 .product-boxes1-box.product-boxes1-highlight::after { position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(45deg); font-size: 0.9em; font-weight: bold; line-height: 1; text-transform: uppercase; } .product-boxes1 .product-boxes1-box.product-boxes1-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-boxes1 .product-boxes1-box.product-boxes1-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-boxes1 .product-boxes1-box.product-boxes1-highlight-popular::after { background: var(--color-badge-popular-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-popular-background-gradient-top) 0, var(--color-badge-popular-background-gradient-bottom) 100%); color: var(--color-badge-popular-foreground); } .product-boxes1 .product-boxes1-box.product-boxes1-highlight-free::after { background: var(--color-badge-free-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-free-background-gradient-top) 0, var(--color-badge-free-background-gradient-bottom) 100%); color: var(--color-badge-free-foreground); } /* 2 percent spacing each */ .product-boxes1.product-boxes1-1col { flex-direction: column; align-content: center; } .product-boxes1.product-boxes1-1col .product-boxes1-box { width: 100%; max-width: 500px; } .product-boxes1.product-boxes1-2col .product-boxes1-box { width: 48%; max-width: 500px; } .product-boxes1.product-boxes1-3col .product-boxes1-box { width: 32%; max-width: 500px; } .product-boxes1.product-boxes1-4col .product-boxes1-box { width: 23%; max-width: 500px; } .product-boxes1.product-boxes1-5col .product-boxes1-box { width: 18.4%; max-width: 500px; } .product-boxes1.product-boxes1-6col .product-boxes1-box { width: 15%; max-width: 500px; } .product-boxes1 .product-boxes1-box .product-boxes1-head { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-bottom: var(--color-box-head-background-border) 1px solid; width: 100%; padding: var(--spacing-inner); } .product-boxes1 .product-boxes1-box .product-boxes1-head .product-boxes1-heading { margin: 0; color: var(--color-box-head-foreground); text-shadow: var(--color-box-head-foreground-shadow) 1px 1px; font-size: 1.6em; white-space: nowrap; } .product-boxes1 .product-boxes1-box .product-boxes1-text { width: 100%; padding: 20px var(--spacing-inner); text-align: center; white-space: nowrap; } .product-boxes1 .product-boxes1-box .product-boxes1-text img { margin: 0 auto var(--spacing-child) auto; max-height: 100px; } .product-boxes1 .product-boxes1-box .product-boxes1-text p:last-child { margin-bottom: 0; } .product-boxes1 .product-boxes1-box .product-boxes1-price { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: var(--color-box-footer-background-border) 1px solid; border-bottom: var(--color-box-footer-background-border) 1px solid; width: 100%; padding: 20px var(--spacing-inner); text-align: center; white-space: nowrap; color: var(--color-box-footer-foreground); font-weight: bold; font-size: 1.6em; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-free { text-transform: uppercase; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-priceprefix, .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-price, .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencyprefix, .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencysuffix, .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-term { display: inline; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-priceprefix { padding-right: 10px; font-weight: normal; font-size: 0.7em; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencyprefix { font-weight: normal; font-size: 0.7em; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencysuffix { padding-left: 5px; font-weight: normal; font-size: 0.7em; } .product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-term { padding-left: 10px; font-weight: normal; font-size: 0.7em; } .product-boxes1 .product-boxes1-box .product-boxes1-heading2 { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: var(--color-box-footer-background-border) 1px solid; border-bottom: var(--color-box-footer-background-border) 1px solid; width: 100%; padding: 10px var(--spacing-child); text-align: center; font-weight: bold; font-size: 1.2em; color: var(--color-box-footer-foreground); white-space: nowrap; } .product-boxes1 .product-boxes1-box .product-boxes1-features { padding: 20px; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul { margin: 0; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul li { text-align: center; width: 100%; display: inline-block; border-bottom: var(--color-box-background-divider) 1px solid; padding: 10px 0; font-size: 1.2em; white-space: nowrap; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul li:first-child { padding-top: 0; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul li:last-child { border: none; padding-bottom: 0; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul li .product-boxes1-featuretop { font-weight: bold; display: block; padding: 0 0 5px 0; } .product-boxes1 .product-boxes1-box .product-boxes1-features ul li strong { font-weight: bold; color: var(--color-primary-background); } .product-boxes1 .product-boxes1-box .product-boxes1-buttons { padding: var(--spacing-child); display: flex; justify-content: center; flex-wrap: wrap; } .product-boxes1 .product-boxes1-box .product-boxes1-buttons .button1 { margin: 5px; } /* Hover */ .product-boxes1 .product-boxes1-box:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } .product-boxes1 .product-boxes1-box:hover .product-boxes1-head { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .product-boxes1 .product-boxes1-box:hover .product-boxes1-head .product-boxes1-heading { color: var(--color-box-active-head-foreground); text-shadow: var(--color-box-active-head-foreground-shadow) 1px 1px; } .product-boxes1 .product-boxes1-box:hover .product-boxes1-price { background: var(--color-box-active-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-footer-background-gradient-top) 0, var(--color-box-active-footer-background-gradient-bottom) 100%); border-color: var(--color-box-active-footer-background-border); color: var(--color-box-active-footer-foreground); } .product-boxes1 .product-boxes1-box:hover .product-boxes1-heading2 { background: var(--color-box-active-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-footer-background-gradient-top) 0, var(--color-box-active-footer-background-gradient-bottom) 100%); border-color: var(--color-box-active-footer-background-border); color: var(--color-box-active-footer-foreground); } .product-boxes1 .product-boxes1-box:hover .product-boxes1-features ul li { border-color: var(--color-box-active-background-divider); } /* ------------------------------------------ ------------------------------------------ ----- Product - Boxes2 - Used for displaying products on the addons pages (WHMCS Templates, WordPress Themes, HTML Templates, Blesta Templates, Clientexec Templates, WHMCS Modules, Scripts) ------------------------------------------ ------------------------------------------ */ .product-boxes2 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } .product-boxes2 .product-boxes2-box { flex-basis: 49%; margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); align-self: flex-start; color: var(--color-box-foreground); } .product-boxes2 .product-boxes2-box .product-boxes2-head { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-radius: var(--border-radius) var(--border-radius) 0 0; padding: 9px 10px 9px 15px; } .product-boxes2 .product-boxes2-box .product-boxes2-head .product-boxes2-title { position: relative; } .product-boxes2 .product-boxes2-box.product-boxes2-highlight .product-boxes2-head .product-boxes2-title::after { position: absolute; right: -48px; top: 50%; transform: translateY(-50%); text-align: center; padding: 4px 5px; font-size: 1em; line-height: 1; font-weight: bold; border-radius: var(--border-radius); } .product-boxes2 .product-boxes2-box.product-boxes2-highlight-hot .product-boxes2-head .product-boxes2-title::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-boxes2 .product-boxes2-box.product-boxes2-highlight-new .product-boxes2-head .product-boxes2-title::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-boxes2 .product-boxes2-box .product-boxes2-head .product-boxes2-title .product-boxes2-heading { margin: 3px 0 0 0; text-align: left; font-weight: bold; color: var(--color-box-head-foreground); font-size: 1.2em; } .product-boxes2 .product-boxes2-box .product-boxes2-head .product-boxes2-price { color: var(--color-box-foreground-bold); background: #000; padding: 4px 8px; border-radius: var(--border-radius); } .product-boxes2 .product-boxes2-box .product-boxes2-text { padding: 0 var(--spacing-inner) var(--spacing-inner) var(--spacing-inner); } .product-boxes2 .product-boxes2-box .product-boxes2-buttons { text-align: center; padding: 0 var(--spacing-inner) var(--spacing-inner) var(--spacing-inner); } .product-boxes2 .product-boxes2-box .product-boxes2-buttons .button1 { margin: 5px; } .product-boxes2 .product-boxes2-box .product-boxes2-buttons .color3 { background: none !important; border-color: transparent !important; padding-left: 0; padding-right: 0; } /* Hover */ .product-boxes2 .product-boxes2-box:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } .product-boxes2 .product-boxes2-box:hover .product-boxes2-head { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); } .product-boxes2 .product-boxes2-box:hover .product-boxes2-head .product-boxes2-title .product-boxes2-heading { color: var(--color-box-active-head-foreground); } .product-boxes2 .product-boxes2-box:hover .product-boxes2-head .product-boxes2-price { color: var(--color-box-active-foreground-bold); } /* Display 1 */ .product-boxes2 .product-boxes2-box.product-boxes2-display1 .product-boxes2-image { padding: var(--spacing-inner); } .product-boxes2 .product-boxes2-box.product-boxes2-display1 .product-boxes2-image img { width: 100%; max-width: 100%; margin: 0 auto; border: transparent 1px solid; } /* Display 2 */ .product-boxes2 .product-boxes2-box.product-boxes2-display2 .product-boxes2-image { padding: var(--spacing-inner); } .product-boxes2 .product-boxes2-box.product-boxes2-display2 .product-boxes2-image img { width: 100%; max-width: 100%; margin: 0 auto; border: var(--color-border) 1px solid; } /* ------------------------------------------ ------------------------------------------ ----- Product - Boxes3 - Used for displaying services on the addons pages (WHMCS Services, WordPress Services, Blesta Services, Clientexec Services) ------------------------------------------ ------------------------------------------ */ .product-boxes3 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } .product-boxes3 .product-boxes3-box { flex-basis: 32%; margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); position: relative; overflow: hidden; color: var(--color-box-foreground); } .product-boxes3 .product-boxes3-box.product-boxes3-highlight::after { position: absolute; top: 12px; left: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(-45deg); font-size: 1em; font-weight: bold; line-height: 1; text-transform: uppercase; } .product-boxes3 .product-boxes3-box.product-boxes3-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-boxes3 .product-boxes3-box.product-boxes3-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-boxes3 .product-boxes3-box .product-boxes3-head { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); } .product-boxes3 .product-boxes3-box .product-boxes3-title { background-repeat: no-repeat; background-size: auto 75px; background-position: 105% center; } .product-boxes3 .product-boxes3-box .product-boxes3-title .product-boxes3-heading { padding: var(--spacing-inner); margin: 0; font-size: 1.6em; color: var(--color-box-head-foreground); text-align: center; position: relative; } .product-boxes3 .product-boxes3-box .product-boxes3-bar { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: var(--color-box-footer-background-border) 1px solid; border-bottom: var(--color-box-footer-background-border) 1px solid; width: 100%; padding: 12px var(--spacing-inner); margin: 0 0 25px 0; text-align: center; color: var(--color-box-footer-foreground); } .product-boxes3 .product-boxes3-box .product-boxes3-bar span { padding: 0 0 0 0; color: var(--color-box-footer-foreground-bold); font-size: 1.5em; } .product-boxes3 .product-boxes3-box .product-boxes3-text { padding: 0 var(--spacing-inner); margin: 0 0 25px 0; } .product-boxes3 .product-boxes3-box .product-boxes3-buttons { text-align: center; margin: 0 0 25px 0; padding: 0 var(--spacing-inner); } .product-boxes3 .product-boxes3-box .product-boxes3-buttons .button1:first-child { margin-right: 10px; } /* Hover */ .product-boxes3 .product-boxes3-box:hover { background-position: center 20px; background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } .product-boxes3 .product-boxes3-box:hover .product-boxes3-head { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); } .product-boxes3 .product-boxes3-box:hover .product-boxes3-title .product-boxes3-heading { color: var(--color-box-active-head-foreground); } .product-boxes3 .product-boxes3-box:hover .product-boxes3-bar { background: var(--color-box-active-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-footer-background-gradient-top) 0, var(--color-box-active-footer-background-gradient-bottom) 100%); border-top-color: var(--color-box-active-footer-background-border); border-bottom-color: var(--color-box-active-footer-background-border); color: var(--color-box-active-footer-foreground); } .product-boxes3 .product-boxes3-box:hover .product-boxes3-bar span { color: var(--color-box-active-footer-foreground-bold); } /* ------------------------------------------ ------------------------------------------ ----- Product - Tables1 - Used on the Wizard Panel service pages with the tables layout selected ------------------------------------------ ------------------------------------------ */ :root { /* Set the colors of the features block (the plan boxes use your default color scheme) */ --product-tables1-box-features-background: #fff; --product-tables1-box-features-background-border: var(--color-box-background-border); --product-tables1-box-features-foreground: var(--color-default); --product-tables1-box-features-head: var(--color-box-background); --product-tables1-box-features-head-border: var(--color-box-head-background-border); --product-tables1-box-features-head-foreground: var(--color-box-foreground-bold); --product-tables1-box-features-background-divider: var(--color-box-background-divider); } .product-tables1 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } /* Features Box */ .product-tables1 .product-tables1-box.product-tables1-box-features { background: var(--product-tables1-box-features-background); border-radius: var(--border-radius) 0 0 var(--border-radius); border: var(--product-tables1-box-features-background-border) 1px solid; border-right-width: 0; border-bottom-width: var(--border-bottom-width); color: var(--product-tables1-box-features-foreground); } .product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head { background: var(--product-tables1-box-features-head); border-color: var(--product-tables1-box-features-head-border); } .product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head .product-tables1-heading { color: var(--product-tables1-box-features-head-foreground); } .product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head2 { background: var(--product-tables1-box-features-head); border-color: var(--product-tables1-box-features-head-border); } .product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head2 .product-tables1-heading2 { color: var(--product-tables1-box-features-head-foreground); } .product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-features-list .product-tables1-features-list-item { text-align: left; background: url("../images/bullet-icon.png") left center no-repeat; background-size: auto 20px; padding: 0 0 0 30px; border-color: var(--product-tables1-box-features-background-divider); } /* Plan box */ .product-tables1 .product-tables1-box { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-right-width: 0; border-bottom-width: var(--border-bottom-width); position: relative; overflow: hidden; color: var(--color-box-foreground); } .product-tables1 .product-tables1-box:last-child { border-right-width: 1px; } /* Heading */ .product-tables1 .product-tables1-box .product-tables1-head { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-bottom: var(--color-box-head-background-border) 1px solid; display: block; height: 60px; line-height: 60px; overflow: hidden; } .product-tables1 .product-tables1-box .product-tables1-head .product-tables1-heading { text-align: center; color: var(--color-box-head-foreground); margin: 0; padding: 0 25px; font-family: var(--font-heading); font-size: 1.7em; font-weight: bold; } /* Heading2 */ .product-tables1 .product-tables1-box .product-tables1-head2 { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-top: var(--color-box-head-background-border) 1px solid; border-bottom: var(--color-box-head-background-border) 1px solid; display: block; height: 50px; line-height: 50px; overflow: hidden; } .product-tables1 .product-tables1-box .product-tables1-head2 .product-tables1-heading2 { text-align: center; color: var(--color-box-head-foreground); font-family: var(--font-heading); font-size: 1.4em; font-weight: bold; margin: 0; padding: 0 25px; } /* Text */ .product-tables1 .product-tables1-box .product-tables1-text { display: flex; justify-content: center; align-items: center; height: 77px; overflow: hidden; margin: 15px 0; padding: 0 25px; } /* Feature list */ .product-tables1 .product-tables1-box .product-tables1-features-list { padding: 0 25px; } .product-tables1 .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { text-align: center; border-bottom: var(--color-box-background-divider) 1px solid; height: 47px; line-height: 47px; overflow: hidden; } .product-tables1 .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { font-weight: bold; border-bottom: none; color: var(--color-box-foreground-bold); padding-bottom: 1px; display: none; } /* Price */ .product-tables1 .product-tables1-box .product-tables1-price { margin: 20px 0; padding: 0 25px; overflow: hidden; text-align: center; font-size: 1.3em; font-weight: bold; color: var(--color-box-foreground-bold); } .product-tables1 .product-tables1-box .product-tables1-price-priceprefix { display: block; margin: 0 0 10px 0; font-weight: normal; font-size: 0.8em; } .product-tables1 .product-tables1-box .product-tables1-price-free { display: flex; justify-content: center; align-items: center; text-transform: uppercase; height: 65px; } .product-tables1 .product-tables1-box .product-tables1-price-currencyprefix, .product-tables1 .product-tables1-box .product-tables1-price-currencysuffix, .product-tables1 .product-tables1-box .product-tables1-price-price, .product-tables1 .product-tables1-box .product-tables1-price-term { display: inline; } .product-tables1 .product-tables1-box .product-tables1-price-price { font-size: 1.2em; } .product-tables1 .product-tables1-box .product-tables1-price-term { font-weight: normal; font-size: 0.6em; padding: 0 0 0 5px; } /* Buttons */ .product-tables1 .product-tables1-box .product-tables1-buttons { height: 50px; line-height: 50px; text-align: center; margin: 20px 0; } .product-tables1 .product-tables1-box .product-tables1-buttons .button1 { width: 70%; padding: 0; margin: 0; line-height: 30px; } /* End plan */ .product-tables1 .product-tables1-box:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } /* Badges */ .product-tables1 .product-tables1-box.product-tables1-highlight::after { position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(45deg); font-size: 1em; font-weight: bold; line-height: 1; text-transform: uppercase; } .product-tables1 .product-tables1-box.product-tables1-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight-popular::after { background: var(--color-badge-popular-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-popular-background-gradient-top) 0, var(--color-badge-popular-background-gradient-bottom) 100%); color: var(--color-badge-popular-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight-free::after { background: var(--color-badge-free-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-free-background-gradient-top) 0, var(--color-badge-free-background-gradient-bottom) 100%); color: var(--color-badge-free-foreground); } /* Highlight */ .product-tables1 .product-tables1-box.product-tables1-highlight { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-background-border); color: var(--color-box-active-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-head { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-head .product-tables1-heading { color: var(--color-box-active-head-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-head2 { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-head2 .product-tables1-heading2 { color: var(--color-box-active-head-foreground); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-features-list .product-tables1-features-list-item { border-color: var(--color-box-active-background-divider); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { color: var(--color-box-active-foreground-bold); } .product-tables1 .product-tables1-box.product-tables1-highlight .product-tables1-price { color: var(--color-box-active-foreground-bold); } /* Hover */ .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-background-border); color: var(--color-box-active-foreground); margin-top: -5px; box-shadow: var(--shadow); cursor: pointer; transition: all 0.3s ease-in-out 0s; } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head .product-tables1-heading { color: var(--color-box-active-head-foreground); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head2 { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head2 .product-tables1-heading2 { color: var(--color-box-active-head-foreground); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-features-list .product-tables1-features-list-item { border-color: var(--color-box-active-background-divider); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { color: var(--color-box-active-foreground-bold); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-price { color: var(--color-box-active-foreground-bold); } .product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-buttons .button1 { transform: scale(1.1); transition-duration: 0.2s; } /* 1 col */ .product-tables1-1col .product-tables1-box.product-tables1-box-features { width: 50%; } .product-tables1-1col .product-tables1-box { width: 50%; } /* 2 col */ .product-tables1-2col .product-tables1-box.product-tables1-box-features { width: 30%; } .product-tables1-2col .product-tables1-box { width: 35%; } /* 3 col */ .product-tables1-3col .product-tables1-box.product-tables1-box-features { width: 30%; } .product-tables1-3col .product-tables1-box { width: 23.33%; } /* 4 col */ .product-tables1-4col .product-tables1-box.product-tables1-box-features { width: 27%; } .product-tables1-4col .product-tables1-box { width: 18.25%; } /* 5 col */ .product-tables1-5col .product-tables1-box.product-tables1-box-features { width: 20%; } .product-tables1-5col .product-tables1-box { width: 16%; } /* 6 col */ .product-tables1-6col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-6col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-6col .product-tables1-box { border-radius: var(--border-radius); width: 15%; border-width: 1px; } .product-tables1-6col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-6col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-6col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } /* ------------------------------------------ ------------------------------------------ ----- Product - Tables2 - Used on the Wizard Panel service pages with the tables2 layout selected ------------------------------------------ ------------------------------------------ */ .product-tables2 { width: 100%; overflow-y: auto; margin: 0 0 var(--spacing-child) 0; border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); } .product-tables2 table { width: 100%; } .product-tables2 th { padding: 18px 20px; text-align: center; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); color: var(--color-box-head-foreground); vertical-align: middle; } .product-tables2 tr { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); } .product-tables2 tr:nth-child(odd) { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); color: var(--color-box-active-foreground); } .product-tables2 td { padding: 16px 20px; vertical-align: middle; text-align: center; background-color: transparent; } .product-tables2::-webkit-scrollbar { /* IOS scrollbar */ -webkit-appearance: none; width: 14px; height: 14px; } .product-tables2::-webkit-scrollbar-thumb { border-radius: var(--border-radius); border: 3px solid #e3e3e3; background-color: rgba(0, 0, 0, .3); } .product-tables2 .button1 { margin: 0; } /* Table plans */ .product-tables2.product-tables2-plans tr.tableplan-link:hover { cursor: pointer; } .product-tables2.product-tables2-plans tr td.tableplan-heading { text-align: left; width: 250px; min-width: 250px; background-color: rgba(0, 0, 0, 0.1); } .product-tables2.product-tables2-plans td.tableplan-heading-size { width: 250px; min-width: 250px; } .product-tables2.product-tables2-plans .tableplan-plan { font-size: 1.8em; font-weight: bold; line-height: 1.4em; font-family: var(--font-heading); color: var(--color-box-foreground-bold); text-shadow: var(--color-box-foreground-bold-shadow) 1px 1px; } .product-tables2 tr:nth-child(odd) .tableplan-plan { color: var(--color-box-active-foreground-bold); text-shadow: var(--color-box-active-foreground-bold-shadow) 1px 1px; } .product-tables2.product-tables2-plans .tableplan-text { margin: 5px 0 0 0; font-size: 0.9em; color: var(--color-box-foreground); } .product-tables2 tr:nth-child(odd) .tableplan-text { color: var(--color-box-active-foreground); } .product-tables2.product-tables2-plans .tableplan-price { margin: 0 0 15px 0; } .product-tables2.product-tables2-plans .tableplan-price-free { text-transform: uppercase; font-weight: bold; font-size: 1.8em; color: var(--color-box-foreground); text-shadow: var(--color-box-foreground-shadow) 1px 1px; } .product-tables2 tr:nth-child(odd) .tableplan-price-free { color: var(--color-box-active-foreground); text-shadow: var(--color-box-active-foreground-shadow) 1px 1px; } .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-priceprefix { display: block; margin: 0 0 5px 0; } .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-currencyprefix, .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-currencysuffix, .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-price { display: inline; } .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-price { font-size: 1.8em; font-weight: bold; text-shadow: var(--color-box-foreground-shadow) 1px 1px; } .product-tables2 tr:nth-child(odd) .tableplan-price-price { text-shadow: var(--color-box-active-foreground-shadow) 1px 1px; } .product-tables2.product-tables2-plans .tableplan-price .tableplan-price-currencysuffix { padding: 0 0 0 3px; } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight { position: relative; overflow: hidden; } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight::after { position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(45deg); font-size: 1em; font-weight: bold; line-height: 1; text-transform: uppercase; } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight-popular::after { background: var(--color-badge-popular-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-popular-background-gradient-top) 0, var(--color-badge-popular-background-gradient-bottom) 100%); color: var(--color-badge-popular-foreground); } .product-tables2.product-tables2-plans .tableplan .tableplan-highlight-free::after { background: var(--color-badge-free-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-free-background-gradient-top) 0, var(--color-badge-free-background-gradient-bottom) 100%); color: var(--color-badge-free-foreground); } /* Hover */ .product-tables2.product-tables2-plans tr.tableplan-link:hover td.tableplan-heading { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); } .product-tables2.product-tables2-plans tr.tableplan-link:hover td.tableplan-heading .tableplan-plan { color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; } .product-tables2.product-tables2-plans tr.tableplan-link:hover .tableplan-text { color: var(--color-primary-foreground); } .product-tables2.product-tables2-plans tr.tableplan-link:hover .button1 { transform: scale(1.1); transition-duration: 0.2s; } /* ------------------------------------------ ------------------------------------------ ----- Product - Slider1 - Used on the Wizard Panel service pages with the slider layout selected ------------------------------------------ ------------------------------------------ */ .product-slider1 { width:100%; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); margin: 0 0 var(--spacing-child) 0; padding: var(--spacing-child); border-radius: var(--border-radius); } .product-slider1 .product-slider1-slider { /* Slider bar */ height:15px; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); outline: none; transition: opacity .2s; cursor: pointer; -webkit-appearance: none; border-radius: var(--border-radius); width: 93%; display: block; margin: 0 auto 15px auto; position: relative; } .product-slider1 .product-slider1-slider::-moz-range-thumb, /* Icon */ .product-slider1 .product-slider1-slider::-webkit-slider-thumb { width: 25px; height: 25px; border-radius: 50%; background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; cursor: pointer; position: absolute; z-index: 99; } .product-slider1 .product-slider1-slider::-ms-thumb { /* IE */ width: 25px; height: 25px; border-radius: 50%; background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; cursor: pointer; position: absolute; z-index: 99; } .product-slider1 .product-slider1-slider-productnames { display: flex; justify-content: space-between; width: 92%; margin: 0 auto; } .product-slider1 .product-slider1-slider-productname { display: flex; justify-content: center; } .product-slider1 .product-slider1-slider-productname strong { position: absolute; color: var(--color-box-foreground-bold); font-size: 1.2em; max-width: 125px; } .product-slider1 .product-slider1-slider-productname .product-slider1-slider-producticon { width: 10px; height: 26px; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-radius: 0 0 var(--border-radius) var(--border-radius); display: none; } /* Product */ .product-slider1 .product-slider1-productcontainer .product-slider1-product { display: none; width: 100%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product:first-child { display: block; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-plantitle { display: none; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-productoptions { display: flex; justify-content: space-between; margin: 80px 0 0 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 0 auto; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature { text-align: center; padding: 20px; border-left: var(--color-box-background-divider) 1px solid; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:first-child { border-left: none; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-text { font-size: 1.7em; font-weight: bold; color: var(--color-box-foreground-bold); } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-text span { display: block; font-weight: 300; font-size: 0.7em; margin: 15px 0 0 0; min-height: 55px; color: var(--color-box-foreground); } /* Price */ .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); padding: 0; margin: 0 0 0 var(--spacing-inner); width: 300px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatitle { padding: var(--spacing-inner); margin: 0; font-size: 1.6em; background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); color: var(--color-box-active-head-foreground); text-shadow: var(--color-box-active-head-foreground-shadow) 1px 1px; text-align: center; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin: 0 0 var(--spacing-child) 0; font-weight: bold; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatext { display: flex; justify-content: center; align-items: center; color: var(--color-box-active-foreground); margin: 0 0 var(--spacing-child) 0; text-align: center; padding: 0 var(--spacing-inner); height: 50px; overflow: hidden; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice { color: var(--color-box-active-foreground-bold); font-weight: bold; margin: 0 0 var(--spacing-child) 0; text-align: center; padding: 0 var(--spacing-inner); } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-priceprefix { display: block; margin: 0 0 10px 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-currencyprefix { display: inline; font-size: 1.3em; padding: 0 5px 0 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-price { font-size: 2.3em; display: inline; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-currencysuffix { display: inline; font-size: 1.3em; padding: 0 0 0 5px; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-term { display: block; font-weight: normal; font-size: 1em; margin: 5px 0 0 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice .product-slider1-ctaprice-free { text-transform: uppercase; font-size: 2.1em; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctabutton { display: table; margin: 0 auto var(--spacing-child) auto; padding: 0 var(--spacing-inner); } /* Highlight */ .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta.product-slider1-highlight::after { position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(45deg); font-size: 1em; font-weight: bold; line-height: 1; text-transform: uppercase; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta.product-slider1-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta.product-slider1-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta.product-slider1-highlight-popular::after { background: var(--color-badge-popular-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-popular-background-gradient-top) 0, var(--color-badge-popular-background-gradient-bottom) 100%); color: var(--color-badge-popular-foreground); } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta.product-slider1-highlight-free::after { background: var(--color-badge-free-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-free-background-gradient-top) 0, var(--color-badge-free-background-gradient-bottom) 100%); color: var(--color-badge-free-foreground); } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes1 - Used for the Why Choose Us and Testimonials layout on various pages ------------------------------------------ ------------------------------------------ */ .gridboxes1 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } .gridboxes1 .gridboxes1-box { flex-basis: 31%; margin: 0 0 var(--spacing-child) 0; padding: 10px 0 0 0; } .gridboxes1 .gridboxes1-box:hover { background-position: center 20px; } .gridboxes1 .gridboxes1-box:hover .gridboxes1-heading { color: var(--color-primary-background); } .gridboxes1 .gridboxes1-box .gridboxes1-heading { margin: 5px 0 15px 0; font-size: 1.4em; } .gridboxes1 .gridboxes1-box .gridboxes1-image { margin: 0 0 15px 0; display: flex; justify-content: center; align-items: center; height: 125px; } .gridboxes1 .gridboxes1-box .gridboxes1-image img { width: auto; max-height: 70px; max-width: 140px; } .gridboxes1 .gridboxes1-box .gridboxes1-image-full { height: 170px; } .gridboxes1 .gridboxes1-box .gridboxes1-image-full img { max-height: 170px; max-width: 340px; } .gridboxes1 .gridboxes1-box:hover .gridboxes1-image img { transition: transform .5s ease; transform: scale(1.1); } .gridboxes1 .gridboxes1-box .gridboxes1-text p:last-child { margin: 0; } .gridboxes1 .gridboxes1-box .gridboxes1-buttons { margin: 15px 0 0 0; text-align: center; } .gridboxes1 .gridboxes1-box .gridboxes1-buttons .button1 { margin: 5px 5px; } /* Testimonials */ .gridboxes1.gridboxes1-testimonials .gridboxes1-box { position: relative; padding-top: 25px; } .gridboxes1.gridboxes1-testimonials .gridboxes1-box .gridboxes1-text p:first-child::before { position: absolute; font-size: 5em; color: var(--color-primary-background); content: "\""; top: -15px; left: -5px; line-height: 1; } .gridboxes1.gridboxes1-testimonials .gridboxes1-box .gridboxes1-testimonial { display: flex; align-items: center; margin: var(--spacing-child) 0 0 0; } .gridboxes1.gridboxes1-testimonials .gridboxes1-box .gridboxes1-testimonial .gridboxes1-testimonial-image { margin: 0 25px 0 0; } .gridboxes1.gridboxes1-testimonials .gridboxes1-box .gridboxes1-testimonial .gridboxes1-testimonial-image img { max-width: 70px; max-height: 70px; } .gridboxes1.gridboxes1-testimonials .gridboxes1-box .gridboxes1-testimonial .gridboxes1-testimonial-text .gridboxes1-testimonial-url { margin: 10px 0 0 0; color: var(--color-primary-background); } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes2 - Used for the Features layout on various pages ------------------------------------------ ------------------------------------------ */ .gridboxes2 { margin: 0 0 var(--spacing-parent) 0; display: flex; flex-direction: column; } .gridboxes2 .gridboxes2-container { padding: var(--spacing-parent) 0; border-bottom: var(--color-border) 1px solid; } .gridboxes2 .gridboxes2-container:last-child { border: none; } .gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box { flex-direction: row-reverse; } .gridboxes2 .gridboxes2-container.gridboxes2-boldimg .gridboxes2-box .gridboxes2-image img { box-shadow: var(--shadow); border-radius: var(--border-radius); } .gridboxes2 .gridboxes2-box { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; align-items: center; } .gridboxes2 .gridboxes2-box .gridboxes2-image { flex-basis: 48%; } .gridboxes2 .gridboxes2-box .gridboxes2-image .gridboxes2-image-text { text-align: center; margin: var(--spacing-child) 0 0 0; } .gridboxes2 .gridboxes2-box .gridboxes2-text { flex-basis: 48%; } .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading { /* Main heading */ text-align: left; font-size: 2.3em; } .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading2 { /* Sub heading */ text-align: left; font-weight: normal; color: var(--color-body); } .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url { margin: 0 0 var(--spacing-child) 0; } .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url a { color: var(--color-body); } .gridboxes2 .gridboxes2-box .gridboxes2-text p:last-child { margin-bottom: 0; } .gridboxes2 .gridboxes2-box .gridboxes2-buttons .button1 { margin: 5px 5px; } .gridboxes2 .gridboxes2-box-extend { padding: var(--spacing-parent) 0 0 0; } .gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text { flex-basis: 100%; } .gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text .gridboxes2-heading, .gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text .gridboxes2-heading2, .gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-buttons { text-align: center; } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes3 - Used for the category boxes layout on various pages (Addons) ------------------------------------------ ------------------------------------------ */ .gridboxes3 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } .gridboxes3 .gridboxes3-box { flex-basis: 32%; margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); padding: var(--spacing-inner); position: relative; overflow: hidden; color: var(--color-box-foreground); } .gridboxes3 .gridboxes3-box:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); background-position: center 20px; color: var(--color-box-active-foreground); } .gridboxes3 .gridboxes3-box.gridboxes3-highlight::after { position: absolute; top: 12px; left: -71px; width: 200px; padding: 10px 0; text-align: center; transform: rotate(-45deg); font-size: 1em; font-weight: bold; line-height: 1; text-transform: uppercase; } .gridboxes3 .gridboxes3-box.gridboxes3-highlight-hot::after { background: var(--color-badge-hot-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-hot-background-gradient-top) 0, var(--color-badge-hot-background-gradient-bottom) 100%); color: var(--color-badge-hot-foreground); } .gridboxes3 .gridboxes3-box.gridboxes3-highlight-new::after { background: var(--color-badge-new-background); background: linear-gradient(var(--gradient-degrees), var(--color-badge-new-background-gradient-top) 0, var(--color-badge-new-background-gradient-bottom) 100%); color: var(--color-badge-new-foreground); } .gridboxes3 .gridboxes3-box .gridboxes3-image { margin: 0 0 var(--spacing-child) 0; display: flex; justify-content: center; } .gridboxes3 .gridboxes3-box .gridboxes3-image img { height: 68px; } .gridboxes3 .gridboxes3-box:hover .gridboxes3-image img { transition: transform .5s ease; transform: scale(1.1); } .gridboxes3 .gridboxes3-box .gridboxes3-heading { margin: 5px 0 var(--spacing-child) 0; font-size: 1.4em; font-weight: normal; color: var(--color-box-foreground-bold); } .gridboxes3 .gridboxes3-box .gridboxes3-heading:hover { color: var(--color-box-active-foreground-bold); } .gridboxes3 .gridboxes3-box p:last-child { margin-bottom: 0; text-align: center; } .gridboxes3 .gridboxes3-box .gridboxes3-buttons { text-align: center; } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes4 - Used for the button links on various pages (Portal) ------------------------------------------ ------------------------------------------ */ .gridboxes4 { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin: 0 0 var(--spacing-parent) 0; } .gridboxes4.gridboxes4-2col .gridboxes4-box { flex-basis: 48%; } .gridboxes4.gridboxes4-3col .gridboxes4-box { flex-basis: 32%; } .gridboxes4.gridboxes4-4col .gridboxes4-box { flex-basis: 23.5%; } .gridboxes4 .gridboxes4-box a { margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); position: relative; display: block; padding: 15px; } .gridboxes4 .gridboxes4-box .gridboxes4-content { display: flex; align-items: center; } .gridboxes4 .gridboxes4-box .gridboxes4-content .gridboxes4-image { margin: 0 25px 0 0; } .gridboxes4 .gridboxes4-box .gridboxes4-content .gridboxes4-image img { max-width: 55px; max-height: 55px; } .gridboxes4 .gridboxes4-box .gridboxes4-content .gridboxes4-text .gridboxes4-heading { font-weight: bold; margin: 0 0 5px 0; color: var(--color-box-foreground-bold); text-shadow: var(--color-box-foreground-shadow) 1px 1px; } .gridboxes4 .gridboxes4-box .gridboxes4-content .gridboxes4-text .gridboxes4-text { color: var(--color-box-foreground); } /* Hover */ .gridboxes4 .gridboxes4-box a:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); } .gridboxes4 .gridboxes4-box a:hover .gridboxes4-content .gridboxes4-text .gridboxes4-heading { color: var(--color-box-active-foreground-bold); text-shadow: var(--color-box-active-foreground-shadow) 1px 1px; } .gridboxes4 .gridboxes4-box a:hover .gridboxes4-content .gridboxes4-text .gridboxes4-text { color: var(--color-box-active-foreground); } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes5 - Used for the Past Work section on various pages (Logo Design) ------------------------------------------ ------------------------------------------ */ .gridboxes5 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--spacing-parent) 0; } .gridboxes5 .gridboxes5-box { flex-basis: 32%; margin: 0 0 var(--spacing-child) 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-inner); } .gridboxes5 .gridboxes5-box a { display: block; text-decoration: none; } .gridboxes5 .gridboxes5-box:hover img { transition: transform .5s ease; transform: scale(1.1); } /* ------------------------------------------ ------------------------------------------ ----- Grid - Boxes6 - Used for the Past Work section on various pages (Banner Design) ------------------------------------------ ------------------------------------------ */ .gridboxes6 { margin: 0 0 var(--spacing-child) 0; display: flex; flex-wrap: wrap; } .gridboxes6 .gridboxes6-box { padding: 10px; } /* Social */ .social { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 var(--spacing-child) 0; } .social img { margin: 15px 15px; transform: scale(1); transition: 100ms; } .social img:hover { transform: scale(1.1); } /* Notice */ .notice { margin: 0 0 var(--spacing-child) 0; border-radius: var(--border-radius); padding: 15px var(--spacing-inner); border: transparent 1px solid; position: relative; } .notice p { text-align: center; } .notice p:last-child { margin-bottom: 0; } .notice .button1 { padding: .2em 0.6em; } .notice-warning { background: #f8d7da; border-color: #f5c6cb; color: #721c24; } .notice-success { background: #d4edda; border-color: #c3e6cb; color: #155724; } .notice-alert { background: #fff3cd; border-color: #ffeeba; color: #856404; } .notice-info { background: #cce5ff; border-color: #b8daff; color: #004085; } /* Feature image */ .figure { margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); padding: 15px 15px 0 15px; display: inline-block; max-width: 757px; } .figure.figure-figurecenter { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; } .figure .figure-figcaption { margin: 15px 0 0 0; border-top: var(--color-box-background-border) 1px solid; padding: 15px; text-align: center; color: var(--color-box-foreground); } /* Highlightbox */ .highlightbox { display: flex; flex-direction: column; margin: 0 0 var(--spacing-child) 0; border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); padding: var(--spacing-child); color: var(--color-box-foreground); border-radius: var(--border-radius); } .highlightbox::after { clear: both; display: table; content: ""; } .highlightbox a { color: var(--color-box-foreground); } .highlightbox a:hover { color: var(--color-primary-background); } .highlightbox p:last-child { margin-bottom: 0; } .highlightbox .highlightbox-buttons { text-align: center; } .highlightbox .highlightbox-buttons .button1 { margin: 4px; } /* Social Side Widget */ .social-sidewidget { display: flex; flex-direction: column; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9999; } .social-sidewidget .social-icon a { display: block; width: 50px; } .social-sidewidget .social-icon a:hover { padding: 0 0 0 30px; transition: all 0.4s ease-in-out 0s; } .social-sidewidget .social-icon img { max-width: 50px; display: inline; } .social-sidewidget .social-icon:first-child, .social-sidewidget .social-icon:first-child img { border-radius: 0 var(--border-radius) 0 0; } .social-sidewidget .social-icon:last-child, .social-sidewidget .social-icon:last-child img { border-radius: 0 0 var(--border-radius) 0; } .social-sidewidget .social-icon-facebook { background-color: #3a559f; } .social-sidewidget .social-icon-twitter { background-color: #50abf1; } .social-sidewidget .social-icon-youtube { background-color: #dc472e; } .social-sidewidget .social-icon-vimeo { background-color: #1ab7ea; } .social-sidewidget .social-icon-pinterest { background-color: #c9353d; } .social-sidewidget .social-icon-instagram { background-color: #c536a4; } .social-sidewidget .social-icon-tumblr { background-color: #2f4f6e; } .social-sidewidget .social-icon-disqus { background-color: #229cff; } .social-sidewidget .social-icon-flickr { background-color: #e12c92; } .social-sidewidget .social-icon-steemit { background-color: #f4f4f4; } .social-sidewidget .social-icon-behance { background-color: #0071b9; } .social-sidewidget .social-icon-dribbble { background-color: #ed4989; } .social-sidewidget .social-icon-skype { background-color: #15ace5; } .social-sidewidget .social-icon-skype { background-color: #15ace5; } .social-sidewidget .social-icon-stumbleupon { background-color: #eb4823; } .social-sidewidget .social-icon-github { background-color: #171515; } .social-sidewidget .social-icon-linkedin { background-color: #0084b1; } .social-sidewidget .social-icon-reddit { background-color: #ff4500; } .social-sidewidget .social-icon-whatsapp { background-color: #1bd741; } .social-sidewidget .social-icon-bebo { background-color: #cd0300; } .social-sidewidget .social-icon-blogger { background-color: #f89029; } .social-sidewidget .social-icon-digg { background-color: #466ca3; } .social-sidewidget .social-icon-line { background-color: #00c200; } .social-sidewidget .social-icon-myspace { background-color: #507fa7; } .social-sidewidget .social-icon-telegram { background-color: #61a8de; } .social-sidewidget .social-icon-viber { background-color: #7d3daf; } .social-sidewidget .social-icon-xing { background-color: #00605e; } .social-sidewidget .social-icon-discord { background-color: #7289da; } .social-sidewidget .social-icon-slack { background-color: #4a154b; } /* ------------------------------------------ ------------------------------------------ ----- Scripts ------------------------------------------ ------------------------------------------ */ /* Progress bar */ #progress { position: fixed; z-index: 5; top: 0; left: -6px; width: 0%; height: 3px; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border-radius: 1px; transition: width 500ms ease-out,opacity 400ms linear } #progress.done { opacity: 0; } #progress dd,#progress dt { position: absolute; top: 0; height: 2px; box-shadow: #0f1016 1px 0 6px 1px; border-radius: 100% } #progress dd { opacity: 1; width: 20px; right: 0; clip: rect(-6px,22px,14px,10px) } #progress dt { opacity: 1; width: 180px; right: -80px; clip: rect(-6px,90px,14px,-6px) } @keyframes pulse { 30% { opacity: 1 } 60% { opacity: 0 } 100% { opacity: 1 } } #progress.waiting dd,#progress.waiting dt { animation: pulse 2s ease-out 0s infinite } /* Scroll to top */ .cd-top { display: inline-block; height: 30px; width: 30px; position: fixed; bottom: 66px; right: 16px; overflow: hidden; text-indent: 100%; white-space: nowrap; background: var(--color-secondary-background); background: url("../images/cd-top-arrow.svg") center 50% no-repeat; background: url("../images/cd-top-arrow.svg") center 50% no-repeat, linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); visibility: hidden; opacity: 0; transition: opacity .3s 0s, visibility 0s .3s; border-radius: var(--border-radius); z-index: 9999; } .cd-top:hover { background: var(--color-secondary-active-background); background: url("../images/cd-top-arrow.svg") center 50% no-repeat; background: url("../images/cd-top-arrow.svg") center 50% no-repeat, linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { visibility: visible; opacity: 1; } .cd-top.cd-fade-out { opacity: 0.7; } .no-touch .cd-top:hover { background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); opacity: 1; } /* Magnific Popup - https://dimsemenov.com/plugins/magnific-popup/ */ .popup { position: relative; background: #fff; font-size: 16px; } .popup .popup-inner { padding: var(--spacing-inner); } .mfp-content .mfp-figure figure { background: #fff; } .mfp-content img.mfp-img { padding: var(--spacing-inner); } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* ------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------ ------------------------------------------ ----- WHMCS styles ------------------------------------------ ------------------------------------------ */ /* Slimmed cart enabled */ .feature-slimmedcart .navmain-container { width: 65%; } .feature-slimmedcart .subbanner { display: none; } .feature-slimmedcart .footermain .footermain-background { display: none; } .feature-slimmedcart .footermain { border-top: none; } /* Steps */ .steps { display: flex; justify-content: space-between; line-height: 63px; } .steps .step { flex-basis: 33.33%; text-align: center; } .steps .step .step-text { font-size: 1.3em; font-weight: bold; display: inline-block; color: var(--color-black); text-transform: uppercase; } .steps .step .step-text .step-text-description { font-size: 0.7em; padding: 0 0 0 5px; display: inline-block; } /* Steps - Highlight */ .whmcs-templatefile-products .steps .step-step1, .whmcs-templatefile-addons .steps .step-step1, .whmcs-templatefile-adddomain .steps .step-step1, .whmcs-templatefile-domainregister .steps .step-step1, .whmcs-templatefile-domaintransfer .steps .step-step1, .whmcs-templatefile-configureproductdomain .steps .step-step2, .whmcs-templatefile-configuredomains .steps .step-step2, .whmcs-templatefile-configureproduct .steps .step-step2, .whmcs-templatefile-domainrenewals .steps .step-step2, .whmcs-templatefile-viewcart .steps .step-step3, .whmcs-templatefile-store\/order .steps .step-step2 { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .whmcs-templatefile-products .steps .step-step1 .step-text, .whmcs-templatefile-addons .steps .step-step1 .step-text, .whmcs-templatefile-adddomain .steps .step-step1 .step-text, .whmcs-templatefile-domainregister .steps .step-step1 .step-text, .whmcs-templatefile-domaintransfer .steps .step-step1 .step-text, .whmcs-templatefile-configureproductdomain .steps .step-step2 .step-text, .whmcs-templatefile-configuredomains .steps .step-step2 .step-text, .whmcs-templatefile-configureproduct .steps .step-step2 .step-text, .whmcs-templatefile-domainrenewals .steps .step-step2 .step-text, .whmcs-templatefile-viewcart .steps .step-step3 .step-text, .whmcs-templatefile-store\/order .steps .step-step2 .step-text { color: var(--color-secondary-foreground); } .whmcs-templatefile-configureproductdomain .steps .step-step1 .step-text, .whmcs-templatefile-configuredomains .steps .step-step1 .step-text, .whmcs-templatefile-configureproduct .steps .step-step1 .step-text, .whmcs-templatefile-viewcart .steps .step-step1 .step-text, .whmcs-templatefile-viewcart .steps .step-step2 .step-text, .whmcs-templatefile-store\/order .steps .step-step1 .step-text { background: url("../images/cart-steps-check.png") right center no-repeat; background-size: 20px auto; padding-right: var(--spacing-child); } /* Slimmed login enabled */ .feature-slimmedlogin .headermain, .feature-slimmedlogin .subbanner, .feature-slimmedlogin .footermain .footermain-background { display: none; } .feature-slimmedlogin .footermain { border-top: none; } .feature-slimmedlogin .logo-login { display: flex; justify-content: center; margin: 0 0 var(--spacing-child) 0; } .feature-slimmedlogin .logo-login img { max-width: 300px; } .primary-bg-color { background: transparent; /* Remove background set to white by default */ } .whmcscontainer .container { max-width: 100%; } .whmcscontainer section#main-body { padding: 0; } .whmcscontainer a { text-decoration: none; } .whmcscontainer hr { border-top: var(--color-border) 1px solid; margin: 0 0 var(--spacing-child) 0; } .whmcscontainer .btn { /* WHMCS buttons styled to match .button1 */ text-transform: capitalize; font-weight: bold; border-radius: var(--border-radius); } .whmcscontainer *:focus { /* Remove glow on click */ box-shadow: none !important; } .whmcscontainer .btn-link { color: var(--color-body); } .whmcscontainer .text-muted { color: var(--color-body); } /* Social buttons */ .whmcscontainer .providerPreLinking { min-height: 43px; } .whmcscontainer .btn-google img { display: inline; } /* WHMCS colors */ /* Borders */ .whmcscontainer .card-accent-gold, .whmcscontainer .card-accent-green, .whmcscontainer .card-accent-red, .whmcscontainer .card-accent-blue, .whmcscontainer .card-accent-orange .whmcscontainer .card-accent-pink, .whmcscontainer .card-accent-purple, .whmcscontainer .card-accent-lime, .whmcscontainer .card-accent-magenta, .whmcscontainer .card-accent-teal, .whmcscontainer .card-accent-turquoise, .whmcscontainer .card-accent-emerald, .whmcscontainer .card-accent-amethyst, .whmcscontainer .card-accent-wet-asphalt, .whmcscontainer .card-accent-midnight-blue, .whmcscontainer .card-accent-sun-flower, .whmcscontainer .card-accent-pomegranate, .whmcscontainer .card-accent-silver, .whmcscontainer .card-accent-asbestos { border-color: var(--color-primary-background); } /* Backgrounds */ .whmcscontainer .bg-color-gold, .whmcscontainer .bg-color-green, .whmcscontainer .bg-color-red, .whmcscontainer .bg-color-blue, .whmcscontainer .bg-color-orange, .whmcscontainer .bg-color-pink, .whmcscontainer .bg-color-purple, .whmcscontainer .bg-color-lime, .whmcscontainer .bg-color-magenta, .whmcscontainer .bg-color-teal, .whmcscontainer .bg-color-turquoise, .whmcscontainer .bg-color-emerald, .whmcscontainer .bg-color-amethyst, .whmcscontainer .bg-color-wet-asphalt, .whmcscontainer .bg-color-midnight-blue, .whmcscontainer .bg-color-sun-flower, .whmcscontainer .bg-color-pomegranate, .whmcscontainer .bg-color-silver, .whmcscontainer .bg-color-asbestos { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); } /* Card */ .whmcscontainer .card { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); margin-bottom: var(--spacing-child) !important; color: var(--color-box-foreground); } .whmcscontainer .card .card-header { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); color: var(--color-box-head-foreground); } .whmcscontainer .card .card-header .card-title, .whmcscontainer .card .card-header .panel-title { color: var(--color-box-head-foreground) !important; } .whmcscontainer .card .card-body { padding: var(--spacing-inner) !important; } .whmcscontainer .card .card-footer { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-color: var(--color-box-footer-background-border); border-bottom-width: 0; color: var(--color-box-footer-foreground); } /* Sidebar */ .whmcscontainer .sidebar .list-group { display: block !important; } .whmcscontainer .sidebar .list-group-item-action { color: var(--color-box-foreground); } .whmcscontainer .sidebar .list-group-item { border-color: var(--color-box-background-border); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } .whmcscontainer .sidebar .list-group-item:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); } .whmcscontainer .sidebar .list-group-item.active { color: var(--color-box-active-foreground); background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: none; } .whmcscontainer .sidebar .list-group-item .badge { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } .whmcscontainer .sidebar #Primary_Sidebar-Already_Registered-Already_Registered_Heading:hover, .whmcscontainer .sidebar #Secondary_Sidebar-Client_Contacts-No_Contacts:hover { /* Remove hover from sidebar elements */ background-color: transparent; } .whmcscontainer .sidebar-secondary { /* Fix spacing bug on mobile */ padding-right: 0; padding-left: 0; } .whmcscontainer .list-group-item { background-color: transparent; } /* Headings */ .whmcscontainer h1, .whmcscontainer h2, .whmcscontainer h3, .whmcscontainer h4, .whmcscontainer h5, .whmcscontainer h6 { font-weight: bold; } /* Alerts */ .whmcscontainer .alert { border-radius: 0; margin-bottom: var(--spacing-child) !important; border-radius: var(--border-radius); border-bottom-width: var(--border-bottom-width); } .whmcscontainer .network-issue-alert { padding: 10px; } /* Email Verification */ .whmcscontainer .email-verification { padding: 10px; margin-bottom: var(--spacing-child); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-foreground); font-weight: normal; border-radius: var(--border-radius); } /* Forms */ .whmcscontainer #registration .field, .whmcscontainer #registration .form-control, .whmcs-filename-cart .whmcscontainer #order-standard_cart .field, .whmcs-filename-cart .whmcscontainer #order-standard_cart .form-control { border: var(--color-box-background-border) 1px solid; color: var(--color-body); } .whmcscontainer .form-control, .modal-content .form-control { border: var(--color-box-background-border) 1px solid; } .whmcscontainer .input-group-text { /* Form icons */ background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; } .whmcscontainer .bootstrap-switch { /* Switch form */ display: block; margin-left: auto; margin-right: auto; border-color: var(--color-box-background-border); } .whmcscontainer .md-editor, /* Editor */ .whmcscontainer div.md-editor.active { border: var(--color-box-active-background-border) 1px solid; } .whmcscontainer .md-editor .form-control { border: none !important; } .whmcscontainer .md-editor > .md-preview, .whmcscontainer .md-editor > textarea.markdown-editor { border-top: var(--color-box-background-border) 1px solid !important; border-bottom: var(--color-box-background-border) 1px solid !important; } .whmcscontainer .custom-file-label { /* Ticket Attachment */ border: var(--color-box-background-border) 1px solid; border-radius: 0; } /* Pagination */ .whmcscontainer .page-link { border: var(--color-box-background-border) 1px solid; } .whmcscontainer .page-item:first-child .page-link, .whmcscontainer .page-item:last-child .page-link { border-radius: 0; } .whmcscontainer .page-item .page-link { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-color: var(--color-box-background-border); } .whmcscontainer .page-item.active .page-link, .whmcscontainer .pagination > .active > a, .whmcscontainer .pagination > .active > a:focus, .whmcscontainer .pagination > .active > a:hover, .whmcscontainer .pagination > .active > span, .whmcscontainer .pagination > .active > span:focus, .whmcscontainer .pagination > .active > span:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-background-border); } .whmcscontainer .page-item.active .page-link { color: var(--color-box-foreground); font-weight: bold; } /* Progress */ .whmcscontainer .progress { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } /* Table */ .whmcscontainer .table { border: var(--color-box-background-border) 1px solid !important; border-bottom-width: 3px !important; border-radius: var(--border-radius) !important; color: var(--color-box-foreground) !important; } .whmcscontainer .table th { border-top: none !important; border-bottom: none !important; background: var(--color-box-head-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%) !important; color: var(--color-box-head-foreground) !important; border-radius: 0 !important; } .whmcscontainer .table th.sorting_asc, .whmcscontainer .table th.sorting_desc { background-color: var(--color-primary-background) !important; color: var(--color-primary-foreground) !important; } .whmcscontainer .table td { background: var(--color-box-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%) !important; border-top: var(--color-box-background-border) 1px solid !important; } /* Editor */ .whmcscontainer .md-editor { background: #fff; } /* Modal */ .modal .modal-content { border-color: var(--color-box-background-border); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); border-radius: var(--border-radius); } .modal .modal-content .copy-to-clipboard img { display: inline; } .modal .modal-header.bg-primary { background: var(--color-box-head-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%) !important; border-bottom: var(--color-box-head-background-border) 1px solid; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); color: var(--color-box-head-foreground); } .modal .modal-title { color: var(--color-box-head-foreground); } .modal .modal-footer { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: var(--color-box-footer-background-border) 1px solid; border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } /* Modal - Language selector */ .modal-localisation .close { color: var(--body-default) !important; } .modal-localisation .modal-content .pt-5 { padding-top: 0 !important; } .modal-localisation .modal-content h5 { color: var(--color-box-foreground-bold); font-weight: bold; font-size: 1.5em; } .modal-localisation .modal-content .item-selector .item { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); border: var(--color-secondary-background-border) 1px solid; border-radius: var(--border-radius); text-decoration: none; } .modal-localisation .modal-content .item-selector .item:hover, .modal-localisation .modal-content .item-selector .item.active { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); border: var(--color-primary-background-border) 1px solid; } /* Modal - Empty cart */ .modal-remove-item .modal-content .modal-title { color: var(--color-box-foreground-bold); } /* Navtabs - Used on view cart (promo/taxes) */ .whmcscontainer .nav-tabs { border-color: var(--color-box-background-border); } .whmcscontainer .nav-tabs .nav-link { border-bottom: none; background-color: transparent; } .whmcscontainer .nav-tabs .nav-link.active { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-color: var(--color-box-background-border) var(--color-box-background-border) #fff; color: var(--color-box-foreground); } .whmcscontainer #order-standard_cart .view-cart-tabs .tab-content { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } /* Sub Menu (/includes/submenu-whmcs.tpl) */ .whmcssubmenu { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-bottom: var(--color-box-background-border) 3px solid; } .whmcssubmenu::after { clear: both; display: table; content: ""; } .whmcssubmenu header.header { background-color: transparent; } .whmcssubmenu header.header .navbar a { color: var(--color-box-foreground-bold); } .whmcssubmenu header.header .container { max-width: 100%; } .whmcssubmenu header.header .navbar-light { display: none; float: right; padding-right: 0; } @media (max-width: 1199px) { .whmcssubmenu header.header .navbar-light { display: block; } } /* Login (login.tpl) */ .whmcs-templatefile-login .whmcscontainer .card .h3 { margin-bottom: 22px; } .whmcs-templatefile-login .whmcscontainer .social-signin-btns { margin-top: var(--spacing-parent); } /* Forgotten password (password-reset-container.tpl) */ .whmcs-templatefile-password-reset-container .whmcscontainer .card .h3 { margin-bottom: 22px; } /* Client Area Home (clientareahome.tpl) */ .whmcs-templatefile-clientareahome .whmcscontainer .tiles .tile { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-right: var(--color-box-background-border) 1px solid; } .whmcs-templatefile-clientareahome .whmcscontainer .tiles .tile i { color: var(--color-box-background-divider); } .whmcs-templatefile-clientareahome .whmcscontainer .tiles .tile:hover i { color: var(--color-box-head-background); } .whmcs-templatefile-clientareahome .whmcscontainer .tiles .tile .title { color: var(--color-box-foreground); } .whmcs-templatefile-clientareahome .whmcscontainer .primary-content .card .card-footer { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } .whmcs-templatefile-clientareahome .whmcscontainer .primary-content .client-home-cards .card-body p { padding: 0; margin: 0; } /* Register (clientregister.tpl) */ .whmcs-templatefile-clientregister .whmcscontainer .social-signin-btns { margin-bottom: var(--spacing-child); } .whmcs-templatefile-clientregister .whmcscontainer .intl-tel-input.separate-dial-code .selected-flag { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); } .whmcs-templatefile-clientregister .whmcscontainer .offset-md-2 { /* Fix capcha spacing bug */ margin-left: 0; } .whmcs-templatefile-clientregister .sub-heading { display: none; } .whmcs-templatefile-clientregister #registration label { color: var(--color-body); font-size: 1em; font-weight: normal; } /* Affiliates Signup (affiliatessignup.tpl) */ .whmcs-templatefile-affiliatessignup .whmcscontainer .lead { text-align: center; } .whmcs-templatefile-affiliatessignup .whmcscontainer ul { padding: 0 !important; margin-bottom: 0; } .whmcs-templatefile-affiliatessignup .whmcscontainer ul li { background: url("../images/bullet-icon.png") left center no-repeat; background-size: auto 20px; padding: 15px 0 15px 30px; } .whmcs-templatefile-affiliatessignup .whmcscontainer p:last-child { margin-bottom: 0; } .whmcs-templatefile-affiliatessignup .whmcscontainer .card.extra-padding { padding-bottom: 0 !important; } /* Affiliates (affiliates.tpl) */ .whmcs-templatefile-affiliates .whmcscontainer .affiliate-stat { line-height: 2.2em; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); } .whmcs-templatefile-affiliates .whmcscontainer .affiliate-stat.alert-warning, .whmcs-templatefile-affiliates .whmcscontainer .affiliate-stat.alert-info, .whmcs-templatefile-affiliates .whmcscontainer .affiliate-stat.alert-success { color: var(--color-secondary-foreground); } .whmcs-templatefile-affiliates .whmcscontainer .card .h3 { text-align: center; margin-bottom: var(--spacing-child); font-family: var(--font-heading); color: var(--color-black); font-weight: bold; } .whmcs-templatefile-affiliates .whmcscontainer input[type="text"] { text-align: center; font-weight: bold; width: 100%; max-width: 450px; margin: 0 auto; font-size: 1.2em; background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } /* Add Funds (clientareaaddfunds.tpl) */ .whmcs-templatefile-clientareaaddfunds .whmcscontainer .card .table { border: none !important; margin-bottom: 0; } /* Product Details (clientareaproductdetails.tpl) */ .whmcs-templatefile-clientareaproductdetails .whmcscontainer .mb-2 { margin-bottom: var(--spacing-child) !important; } /* View Ticket (viewticket.tpl) */ .whmcs-templatefile-viewticket .whmcscontainer .ticket-buttons { margin-bottom: var(--spacing-child); text-align: center; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .posted-by { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; color: var(--color-secondary-foreground); padding: .75rem 1.25rem; text-align: center; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .posted-by .requestor-badge { background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); color: var(--color-secondary-active-foreground); } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply.staff .posted-by { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply.staff .posted-by .requestor-badge { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); color: var(--color-primary-active-foreground); } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .message { padding: var(--spacing-inner) !important; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .message hr { clear: both; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .message .ticket-support { border-top: var(--color-box-background-divider) 1px solid; padding-top: var(--spacing-inner); } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .rating, .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .rating-done { margin: 17px 0 0 0; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .attachments { border-top: var(--color-box-background-divider) 1px solid; padding: var(--spacing-inner) !important; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .attachment-list li { width: 150px; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .attachment-list li a figure { margin: 0; background-color: transparent; line-height: 50px; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .attachment-list li a .caption { margin-top: 10px; overflow: hidden; } /* Client Area Security (clientareasecurity.tpl) */ .whmcs-templatefile-clientareasecurity .whmcscontainer .bootstrap-switch { margin-bottom: var(--spacing-child); } /* Client Area Details (clientareadetails.tpl) */ .whmcs-templatefile-clientareadetails .whmcscontainer .btn-default { display: none; } /* Account Contacts New (account-contacts-new.tpl) */ .whmcs-templatefile-account-contacts-new .whmcscontainer .btn-default { display: none; } /* Announcements (announcements.tpl) */ .whmcs-templatefile-announcements .whmcscontainer .primary-content .card .card-title { display: none; } .whmcs-templatefile-announcements .whmcscontainer .primary-content .card { background-color: transparent; border: none; } .whmcs-templatefile-announcements .whmcscontainer .primary-content .card .card-body { padding: 0 !important; } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); margin-bottom: var(--spacing-child) !important; border-radius: var(--border-radius); } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement::after { clear: both; display: table; content: ""; } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement h1 { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); margin: 0 0 var(--spacing-child) 0; border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement h1 a { color: var(--color-box-head-foreground); font-size: 0.8em; padding: 5px 0; display: block; } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement .list-inline { padding: 0 var(--spacing-inner); text-align: center; } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement article { margin: 0 var(--spacing-inner) var(--spacing-child) var(--spacing-inner); } .whmcs-templatefile-announcements .whmcscontainer .announcements .announcement .btn { margin: 0 var(--spacing-child) var(--spacing-child) 0; float: right; } /* View Announcement (announcements.tpl) */ .whmcs-templatefile-viewannouncement .whmcscontainer .primary-content .card { background-color: transparent; border: none; } .whmcs-templatefile-viewannouncement .whmcscontainer .primary-content .card .card-body { padding: 0 !important; } .whmcs-templatefile-viewannouncement .whmcscontainer .primary-content .card h1 { display: none; } .whmcs-templatefile-viewannouncement .whmcscontainer .py-5 { padding-top: 0 !important; } .whmcs-templatefile-viewannouncement .whmcscontainer .list-inline { text-align: center; } .whmcs-templatefile-viewannouncement .whmcscontainer .button1 { margin: 5px; } /* Marketconnect */ .whmcscontainer .bg-light { background: var(--color-box-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%) !important; } .whmcscontainer .landing-page .navbar.navbar-expand-lg .navbar-nav > li > a { border-left-color: var(--color-box-background-divider) !important; } .whmcscontainer .landing-page .navbar.navbar-expand-lg .navbar-nav > li:last-child > a { border-right-color: var(--color-box-background-divider) !important; } .whmcscontainer .landing-page .navbar .navbar-nav > li > a { border-bottom-color: var(--color-box-background-border); } .whmcscontainer .navbar-light .navbar-nav .nav-link { color: var(--color-box-foreground); } .whmcscontainer .landing-page .navbar .navbar-nav > li.active > a { color: var(--color-box-active-foreground); background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); } .whmcscontainer .navbar-light .navbar-nav .nav-link:hover { color: var(--color-primary-background); } .whmcscontainer .landing-page.marketgoo .feature-wrapper { border-radius: var(--border-radius); } .landing-page .text20 h2 { color: var(--color-heading); } /* Promo banner (displayed in clientareahome.tpl) */ .whmcscontainer .promo-container { border-color: var(--color-border); } .whmcscontainer .promo-banner.symantec, .whmcscontainer .promo-banner.weebly, .whmcscontainer .promo-banner.spamexperts, .whmcscontainer .promo-banner.sitelock, .whmcscontainer .promo-banner.codeguard, .whmcscontainer .promo-banner.sitelockvpn, .whmcscontainer .promo-banner.marketgoo, .whmcscontainer .promo-banner.ox, .whmcscontainer .promo-banner.sitebuilder { border-color: var(--color-primary-background); } .whmcscontainer .promo-banner a, .whmcscontainer .promo-banner a:hover { color: var(--color-primary-background); } /* SSL Certificates */ .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels h3 .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl p.help-me-choose a, .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl a.help-me-choose { color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels .item { background-color: #fff; border-radius: var(--border-radius); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels .item p { color: var(--color-body); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels .item .btn { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .validation-levels .item .btn:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .ssl-benefits i { color: var(--color-secondary-background); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .competitive-upgrade-promo { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .standout-2 { color: var(--color-body); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info { padding: 0; background-color: transparent; } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .accordion { border: none; } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info .card { border: none; border-radius: 0; } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info .card-header { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-radius: 0; border-bottom: none; color: var(--color-box-head-foreground); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info .card-header h4 { color: var(--color-box-head-foreground); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info .card-body { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl .detailed-info .card-body h4 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/ssl\/index .whmcscontainer .landing-page.ssl ul.ssl-certs-all li { border-bottom: var(--color-box-background-divider) 1px solid; } /* SSL sub pages */ .whmcscontainer .landing-page.ssl .ideal-for.dv i { color: var(--color-secondary-background); } .whmcscontainer .landing-page.ssl .certificate-options { background: var(--color-secondary-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%) !important; color: var(--color-secondary-foreground) !important; border-radius: var(--border-radius) !important; } .whmcscontainer .landing-page.ssl .certificate-options h3, .whmcscontainer .landing-page.ssl .row-pricing-table .header h4 { color: var(--color-secondary-foreground); } .whmcscontainer .landing-page.ssl .certificate-options .col-md-3.sidebar ul li, .whmcscontainer .landing-page.ssl .certificate-options .col-md-4.sidebar ul li, .whmcscontainer .landing-page.ssl .certificate-options .col-md-6.sidebar ul li { color: var(--color-secondary-foreground); border-color: #fff !important; } .whmcscontainer .landing-page.ssl .row-pricing-table ul li:first-child { border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcscontainer .landing-page.ssl .row-pricing-table ul li:last-child { border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcscontainer .landing-page.ssl .certificate-options .btn { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcscontainer .landing-page.ssl .certificate-options .btn:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcscontainer .landing-page.ssl .features { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-foreground); border-radius: var(--border-radius); padding: 50px var(--spacing-inner) 50px; } .whmcscontainer .landing-page.ssl .features h3 { color: var(--color-box-foreground-bold); } .whmcscontainer .landing-page.ssl .features .feature, .whmcscontainer .landing-page.ssl .features .feature:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); font-size: 1.2em; color: var(--color-box-active-foreground-bold); border-radius: var(--border-radius); } .whmcscontainer .landing-page.ssl .features .feature i { color: var(--color-box-active-foreground-bold); } /* VPN */ .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .dividing-line { background-color: var(--color-border); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .hero { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .hero-bg { padding-left: var(--spacing-child); padding-right: var(--spacing-child); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .hero h1 { color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; text-align: left; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .hero h2 { color: var(--color-secondary-foreground); text-align: left; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .btn-start { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .btn-start:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.alternate-bg { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing h2 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing .pricing-box { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-active-foreground); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing .cycle { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-radius: var(--border-radius) var(--border-radius) 0 0; color: var(--color-box-active-head-foreground); border-bottom: var(--color-box-active-head-background-border) 1px solid; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing .price { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.pricing ul li { border-color: var(--color-box-background-divider); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature .label-info { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .btn-signup { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); border: var(--color-secondary-background-border) 1px solid; } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.world span { color: var(--color-primary-background); } .whmcs-templatefile-store\/sitelockvpn\/index .whmcscontainer .landing-page.sitelockvpn .feature.countries { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } /* Website Builder */ .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .features { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: var(--border-radius); color: var(--color-box-foreground); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .features h4 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .weebly-lite-plan { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: var(--border-radius); color: var(--color-box-foreground); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); padding: var(--spacing-inner); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .weebly-lite-plan h4, .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .weebly-lite-plan h5 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .weebly-lite-plan .btn-signup { background: var(--color-primary-background) !important; border: var(--color-primary-background-border) 1px solid !important; color: var(--color-primary-foreground) !important; text-shadow: var(--color-primary-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .weebly-lite-plan .btn-signup:hover { background: var(--color-primary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%) !important; border: var(--color-primary-active-background-border) 1px solid !important; color: var(--color-primary-active-foreground) !important; text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: var(--border-radius); color: var(--color-box-foreground); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item .header { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); padding: 11px; margin-bottom: var(--spacing-child); border-bottom: var(--color-box-head-background-border) 1px solid; } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item .header h4, .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item .header h5 { color: var(--color-box-head-foreground); margin: 0; } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item .price { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item .feature-heading { color: var(--color-box-foreground-bold); background-color: transparent; } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page .pricing-item ul li { border-color: var(--color-box-background-divider); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .faq { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: var(--border-radius); color: var(--color-box-foreground); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); } .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .faq h3, .whmcs-templatefile-store\/weebly\/index .whmcscontainer .landing-page.weebly .faq h4 { color: var(--color-box-foreground-bold); } /* Website Backup */ .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .strong-green span { color: var(--color-primary-background); } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .overview-features li { border-color: var(--color-border); } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .overview-features span { color: var(--color-body); } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .pricing { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .pricing h2 { color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .order-btn { background: var(--color-primary-background) !important; border: var(--color-primary-background-border) 1px solid !important; color: var(--color-primary-foreground) !important; text-shadow: var(--color-primary-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .order-btn:hover { background: var(--color-primary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%) !important; border: var(--color-primary-active-background-border) 1px solid !important; color: var(--color-primary-active-foreground) !important; text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/codeguard\/index .whmcscontainer .landing-page.codeguard .faqs { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); } /* Website Security */ .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans h2, .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans h3 { color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-active-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .header { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-bottom: var(--color-box-active-head-background-border) 1px solid; color: var(--color-box-active-head-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .header h4, .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .header p { color: var(--color-box-active-head-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .header h4 { font-weight: bold; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan ul li { color: var(--color-box-active-foreground); border-color: var(--color-box-active-background-divider); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan ul li span { color: var(--color-box-active-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .btn { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .plans .plan .btn:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .features .fas, .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .features .far { color: var(--color-secondary-background); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-foreground); padding: 80px 20px; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency h2.text-danger { color: var(--color-box-foreground-bold) !important; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency h3 { color: var(--color-box-foreground); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock h4 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency .fas, .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency .far { color: var(--color-box-active-foreground-bold); } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency .btn { background: var(--color-primary-background) !important; border: var(--color-primary-background-border) 1px solid !important; color: var(--color-primary-foreground) !important; text-shadow: var(--color-primary-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .emergency .btn:hover { background: var(--color-primary-active-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%) !important; border: var(--color-primary-active-background-border) 1px solid !important; color: var(--color-primary-active-foreground) !important; text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px !important; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .landing-page.sitelock .faq .accordion { border: none; padding: 0; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .card .card-header h4 { color: var(--color-box-head-foreground) !important; } .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .accordion > .card:not(:last-of-type), .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .accordion > .mc-promo-login:not(:last-of-type), .whmcs-templatefile-store\/sitelock\/index .whmcscontainer .accordion > .mc-promo-manage:not(:last-of-type) { border-bottom: var(--color-box-background-border) var(--border-bottom-width) solid; } /* Email Security */ .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .product-options { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .product-options .item { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-foreground); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .product-options h4, .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .product-options i { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .product-options .price { color: var(--color-primary-background); font-weight: bold; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .product-options .item .btn { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .product-options .item .btn:hover { background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); border: var(--color-secondary-active-background-border) 1px solid; color: var(--color-secondary-active-foreground); text-shadow: var(--color-secondary-active-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .product-options .btn-buy { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .product-options .btn-buy:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .light-grey-bg { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-body); border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .tab-content { padding: 0; background-color: transparent; color: var(--color-box-foreground); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page.mail-services .benefits { background-color: transparent; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); color: var(--color-box-active-foreground); border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started h2, .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started h4, .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started .price { color: var(--color-box-active-foreground-bold); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .faq h3 { color: var(--color-heading); } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started .btn-order-now { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; } .whmcs-templatefile-store\/spamexperts\/index .whmcscontainer .landing-page .get-started .btn-order-now:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } /* SEO Tools */ .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .video-banner { background-color: #46b7fb; } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan ul { border-top-color: var(--color-border); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan.labels ul li { border-right-color: var(--color-border); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan ul li { border-bottom-color: var(--color-border); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan.marketgoo_pro .header h4 { color: var(--color-primary-background); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan .header .best-value { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .plan.marketgoo_pro ul { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); color: var(--color-box-active-foreground); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .testimonials .testimonial { color: var(--color-body); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .carousel .carousel-indicators li { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/marketgoo\/index .whmcscontainer .landing-page.marketgoo .faqs { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: var(--border-radius); } /* Professional Email */ .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .header { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .header h1 { color: var(--color-secondary-foreground); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .stand-out { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .stand-out h2 { color: var(--color-box-foreground-bold); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox h3 { color: var(--color-primary-background); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .faqs { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing table { color: var(--color-box-foreground); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing table tr:nth-child(2n) td:first-child { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing td:not(.no-border), .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing th { border-color: var(--color-box-background-border); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing .pricing-label { color: var(--color-heading); } .whmcs-templatefile-store\/ox\/index .whmcscontainer .landing-page.ox .pricing th { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); color: var(--color-box-head-foreground); } /* Site Builder */ .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .bold-line { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .hero { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .intro { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .nav-tabs > li > a { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); color: var(--color-box-foreground-bold); border-radius: var(--border-radius); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .nav-tabs > li > a:hover, .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .nav-tabs > li > a.active { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); color: var(--color-box-active-foreground-bold); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .features p { color: var(--color-body); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .templates { border-top-color: var(--color-border); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .templates .previews img, .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .templates .previews .show-more div { border-color: var(--color-border); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .templates .previews .tplname { color: var(--color-heading); } .whmcs-templatefile-store\/sitebuilder\/index .whmcscontainer .landing-page.sitebuilder .pricing { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); height: 893px; } .landing-page.sitebuilder .pricing h2, .landing-page.sitebuilder .pricing p { color: var(--color-secondary-foreground); } /* Cart - Standard Cart */ .whmcs-filename-cart #order-standard_cart label { color: var(--color-body); font-size: 1em; font-weight: normal; } .whmcs-filename-cart .whmcscontainer #order-standard_cart { font-size: 1em; /* Unset pixel font */ } .whmcs-filename-cart .whmcscontainer #order-standard_cart .cart-sidebar { /* Remove sidebar */ display: none !important; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .cart-body { width: 100%; float: none; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .sidebar-collapsed { /* Remove mobile categories */ display: none; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .font-size-36 { /* H1 */ font-size: 2em; position: relative; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .font-size-36::before { content: ""; position: absolute; bottom: -10px; width: 40px; height: 2px; background: url("../images/heading-background.png") left top no-repeat; text-align: center; } /* Subheading */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .sub-heading, .whmcs-filename-cart .whmcscontainer #order-standard_cart .sub-heading-borderless { height: auto; border: none; margin: 0; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .sub-heading span, .whmcs-filename-cart .whmcscontainer #order-standard_cart .sub-heading-borderless span { display: block; position: static; padding: 0; font-size: 1.5em; line-height: 1.2em; text-transform: capitalize; color: var(--color-black); font-weight: bold; margin: 0 0 var(--spacing-child) 0; font-family: var(--font-heading); text-align: center; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .addon-promo-container { border-color: var(--color-border); border-radius: var(--border-radius); } /* Order Summary */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary { margin: 0 0 20px 0; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border: var(--color-box-head-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary, .whmcs-filename-cart .whmcscontainer #order-standard_cart #orderSummary { margin-top: 0 !important; /* Stops the scroll effect which is too buggy to keep active */ border-radius: var(--border-radius); color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary h2 { padding: 15px; color: var(--color-box-head-foreground); font-size: 1.4em; font-weight: bold; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .summary-container { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: 0; padding: var(--spacing-inner); font-size: 0.9em; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary .summary-totals { border-top: var(--color-box-background-divider) 1px solid; border-bottom: var(--color-box-background-divider) 1px solid; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary .loader { top: 15px; color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .order-summary .btn-continue-shopping { color: var(--color-box-foreground); } /* Product Info */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .product-info { margin: 0 0 var(--spacing-child) 0; border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); padding: var(--spacing-child); color: var(--color-box-foreground); border-radius: var(--border-radius); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .product-info .product-title { color: var(--color-box-foreground-bold); font-weight: bold; margin-bottom: 15px; } /* Addons */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon { font-size: 0.9em; border-bottom-width: 0; color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon .panel-body { border-radius: 0; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon .panel-body label { font-size: 1.2em; color: var(--color-box-foreground-bold); text-transform: capitalize; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon .panel-price { padding: 5px var(--spacing-inner); background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: var(--color-box-footer-background-border) 1px solid; color: var(--color-box-footer-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon .panel-add { padding: 5px var(--spacing-inner); border-radius: 0; background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; font-weight: bold; text-transform: capitalize; border-bottom: var(--color-primary-border) 3px solid; border-radius: 0 0 var(--border-radius) var(--border-radius); } /* Selected */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon-selected { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-border); color: var(--color-box-active-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon-selected .panel-add { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .panel-addon-selected .panel-price { background: var(--color-box-active-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-footer-background-gradient-top) 0, var(--color-box-active-footer-background-gradient-bottom) 100%); border-top: var(--color-box-active-footer-background-border) 1px solid; color: var(--color-box-active-footer-foreground); } /* Domain Select - Used when ordering a product with domain - also styles the table/results on domainregister.tpl */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-selection-options .option { margin-bottom: 15px; padding: var(--spacing-inner); border-radius: 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-selection-options .option-selected { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; color: var(--color-box-active-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-selection-options .option label { margin-bottom: 0; font-size: 1em; font-weight: normal; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-selection-options .option-selected label { font-weight: bold; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-input-group { margin: 20px 0 0 0; } /* Domain Results */ .whmcs-filename-cart .whmcscontainer #order-standard_cart .domain-checker-available { color: var(--color-primary-background); margin-bottom: 10px; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tlds { padding: 0; background-color: transparent; margin: 15px 0 var(--spacing-child) 0 } .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld-container-2 { width: 33.33%; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld { height: auto; padding: var(--spacing-inner); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld .spotlight-tld-sale, .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld .spotlight-tld-hot, .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld .spotlight-tld-new { width: 105px; top: 2px; right: -34px; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support) { border-radius: var(--border-radius); background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border-color: var(--color-primary-background-border); color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; font-weight: bold; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .panel-heading { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border: var(--color-box-head-background-border) 1px solid; border-bottom-width: 1px; font-weight: bold; text-align: center; color: var(--color-box-head-foreground); border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .list-group-item { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-top: none; color: var(--color-box-foreground); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .list-group-item .extension { color: var(--color-box-foreground-bold); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .list-group-item .price { color: var(--color-box-foreground-bold); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .list-group-item .btn:not(.domain-contact-support) { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid ; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .list-group-item .btn:not(.domain-contact-support):hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .suggested-domains .card-footer { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-radius: 0 0 var(--border-radius) var(--border-radius); } /* Configure Domains (configuredomains.tpl) */ .whmcs-templatefile-configuredomains .whmcscontainer #order-standard_cart .addon-products { margin-bottom: var(--spacing-child); border-bottom: var(--color-border) 1px solid; } .whmcs-templatefile-configuredomains .whmcscontainer #order-standard_cart .addon-products .panel { margin-bottom: var(--spacing-child); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: 0; color: var(--color-box-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-configuredomains .whmcscontainer #order-standard_cart .addon-products .panel .panel-body { padding: var(--spacing-inner); } /* Configure Product (configureproduct.tpl) */ .whmcs-templatefile-configureproduct .whmcscontainer #order-standard_cart #inputBillingcycle { width: 100%; } /* Configure Product Store (store/order) */ .whmcs-templatefile-store\/order .whmcscontainer .btn-default { display: none; } .whmcs-templatefile-store\/order .whmcscontainer .card.mt-5 { display: none; } .whmcs-templatefile-store\/order .whmcscontainer .store-promoted-product { display: none; } .whmcs-templatefile-store\/order .whmcscontainer .store-order-container .nav-tabs { border-color: var(--color-border); } .whmcs-templatefile-store\/order .whmcscontainer .store-order-container .nav-tabs .nav-link.active { border-color: var(--color-border) var(--color-border) #fff; } .whmcs-templatefile-store\/order .whmcscontainer .store-order-container .store-domain-tab-content { border-color: var(--color-border); } /* Products (products.tpl) */ .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border-color: var(--color-box-background-border); border-bottom-width: var(--border-bottom-width); border-radius: var(--border-radius); color: var(--color-box-foreground); padding: 0; } .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product header { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border-bottom: var(--color-box-head-background-border) 1px solid; margin: 0 0 5px 0; border-radius: var(--border-radius) var(--border-radius) 0 0; } .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product header span { color: var(--color-box-head-foreground); } .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product div.product-desc { font-size: 1em; } /* Hover */ .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product:hover { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-color: var(--color-box-active-background-border); color: var(--color-box-active-foreground); } .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product:hover header { background: var(--color-box-active-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-head-background-gradient-top) 0, var(--color-box-active-head-background-gradient-bottom) 100%); border-color: var(--color-box-active-head-background-border); } .whmcs-templatefile-products .whmcscontainer #order-standard_cart .products .product:hover header span { color: var(--color-box-active-head-foreground); } /* Register Domain (domain-pricing.tpl) */ .whmcs-templatefile-domain-pricing .whmcscontainer .featured-tld { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); margin-bottom: var(--spacing-child); box-shadow: var(--shadow); } .whmcs-templatefile-domain-pricing .whmcscontainer .tld-filters a { padding: 10px; background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; color: var(--color-secondary-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-domain-pricing .whmcscontainer .tld-filters a.badge-success { background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); border-color: var(--color-secondary-active-background-border); color: var(--color-secondary-active-foreground); } /* Domain Register (domainregister.tpl) */ .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-checker-container { background: var(--background-banner) url("../images/background5.jpg") center center no-repeat; border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-checker-container .input-group-box { border-radius: 0; background-color: transparent; padding: 0; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-checker-container .input-group-lg > .form-control { border-radius: var(--border-radius) 0 0 var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-checker-bg { padding: var(--spacing-parent) 0; background-image: none; background-color: rgba(0, 0, 0, 0.5); border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .featured-tld { margin: 0 0 var(--spacing-child) 0; background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: 0; box-shadow: none; border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .featured-tld .img-container img { display: inline; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .featured-tld .price { padding: 5px var(--spacing-inner); background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; font-weight: bold; text-transform: capitalize; border-bottom: var(--color-primary-background-border) 3px solid; border-radius: 0 0 var(--border-radius) var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .font-size-18 { font-size: 1.7em; line-height: 1.2em; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .tld-filters a { padding: 13px 20px; color: var(--color-secondary-foreground); background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; margin: 8px 5px 8px 0; font-weight: bold; font-size: 1.1em; border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .tld-filters a.badge-success { /* Active button */ color: var(--color-secondary-active-foreground); background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); border-color: var(--color-secondary-active-background-border); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .bg-white { margin-bottom: var(--spacing-child); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); background: var(--color-box-background) !important; background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%) !important; color: var(--color-box-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(2n+1), .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4 { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); color: var(--color-box-head-foreground); border: none; border-radius: 0; font-weight: bold; padding: 5px 0; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-pricing .two-row-center { border: none !important; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-pricing .tld-row { padding: 8px 0; border-bottom: var(--color-box-background-divider) 1px solid; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-pricing .tld-row.highlighted { background: transparent; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box { margin: 0 0 var(--spacing-child) 0; padding: var(--spacing-inner); background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-foreground); border-radius: var(--border-radius); } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box h3 { font-size: 1.8em; line-height: 1.1em; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box h3, .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box p { margin: 0 0 15px 0; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box p { font-size: 1em; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box .small { margin: 15px 0 0 0; } .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box .text-primary, .whmcs-templatefile-domainregister .whmcscontainer #order-standard_cart .domain-promo-box .text-warning { color: var(--color-primary-background) !important; } /* Domain Transfer (domaintransfer.tpl) */ .whmcs-templatefile-domaintransfer .whmcscontainer #order-standard_cart .font-size-36, .whmcs-templatefile-domaintransfer .whmcscontainer #order-standard_cart .font-size-30 { display: none; } .whmcs-templatefile-domaintransfer .whmcscontainer #order-standard_cart p { margin-bottom: 0; } /* View Cart (viewcart.tpl) */ .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items-header { padding: 15px 15px; color: var(--color-box-head-foreground); border-radius: var(--border-radius) var(--border-radius) 0 0; background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); border: var(--color-box-head-background-border) 1px solid; border-bottom-width: 0; font-weight: bold; font-size: 1em; } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-foreground); } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items .item { background: transparent; border-bottom: var(--color-box-background-divider) 1px solid; padding: var(--spacing-inner); } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items .item:last-child { border-bottom: none; } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items .item-title { color: var(--color-box-foreground-bold); font-weight: bold; } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .view-cart-items .item-domain { color: var(--color-primary-background); } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .empty-cart { margin: 0 0 var(--spacing-child) 0; text-align: center; } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .empty-cart .btn { background: var(--color-secondary-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-background-gradient-top) 0, var(--color-secondary-background-gradient-bottom) 100%); border: var(--color-secondary-background-border) 1px solid; color: var(--color-secondary-foreground); text-shadow: var(--color-secondary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .empty-cart .btn:hover { background: var(--color-secondary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-secondary-active-background-gradient-top) 0, var(--color-secondary-active-background-gradient-bottom) 100%); border-color: var(--color-secondary-active-background-border); color: var(--color-secondary-active-foreground); text-shadow: var(--color-secondary-active-foreground-shadow) 1px 1px; text-decoration: none; } /* Checkout (viewcart.tpl - even on the checkout page) */ .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .checkout-security-msg { display: none; } .whmcs-templatefile-viewcart .whmcscontainer #order-standard_cart .field-container { margin-bottom: 0; } .whmcs-templatefile-viewcart #order-standard_cart .cc-input-container { padding: 0; background-color: transparent; margin-top: var(--spacing-child); padding-top: var(--spacing-child); border: unset; border-top: var(--color-border) 1px solid; border-radius: 0; } .whmcs-templatefile-viewcart #order-standard_cart .account-select-container { border: none; } .whmcs-templatefile-viewcart #order-standard_cart .account-select-container div.account.border-bottom { border: none !important; } .whmcs-templatefile-viewcart #order-standard_cart .account-select-container div.account { padding: 0; border: none; margin-bottom: 15px; } .whmcs-templatefile-viewcart #order-standard_cart .account-select-container div.account.active { background: transparent; } .whmcs-templatefile-viewcart #order-standard_cart #containerNewUserSecurity { margin-top: 15px; } .whmcs-templatefile-viewcart #order-standard_cart .marketing-email-optin { margin-bottom: var(--spacing-child); } /* Cart - Premium Comparison */ .whmcs-templatefile-products #order-premium_comparison .price-table-container ul li { background-image: none; } .whmcs-templatefile-products #order-premium_comparison .price-table-container .price-table { background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); border: var(--color-box-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-foreground); border-radius: var(--border-radius); box-shadow: none; } .whmcs-templatefile-products #order-premium_comparison .price-table-container .price-table .top-head { background: var(--color-box-head-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-head-background-gradient-top) 0, var(--color-box-head-background-gradient-bottom) 100%); } .whmcs-templatefile-products #order-premium_comparison .price-table-container .price-table .top-head .top-area h4 { color: var(--color-box-head-foreground); text-shadow: var(--color-box-head-foreground-shadow) 1px 1px; } .whmcs-templatefile-products #order-premium_comparison .price-table-container .price-table .top-head .top-area { border-bottom: var(--color-box-head-background-border) 1px solid; } .whmcs-templatefile-products #order-premium_comparison .price-table-container .price-table .top-head .price-area { background: var(--color-box-footer-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-footer-background-gradient-top) 0, var(--color-box-footer-background-gradient-bottom) 100%); border-top: none; border-bottom: var(--color-box-footer-background-border) 1px solid; color: var(--color-box-footer-foreground); text-shadow: var(--color-box-footer-foreground-shadow); } .whmcs-templatefile-products #order-premium_comparison .price-table-container .order-button { background: var(--color-primary-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-background-gradient-top) 0, var(--color-primary-background-gradient-bottom) 100%); border: var(--color-primary-background-border) 1px solid; color: var(--color-primary-foreground); text-shadow: var(--color-primary-foreground-shadow) 1px 1px; border-radius: var(--border-radius); box-shadow: none; font-weight: bold; } .whmcs-templatefile-products #order-premium_comparison .price-table-container .order-button:hover { background: var(--color-primary-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-primary-active-background-gradient-top) 0, var(--color-primary-active-background-gradient-bottom) 100%); border: var(--color-primary-active-background-border) 1px solid; color: var(--color-primary-active-foreground); text-shadow: var(--color-primary-active-foreground-shadow) 1px 1px; border-radius: var(--border-radius); box-shadow: none; font-weight: bold; } /* ------------------------------------------ ------------------------------------------ ----- Responsive Media Quires ------------------------------------------ ------------------------------------------ */ @media (max-width: 1400px) { .product-tables1-4col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-4col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-4col .product-tables1-box { border-radius: var(--border-radius); width: 23.5%; border-width: 1px; } .product-tables1-4col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-4col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-4col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } .product-tables1-6col .product-tables1-box { width: 18.4%; margin-bottom: var(--spacing-child); } } @media (max-width: 1350px) { .banner.banner-design2column.banner-designscreenshot .banner-twocolumn .banner-twocolumn-col2 { margin-top: 0; align-items: center; } } @media (max-width: 1290px) { .product-tables1-5col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-5col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-5col .product-tables1-box { border-radius: var(--border-radius); width: 18.4%; border-width: 1px; } .product-tables1-5col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-5col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-5col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } } @media (max-width: 1260px) { .headermain .headermain-inner { /* Change menu to underneath logo */ flex-direction: column; } .headermain .headermain-logo { margin: 20px 0; } .navmain-container, .feature-slimmedcart .navmain-container { width: 100%; } .navmain { background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border-radius: var(--border-radius); margin: 0 0 20px 0; line-height: 50px; } .steps { line-height: 48px; } .navmain .navmain-dropdown:hover .navmain-subcontainer { top: 50px; } .navmain .navmain-home { border-radius: var(--border-radius) 0 0 var(--border-radius); } .navmain .navmain-cta { float: right; } .navmain .navmain-cta:hover { background: transparent; } .navmain .navmain-cta a { border-radius: 0 var(--border-radius) var(--border-radius) 0; } } @media (max-width: 1220px) { .gridboxes4.gridboxes4-4col .gridboxes4-box { flex-basis: 32%; } .product-boxes3 .product-boxes3-box { flex-basis: 49%; } .whmcs-templatefile-clientareahome .whmcscontainer .gridboxes4.gridboxes4-3col .gridboxes4-box { flex-basis: 49%; } .footermain .footermain-col { flex-basis: 31%; } .footermain .footermain-col4 { flex: 1; border-top: var(--color-border) 1px solid; padding-top: var(--spacing-child); } .footermain .footermain-heading { text-align: center; } .footermain .footermain-logo { margin-right: auto; margin-left: auto; } .footermain .footermain-links ul li { margin: 0 0 15px 0; } .footermain .footermain-links ul li a { padding: 8px 15px; background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-active-foreground); font-weight: normal; text-align: center; border-radius: var(--border-radius); } .footermain .footermain-links ul li a:hover { color: var(--color-primary-background); } .footermain .footermain-links ul li a .far, .footermain .footermain-links ul li a .fas, .footermain .footermain-links ul li a .fab, .footermain .footermain-links ul li a .fad, .footermain .footermain-links ul li a .fal { display: none; } .footermain .footermain-links ul li:first-child a { border-top: var(--color-box-active-background-border) 1px solid; } .footermain .footermain-links ul li a:hover { padding-left: 15px; } .copyrightmain .copyrightmain-inner { flex-direction: column; } .copyrightmain .copyrightmain-text { text-align: center; margin: 0 0 15px 0; } .copyrightmain .copyrightmain-links { display: flex; justify-content: center; } } @media (max-width: 1200px) { .gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box, .gridboxes2 .gridboxes2-box { flex-direction: column; } .gridboxes2 .gridboxes2-box .gridboxes2-image { margin: 0 0 var(--spacing-child) 0; flex-basis: unset; } .gridboxes2 .gridboxes2-box .gridboxes2-image img { width: 100%; max-width: 500px; } /* Feature box reverse order */ .gridboxes2 .gridboxes2-container.gridboxes2-reverse-order .gridboxes2-box .gridboxes2-text { margin: 0 0 var(--spacing-child) 0; } .gridboxes2 .gridboxes2-container.gridboxes2-reverse-order .gridboxes2-box .gridboxes2-image { order: 2; margin-bottom: 0; } .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading, .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading2, .gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url, .gridboxes2 .gridboxes2-box .gridboxes2-buttons { text-align: center; } } @media (max-width: 1175px) { .toolbarmain .toolbarmain-googletranslate { display: none; } .product-slider1 .product-slider1-slider { margin-bottom: 0; } .product-slider1 .product-slider1-productcontainer { margin-top: var(--spacing-child); } .product-slider1 .product-slider1-slider-productname strong { display: none; } .product-slider1 .product-slider1-slider-productname .product-slider1-slider-producticon { display: block; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-productoptions { flex-direction: column; margin-top: 0; flex-wrap: wrap; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features { margin: 0 0 var(--spacing-child) 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta { margin: 0; width: 100%; flex-direction: row; align-items: center; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatitle { margin: 0; width: 33.33%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatext { display: none; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice, .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctabutton { margin: 0; padding: 0; width: 33.33%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctabutton .button1 { display: table; margin: 0 auto; } } @media (max-width: 1130px) { .product-tables1-5col .product-tables1-box { width: 23%; margin-bottom: var(--spacing-child); } .product-tables1-6col .product-tables1-box { width: 23%; } } @media (max-width: 1100px) { .toolbarmain { flex-direction: column; } .toolbarmain .toolbarmain-text { display: none; } .banner-domainsearch { width: 60%; } .product-boxes1.product-boxes1-3col .product-boxes1-box { width: 48%; } .itemsincart .contentcontainer { background-image: none; } .product-tables1-3col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-3col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-3col .product-tables1-box { border-radius: var(--border-radius); width: 32%; border-width: 1px; } .product-tables1-3col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-3col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-3col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } } @media (max-width: 1050px) { .gridboxes1 .gridboxes1-box { flex-basis: 48%; } } @media (max-width: 1030px) { .navmain .navmain-link7 { display: none; } } @media (max-width: 1000px) { .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { flex-basis: 48%; } .domainchecker .domainchecker-columns { flex-direction: column; } .domainchecker .domainchecker-columns-left { order: 2; width: 100%; text-align: center; } .domainchecker .domainchecker-columns-right { order: 1; width: 100%; margin-bottom: var(--spacing-child); } .domainchecker .domainpricing .domaintld3 { margin-right: 0; } .domainchecker .domainpricing .domaintld4, .domainchecker .domainpricing .domaintld5 { display: none; } .columns.columns-style1 { flex-direction: column; } .mainmain h1, .mainmain h2 { font-size: 2em; line-height: 1.4em; } .mainmain h3, .mainmain h4, .mainmain h5, .mainmain h6 { font-size: 1.4em; line-height: 1.4em; } .banner .banner-twocolumn { flex-direction: column; } .banner .banner-twocolumn .banner-twocolumn-col1 { flex-basis: 100%; } .banner .banner-twocolumn .banner-twocolumn-col2 { order: 2; } .banner.banner-designnoscreenshot .banner-twocolumn .banner-twocolumn-col2 img { margin-top: var(--spacing-parent); } .banner.banner-design2column .banner-heading, .banner.banner-design2column .banner-text { text-align: center; } .banner.banner-design2column .banner-buttons { justify-content: center; } .product-tables1-4col .product-tables1-box { width: 31.33%; margin-bottom: var(--spacing-child); } } @media (max-width: 950px) { .banner .banner-price { top: 0; border-radius: 0 0 var(--border-radius) var(--border-radius); border-top-width: 0; } .gridboxes5 .gridboxes5-box { flex-basis: 48%; } .gridboxes4.gridboxes4-3col .gridboxes4-box { flex-basis: 49%; } .gridboxes4.gridboxes4-4col .gridboxes4-box { flex-basis: 49%; } } @media (max-width: 920px) { .banner-domainsearch { width: 70%; } .product-tables1-5col .product-tables1-box { width: 32%; } .product-tables1-6col .product-tables1-box { width: 32%; } } @media (max-width: 900px) { .navmain .navmain-link6 { display: none; } .linksbar ul a { padding: 10px 10px; } .gridboxes3 .gridboxes3-box { flex-basis: 49%; } .columns.columns-2col { flex-direction: column; } .columns.columns-2col .columns-col { flex-basis: 100%; } .columns.columns-2col .columns-col1 { order: 2; } .columns.columns-2col .columns-col2 { order: 1; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature { width: 33.33%; border-left: none; } } @media (max-width: 888px) { .product-tables1-2col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-2col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-2col .product-tables1-box { border-radius: var(--border-radius); width: 47%; border-width: 1px; } .product-tables1-2col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-2col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-2col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } } @media (max-width: 880px) { .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col1 { border-right: none; flex-basis: 100%; padding: 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { display: none; } .product-boxes2 { flex-direction: column; align-content: center; } .product-boxes2 .product-boxes2-box { max-width: 500px; } .product-boxes2 .product-boxes2-box.product-boxes2-display1 .product-boxes2-image img, .product-boxes2 .product-boxes2-box.product-boxes2-display2 .product-boxes2-image img { max-width: 500px; } } @media (max-width: 850px) { .footermain .footermain-col { flex-basis: 100%; } .footermain .footermain-col4 { flex: 1; border-top: none; padding-top: 0; } .copyrightmain a { color: var(--color-white); } .copyrightmain a:hover { color: var(--color-primary-background); } .copyrightmain .copyrightmain-links { display: block; } .copyrightmain .copyrightmain-links ul { flex-direction: column; } .copyrightmain .copyrightmain-links ul li { display: block; } .copyrightmain .copyrightmain-links ul li a { padding: 8px 15px; background: var(--color-box-active-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-active-background-gradient-top) 0, var(--color-box-active-background-gradient-bottom) 100%); border: var(--color-box-active-background-border) 1px solid; border-bottom-width: var(--border-bottom-width); color: var(--color-box-active-foreground); font-weight: normal; margin: 0 0 15px 0; text-align: center; border-radius: var(--border-radius); } .copyrightmain .copyrightmain-links ul li a:hover { color: var(--color-primary-background); } .copyrightmain .copyrightmain-links ul li:last-child a { border-right: var(--color-box-active-background-border) 1px solid; margin-bottom: 0; } .copyrightmain .copyright-logos { max-width: 100%; } .product-boxes1.product-boxes1-2col { flex-direction: column; align-content: center; } .product-boxes1.product-boxes1-2col .product-boxes1-box { width: 100%; } .product-boxes3 .product-boxes3-box { flex-basis: 100%; } } @media (max-width: 830px) { .product-tables1-3col .product-tables1-box { width: 48%; margin-bottom: var(--spacing-child); } .product-tables1-4col .product-tables1-box { width: 48%; } .product-tables1-5col .product-tables1-box { width: 48%; } .product-tables1-6col .product-tables1-box { width: 48%; } } @media (max-width: 800px) { .cta { flex-direction: column; } .cta .cta-col1 { margin-bottom: var(--spacing-child); } .cta .cta-col2 .button1 { white-space: normal; } .cta2 { flex-direction: column; } .cta2 .cta2-col1 { margin-bottom: var(--spacing-child); } .cta2 .cta2-col2 .button1 { white-space: normal; } .copyrightmain .copyright-logos { flex-direction: column; align-items: center; } .copyrightmain .copyright-logos .copyright-logo { margin-bottom: var(--spacing-child); } .copyrightmain .copyright-logos .copyright-logo:last-child { margin-bottom: 0; } } @media (max-width: 790px) { .banner-domainsearch { width: 80%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta { flex-direction: column; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatitle, .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctaprice, .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-cta .product-slider1-ctabutton { margin: 0 0 var(--spacing-child) 0; width: 100%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-ctatext { display: block; } } @media (max-width: 755px) { /* Mobile menu */ .navmain ul li { /* Remove links for desktop */ display: none; } .navmain .navmain-dropdown .navmain-subcontainer { /* Remove desktop subcontainer (stops it showing on hover) */ display: none; } .navmain-mobile .navmain-home { /* Remove the desktop home icon */ display: none !important; } .navmain .navmain-mobile-home { /* Show mobile home icon */ float: left; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; color: var(--color-black); text-decoration: none; } .navmain .navmain-mobile-icon { /* Show mobile menu icon */ float: right; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; color: var(--color-black); text-decoration: none; font-size: 1.4em; } .navmain .navmain-mobile-icon-open { /* Show mobile menu icon open format */ color: var(--color-primary-background); } .navmain-mobile ul li { display: block !important; /* Display links for mobile */ width: 100%; background-image: none; /* Remove the nav divider */ background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); margin: 0; border-top: var(--color-box-background-border) 1px solid; } .navmain-mobile ul li:hover, .navmain-mobile ul li.navmain-active { /* Replace the orange background color on hover/active */ background: var(--color-box-background); background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%); } .navmain-mobile ul li a { text-align: center; color: var(--color-box-foreground); } .navmain-mobile ul li:hover a, .navmain-mobile ul li.navmain-active a, .navmain-mobile .navmain-dropdown-mobile-open a { color: var(--color-primary-background); } .navmain-mobile .navmain-cta { border-top: none; } .navmain-mobile .navmain-cta a { border: none !important; border-radius: 0 0 var(--border-radius) var(--border-radius); padding: 0 40px; } /* Dropdown */ .navmain-mobile .navmain-dropdown { position: relative; /* Force correct positioning */ } .navmain-mobile .navmain-dropdown a { background-image: none; } .navmain-mobile .navmain-dropdown.navmain-active a { background: none; } .navmain-mobile .navmain-dropdown:hover a, .navmain-mobile .navmain-dropdown a:hover, .navmain-mobile .navmain-dropdown.navmain-active a:hover { background: none; } .navmain-mobile .navmain-dropdown span.navmain-mobile-child { /* Child dropdown icon */ position: absolute; top: 0; right: 0; cursor: pointer; display: block; background: url("../images/navmain-mobile-subcontainer-closed.png") center center no-repeat; background-size: 20px auto; width: 50px; height:50px; text-decoration: none; } .navmain-mobile .navmain-dropdown-mobile-open span.navmain-mobile-child { background: url("../images/navmain-mobile-subcontainer-open.png") center center no-repeat; background-size: 20px auto; } .navmain-mobile .navmain-dropdown .navmain-subcontainer { padding-top: 0; } .navmain-mobile .navmain-dropdown:hover .navmain-subcontainer-mobile-open, .navmain-mobile .navmain-dropdown .navmain-subcontainer-mobile-open { /* Display the mobile menu (overrides sub-container) */ width: 100%; left: 0; top: 0; position: relative; display: block; border: none; border-radius: 0; } .navmain-mobile .navmain-dropdown .navmain-subcontainer-mobile-open ul li { width: 100%; } /* Dropdown - Mega Menu */ .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { margin: 10px 0; } .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link span { text-align: left; } /* Dropdown - Single */ .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-link a, .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover { background-image: none; padding-left: 0; padding-right: 0; } .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link:first-child a { border-top: #c2c2c2 1px solid; } .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link:last-child a { border-bottom: none; } /* Select */ .navmain.navmain-select select { display: inline-block; background: #fff; width: 100%; height: 28px; border: 1px solid #000; font-size: 16px; font-weight: normal; text-decoration: none; text-align: center; color: var(--color-body); } /* Sticky menu */ .headermain.isStuck { max-height: 300px; overflow-y: scroll; } .feature-slimmedcart .headermain.isStuck { overflow-y: hidden; } .banner .list ul li { width: 100%; text-align: center; background-image: none; padding: 5px 10px; } .product-boxes1.product-boxes1-3col { flex-direction: column; align-content: center; } .product-boxes1.product-boxes1-3col .product-boxes1-box { width: 100%; } } @media (max-width: 730px) { .itemsincart .itemsincart-coupon { display: table; margin: 10px auto 0 auto; } } @media (max-width: 700px) { .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-welcome { display: none; } .headermain .welcome { margin: 18px 0 0 0; font-size: 1.3em; } .gridboxes1 .gridboxes1-box { flex-basis: 100%; } .banner-domainsearch { width: 100%; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .message .ticket-donate { float: none; text-align: center; margin: 0 0 var(--spacing-child) 0; } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .rating, .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .rating-done { float: none; text-align: center; margin: 0; } } @media (max-width: 680px) { .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature { width: 50%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:nth-child(5) { display: none; } } @media (max-width: 650px) { .steps .step .step-text .step-text-description { display: none; } .gridboxes3 .gridboxes3-box { flex-basis: 100%; } .imgright, .imgleft { float: none; margin: 0 auto var(--spacing-child) auto; } .partnersmain { display: none; } .product-tables1-1col .product-tables1-box.product-tables1-box-features { display: none; } .product-tables1-1col .product-tables1-box { width: 100%; border-width: 1px; } .product-tables1-1col .product-tables1-box:last-child { border-radius: var(--border-radius); } .product-tables1-1col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; } .product-tables1-1col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; } .product-tables1-1col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; } } @media (max-width: 620px) { .gridboxes4.gridboxes4-3col .gridboxes4-box { flex-basis: 100%; } .whmcs-templatefile-clientareahome .whmcscontainer .gridboxes4.gridboxes4-3col .gridboxes4-box { flex-basis: 100%; } .gridboxes4.gridboxes4-4col .gridboxes4-box { flex-basis: 100%; } } @media (max-width: 600px) { .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { flex-basis: 100%; } .subbanner .contentcontainer { padding: var(--spacing-child) 0; } .subbanner .subbanner-heading { font-size: 2.5em; } .whmcs-filename-cart .whmcscontainer #order-standard_cart .highlightbox .img-cart-template { float: none; margin: 0 auto var(--spacing-child) auto; } .product-tables1-2col .product-tables1-box { width: 100%; margin-bottom: var(--spacing-child); } .product-tables1-3col .product-tables1-box { width: 100%; } .product-tables1-4col .product-tables1-box { width: 100%; } .product-tables1-5col .product-tables1-box { width: 100%; } .product-tables1-6col .product-tables1-box { width: 100%; } } @media (max-width: 550px) { .product-boxes1 .product-boxes1-box .product-boxes1-text img { height: 70px; } .banner-domainsearch::before { display: none; } .banner-domainsearch input[type="text"] { padding: 0 var(--spacing-inner); } .social-sidewidget { display: none; } } @media (max-width: 500px) { .whmcs-templatefile-configureproductdomain .steps .step-step1 .step-text, .whmcs-templatefile-configuredomains .steps .step-step1 .step-text, .whmcs-templatefile-configureproduct .steps .step-step1 .step-text, .whmcs-templatefile-viewcart .steps .step-step1 .step-text, .whmcs-templatefile-viewcart .steps .step-step2 .step-text { background-size: 15px auto; padding-right: var(--spacing-inner); } .basecontainer { font-size: 1.4em; line-height: 1.5em; } .domainchecker .domainsearch { margin-bottom: 0; } .domainchecker .domainpricing { display: none; } .gridboxes5 .gridboxes5-box { flex-basis: 100%; } .accordion .accordion-block .accordion-answer { padding: var(--spacing-child); } .whmcs-templatefile-viewticket .whmcscontainer .view-ticket .ticket-reply .message .ticket-avatar img { max-width: 75px; } } @media (max-width: 480px) { .headermain .welcome { display: none; } } @media (max-width: 450px) { .contentcontainer { width: 88%; } } @media (max-width: 400px) { .domainchecker .domainsearch::before { display: none; } .domainchecker .domainsearch input[type="text"] { padding-left: var(--spacing-inner); } } @media (max-width: 350px) { .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features { margin: 0; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature { width: 100%; } .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:nth-child(2), .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:nth-child(3), .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:nth-child(4), .product-slider1 .product-slider1-productcontainer .product-slider1-product .product-slider1-features .product-slider1-feature:nth-child(5) { display: none; } }