/* hiding curly braces in vue */
[v-cloak] {display: none}

@font-face {
    font-family: 'Graphik-Light';
    src: url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.eot'); /* IE9 Compat Modes */
    src: local('Graphik'), local('Graphik'),
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.woff2') format('woff2'), /* Super Modern Browsers */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.woff') format('woff'), /* Modern Browsers */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Light-Web.svg#Graphik-Light-Web') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Graphik-Bold';
    src: url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.eot'); /* IE9 Compat Modes */
    src: local('Graphik'), local('Graphik'),
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.woff2') format('woff2'), /* Super Modern Browsers */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.woff') format('woff'), /* Modern Browsers */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/themes/custom/paychex2/fonts/graphik/Graphik-Bold-Web.svg#Graphik-Light-Web') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
body,html {
    font-family: Graphik,sans-serif!important;
    font-size: 16px;
    line-height: 1.75
}

.h1,.h2,h1,h2 {
    font-family: Publico,Georgia,serif;
    color: #000;
    letter-spacing: .7px
}

.h1,h1 {
    font-size: 3em;
    line-height: 1.25em
}

@media only screen and (max-width: 768px) {
    .h1,h1 {
        font-size:1.75em
    }
}

.h2,h2 {
    font-size: 2em;
    line-height: 1.25em;
    font-weight: 100
}

@media only screen and (max-width: 768px) {
    .h2,h2 {
        font-size:1.45em
    }
}

@media only screen and (min-width: 769px) {
    .simple-promo {
        padding:4em 0
    }
}

@media only screen and (max-width: 768px) {
    .simple-promo {
        margin:2em 0
    }
}

/* overriding breadcrumb width */

.simple-promo.background-gray {
    background-color: #f8f8f9
}

.simple-promo h2 {
    line-height: 1.2;
    font-family: Graphik-Light,sans-serif!important
}

@media only screen and (min-width: 769px) {
    .simple-promo h2 {
        padding-bottom:.5em;
        margin: 0
    }
}

@media only screen and (max-width: 768px) {
    .simple-promo h2 {
        padding-bottom:.5em
    }
}

@media only screen and (min-width: 769px) {
    .simple-promo--content {
        display:flex;
        align-items: center;
        align-self: center;
        font-size: 20px
    }
}

@media only screen and (max-width: 768px) {
    .simple-promo--content {
        font-size:16px
    }
}

@media only screen and (max-width: 768px) {
    .simple-promo--content.-reverse {
        display:flex;
        align-items: center;
        align-self: center;
        flex-direction: column-reverse
    }
}

@media only screen and (min-width: 769px) {
    .simple-promo--box {
        flex:1;
        padding: 0 3em
    }
}

@media only screen and (max-width: 768px) {
    .simple-promo--box {
        margin:0 0 1em
    }
}

.simple-promo--box-quote {
    font-family: Graphik-Light,sans-serif!important
}

@media only screen and (max-width: 768px) {
    .simple-promo--box-quote {
        padding:0 2em 2em
    }
}

.simple-promo--box img {
    width: 100%
}

.-container {
    max-width: 1180px;
    margin: 0 auto
}

.star {
    position: relative;
    overflow: hidden;
    font-size: 1.5em
}

.star.full:after,.star.half:after {
    content: "\2605";
    position: absolute;
    left: 0
}

.star.half:after {
    width: 8px;
    overflow: hidden
}

@media only screen and (min-width: 769px) {
    .promo {
        padding:4em 0
    }
}

@media only screen and (max-width: 768px) {
    .promo {
        padding:2em 1em
    }
}

.promo--box {
    background-color: #fff;
    max-width: 700px;
    margin: 0 auto
}

@media only screen and (min-width: 769px) {
    .promo--box {
        padding:3em;
        border: 1em solid #eddcc6
    }
}

.promo--box h2 {
    line-height: 1.2;
    font-family: Graphik-Light,sans-serif!important;
    font-weight: 100;
    text-align: center;
    margin: 0 0 2em
}

.promo--box-wrapper {
    display: flex
}

.promo--box-slot {
    background-color: #f8f8f9;
    flex: 1;
    text-align: center
}

@media only screen and (min-width: 769px) {
    .promo--box-slot {
        padding:2em
    }
}

@media only screen and (max-width: 768px) {
    .promo--box-slot {
        padding:1em .5em 3em;
        position: relative
    }
}

.promo--box-slot:first-child {
    margin-right: .5em
}

