/* Default Styles */ body, p {font-family: 'Open Sans', sans-serif!important; font-size: 18px; color: #4A4F53; } a { color: #00a2de;} /* Semantic Overrides */ .ui.header, .ui.header a:link { font-family: 'Ubuntu', sans-serif!important; color: #4A4F53;} .ui.menu .menu .item {padding-top: 35px;} @media only screen and (max-width : 767px) { .ui.menu .menu .item {padding-top: 15px;} } .ui.black.button{ color: #FFFFFF!important; background-color: #4A4F53; } .ui.black.button.basic{ background-color: #FFFFFF!important; } .ui.white.button.basic{ background-color: #FFFFFF!important; border: none;} .ui.accordion .title:not(.ui){ font-family: 'Ubuntu', sans-serif!important; color: #4A4F53;} .ui.accordion .title i.icon{ float: right;} h2.ui.header{ font-size: 34px;} h3.ui.header{ font-size: 24px; margin-bottom: 12px} h4.ui.header{ font-size: 18px;} .ui.segment, .ui.segments .segment {font-size: inherit;} /* HomePage Slider Overrides */ .gallery-next{ z-index: 200!important;} .gallery-prev{ z-index: 200!important;} /* Common Elements */ /* Button Styles */ .theme-button-rounded{border-radius: 500rem!important;} .theme-button-left-rounded{ border-top-left-radius: 500rem!important; border-bottom-left-radius: 500rem!important;} .theme-button-right-rounded{ border-top-right-radius: 500rem!important; border-bottom-right-radius: 500rem!important;} .theme-button-link{ box-shadow: 0 0 0 0 rgba(255, 255, 255, 255) inset!important; color: #00a2de!important; padding-left: 16px; padding-right: 16px; font-size: 14px; cursor: pointer; white-space: nowrap;} .quote-icon{ position: absolute!important; top: 260px; left: 0px;} /* Mobile */ @media only screen and (max-width : 767px) { .theme-button-link{ display: block; margin-top: 16px;} } /* Text Colors */ /* Size */ .theme-text-xxsmall{ font-size: 11px!important;} .theme-text-xsmall{ font-size: 13px!important;} .theme-text-small{ font-size: 15px!important;} .theme-text-medium{ font-size: 17px!important;} .theme-text-large{ font-size: 20px!important;} .theme-text-xlarge{ font-size: 22px!important;} .theme-text-xxlarge{ font-size: 30px!important;} .theme-text-xxxlarge{ font-size: 36px!important;} /* Colors */ .theme-text-white{ color: #FFFFFF!important;} .theme-text-lighest-grey { color: #F3F5F6!important;} .theme-text-grey{ color: #C1C5C8!important;} .theme-text-dark-grey{ color: #4A4F53!important;} .theme-text-blue{ color: #00a2de!important;} .theme-text-orange{ color: #f36e26!important;} /* Text Width */ .theme-text-max-width{ max-width: 800px; } /* Alignment */ .theme-text-left{ text-align: left;} .theme-text-center{ text-align: center;} .theme-text-right{ text-align: right;} /* Background */ /*Colors */ .theme-bg-white{ background-color: #FFFFFF!important;} .theme-bg-lighter-grey{ background-color: #EAEEF1;} .theme-bg-lighest-grey{ background-color: #F3F5F6!important;} .theme-bg-grey{ background-color: #C1C5C8!important;} .theme-bg-dark-grey{ background-color: #4A4F53!important;} .theme-bg-rhodium{ background-color: #939396!important;} .theme-bg-platinum{ background-color: #5C5D5C!important;} .theme-bg-gold{ background-color: #FDCC30!important;} .theme-bg-silver{ background-color: #C1C5C8!important;} .theme-bg-bronze{ background-color: #A26850!important;} .theme-bg-orange-gradient{ background: #f36e26; background: -moz-linear-gradient(left, #f36e26 0%, #f68d28 100%); background: -webkit-linear-gradient(left, #f36e26 0%,#f68d28 100%); background: linear-gradient(to right, #f36e26 0%,#f68d28 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f36e26', endColorstr='#f68d28',GradientType=1 ); } .theme-bg-blue-gradient{ background: #00a2de; background: -moz-linear-gradient(left, #00a2de 0%, #66c3eb 100%); background: -webkit-linear-gradient(left, #00a2de 0%,#66c3eb 100%); background: linear-gradient(to right, #00a2de 0%,#66c3eb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2de', endColorstr='#66c3eb',GradientType=1 );} .theme-bg-grey-gradient{ background: #c1c5c8; background: -moz-linear-gradient(left, #c1c5c8 0%, #d8dfe1 100%); background: -webkit-linear-gradient(left, #c1c5c8 0%,#d8dfe1 100%); background: linear-gradient(to right, #c1c5c8 0%,#d8dfe1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c5c8', endColorstr='#d8dfe1',GradientType=1 );} .theme-bg-white-tran{ background-color: rgba(255, 255, 255, 0.5);} .theme-bg-feature{ background: #F3F5F6 url(../images/feature-bg.jpg) no-repeat left top} /* Images */ .theme-bg-default{ background: url(../images/hero-default.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-default-au{ background: url(../images/hero-default-au.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-about{ background: url(../images/hero-about.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-resources{ background: url(../images/hero-support.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-news{ background: url(../images/hero-news.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-news-au{ background: url(../images/hero_secondary_news.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-what{ background: url(../images/hero-what.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-callback{ background: url(../images/hero-callback.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-plans{ background: url(../images/hero-plans.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-faq{ background: url(../images/hero-faq.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-partner{ background: url(../images/hero-partner.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-partners{ background: url(../images/hero-partners.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-security{ background: url(../images/hero-security.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-career{ background: url(../images/hero-career.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-careers{ background: url(../images/hero-careers.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-tools{ background: url(../images/hero-tools.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-privacy{ background: url(../images/hero-privacy.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-how{ background: url(../images/hero-how_it_works.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-payday{ background: url(../images/hero-paydayfiling.jpg) no-repeat center center!important; background-size: cover!important;} /*.theme-bg-xero{ background: url(../images/hero-xero.jpg) no-repeat center center!important; background-size: cover!important;}*/ .theme-bg-features{ background: url(../images/hero-Features.jpg) no-repeat center center!important; background-size: cover!important;} /*.theme-bg-home{ background: url(../images/hero-home-3.jpg) no-repeat center center!important; background-size: cover!important;}*/ .theme-bg-testimonials{ background: url(../images/hero-testimonials.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-kiosk-au{ background: url(../images/hero-kiosk-au.jpg) no-repeat center center!important; background-size: cover!important;} /*.theme-bg-easyempolyer{ background: url(../images/hero_easyemployer.jpg) no-repeat center center!important; background-size: cover!important;}*/ .theme-bg-deputy{ background: url(../images/hero_deputy-au.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-tanda{ background: url(../images/hero_tanda.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-subscribehr{ background: url(../images/hero-subscribe_HR.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-myhr{ background: url(../images/hero-myHR.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-iso{ background: url(../images/hero-ISO.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-wpn{ background: url(../images/hero-WPN.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-stp{ background: url(../images/hero_STP.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-micro{ background: url(../images/hero_micro.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-xmas-au{ background: url(../images/hero-xmas-au.jpg) no-repeat center center!important; background-size: cover!important;} .theme-bg-xmas-au-v2{ background: url(../images/hero-home-xmas-au.jpg) no-repeat center center!important; background-size: cover!important;} /*.theme-bg-integrations{ background: url(../images/hero-home-integration.png) no-repeat center center!important; background-size: cover!important;}*/ .theme-bg-intelliHR{ background: url(../images/hero_intellhr-au.jpg) no-repeat center center!important; background-size: cover!important;} /*.theme-bg-featuresV2{ background: url(../images/hero-home-features.png) no-repeat center center!important; background-size: cover!important; margin-top: 0px!important;}*/ /*.theme-bg-kioskV2{ background: url(../images/hero-home-kiosk.png) no-repeat center center!important; background-size: cover!important; margin-top: 0px!important;} */ .theme-bg-lines{ background-image: url(../images/lines-bg.png); background-size: cover!important;} .theme-bg-thatch{ background: url(../images/thatch-bg.jpg) repeat center center!important;} .theme-bg-how-line{ background-image: url(../images/how-line-bg.png); background-repeat: repeat-y; background-position: top center!important; } .theme-bg-how-dots{ background-image: url(../images/how-dot-bg.png); background-repeat: repeat-y; background-position: center center!important; height: 35px; margin-top: -1rem; margin-bottom: -1rem; } .theme-bg-how-split{ background-image: url(../images/how-split-lg-bg.png); background-repeat: no-repeat; background-position: top center!important; height: 69px; left: -1px; margin-top: -1rem; margin-bottom: -1rem; } /* Computer Small Screen */ @media only screen and (min-width: 993px) and (max-width: 1199px) { .theme-bg-how-split{ background-image: url(../images/how-split-md-bg.png);} } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-bg-how-split{ background-image: url(../images/how-split-sm-bg.png);} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-bg-how-split{ background-image: url(../images/how-split-xs-bg.png);} } .theme-bg-orange-left-aml{ background-image: url(../images/orange-left-aml.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-orange-right-aml{ background-image: url(../images/orange-right-aml.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-orange-left-data{ background-image: url(../images/orange-left-data.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-orange-right-data{ background-image: url(../images/orange-right-data.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-blue-left-twofactor{ background-image: url(../images/blue-left-twofactor.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-blue-right-twofactor{ background-image: url(../images/blue-right-twofactor.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-blue-left-financial{ background-image: url(../images/blue-left-financial.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-blue-right-financial{ background-image: url(../images/blue-right-financial.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-payday-left-what{ background-image: url(../images/payday-filing-what-left.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-payday-right-what{ background-image: url(../images/payday-filing-what-right.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-payday-left-how{ background-image: url(../images/payday-filing-how-left.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-payday-right-how{ background-image: url(../images/payday-filing-how-right.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-payday-left-when{ background-image: url(../images/payday-filing-when-left.jpg); background-repeat: no-repeat; background-position: top right!important; background-size: cover!important;} .theme-bg-payday-right-when{ background-image: url(../images/payday-filing-when-right.jpg); background-repeat: no-repeat; background-position: top left!important; background-size: cover!important;} .theme-bg-quote{ background: #36B3E4 url(../images/article-quote-bg.jpg) no-repeat left top!important;} .theme-bg-future{ background-image: url(../images/feature-bg-orange.jpg); background-repeat: no-repeat; background-position: top left!important;} .theme-bg-milestone{ background: #FFF url(../images/milestone-ribbon.png) repeat-y center top!important;} .theme-table{ border-spacing: 0px!important; width: 100%;} .theme-table td{ padding: 6px 10px;} .theme-table-subtitle td{ background-color: #EDEEEF;} .theme-table-column{ text-align: center;} .theme-table-column tr.theme-border-top td{ border-top: solid 1px #C1C5C7;} .theme-table-column td{ border-bottom: solid 1px #C1C5C7;} .theme-table-column td:nth-child(even) { background-color: #F3F4F6;} .theme-table-column td:nth-child(1){ text-align: left; color: rgba(0,0,0,.87) } /* Padding */ .theme-top-padding-none{ padding-top: 0px!important;} .theme-top-padding-xsmall{ padding-top: 4px;} .theme-top-padding-small{ padding-top: 8px;} .theme-top-padding-medium{ padding-top: 16px;} .theme-top-padding-large{ padding-top: 24px;} .theme-top-padding-xlarge{ padding-top: 32px;} .theme-top-padding-xxlarge{ padding-top: 48px;} .theme-top-padding-xxxlarge{ padding-top: 72px;} .theme-bottom-padding-none{ padding-bottom: 0px!important;} .theme-bottom-padding-xsmall{ padding-top: 4px;} .theme-bottom-padding-small{ padding-bottom: 8px;} .theme-bottom-padding-medium{ padding-bottom: 16px;} .theme-bottom-padding-large{ padding-bottom: 24px;} .theme-bottom-padding-xlarge{ padding-bottom: 32px;} .theme-bottom-padding-xxlarge{ padding-bottom: 48px;} .theme-bottom-padding-xxxlarge{ padding-bottom: 72px;} .theme-bottom-padding-xxxxlarge{ padding-bottom: 96px;} .theme-left-padding-small{ padding-left: 8px;} .theme-left-padding-medium{ padding-left: 16px;} .theme-left-padding-large{ padding-left: 24px;} .theme-left-padding-xlarge{ padding-left: 32px;} .theme-left-padding-xxlarge{ padding-left: 48px;} .theme-left-padding-xxxlarge{ padding-left: 72px;} .theme-right-padding-none{ padding-right: 0px!important;} .theme-right-padding-small{ padding-right: 8px;} .theme-right-padding-medium{ padding-right: 16px;} .theme-right-padding-large{ padding-right: 24px;} .theme-right-padding-xlarge{ padding-right: 32px;} .theme-right-padding-xxlarge{ padding-right: 48px;} .theme-right-padding-xxxlarge{ padding-right: 72px;} .theme-v-padding-none{ padding-top: 0px!important; padding-bottom: 0px!important;} .theme-v-padding-xsmall{ padding-top: 4px; padding-bottom: 4px;} .theme-v-padding-small{ padding-top: 8px; padding-bottom: 8px;} .theme-v-padding-medium{ padding-top: 16px; padding-bottom: 16px;} .theme-v-padding-large{ padding-top: 24px; padding-bottom: 24px;} .theme-v-padding-xlarge{ padding-top: 32px; padding-bottom: 32px;} .theme-v-padding-xxlarge{ padding-top: 48px; padding-bottom: 48px;} .theme-v-padding-xxxlarge{ padding-top: 72px; padding-bottom: 72px;} .theme-h-padding-none{ padding-left: 0px!important; padding-right: 0px!important;} .theme-h-padding-small{ padding-left: 8px; padding-right: 8px;} .theme-h-padding-medium{ padding-left: 16px; padding-right: 16px;} .theme-h-padding-large{ padding-left: 24px; padding-right: 24px;} .theme-h-padding-xlarge{ padding-left: 32px; padding-right: 32px;} .theme-h-padding-xxlarge{ padding-left: 48px; padding-right: 48px;} .theme-h-padding-xxxlarge{ padding-left: 72px; padding-right: 72px;} /* Margin */ .theme-top-margin-small{ margin-top: 8px!important;} .theme-top-margin-medium{ margin-top: 16px!important;} .theme-top-margin-large{ margin-top: 24px!important;} .theme-top-margin-xlarge{ margin-top: 32px!important;} .theme-bottom-margin-small{ margin-bottom: 8px!important;} .theme-bottom-margin-medium{ margin-bottom: 16px!important;} .theme-bottom-margin-large{ margin-bottom: 24px!important;} .theme-bottom-margin-xlarge{ margin-bottom: 32px!important;} /* Borders */ .theme-border-right{ border-right: solid 1px #FFFFFF; } .theme-border-grey-top{ border-top: solid 3px #F3F5F6; } .theme-border-grey-thin-bottom{ border-bottom: solid 1px #C1C5C8; } .theme-border-grey-bottom{ border-bottom: solid 3px #C1C5C8; } .theme-border-image{ border-radius: 50%; border: solid 1px #C2C6C9;} .theme-borber-bottom-rhodium{ border-bottom: solid 1px #939396!important;} .theme-borber-bottom-platinum{ border-bottom: solid 1px #5C5D5C!important;} .theme-borber-bottom-gold{ border-bottom: solid 1px #FDCC30!important;} .theme-borber-bottom-silver{ border-bottom: solid 1px #C1C5C8!important;} .theme-borber-bottom-bronze{ border-bottom: solid 1px #A26850!important;} /* Think Borders */ .theme-thick-border{ height: 6px; padding: 0px!important;} /* Drop Shadow */ .theme-dropshadow{ -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25); box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25); } /* Button Icons */ .theme-icon-button{ padding-left: 0.5rem!important; padding-top: 0.5rem!important; padding-bottom: 0.5rem!important; background-color: #FFFFFF!important;} .theme-icon-button-icon{ height: 3rem; width: 3rem; border-radius: 500rem; display: inline-block; padding-top: 1rem; padding-left: 0.2rem; margin-right: 1.5rem; background-color: #494F53; color: #FFFFFF; font-size: 1.2rem; } .theme-icon-button-label{ display: inline-block; font-size: 1.3rem; padding-top: 0.3rem; margin-right: 1.5rem; } /* CTA */ .theme-cta-button{ background-color: #FFFFFF!important; padding-right: 8px!important; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.50)!important; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.50)!important; -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.50)!important; font-size: 1.5rem!important; } .theme-cta-button-icon{ display: inline-block; padding-left: 1.0rem; color: #FFFFFF;} .theme-cta-button-icon i{margin-top: -5px;} .theme-cta-button-label{ display: inline-block; font-size: 1.5rem; padding-top: 0.3rem; margin-right: 1.5rem; } .theme-cta-black{background-color: #4A4F53!important;} .theme-cta-black .theme-cta-button-label{ color: #FFFFFF!important; font-size: 1.5rem; padding-top: 0.3rem; margin-right: 1.5rem;} .theme-cta-orange{background: #f36e26!important; background: -moz-linear-gradient(left, #f36e26 0%, #f68d28 100%)!important; background: -webkit-linear-gradient(left, #f36e26 0%,#f68d28 100%)!important; background: linear-gradient(to right, #f36e26 0%,#f68d28 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f36e26', endColorstr='#f68d28',GradientType=1 )!important; color: #FFFFFF!important;} .theme-cta-orange .theme-cta-button-label{ color: #FFFFFF!important; font-size: 1.5rem; padding-top: 0.3rem; margin-right: 1.5rem;} .theme-cta-blue{background: #00a2de!important; background: -moz-linear-gradient(left, #00a2de 0%, #66c3eb 100%)!important; background: -webkit-linear-gradient(left, #00a2de 0%,#66c3eb 100%)!important; background: linear-gradient(to right, #00a2de 0%,#66c3eb 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2de', endColorstr='#66c3eb',GradientType=1 )!important; color: #FFFFFF!important;} .theme-cta-blue.theme-cta-button-label{ color: #FFFFFF!important; font-size: 1.5rem; padding-top: 0.3rem; margin-right: 1.5rem;} /* White Icon */ .theme-icon-button.theme-icon-white{ background-color: #FFFFFF!important;} .theme-icon-button.theme-icon-white .theme-icon-button-icon{ background-color: #494F53; color: #FFFFFF; } .theme-icon-button.theme-icon-white .theme-icon-button-label{ color: #494F53!important; } /* Black Icon */ .theme-icon-button.theme-icon-black{ background-color: #494F53!important;} .theme-icon-button.theme-icon-black .theme-icon-button-icon{ background-color: #FFFFFF; color: #494F53; } .theme-icon-button.theme-icon-black .theme-icon-button-label{ color: #FFFFFF!important; } .theme-icon-button-grey{ color: #494F53; } /* Shapes */ .theme-circle{ border-radius: 50%; margin: auto; margin-bottom: 8px; display: block;} /* Sizes */ .theme-size-sm{ width: 75px; height: 75px;} .theme-size-md{ width: 96px; height: 96px;} .theme-size{ width: 150px; height: 150px;} .theme-full-height{ height: 100%;} /* Type */ .theme-two-col-spot{ position: relative;} #theme-spot-and{ text-align: center; font-size: 30px; font-weight: bold; padding-top: 32px; position: absolute; top: 50%; left: 50%; margin-top: -48px; margin-left: -48px; z-index: 2;} @media only screen and (max-width: 767px) { #theme-spot-and{ display: none;} } /* Form */ .theme-label{ font-weight: normal!important;} /* Section Styles */ /* Menu */ .menu .item{color: #4A4F53!important;} .menu .item.theme-text-blue { color: #00a2de!important;} .ui.menu.fixed{ z-index: 1001} .theme-menu-image { margin-bottom: 15px; margin-right: 10px; width: 28px;} /* Mega Menu */ .ui.menu .menu .mega-dropdown .item{ height: 100%; } .ui.menu .menu .mega-dropdown > .item img{ position: absolute; bottom: -2px; left: 50%; margin-left: -15px; z-index: 10; display: none; } .ui.menu .menu .mega-dropdown:hover > .item img{ display: block;} .megamenu { position: absolute; left: 0; right: 0; display: none; margin-top: 0px;} .megamenu-menu{ background-color:#FFFFFF; padding: 32px; border: solid 1px #CCC; border-radius: 6px; } .megamenu-menu a:hover{ color: #00a2de!important;} .mega-dropdown:hover > .megamenu { display: block;} /* Hero Banner */ #announcment{ padding: 8px 14px; font-size: 15px; margin-top: -3px; position: fixed;z-index: 1000;top: 95px;left: 0;right: 0; text-align: centerXXX;} #announcment a{ color: #FFF!important; text-decoration: underline;} #announcment a:hover{ color: #ffdcba!important; text-decoration: underline;} @media only screen and (max-width : 767px) { #announcment{ position: absolute!important; margin-top: -6px!important;} } .theme-hero-wrap{ position: relative; margin-top: 97px; min-height: 265px;} .theme-hero{ height: 500px;} .theme-hero-wrap .theme-lead{ font-size: 18px; color: #FFFFFF;} /* Home Page */ .theme-tag{ font-size: 48px!important; display: inline-block; font-weight: bold!important;} .theme-tag span{ display: inline-block; padding: 6px 16px 6px 16px!important; margin-bottom: 8px;} .theme-icon-scroll{ position: absolute; bottom: -38px; left: 50%; margin-left: -120px;} /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-audience-panel{ height: auto;} .theme-hero-wrap{ min-height: auto;} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-hero-wrap{ position: relative; margin-top: 48px!important;} .theme-hero-wrap{ min-height: auto;} } /* Audience Styles */ .theme-audience-panel{ min-height: 500px} /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-audience-panel{ height: auto;} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-audience-panel{ height: auto;} } /* Future Slider */ .theme-future-padding{ padding: 16px 64px 16px 172px; } .theme-future-image{ position: relative;} .theme-future-image img{ position: absolute; z-index: 1; width: 380px;} .theme-future-panel{ min-height: 440px;} .theme-bg-future h2{font-size: 30px!important;} .gallery{ height:650px!important;} /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .gallery{ height: 740px!important} .theme-future-image img{ width: 190px; left: 25px} .theme-future-padding{ padding: 16px 64px 16px 64px; } } /* Pricing */ .theme-pricing-first{ background: #FFFFFF url(../images/pricing-first-bg.png) repeat-y top left; padding: 40px 80px; height: 155px;} .theme-pricing{ background: #FFFFFF url(../images/pricing-bg.png) no-repeat top left; padding: 40px 80px;} .theme-pricing-first .theme-text-xsmall{ display: block; line-height: 140%;} .theme-pricing .theme-text-xsmall{ display: block; line-height: 140%;} /* Pricing Calculator Styles */ #theme-calculator{ padding: 0 80px 20px 80px;} /* Mobile */ @media only screen and (max-width : 767px) { #theme-calculator { padding: 0 10px 20px 10px;} } .input-wrap{ position: relative; padding: 12px 16px; position: relative; margin-bottom: 22px; border: solid 2px #FFF; font-size: 22px;} .input-field{ font-size: 22px!important; line-height: 32px; padding: 12px 16px!important; font-family: 'Open Sans', sans-serif!important; border-radius: 0px!important; border: none!important;} .input-wrap a.dropdown{ height: 100%; width: 50px; padding-top: 10px; text-align: center; position: absolute; top: 0; right: 0; z-index: 0; cursor: pointer;} .input-wrap a:hover.dropdown{ padding-top: 10px;} .input-drop-wrap{ padding: 4px 4px!important;} .dropdown-wrap{ position: relative;} .dropdown-list{ width: 100%; position: absolute; top: 50px; left: 0; z-index: 4; background-color: #FFF; border: solid 2px #D0EFFD; } .dropdown-list ul{ padding: 0; margin: 0;} .dropdown-list li{ list-style: none;} .dropdown-list a{ color: #666; display: block; padding: 8px 16px; font-size: 22px;} .dropdown-list a:hover{ color: #FFF; background-color: #C1C5C8;} .dropdown-list a.active{ color: #FFF; background-color: #00a2de;} /* Article */ .theme-quote-padding{ color: #202945; padding: 64px 16px 16px 64px;} .theme-quote-padding .message-quote{ color: #202945; } /* Video */ .theme-video-padding{padding-top: 124px;} /* Footer */ #footer h4{ color: #FFFFFF; font-weight: normal;} #footer .item{ color: #666666!important; line-height: 180%;} /* Social */ #social{ position: relative;} #social .ui.segment { margin: 0; } .theme-anchor-top{ position: fixed; bottom: 18px; right: 32px; z-index: 2; color: #494F53!important; } .footer-iso{ text-align: right;} /* Mobile */ @media only screen and (max-width : 767px) { .footer-iso{ text-align: center;} } /* Partners */ .theme-column-partners{ width: 33.333%!important;} .theme-row-nopadding { margin-left: -1rem!important; margin-right: -3rem!important; } .two-column-partners { width: 50%!important;} /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-column-partners{ width: 50%!important; padding-bottom: 1rem} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-column-partners{ width: 100%!important; padding-bottom: 1rem} } /* Intergrations */ .integration{position: relative;} .integration-badge{position: absolute; z-index: 1; width: 32px; height: 32px; right: 24px; top: 12px; display: block;} .integration-badge svg{ width: 32px; height: 32px;} .theme-integration-badge{ width: 24px!important; height: 24px!important; margin-left: 0!important; margin-right: 0!important;} /* Features */ .theme-features-wrap{ position: relative;} .theme-features-button {height: 57px; width: 57px; background-image: url(../images/features-icon-dot.png); background-repeat: no-repeat; background-position: top left!important; position: absolute; z-index: 2; } .theme-features-button:hover{ background-position: top right!important; cursor: pointer; } .theme-features-start-button:hover{ cursor: pointer; } .theme-features-default.active{ background-image: url(../images/features-icon-default.png); background-position: top left!important;} .theme-features-content{ position: absolute; z-index: 2; width: 500px; text-align: left; display: none;} .theme-features-content.active{ display: block;} .theme-features-content-icon{ display: none;} #features-icon-start{ left: 647px; top: 72px; height: 26px; width: 101px; background-image: url(../images/click_to_explore.png); background-repeat: no-repeat; background-position: top left!important; background-size: cover; position: absolute; z-index: 3; } /* Features Icons Position*/ #features-icon-topup_tool{ left: 630px; top: 61px;} #features-icon-timelogs{ left: 787px; top: 175px;} #features-icon-Report_Suite{ left: 832px; top: 262px;} #features-icon-iPayroll_Giving{ left: 832px; top: 457px;} #features-icon-Training_Support{ left: 788px; top: 546px;} #features-icon-interface_connections{ left: 631px; top: 659px;} #features-icon-HR{ left: 435px; top: 659px;} #features-icon-Banks{ left: 312px; top: 582px;} #features-icon-User-roles{ left: 252px; top: 502px;} #features-icon-leave_management{ left: 220px; top: 360px;} #features-icon-Xero_integration{ left: 252px; top: 220px;} #features-icon-scalability{ left: 349px; top: 106px;} /* Features Active Icons */ #features-icon-topup_tool.active{ background-image: url(../images/features-icon-topup_tool.png); background-position: top left!important;} #features-icon-timelogs.active{ background-image: url(../images/features-icon-timelogs.png); background-position: top left!important;} #features-icon-Report_Suite.active{ background-image: url(../images/features-icon-Report_Suite.png); background-position: top left!important;} #features-icon-iPayroll_Giving.active{ background-image: url(../images/features-icon-iPayroll_Giving.png); background-position: top left!important;} #features-icon-Training_Support.active{ background-image: url(../images/features-icon-Training_Support.png); background-position: top left!important;} #features-icon-interface_connections.active{ background-image: url(../images/features-icon-interface_connections.png); background-position: top left!important;} #features-icon-HR.active{ background-image: url(../images/features-icon-HR.png); background-position: top left!important;} #features-icon-Banks.active{ background-image: url(../images/features-icon-Banks.png); background-position: top left!important;} #features-icon-User-roles.active{ background-image: url(../images/features-icon-User-roles.png); background-position: top left!important;} #features-icon-leave_management.active{ background-image: url(../images/features-icon-leave_management.png); background-position: top left!important;} #features-icon-Xero_integration.active{ background-image: url(../images/features-icon-Xero_integration.png); background-position: top left!important;} #features-icon-scalability.active{ background-image: url(../images/features-icon-scalability.png); background-position: top left!important;} /* Features Content Position*/ #features-icon-topup_tool-content{ left: 700px; top: -60px;} #features-icon-timelogs-content{ left: 857px; top: 53px;} #features-icon-Report_Suite-content{ left: 902px; top: 262px;} #features-icon-iPayroll_Giving-content{ left: 902px; top: 457px;} #features-icon-Training_Support-content{ left: 858px; top: 546px;} #features-icon-interface_connections-content{ left: 701px; top: 659px;} #features-icon-HR-content{ left: -75px; top: 659px;} #features-icon-Banks-content{ left: -203px; top: 582px;} #features-icon-User-roles-content{ left: -263px; top: 502px;} #features-icon-leave_management-content{ left: -295px; top: 360px;} #features-icon-Xero_integration-content{ left: -263px; top: 220px;} #features-icon-scalability-content{ left: -166px; top: -16px;} /* Computer Large Screen */ @media only screen and (min-width: 1200px) { .theme-features-text-right{ text-align: right;} .ui.theme-features-image{ display: none!important; margin: auto;} .ui.theme-features-image.active{ display: block!important;} .theme-features-wrap .ui.grid>.column:not(.row) { padding-top: 0; padding-bottom: 0; position: static;} } /* Computer Small Screen */ @media only screen and (min-width: 993px) and (max-width: 1199px) { .theme-features-text-right{ text-align: right;} .theme-features-button{ display: none;} .theme-features-start-button{ display: none;} .theme-features-wrap{ position: static;} .theme-features-content-icon{ display: block; margin: auto;} .theme-features-content{ display: block; position: static; width: 100%; text-align: left;} .theme-features-image.active{ display: block;} .theme-features-image{ display: block;} .theme-features-image img{ display: block; width: 100%; height: auto;} .theme-features-content-icon{ display: inline-block; vertical-align: middle;} } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-features-button{ display: none;} .theme-features-start-button{ display: none;} .theme-features-wrap{ position: static;} .theme-features-content-icon{ display: block; margin: auto;} .theme-features-content{ display: block; position: static; width: 100%; text-align: left;} .theme-features-image.active{ display: block;} .theme-features-image{ display: block;} .theme-features-image img{ display: block; width: 100%; height: auto;} .theme-features-content-icon{ display: inline-block; vertical-align: middle;} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-features-button{ display: none;} .theme-features-start-button{ display: none;} .theme-features-image{ display: none!important;} .theme-features-image.active{ display: none!important;} .theme-features-wrap{ position: static;} .theme-features-content-icon{ display: block; margin: auto;} .theme-features-content{ display: block; position: static; border-bottom: solid 1px #CCCCCC; width: 100%; padding: 20px 0; text-align: center;} } /* Staff Features */ /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { #employee-features img{ margin-left: auto; margin-right: auto;} #employee-features { text-align: center;} } /* Mobile */ @media only screen and (max-width : 767px) { #employee-features img{ margin-left: auto; margin-right: auto;} #employee-features { text-align: center;} } /* Feature List */ .theme-feature-category{ display: block; width: 100%; padding: 8px 12px;} /* Mega Tab */ .theme-tab{ margin: 0 0 -1px 0; padding: 0; width: 100%;} .ui.tabular.menu{ border-bottom: none;} .ui.tabular.menu .active.item{ border: none; border-radius: 0px!important;} .ui.attached.segment{ border: none;} .theme-tab li{padding: 15px 15px 0 15px; list-style: none; width: 50%; margin: 0; float: left; color: #FFFFFF;} .theme-tab li a span{ width: 100%; color: #FFFFFF; font-weight: bold;} .tabular-image {height: calc(100% - 15px); left: 15px; position: relative; top: 15px; width: calc(100% - 15px);} .tabular-image.employer {background: url(../images/type-employer.jpg) transparent no-repeat center;} .tabular-image.advisor {background: url(../images/type-advisor.jpg) transparent no-repeat center;} .theme-tab li a{ cursor: pointer; text-align: center; height: 140px; padding-top: 55px; width: 100%; display: inline-block; font-family: 'Ubuntu', sans-serif!important; font-weight: bold; font-size: 30px; color: #FFFFFF;} .theme-tab li.active a{background-color: #FFFFFF;} /* Active Orange Tab */ .theme-tab li.theme-bg-orange-gradient.active a span{ background: linear-gradient(to right, #f36e26 0%, #f68d28 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .theme-tab li.theme-bg-orange-gradient{ -webkit-box-shadow: inset -10px 0 15px -10px rgba(0,0,0,0.8); box-shadow: inset -10px 0 15px -10px rgba(0,0,0,0.8); } .theme-tab li.theme-bg-orange-gradient.active{ -webkit-box-shadow: inset -10px 0 15px -10px rgba(0,0,0,0); box-shadow: inset -10px 0 15px -10px rgba(0,0,0,0); } /* Active Blue Tab */ .theme-tab li.theme-bg-blue-gradient.active a span{ background: linear-gradient(to right, #00a2de 0%, #66c3eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .theme-tab li.theme-bg-blue-gradient{ -webkit-box-shadow: inset 10px 0 15px -10px rgba(0,0,0,0.8); box-shadow: inset 10px 0 15px -10px rgba(0,0,0,0.8); } .theme-tab li.theme-bg-blue-gradient.active{ -webkit-box-shadow: inset 10px 0 15px -10px rgba(0,0,0,0); box-shadow: inset 10px 0 15px -10px rgba(0,0,0,0); } /* Milestone */ .theme-milestone-date{ line-height: 100%;} .theme-milestone-dot{ position: relative;} .theme-milestone-dot.theme-right img{ position: absolute; z-index: 1; left: -26px; bottom: -11px; } .theme-milestone-dot.theme-left img{ position: absolute; z-index: 1; right: -23px; bottom: -11px; } .theme-milestone-text.theme-right{ padding-right: 0!important;} .theme-milestone-text.theme-left{ padding-left: 0!important;} .theme-milestone-list li{ list-style: none; color: #C1C5C8; margin-bottom: 16px; font-size: 14px;} .theme-milestone-list li a{ color: #C1C5C8!important; } .theme-milestone-list li.active a{ font-weight: bold; color: #494F53!important;} .theme-milestone-more{border-radius: 0!important; width: 189px; margin-left: 3px!important; } /* Mobile */ @media only screen and (max-width : 767px) { #theme-milestone-content .theme-h-padding-xlarge{ padding-left: 0px; padding-right: 0px;} #theme-milestone-content .theme-milestone-dot{ text-align: center;} #theme-milestone-content .ui.grid>[class*="right aligned"].column.column{ text-align: center;} #theme-milestone-content .ui.grid>.column.column{ text-align: center;} .theme-border-grey-thin-bottom { border: none;} .ui.stackable.grid>.wide.column.theme-milestone-date{ padding: 0px!important;} .theme-milestone-date .theme-text-xxsmall{ font-size: 16px!important; font-weight: bold; line-height: 150%;} .theme-milestone-date .theme-text-orange{ background-color: #F4F5F7;} .theme-milestone-date .theme-text-blue{ background-color: #F4F5F7;} .theme-milestone-dot img{ display: none!important;} } /* FAQ */ a.theme-category:hover{ background-color: #F3F5F6!important;} a.theme-category h3{ margin-top: 0px; margin-bottom: 8px;} .theme-faq-search { border-radius: 45px; } .FAQanchor{ display: block; position: relative; top: -97px; visibility: hidden;} .theme-anchor{ display: block; position: relative; top: -97px; visibility: hidden;} /* Security */ /* Mobile */ @media only screen and (max-width : 600px) { .theme-bg-orange-left-data, .theme-bg-blue-right-twofactor, .theme-bg-orange-left-aml, .theme-bg-blue-right-financial{ background-image: none; background-color: #FFFFFF;} #security .theme-h-padding-xxxlarge{ padding-left: 32px; padding-right: 32px;} } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-bg-orange-left-data, .theme-bg-blue-right-twofactor, .theme-bg-orange-left-aml, .theme-bg-blue-right-financial{ background-image: none; background-color: #FFFFFF;} #security .theme-h-padding-xxxlarge{ padding-left: 32px; padding-right: 32px;} } /* How */ .theme-how-number{ position: absolute; left: -75px; top: 32px; z-index: 1} .theme-how-number.theme-how-number-first{ top: -12px;} /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-how-number{ position: static;} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-how-number{ position: static;} .theme-how-width-33{ width: 33.333%!important; padding-left: 0!important; padding-right: 0!important;} .theme-how-width-66{ width: 66.666%!important; padding-left: 0!important; padding-right: 0!important;} } /* Jay - Callback Page on Secure2 - IMAGE PATHS FOR SECURE2 - DONT CHANGE */ .theme-circle-1{ background-image: url(../../images/public/1-50.png); background-position: top left!important; background-size: cover} .theme-circle-2{ background-image: url(../../images/public/51-100.png); background-position: top left!important; background-size: cover} .theme-circle-3{ background-image: url(../../images/public/101-500.png); background-position: top left!important; background-size: cover} .theme-circle-4{ background-image: url(../../images/public/500_plus.png); background-position: top left!important; background-size: cover} .theme-circle-1.active{ background-image: url(../../images/public/1-50_blue.png); background-position: top left!important; background-size: cover} .theme-circle-2.active{ background-image: url(../../images/public/51-100_blue.png); background-position: top left!important; background-size: cover} .theme-circle-3.active{ background-image: url(../../images/public/101-500_blue.png); background-position: top left!important; background-size: cover} .theme-circle-4.active{ background-image: url(../../images/public/500_plus_blue.png); background-position: top left!important; background-size: cover} @media only screen and (max-width : 600px) { .theme-menu{ padding: 8px;} .theme-menu .logo{ display: none;} .theme-hero-wrap h1{ margin-top: 50px;} .theme-hero-wrap h2{ display: none;} .theme-app-buttons{display: none;} .theme-icon-scroll{display: none;} .ui.secondary.pointing.menu .item {align-self: baseline!important;} h2.ui.header{ font-size: 30px;} /* Home Page */ .theme-tag{ font-size: 32px!important;} .theme-hero-wrap{ text-align: center;} .theme-hero-wrap .ui.images img.image{ width: 45%!important;} } /* Mobile */ @media only screen and (max-width: 767px) { [class*="mobile hidden"], [class*="tablet only"]:not(.mobile), [class*="computer only"]:not(.mobile), [class*="large monitor only"]:not(.mobile), [class*="widescreen monitor only"]:not(.mobile), [class*="or lower hidden"] { display: none !important; } /* HERO */ .theme-hero-wrap { height: 200px; } .theme-hero { height: 200px; } .theme-hero-wrap .ui.grid>[class*="middle aligned"].column:not(.row) { align-self: auto!important; } .theme-hero-wrap .theme-top-padding-xxxlarge { padding-top: 50px; } .theme-hero-wrap .ui[class*="right aligned"].segment { text-align: left; } .theme-tag { font-size: 40px!important; } .theme-hero-wrap p { display: none; } .HomePage .theme-hero-wrap { height: 400px; text-align: left; } .HomePage .theme-hero { height: 350px; } .HomePage .theme-hero-wrap .theme-top-padding-xxxlarge { padding-top: 50px; } /* tab */ .theme-tab { margin-bottom: 14px; /* padding:10px; */ } .theme-tab li{ width: 100% } .theme-tab li a{ font-size: 1.4em; padding: 10px; height: auto; } .ui.tabular.menu .item { padding: 20px 10px ; } .theme-mobile-fluid{ width:100%; } .theme-pricing, .theme-pricing-first { padding: 28px 0 29px 55px; height: auto; height: auto; } .theme-pricing .ui.grid, .theme-pricing-first .ui.grid{ margin-left: -1rem!important;} /* Tabs */ .ui.accordion .title i.icon { position: absolute; right: 0; float: none; } .ui.stackable.grid.theme-help-boxes .ui.stackable.grid{ margin-left: 0!important; margin-right: 0!important; } /** Become a Partner **/ .theme-h-padding-xxlarge{ padding-left: 25px; padding-right: 25px; } .theme-h-padding-xxxlarge{ padding-left: 25px; padding-right: 25px; } .featured-partner .theme-h-padding-xxlarge { padding-left: 0px; padding-right: 0px; } } /* Tablet / iPad Portrait */ @media only screen and (min-width: 768px) and (max-width: 991px) { [class*="mobile only"]:not(.tablet), [class*="tablet hidden"], [class*="computer only"]:not(.tablet), [class*="large monitor only"]:not(.tablet), [class*="widescreen monitor only"]:not(.tablet), [class*="or lower hidden"]:not(.mobile) { display: none !important; } .theme-tag { font-size: 40px!important; } } /* Computer / Desktop / iPad Landscape */ @media only screen and (min-width: 992px) and (max-width: 1199px) { [class*="mobile only"]:not(.computer), [class*="tablet only"]:not(.computer), [class*="computer hidden"], [class*="large monitor only"]:not(.computer), [class*="widescreen monitor only"]:not(.computer), [class*="or lower hidden"]:not(.tablet):not(.mobile) { display: none !important; } } /* Large Monitor */ @media only screen and (min-width: 1200px) and (max-width: 1919px) { [class*="mobile only"]:not([class*="large monitor"]), [class*="tablet only"]:not([class*="large monitor"]), [class*="computer only"]:not([class*="large monitor"]), [class*="large monitor hidden"], [class*="widescreen monitor only"]:not([class*="large monitor"]), [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) { display: none !important; } } /* Widescreen Monitor */ @media only screen and (min-width: 1920px) { [class*="mobile only"]:not([class*="widescreen monitor"]), [class*="tablet only"]:not([class*="widescreen monitor"]), [class*="computer only"]:not([class*="widescreen monitor"]), [class*="large monitor only"]:not([class*="widescreen monitor"]), [class*="widescreen monitor hidden"], [class*="widescreen monitor or lower hidden"] { display: none !important; } } .slider-prev{ position: absolute; top: 35%; left: -70px; z-index: 10; } .slider-next{ position: absolute; top: 35%; right: -70px; z-index: 10; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .countdown-wrap{ width: 350px; margin-bottom: 24px; display: inline-block; margin-left: auto; margin-right: auto; padding-top: 32px;} .countdown-title{text-align: left; padding-bottom: 24px; font-size: 18px; color: #4A4F53; font-weight: bold!important;} .countdown-number-wrap{width: 64px; margin-left: 4px; margin-right: 4px; float: left; } .countdown-number{ background-color: #4A4F53; font-weight: bold; text-align: center; padding-top: 18px; color: #FFFFFF; width: 64px; height: 64px; font-size: 32px;} .countdown-label{ text-align: center; padding-top: 8px; color: #4A4F53; font-weight: bold; font-size: 12px;} @media only screen and (max-width: 767px) { .countdown-title{font-size: 14px; } .countdown-number-wrap{width: 54px; margin-left: 4px; margin-right: 4px; float: left; } .countdown-number{padding-top: 12px; color: #FFFFFF; width: 54px; height: 54px; font-size: 24px;} } /* New Features Page */ .tick-list {font-weight: bold;} .tick-list i.icon{ color: #00a2de;} #vital-points .segment{ padding-left: 0px; padding-right: 0px;} #feature-list.accordion .title i.minus.icon {display: none;} #feature-list.accordion .title.active i.plus.icon {display: none;} #feature-list.accordion .title.active i.minus.icon {display: inline-block;} #feature-list .title{border-top: solid 1px #999; padding-left: 32px; font-size: 24px; padding-top: 16px; padding-bottom: 16px;} #feature-list.ui.accordion .title i.icon {float: left; margin-right: 24px; font-size: 24px;} #feature-list.ui.accordion .content ul{ padding-left: 104px; margin-top: 0px;} #feature-list.ui.accordion .content ul li{ list-style: square; font-weight: bold; padding-bottom: 12px;} #feature-list.ui.accordion {border-bottom: solid 1px #999;} /* Mobile */ @media only screen and (max-width : 767px) { #feature-list .title{padding-left: 0px; font-size: 20px; padding-top: 12px; padding-bottom: 12px;} #feature-list.ui.accordion .title i.icon {float: left; font-size: 20px;} #feature-list.ui.accordion .content ul{ padding-left: 19px; margin-top: 0px;} #vital-points .segment{ float: none!important; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0;} } /* Responsive Padding */ /* Wide Screen */ @media only screen and (min-width: 1200px){ .theme-h-padding-xxlarge.wide-only, .theme-h-padding-xxlarge.computer-only{ padding-left: 48px!important; padding-right: 48px!important;} } /* Computer Small Screen */ @media only screen and (min-width: 993px) and (max-width: 1199px) { .theme-h-padding-xxlarge.wide-only, .theme-h-padding-xxlarge.computer-only{ padding-left: 48px!important; padding-right: 48px!important;} } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 992px) { .theme-h-padding-xxlarge.wide-only, .theme-h-padding-xxlarge.computer-only{ padding-left: 0px!important; padding-right: 0px!important;} } /* Mobile */ @media only screen and (max-width : 767px) { .theme-h-padding-xxlarge.wide-only, .theme-h-padding-xxlarge.computer-only{ padding-left: 0px!important; padding-right: 0px!important;} } /* Page Banner SVG */ /* Banners background image is set using background-image:, character/spot illustration is set as pseudo element ::before .theme-text-white will need to be set as dark possibly hide .theme-icon-scroll (to be discussed) */ /*** Home Banner ***/ .theme-bg-home::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-home { background: no-repeat center center url('data:image/svg+xml,'); } /*** Features Banner ***/ .theme-bg-featuresV2::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-featuresV2 { background: no-repeat center center url('data:image/svg+xml,'); } /*** Kiosk Banner ***/ .theme-bg-kioskV2::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-kioskV2 { background: no-repeat center center url('data:image/svg+xml,'); } /*** Integrations Banner ***/ .theme-bg-integrations::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-integrations { background: no-repeat center center url('data:image/svg+xml,'); } /*** Integrations - Xero Banner ***/ .theme-bg-xero::before { background: no-repeat center right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-xero { background: no-repeat center center url('data:image/svg+xml,'); } /*** Integrations - Timecloud Banner***/ .theme-bg-timecloud::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-timecloud { background: no-repeat center center url('data:image/svg+xml,'); } /*** Integrations - Easy Employer Banner ***/ .theme-bg-easyempolyer::before { background: no-repeat bottom right url('data:image/svg+xml,');; content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-easyempolyer { background: no-repeat center center url('data:image/svg+xml,12936'); } /*** Home - Xmas Banner ***/ .theme-bg-home-xmas::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 0; transform: translateX(-5%); width: 100%; bottom: 0; } /* Background image */ .theme-bg-home-xmas { background: no-repeat center center url('data:image/svg+xml,'); background-size: auto; } /*** Integrations - enableHR ***/ .theme-bg-enableHR::before { background: no-repeat bottom right url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-enableHR { background: no-repeat right center url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); } /*** Integrations - Aussie TimeSheets ***/ .theme-bg-aussie-timesheets::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-aussie-timesheets { background: no-repeat center center url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); } /*** Integrations - Zoho Books ***/ .theme-bg-zohobooks::before { background: no-repeat center right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-zohobooks{ background: no-repeat center center url('data:image/svg+xml,'); } /*** Integrations - Canyou ***/ .theme-bg-canyou::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 5%; transform: translateX(-5%); width: 100%; } /* Background image */ .theme-bg-canyou{ background: no-repeat right center url('data:image/svg+xml,'); } /*** Integrations - iDTGroup ***/ .theme-bg-iDTGroup::before { background: no-repeat bottom right url('data:image/svg+xml,'); content: ""; height: 100%; position: absolute; right: 0; width: 100%; } /* Background image */ .theme-bg-iDTGroup{ background: no-repeat right center url('data:image/svg+xml,'); } /*** Home - Xmas 2024 ***/ .theme-bg-xmas::before { background: no-repeat center center url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); content: ""; display: block; height: 100%; position: absolute; right: 6%; transform: translatey(-5%); width: 50vw; } /* Background image */ .theme-bg-xmas { background: no-repeat center center url('data:image/svg+xml,'); } /* 3. Responsive font */ .theme-hero-wrap h1.ui.header { font-size: calc(24px + (42 - 24) * ((100vw - 300px) / (1600 - 300))); line-height: 1.5; } @media screen and (min-width: 768px) { .h1.ui.header { max-width: 18ch; size: 3rem; } } /* 4. adjust min-height value of .theme-hero-wrap */ .theme-hero-wrap { position: relative; margin-top: 97px; min-height: calc(60vh - 97px); background-size: cover; } /* 5. set illustration to grey in mobile/tablet for text legibility */ @media screen and (max-width: 768px) { .theme-bg-xero::before, .theme-bg-integrations::before, .theme-bg-easyempolyer::before, .theme-bg-timecloud::before, .theme-bg-featuresV2::before, .theme-bg-kioskV2::before, .theme-bg-home::before, .theme-bg-home-xmas::before, .theme-bg-enableHR::before, .theme-bg-aussie-timesheets::before, .theme-bg-zohobooks::before, .theme-bg-canyou::before, .theme-bg-iDTGroup::before { filter: grayscale(100%); opacity: 50%; } } /* 6. hide illustration in mobile/tablet */ @media screen and (max-width: 768px) { .theme-bg-xmas::before { display: none; } }