.promo--box-slot-header {
    font-family: Publico,sans-serif!important;
    font-size: 1.2em;
    font-weight: 700
}

@media only screen and (min-width: 769px) {
    .promo--box-slot-description {
        padding:.5em 0 1.5em
    }
}

@media only screen and (max-width: 768px) {
    .promo--box-slot-description {
        padding:.5em 0 3.5em
    }
}

@media only screen and (max-width: 768px) {
    .promo--box-slot .btn {
        padding:.5em;
        position: absolute;
        bottom: 1em;
        right: 0;
        left: 0;
        margin: .5em
    }
}
#app a.btn {
    display: inline-block;
    vertical-align: middle;
    padding: .8em 2.5em;
    border-radius: 3px;
    transition: all .15s ease-in-out;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 2em;
    line-height:1.75;
}

@media only screen and (min-width: 769px) {
    #app  a.btn {
        font-size:20px
    }
}

#app a.btn--blue {
    background-color: #1d76c7;
    color: #fff
}

#app a.btn--blue:hover {
    color: #fff;
    background-color: #0059a2;
    transform: scale(1.01)
}

#app a.btn--blue-2 {
    box-shadow: inset 0 0 2px #fff
}

#app a.btn--blue-2, #app a.btn--blue-2:hover {
    background-color: #1072b3;
    color: #fff
}

.btn--full-width {
    display: block;
    text-align: center
}

.faq {
    position: relative
}

@media only screen and (min-width: 769px) {
    .faq {
        padding:4em 0
    }
}

@media only screen and (max-width: 768px) {
    .faq {
        padding:1em
    }
}

@media only screen and (min-width: 769px) {
    .faq .-container {
        width:50%
    }
}

.faq h2 {
    font-family: Graphik-Light,sans-serif!important;
    font-weight: 300
}

.faq--block {
    border-top: 1px solid #a0a7af;
    cursor: pointer;
    padding: 1.3em;
    position: relative;
    line-height: 1.7em
}

@media only screen and (min-width: 769px) {
    .faq--block {
        font-size:20px
    }
}

.faq--block.-active:before {
    transform: rotate(180deg)
}

.faq--block:before {
    font-family: Paychex;
    content: "";
    transition: all .25s;
    width: 23px;
    height: 12px;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    right: .5em;
    margin-top: 7px;
    color: #a0a7af;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    font-size: 10px
}

.faq--block-question {
    font-family: Graphik-Light,sans-serif!important
}

@media only screen and (min-width: 769px) {
    .faq--block-question {
        font-size:1.1em;
        font-weight: 700
    }
}

@media only screen and (max-width: 768px) {
    .faq--block-question {
        padding:0 2em 0 0;
        font-size: 1.3em
    }
}

.faq--block-answer {
    opacity: 0;
    max-height: 0;
    transition: all .3s ease-in-out;
    margin: 0;
    overflow: hidden
}

.faq--block-answer-content {
    padding: 1em 1.2em
}

.faq--block-answer-content-title {
    font-family: Graphik-Bold,sans-serif!important;
    color: #000
}

.faq--block-answer-content-disclaimer {
    font-size: .8em
}

.faq--block-answer.-active {
    opacity: 1;
    max-height: 1060px;
    margin-top: 1em
}

.hero1 {
    background-color:#f8f8f9;
    padding:4em 1.5em 4em 1.5em;
}
@media only screen and (min-width: 769px) {
.hero1--content {

    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 55% 45%;
    grid-template-columns: 55% 45%
}
}

@media only screen and (max-width: 768px) {
.hero1--content {
    text-align:center
}
  .hero1 {
    padding: 1em 1.5em 0 1.5em;
  }

  .hero1--content-header .hero1--content-description {
    padding: 0 0 2em 0;

  }
}

.hero1--content-header {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row-align: center;
align-self: center
}

.hero1--content-header h1 {
margin: 0
}

@media only screen and (min-width: 1025px) {
.hero1--content-header h1 {
    font-size:2.5em;
}
}

@media only screen and (min-width: 769px) and (max-width:1024px) {
.hero1--content-header h1 {
    padding:0 .5em
}
}

@media only screen and (max-width: 768px) {
  .hero1--content-header h1 {
      padding:1em .5em .5em
  }
}
.hero1--content-description {
    padding:2em 0;
    font-size:.9em;
    margin-right:4em;
}

.hero1--content-image {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-align: center;
align-self: center
}

@media only screen and (max-width: 768px) {
/*.hero1--content-image img {*/
/*    display:none*/
/*}*/
}

.pricing-compare {
    background-color:#f8f8f9;
    padding:3em 0;

}

.pricing-compare--header, .pricing-compare--header-top, .pricing-compare--body-row {
    display:flex;
}

.pricing-compare--header-top .pricing-compare--header-cell {
    width:24%;
    text-align:center;
    border:1px solid transparent;
}

.pricing-compare--header-top .pricing-compare--header-cell:nth-child(3) {
    background-color:black;
    border:1px solid black;
    color:white;
    min-height: 28px;
    /*padding:10px 0;*/
}
.pricing-compare--header .pricing-compare--header-cell:first-child, .pricing-compare--header-top .pricing-compare--header-cell:first-child, .pricing-compare--body .pricing-compare--body-cell:first-child {
    width:35%;
    text-align:left;

}
.pricing-compare--header .pricing-compare--header-cell:first-child {
    font-size:1.3em;
}

.btn-get-started {
  padding: .4em 2.5em;
  margin-bottom: .5em;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  transition: all .15s ease-in-out;
  font-weight: 700;
  cursor: pointer;
  line-height:1.75;
  text-decoration: none!important;
}

.btn-pay-option {
    background-color:white;
    color:black;
    display:inline-block;
    padding:.5em;
    border-radius: 3px;
    box-shadow: 2px 2px #ccc;
    font-size:.8em;
    transition: .5s background-color;
    margin-right: 2px;
    margin-top: 5px;
}
.btn-pay-option:hover {
    background-color:#555;
    color:white;
    cursor: pointer;
}
.btn-pay-option.active {
    background-color:#555;
    color:white;
}
.price {
    font-size:1.5em;
    font-family: Graphik,sans-serif!important;
    font-weight:700;
}

.price:before {
  position: relative;
  top: -7px;
  font-size: .5em;
  content: "$";
}

.pricing-compare--header, .pricing-compare--body {
    border-top: 1px solid #eddcc6;
    border-left: 1px solid #eddcc6;
}

.pricing-compare--header .pricing-compare--header-cell, .pricing-compare--body-row .pricing-compare--body-cell {
    border-right: 1px solid #eddcc6;
    background-color:white;
    width:24%;
    text-align:center;
    display: flex;
}

.pricing-compare--body-row .pricing-compare--body-cell {
    border-bottom: 1px solid #eddcc6;
}

.pricing-compare--header .pricing-compare--header-cell.blank {
    background-color:transparent;
}

.pricing-compare--header:first-child .pricing-compare--header-cell:first-child {
    background-color:transparent;
}

.pricing-compare--header.last .pricing-compare--header-cell:nth-child(2),.pricing-compare--header.last .pricing-compare--header-cell:nth-child(3), .pricing-compare--header.last .pricing-compare--header-cell:nth-child(4), .pricing-compare--body-row .pricing-compare--body-cell:nth-child(2), .pricing-compare--body-row .pricing-compare--body-cell:nth-child(3), .pricing-compare--body-row .pricing-compare--body-cell:nth-child(4) {
    background-color:#f4e8da;
}


.pricing-compare--header-cell-wrap, .pricing-compare--body-cell-wrap {
    padding:1em;
    align-self:center;
    width: 100%;
}

#payroll-bundle {
  height: 100%;
  padding-top: 45px;
}

@media only screen and (max-width: 768px) {
  #express {
    top: -4px;
  }
}

.hr-service {
    max-width: 1180px;
    margin: 50px auto;
    background-color: white;
    border: 1px solid #eddcc6;
}

.hr-text {
    margin: 20px 20px 20px auto;
    text-align: center;
}

.btn-hr-solutions {
    padding: .4em 2.5em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    transition: all .15s ease-in-out;
    font-weight: 700;
    cursor: pointer;
    line-height:1.75;
    text-decoration: none!important;
    margin: 20px auto 20px 20px;
}


.hr-service h2 {
    font-family: Graphik-Light, sans-serif !important;
    font-weight: 300;
    font-size: 25px;
    margin: auto;
}

.hr-container {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

.pricing-compare--header-cell-product {
    font-size:1.2em;
    font-weight:700;
    font-family: Graphik-bold,sans-serif!important;
    line-height:1.3;
    margin-bottom:.6em;
}

.pricing-compare--header-cell-description {
    font-size:.9em;
}

#mobile-description {
  padding: 0 1em .75em;
}

.pricing-compare--body .pricing-compare--body-cell .pricing-compare--body-cell-wrap .picon-checkmark-thin {
    border: 2px solid black;
    border-radius: 50%;
    padding: .75em;
    color: black;
    font-weight: 700;
    display: inline-block;
    line-height: 1.4;
    height:10px;
    width:10px;
}

.picon-checkmark-thin:before {
  position: relative;
  left: -2px;
  top: -4px;
}

.pricing-compare--body-row:hover .pricing-compare--body-cell {
    background-color:#fff8ef;
    transition: background-color .5s;
    cursor: pointer;
}

.pricing-compare--body-cell-feature {
    font-size:1.2em;
}
.pricing-compare--body-cell-feature .picon {
    position: relative;

    margin-right:1.5em;


}
.pricing-compare--body-cell-feature .picon-arrow-v-down {
    position: relative;
    width: 18px;
    height: 17px;
    display:inline-block;
}
.pricing-compare--body-cell-feature .picon-arrow-v-down:before {
    content: "";
    position: absolute;
    background-color:black;
    transition: transform 0.25s ease-out;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}
.pricing-compare--body-cell-feature .picon-arrow-v-down:after {
    content: "";
    position: absolute;
    background-color: black;
    transition: transform 0.25s ease-out;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
}
.pricing-compare--body-cell-feature .picon-arrow-v-down:hover {
    cursor: pointer;
}
.-open .pricing-compare--body-cell-feature .picon-arrow-v-down:before {
    transform: rotate(90deg);
    height: 0px;
}
.-open .pricing-compare--body-cell-feature .picon-arrow-v-down:after {
    transform: rotate(180deg);
}
.-open .pricing-compare--body-cell-feature .picon{
    transform:rotate(-180deg);
    display:inline-block;
}
.-open .pricing-compare--body-cell-feature-tooltip {
    max-height:500px;
    transition: max-height .3s ease-in-out;
}

.pricing-compare--body-cell-feature-tooltip {
    max-height:0;
    overflow: hidden;
    margin-left:2.3em;
    transition: max-height .3s ease-in-out;
}

.mobile-compare {
  background-color: #f8f8f9;
  padding: 3em 0;
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .mobile-compare {
    display: none;
  }
}


.compare-mobile-container {
  max-width: 350px;
  margin: 0 auto 50px auto;
  background-color: white;
  border: 1px solid #eddcc6;
}

.compare-mobile-container .pricing-compare--header-cell-wrap {
  padding: 2em 1em;
  align-self:center;
  max-width: 330px;
  margin: auto;
}

#mobile-pricing-compare {
  padding: 2em 0em;
}

.pricing-compare--header-cell-title-mobile {
  text-align: left;
  padding-left: 15px;
  padding-bottom: .5em;
}

.view-features {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  text-decoration: underline;
  cursor: pointer;
  color: gray;
}

@media only screen and (max-width: 768px) {
  .pricing-compare {
    display:none;
  }

  .disclaimer {
    padding-bottom: 50px;
  }
}

.view-features .hide {
  display: none;
}

.view-features.open .view {
  display: none;
}

.view-features.open .hide {
  display: inline-block;
  text-decoration: underline;
}

.mobileTable {
  display: none;
}

.service-compare-table .item-collapse {
  width: 5%;
  padding: 0 10px;
  height: 1.7em;
  line-height: 1.7em;
  vertical-align: bottom;
}

.service-compare-table .item-collapse .picon {
  font-size: 7px;
  text-align: center;
  display: block;
  overflow-y: hidden;
  width: 12px;
}

.service-compare-table .item-collapse span {
  transition: transform .2s;
}

.service-compare-table .feature-content {
  width: 95%;
}

.service-compare-table .service-compare-title.active .item-collapse span {
  transform: rotate(-180deg);
}

.rich-description {
  display: none;
  font-size: 15px;
  max-width: 250px;
  text-align: left;
}

.title {
  font-size: 15px;
  text-align: left;
}

.service-compare-title  {
  display: flex;
  width: 100%;
  padding-bottom: 15px;
  cursor: pointer;
}

.pricing-container {
  margin: auto;
  text-align: center;
  max-width: 230px;
}

.feature-container {
  width: 95%;
  text-align: left;
}

.black-cell {
  background-color: black;
  color: white;
  max-width: 350px;
  margin: auto;
  height: 35px;
  font-size: 20px;
}

.per-employee {
  position: relative;
  top: -10px;
}