/* ---------------------
------------------------

Additional Styles for OnTheClock website 
Updated 2/1/2024

------------------------
--------------------- */
/* Text Colors */
.orange-text {
    color: #ff621a
}

.lt-orange-text {
    color: #ffa826
}

.red-text {
    color: #ff130d
}

.teal-text {
    color: #000bff
}

.black-text {
    color: #262626
}

.gray-text {
    color: #8b8b8b
}

.lt-green-text {
    color: #5cd3b2
}
/* Font Weights */
.font-w-500 {
    font-weight: 500
}

.font-w-800 {
    font-weight: 700
}

.font-w-801 {
    font-weight: 800
}

.font-s-18 {
    font-size: 1.125rem;
    line-height: 1.5
}
/* Extra Paddings */
.padding-lr-100 {
    padding: 0 160px
}

.padding-120 {
    padding: 120px 0
}

.padding-100 {
    padding: 100px 0
}

.padding-60 {
    padding: 60px 0
}

.padding-top-120 {
    padding-top: 120px;
}

.padding-bottom-120 {
    padding-bottom: 120px;
}

.padding-top-100 {
    padding-top: 100px;
}

.padding-bottom-100 {
    padding-bottom: 100px;
}

.py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Background Colors */
.bg-md-gray {
    background-color: #515151
}

.lt-orange-bg {
    background-color: #ffb16d
}

.otc-copper-bg {
    background-color: #ff621a
}

.otc-copper-7-bg {
    background-position: 0 0;
    background-color: rgba(255,98,26,0.07) !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important
}

.otc-copper-15-bg {
    background-position: 0 0;
    background-color: rgba(255,98,26,0.15) !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important
}

.otc-copper-20-bg {
    background-position: 0 0;
    background-color: rgba(255,98,26,0.2) !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important
}

.red-bg {
    background-color: rgba(255,19,13,0.2) !important
}

.red-bg-50 {
    background-color: rgba(255,19,13,0.54) !important
}

.green-bg {
    background-color: #24b353
}

.lt-blue-bg {
    background-color: #0091ff
}

.lt-lt-blue-bg {
    background-position: 0 0;
    background-color: rgba(0,145,255,0.2) !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important
}

.yellow-bg {
    background-position: 0 0;
    background-color: rgba(252,255,51,0.1) !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important
}

.lt-gradient {
    background: #fff4ef;
    background: -webkit-linear-gradient(-45deg,#f3f3f3 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(-45deg,#f3f3f3 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(-45deg,#f3f3f3 0%,rgba(255,255,255,1) 100%)
}

.primary-gradient-bg {
    background: #ff621a;
    background: linear-gradient(to right,#ff621a,#ff801a)
}

.blue-gradient {
    background: rgb(60,163,188);
    background: linear-gradient(328deg, rgba(158,209,222,1) 0%, rgba(184,226,223,1) 100%);
}

/* Extra table options */
.table .thead-light th:first-child {
    border-radius: .4rem 0 0 0
}

.table .thead-light th:last-child {
    border-radius: 0 .4rem 0 0
}

.table-vertical-border th, .table-vertical-border td {
    border-right: 1px solid #efefef
}

    .table-vertical-border th:last-child, .table-vertical-border td:last-child {
        border-right: 0 !important
    }

/* Opacity option with hover, good for images */
.opacity {
    opacity: 1;
    transition: all .18s linear
}

    .opacity:hover {
        opacity: .6
    }

/* flip svg arrow */
a.flip.collapsed svg {
    transition: all .1s linear;
    transform: rotateX(0deg)
}

a.flip svg {
    transition: all .1s linear;
    transform: rotateX(180deg)
}

/* Cursor Options */
.pointer {
    cursor: pointer
}

.n-resize {
    cursor: n-resize
}

/* Standard link next to a large button */
.btn-link-lg {
    font-size: 18px;
    font-weight: 500
}

/* Validation */
.val ul, #ctl00_cphBody_ValidationSummary1 ul {
    margin: 0;
}

    .val ul li {
        padding: 0;
        line-height: 1.4
    }


/* ---------------------
    
    Header 

--------------------- */
.header-wrap {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #fff;
    transition: padding-top 0.3s ease,padding-bottom 0.3s ease,box-shadow 0.3s ease
}

.navbar-brand svg {
    max-width: 210px;
    width: 210px;
    display: block
}

.login-btn svg {
    line-height: 1;
    vertical-align: middle
}

.dropdown-menu ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.dropdown-menu h6 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 14px
}

.dropdown-menu.meet-us::before, .dropdown-menu.support::before {
    content: url("../images/arrow-up-nav.svg");
    top: -12px;
    width: 20px;
    height: 13px;
    position: absolute;
    left: inherit;
    right: 52px
}
.what-we-offer-dropdown.dropdown-menu.show::before {
    content: url(https://www.ontheclock.com/images/arrow-up-nav.svg);
    top: -12px;
    position: absolute;
    left: 147px;
    width: 20px;
    height: 13px;
}

.resources-dropdown.dropdown-menu.show::before {
    content: url(https://www.ontheclock.com/images/arrow-up-nav.svg);
    top: -12px;
    position: absolute;
    left: 114px;
    width: 20px;
    height: 13px;
}

/* Production type bubble next to logo */
nav.navbar.navbar-expand-lg.navbar-light .navbar-brand {
    position: relative
}

#production-type {
    position: absolute;
    left: 202px;
    top: -8px;
}

/* Search Button */
.search-btn {
    background-color: transparent;
    padding: 8px;
    width: 41px;
    height: 41px;
    border-radius: 50%
}

    .search-btn:active {
        background-color: #f3f3f3;
    }

    .search-btn svg path {
        fill: #bfc0c0;
        transition: all .3s ease
    }

    .search-btn:hover svg path {
        fill: #262626
    }

/* New Search */
.search {
    position: absolute;
    left: 248px;
    right: 0;
    top: 0;
    display: none;
    height: 100%;
    z-index: 101
}

.search-input-items {
    position: relative;
    height: 100%
}

.search-input {
    padding: .5rem 4rem;
    height: 100%;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

    .search-input:hover {
        border-color: #ff621a
    }

    .search-input:focus {
        border-color: #ff621a
    }

.search-input-btn {
    position: absolute;
    z-index: 2;
    left: 1.1rem;
    top: 22%;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: 0
}

    .search-input-btn:hover {
        cursor: pointer
    }

    .search-input-btn:hover, .search-input-btn:focus, .search-input-btn:active {
        outline: 0 none
    }

    .search-input-btn svg {
        margin: 0 auto
    }

        .search-input-btn svg path {
            transition: all .3s ease
        }

    .search-input-btn:hover > svg path {
        fill: #ff621a !important
    }

.search-close-btn {
    position: absolute;
    z-index: 3;
    right: 1.1rem;
    top: 22%;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: 0;
    transition: all .2s ease
}

    .search-close-btn:hover {
        cursor: pointer
    }

    .search-close-btn:hover, .search-close-btn:focus, .search-close-btn:active {
        outline: 0 none
    }

    .search-close-btn svg {
        margin: 0 auto
    }

        .search-close-btn svg path {
            transition: all .3s ease
        }

    .search-close-btn:hover > svg path {
        fill: #ff621a !important
    }


/* ---------------------
    
    Shrinking header 

--------------------- */
.header-shrink .header-wrap {
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.06);
    padding-top: .55rem;
    padding-bottom: .55rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
/*.header-shrink .navbar-nav,.header-shrink .search{margin-top:-110px}*/
/*.header-shrink .logo-svg-path{fill:transparent!important}*/
#main {
    margin-top: 108px
}


/* ---------------------
    
    Home Intro 

--------------------- */
.container.intro {
    position: relative
}

.intro-devices {
    margin-bottom: -94px;
    margin-top: 330px
}

.intro-mobile {
    position: relative;
    left: -16px;
    z-index: 3;
    vertical-align: bottom
}

.intro-ipad {
    position: absolute;
    bottom: 15px;
    left: 101px;
    z-index: 2
}

.intro-browser {
    right: -322px;
    position: absolute;
    bottom: 32px;
    vertical-align: bottom
}

a.next-section {
    position: absolute;
    bottom: -33px;
    background-color: #fff;
    padding: 20px;
    line-height: 0;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.08);
    width: 65px;
    height: 65px;
    transition: box-shadow .3s ease, background-color .3s ease
}

    a.next-section svg {
        top: 0;
        position: relative;
        transition: all .3s ease
    }

    a.next-section:hover {
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1);
        background-color: #fff
    }

    a.next-section:active {
        background-color: #f3f3f3
    }

    a.next-section:hover svg {
        top: 5px
    }

    a.next-section svg path {
        transition: fill .3s ease-in-out
    }

    a.next-section:hover svg path {
        fill: #262626
    }
/*.intro-buttons a.btn svg{transition:transform .3s ease-in-out;transform:scale(1,1);width:19px;position:relative;line-height:1;display:inline-block;vertical-align:middle;margin-top:-2px}
.intro-buttons a.btn:hover svg{transform:scale(1.2,1.2)}*/


.home-star-btn .starsWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .5s linear;
    padding: 3px 0 4px;
    transform: scale(1,1)
}

.home-star-btn .starsWrapOuter.active .starsWrap {
    opacity: 1;
}

.home-star-btn .starsWrap svg {
    margin: -1px 2px 0;
    opacity: 0
}

    .home-star-btn .starsWrap svg#starOne {
        animation-name: star1;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-duration: 1s;
        -webkit-animation-name: star1;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-duration: 1s
    }

    .home-star-btn .starsWrap svg#starTwo {
        animation-name: star2;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: .3s;
        animation-duration: 1s;
        -webkit-animation-name: star2;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: .3s;
        -webkit-animation-duration: 1s
    }

    .home-star-btn .starsWrap svg#starThree {
        animation-name: star3;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: 0.6s;
        animation-duration: 1s;
        -webkit-animation-name: star3;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0.6s;
        -webkit-animation-duration: 1s
    }

    .home-star-btn .starsWrap svg#starFour {
        animation-name: star4;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: 0.9s;
        animation-duration: 1s;
        -webkit-animation-name: star4;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0.9s;
        -webkit-animation-duration: 1s
    }

    .home-star-btn .starsWrap svg#starFive {
        animation-name: star5;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: 1.3s;
        animation-duration: 1s;
        -webkit-animation-name: star5;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 1.3s;
        -webkit-animation-duration: 1s
    }

.home-star-btn:hover .starsWrap svg#starFive #path1, .home-star-btn:active .starsWrap svg#starFive #path1 {
    fill: #fff !important;
}

.home-star-btn .starsWrap svg#starFive #path2 {
    animation-name: star5path2;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2.1s;
    animation-duration: 2s;
    -webkit-animation-name: star5path2;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2.1s;
    -webkit-animation-duration: 2s;
    opacity: 0
}

.home-star-btn .starsWrap svg#starFive #path3 {
    animation-name: star5path3;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2.2s;
    animation-duration: 2s;
    -webkit-animation-name: star5path3;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2.2s;
    -webkit-animation-duration: 2s;
    opacity: 0
}

.home-star-btn .starsWrap svg#starFive #path4 {
    animation-name: star5path4;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-duration: 2s;
    -webkit-animation-name: star5path4;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 2s;
    opacity: 0
}





/* ---------------------
    
    Home Companies

--------------------- */
.companies-wrap {
    padding: 200px 0 120px
}

#companies p, #features-title p {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0.006em;
    font-size: 1.375rem
}

    #companies p svg {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 1;
        vertical-align: middle;
        position: relative;
        top: -2px
    }

.owl-companies div img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .5;
    transition: all .3s ease
}

    .owl-companies div img:hover {
        opacity: 1;
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%)
    }

#companies a.btn {
    padding: 1.2rem 2.8rem;
    position: relative;
    transition: all .3s ease
}

#companies .stars-wrap {
    position: absolute;
    top: 15px;
    opacity: 0;
    left: 0;
    right: 0;
    transition: all .3s ease
}

#companies .btn-text {
    transition: all .3s ease;
    position: relative;
    top: 0
}

#companies .btn:hover .stars-wrap, #companies .btn:active .stars-wrap {
    opacity: 1;
    top: 7px
}

#companies .btn:hover .btn-text, #companies .btn:active .btn-text {
    top: 10px
}

.add-logo {
    color: #c9c9c9;
    text-decoration: underline;
    font-size: 20px;
    font-weight: 400;
    font-family: proxima-nova,sans-serif;
    font-style: normal
}


/* ---------------------
    
    Home Features

--------------------- */
#features-title {
    padding: 180px 0 80px
}


/* ---------------------
    
    Home GPS Location Features

--------------------- */
.small-top-title {
    color: #bfc0c0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.13rem;
    line-height: 0
}

.gps-information p, .payroll-information-wrap p, .mobile-app-information-wrap p, .pto-information p, #get-started p, #reviews p {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0.006em;
    font-size: 1.375rem
}


/* ---------------------
    
    Home GPS Map Style

--------------------- */
#divMapBody {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 900px
}

.punch-map-log-wrap {
    position: absolute;
    width: 340px;
    height: 500px;
    margin: -224px auto 0;
    top: 50%;
    left: 40px;
    overflow: hidden;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    box-shadow: 0 7px 20px 0 rgba(0,0,0,0.05)
}

.divMapActivityText {
    padding: 20px 30px;
    border-bottom: 1px solid #f3f3f3;
    font-size: 1.13rem;
    color: #8b8b8b;
    font-weight: 500
}

.divMapActivitySubText {
    color: #000bff;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400
}

#divMessage {
    position: absolute;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 20px 0 rgba(0,0,0,0.05);
    left: 0;
    right: 0;
    top: 40%;
    margin: 0 20px
}


/* ---------------------
    
    Home Payroll Integration

--------------------- */
.payroll-integration-wrap {
    padding: 100px 0
}

.time-clock-integration-container {
    position: relative;
    width: 765px;
    max-width: 765px
}

.clock-integration {
    position: absolute;
    z-index: 2;
    top: 260px;
    left: 240px
}

.time-clock {
    position: relative;
    z-index: 1
}

    .time-clock svg {
        width: 747px
    }

.partner-integrations {
    position: absolute;
    z-index: 2;
    top: -27px;
    left: 19px
}

/* Clock */
.clock-animation {
    animation-name: handrotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 110px 110px;
    -webkit-animation-name: handrotate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-transform-origin: 110px 110px;
    -ms-animation-name: handrotate;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -ms-transform-origin: 110px 110px;
    -o-animation-name: handrotate;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    -o-transform-origin: 110px 110px;
}

.second-hand {
    /* 60 sec = 1 min */
    animation-duration: 60s;
    -webkit-animation-duration: 60s;
    -ms-animation-duration: 60s;
    -o-animation-duration: 60s;
    -moz-animation-duration: 60s;
}

.minute-hand {
    /*  60 min = 1 hour  */
    animation-duration: 3600s;
    -webkit-animation-duration: 3600s;
    -ms-animation-duration: 3600s;
    -o-animation-duration: 3600s;
    -moz-animation-duration: 3600s;
}

.hour-hand {
    /*  12 hours x 3600s = 43200 sec  */
    animation-duration: 43200s;
    -webkit-animation-duration: 43200s;
    -ms-animation-duration: 43200s;
    -o-animation-duration: 43200s;
    -moz-animation-duration: 43200s;
}

@keyframes handrotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes handrotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

.circle-1 {
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #ff621a;
    border-radius: 50%;
    top: 80px;
    right: 20px;
    animation-name: circle1;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 6s;
    -webkit-animation-name: circle1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 6s
}

.circle-2 {
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #ff621a;
    border-radius: 50%;
    bottom: 80px;
    right: 20px;
    animation-name: circle2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    -webkit-animation-name: circle2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 10s
}

.circle-3 {
    position: absolute;
    right: 30px;
    top: -43px;
    width: 30px;
    height: 30px;
    background-color: #19ffe7;
    border-radius: 50%;
    animation-name: circle3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 12s;
    -webkit-animation-name: circle3;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 12s
}

.circle-4 {
    position: absolute;
    top: -15px;
    right: 140px;
    width: 13px;
    height: 13px;
    background-color: #000bff;
    border-radius: 50%;
    animation-name: circle4;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 8s;
    -webkit-animation-name: circle4;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 8s
}

.circle-5 {
    position: absolute;
    bottom: -14px;
    right: 150px;
    width: 17px;
    height: 17px;
    background-color: #0091ff;
    border-radius: 50%;
    animation-name: circle2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    -webkit-animation-name: circle2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 10s
}

@keyframes circle1 {
    0% {
        transform: scale(0.9, 0.9);
    }

    50% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(0.9, 0.9);
    }
}

@keyframes circle2 {
    0% {
        transform: scale(0.8, 0.8);
    }

    50% {
        transform: scale(1.6, 1.6);
    }

    100% {
        transform: scale(0.8, 0.8);
    }
}

@keyframes circle3 {
    0% {
        transform: scale(0.7, 0.7);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(0.7, 0.7);
    }
}

@keyframes circle4 {
    0% {
        transform: scale(0.6, 0.6);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(0.6, 0.6);
    }
}

@-webkit-keyframes circle1 {
    0% {
        transform: scale(0.9, 0.9);
    }

    50% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(0.9, 0.9);
    }
}

@-webkit-keyframes circle2 {
    0% {
        transform: scale(0.8, 0.8);
    }

    50% {
        transform: scale(1.6, 1.6);
    }

    100% {
        transform: scale(0.8, 0.8);
    }
}

@-webkit-keyframes circle3 {
    0% {
        transform: scale(0.7, 0.7);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(0.7, 0.7);
    }
}

@-webkit-keyframes circle4 {
    0% {
        transform: scale(0.6, 0.6);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(0.6, 0.6);
    }
}


/* ---------------------
    
    Home Mobile Apps

--------------------- */
.mobile-screens {
    position: relative
}

img.mobile-time-card {
    position: relative;
    border-radius: 10px;
    margin-right: 147px;
    z-index: 3;
    box-shadow: 0 30px 56px 0 rgba(0,0,0,0.1)
}

img.mobile-punch-locations {
    position: relative;
    margin-top: 150px;
    margin-bottom: 150px;
    z-index: 2;
    border-radius: 10px;
    box-shadow: 0 30px 56px 0 rgba(0,0,0,0.1);
    right: 204px
}

img.mobile-punch-clock {
    position: absolute;
    z-index: 1;
    right: -50px;
    padding-top: 70px
}


/* ---------------------
    
    Home PTO Tracking

--------------------- */
.pto-tracking-wrap {
    padding: 120px 0 0
}

.pto-screens {
    position: relative;
    margin-bottom: -90px
}

.pto-screens-wrap {
    margin: 64px auto 0
}

.pto-left img {
    position: absolute;
    left: 0
}

.pto-middle img {
    position: relative;
    z-index: 1;
    margin: -70px auto 0
}

.pto-middle img, .pto-left img, .pto-right img {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 30px 56px 0 rgba(0,0,0,0.1)
}

.pto-right img {
    position: absolute;
    right: 0
}


/* ---------------------
    
    Home Get Started

--------------------- */
#get-started {
    position: relative;
    z-index: 1
}

.get-started-wrap {
    padding: 150px 0
}

#get-started span.pb-4.d-block {
    font-size: 15px
}

#get-started .input-group-append button {
    background-color: #ff621a;
    color: #fff;
    padding: 15px 30px;
    border-radius: 0 .5rem .5rem 0;
    font-size: 1.13rem;
    font-weight: 700;
    border: 0
}

    #get-started .input-group-append button:hover {
        background-color: #db904c
    }


/* ---------------------
    
    Home Reviews

--------------------- */
.reviews-wrap {
    padding: 110px 0 0
}

#reviews .col-12 {
    position: relative;
    z-index: 1
}

.review-people img {
    position: relative;
    right: 232px;
    margin-top: -100px
}

#reviews .owl-testimonials {
    margin-top: 64px
}

.review-stats-sep {
    line-height: 1;
    height: 1px;
    width: 20px;
    background-color: #dddddd;
    display: inline-block;
    position: relative;
    margin: 0 12px;
    vertical-align: middle
}

.review-star-rating svg {
    fill: #000bff
}

    .review-star-rating svg.checked {
        fill: #fcff33
    }

    .review-star-rating svg.unchecked {
        fill: transparent;
        stroke: #19ffe7;
        stroke-width: 1px
    }

.owl-testimonials .owl-nav {
    position: absolute;
    top: -50px;
    right: 0
}

    .owl-testimonials .owl-nav button {
        background-color: #fff;
        padding: 15px;
        line-height: 0;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.08);
        width: 53px;
        height: 53px;
        transition: box-shadow .3s ease
    }

        .owl-testimonials .owl-nav button:hover {
            box-shadow: 0 6px 8px 0 rgba(0,0,0,0.1)
        }

        .owl-testimonials .owl-nav button:active {
            background-color: #f3f3f3
        }

        .owl-testimonials .owl-nav button svg {
            fill: #ff621a;
            transition: fill .3s ease
        }

        .owl-testimonials .owl-nav button:hover svg {
            fill: #cc4e15
        }

.owl-item blockquote p strong {
    font-weight: 700
}

.owl-testimonials .owl-item {
    background-color: #fff;
    /*height: 13rem*/
}


/* ---------------------
    
    Home Blog

--------------------- */
.blog-posts-wrap {
    padding: 110px 0
}

#blog-posts a img {
    transition: opacity .3s ease,filter .3s ease;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1
}

    #blog-posts a img:hover {
        -webkit-filter: grayscale(50%);
        filter: grayscale(50%);
        opacity: .8
    }

#blog-posts h1 {
    line-height: 3.1rem
}

.blog-posts-wrap .post a svg {
    position: relative;
    top: -2px
}


/* ---------------------
    
    Home Footer

--------------------- */
footer a {
    color: #8b8b8b
}

.pre-footer-wrap {
    padding: 80px 0
}

    .pre-footer-wrap .item-text span {
        font-size: .87rem
    }

    .pre-footer-wrap .item-text {
        line-height: 1
    }

.available-on {
    border-bottom: 1px solid #ddd
}

    .available-on a:hover h6, .available-on a:hover span.text-body {
        color: #ff621a !important;
    }

.footer-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none
}

    .footer-navigation ul li a {
        display: inline-block;
        padding: 5px 0;
        line-height: 1.5
    }

.social-btns a {
    border: 2px solid #bfc0c0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 41px;
    text-align: center
}

    .social-btns a:hover {
        border-color: #ff621a
    }

.copyright {
    color: #262626
}

.footer-extras ul {
    list-style: none;
    padding: 0;
    margin: 0
}

    .footer-extras ul li {
        display: inline-block
    }

        .footer-extras ul li a {
            padding: 0 10px
        }

.footer-contact-list li address {
    margin-bottom: 0
}

.social-btns a svg {
    width: 17px;
    text-align: center;
    margin: 0px auto;
}

    .social-btns a svg path, .social-btns a svg rect {
        fill: #bfc0c0;
        transition: fill 0.3s ease;
    }

.social-btns .instagram:hover svg path {
    fill: #f50000;
}

.social-btns .tiktok:hover svg path {
    fill:#000000;
}

.social-btns .google-plus:hover svg path {
    fill: #de5347
}

.social-btns .linkedin:hover svg path, .social-btns .linkedin:hover svg rect {
    fill: #0274b3
}

.social-btns .x:hover svg path {
    fill: #55adee
}

.social-btns .facebook:hover svg path {
    fill: #3c599b
}

.social-btns .youtube:hover svg path {
    fill: red
}

.social-btns .mail:hover svg path {
    fill: #ff621a
}

#back-to-top {
    position: fixed;
    opacity: 0;
    bottom: -65px;
    right: 30px;
    width: 65px;
    height: 65px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 73px;
    z-index: 999;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.08);
    transition: all 0.5s ease;
}

    #back-to-top svg {
        transform: rotate(180deg);
        transition: top .3s ease;
        top: 0;
        position: relative
    }

    #back-to-top.visible {
        bottom: 89px;
        opacity: 1
    }

    #back-to-top:hover {
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1)
    }

    #back-to-top:active {
        background-color: #f3f3f3
    }

    #back-to-top:hover svg {
        top: -5px
    }

        #back-to-top:hover svg path {
            fill: #262626
        }

.made-with-love svg {
    width: 14px
}


/* ---------------------
    
    Signup Page
    Commented out 11/4/2020 to simplify the signup page

--------------------- */
/*.signup-padding{padding:50px 70px}
.signup-form-padding{padding:50px 120px}
.owl-signup .owl-dots{position:absolute;left:0;right:0;bottom:-50px}
.owl-signup .owl-dot{width:11px;height:11px;background-color:#ff621a;border:0 none;border-radius:11px;line-height:0;display:inline-block;margin:0 10px;padding:0;outline:0 none}
.owl-signup .owl-dot.active{box-shadow:0 0 0 9px rgba(255,98,26,0.10);outline:0 none}
.owl-signup .owl-item img {height: 35px}
.owl-signup .owl-item .line-sep-sq img {height: 9px;margin-top: 13px;margin-bottom: 10px}
.signup-terms{font-size:.85rem}*/


/* ---------------------
    
    Pricing Page

--------------------- */
.divPriceToolTip {
    background-color: #ff621a;
    width: 114px;
    position: absolute;
    left: -43px;
    bottom: 40px;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    color: #fff;
    outline: 0 none;
    font-family: proxima-nova,sans-serif
}

    .divPriceToolTip:after {
        content: "";
        background-color: #ff621a;
        width: 10px;
        height: 10px;
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: -4px;
        border-radius: 3px;
        transform: rotate(45deg)
    }

#employeeCountInput {
    background-color: #fff;
    height: auto;
    max-width: 200px;
    margin: 0 auto;
    font-size: 2.3rem;
    padding: 4px 12px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid #ddd;
    text-align: center;
    transition: all .15s linear
}

    #employeeCountInput:hover {
        border-color: #ff621a
    }

    #employeeCountInput:focus {
        border-color: #ff621a
    }

.pricing-result {
    font-weight: 400;
    margin-bottom: 40px;
    font-size: 2.3rem
}

.get-started-pricing-btns {
    position: relative;
    bottom: -41px
}

.pricing-btn {
    width: 100%;
    line-height: 59px;
}

.pricing-details-wrap {
    padding-top: 180px;
    padding-bottom: 110px
}

.whats-included-wrap .row .col-12.d-flex a {
    font-size: 1.25rem
}

.whats-included .col-xl-4 div .icon {
    transition: all .2s linear
}

.whats-included .col-xl-4:hover > div .icon {
    transform: scale(1.3,1.3)
}

.pricing-table {
    margin-bottom: 0
}

    .pricing-table thead tr th {
        border-top: 0;
        border-bottom: 0
    }

.table thead tr th {
    color: #262626;
    padding: 1.3rem 1.5rem
}

.pricing-contract {
    border-bottom: 5px solid #ff621a
}

.pricing-features {
    border-bottom: 5px solid #ff130d
}

.pricing-fees {
    border-bottom: 5px solid #24b353
}

.pricing-plans {
    border-bottom: 5px solid #ffa826
}

.pricing-support {
    border-bottom: 5px solid #3c7fbc
}

.pricing-apps {
    border-bottom: 5px solid #000bff
}

.pricing-discounts .col-12.item {
    margin-top: 120px
}

.pricing-discounts .row.branches {
    margin-top: -116px
}

.pricing-discounts .item-wrap .icon svg {
    margin-top: 25px;
    transition: all .2s linear
}

.pricing-discounts .item-wrap .icon {
    background-color: #f2e4d8;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    transition: all .2s linear
}

.pricing-discounts .row.who {
    position: relative;
    z-index: 2
}

.pricing-discounts .item-wrap {
    transition: all .2s linear
}

    .pricing-discounts .item-wrap:hover > .icon {
        transform: scale(1.1,1.1)
    }

        .pricing-discounts .item-wrap:hover > .icon svg {
            margin-top: 0;
            height: 102px;
            width: 102px
        }

#pricingFaqAccordion {
    overflow: hidden
}

.card-header h5 button {
    display: block !important;
    width: 100%;
    text-align: left;
    border: 0;
    font-size: 18px;
    color: #262626;
    font-weight: 500;
    padding: 0
}

    .card-header h5 button:hover, .card-header h5 button:visited, .card-header h5 button:active, .card-header h5 button:focus {
        text-decoration: none;
        color: #8b8b8b
    }

.answer-icon .badge {
    font-size: 14px;
    height: 22px;
    width: 22px;
    padding: 0;
    line-height: 22px
}

#pricingFaqAccordion .card-header button .plus-close {
    position: absolute;
    right: 0;
    top: 11%
}

#pricingFaqAccordion .card-header button.collapsed svg {
    transform: rotate(0deg);
    width: 19px;
    height: 19px;
    transition: all .2s linear
}

    #pricingFaqAccordion .card-header button.collapsed svg path {
        fill: #262626;
        transition: all .2s linear
    }

#pricingFaqAccordion .card-header button svg path {
    fill: #8b8b8b;
    transition: all .2s linear
}

#pricingFaqAccordion .card-header button svg {
    transform: rotate(45deg);
    transition: all .2s linear;
    width: 19px;
    height: 19px
}

#pricingFaqAccordion .card-body {
    padding: 1.7rem
}

.pricing-get-started p {
    font-size: 1.13rem
}


/* ---------------------
    
    How It Works

--------------------- */
#how-it-works-list-pop {
    position: fixed;
    top: 31%;
    left: -55px;
    z-index: 10;
    transition: all .2s ease-in-out
}

    #how-it-works-list-pop.active {
        left: 20px;
        transition: left .2s ease-in-out
    }

    #how-it-works-list-pop .list-group-item {
        border: 0;
        padding: 0;
        margin: 0;
        background-color: transparent
    }

        #how-it-works-list-pop .list-group-item p {
            margin: 13px 0
        }

        #how-it-works-list-pop .list-group-item .number {
            background-color: #ff621a;
            color: #fff;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: inline-block;
            font-size: 14px;
            line-height: 25px
        }

        #how-it-works-list-pop .list-group-item.active .number {
            background-color: #000bff
        }

    #how-it-works-list-pop a p span::after {
        content: "...";
        position: absolute;
        bottom: -6px;
        transform: rotate(90deg);
        right: -4px;
        color: #ff621a;
        font-size: 20px;
        letter-spacing: 2px;
        line-height: .5
    }

    #how-it-works-list-pop a:last-child p span::after {
        content: ""
    }

    #how-it-works-list-pop a.active p span::after {
        color: #000bff
    }

#how-it-works-list.list-group {
    flex-direction: row;
    margin-top: 60px
}

    #how-it-works-list.list-group a:after {
        content: "......";
        position: absolute;
        right: -47px;
        top: 40%;
        font-size: 42px;
        letter-spacing: 5px;
        line-height: 30px;
        color: #ddd;
        z-index: 1
    }

    #how-it-works-list.list-group a:last-child::after {
        content: ""
    }

#how-it-works-list .list-group-item {
    padding: 30px;
    border: 0;
    border-radius: 0 !important;
    background-color: transparent !important
}

    #how-it-works-list .list-group-item p {
        margin: 0 35px;
        font-weight: 600;
        font-size: 18px;
        display: block;
        padding: 40px 30px;
        border-radius: 10px;
        box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
        border-bottom: 4px solid transparent;
        transition: all .2s ease-in-out;
        z-index: 2
    }

    #how-it-works-list .list-group-item:hover p {
        box-shadow: 0 10px 40px 0 rgba(0,0,0,0.1);
        border-bottom: 4px solid #ff621a;
        transform: scale(1.1,1.1);
        background-color: #fff
    }

    #how-it-works-list .list-group-item span.number {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        line-height: 58px;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background-color: red;
        color: #fff;
        font-size: 30px;
        font-weight: 600
    }

    #how-it-works-list .list-group-item span.list-group-item-text {
        display: block;
        padding-top: 10px
    }

.how-it-works-number-title {
    font-size: 72px;
    line-height: .75
}

.how-it-works-bullets {
    margin-top: 10px;
    margin-left: 0;
    padding-left: 27px
}

    .how-it-works-bullets li {
        font-size: 26px;
        padding: 5px 0;
        line-height: 28px
    }

        .how-it-works-bullets li span {
            font-size: 22px
        }

.quickly-add-employees-1 {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 200px
}

.quickly-add-employees-2 {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto
}

.rings {
    width: 100%;
    text-align: center;
    position: relative
}

.ring.ring-1 {
    position: absolute;
    width: 700px;
    height: 700px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -69px
}

.ring.ring-2 {
    position: absolute;
    width: 790px;
    height: 790px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 50%;
    top: -111px
}

.employees-punch-in-out-img-wrap {
    position: relative;
    margin: 140px auto
}

.employees-punch-in-01 {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -75px
}

.employees-punch-in-02 {
    position: absolute;
    z-index: 2;
    right: 93px;
    bottom: -75px
}

.employees-punch-in-03 {
    position: relative;
    z-index: 1;
    right: 16px;
    bottom: 11px
}

.auto-calculation-img-01 {
    position: relative;
    z-index: 1
}

.auto-calculation-img-02 {
    position: absolute;
    z-index: 2;
    left: 30px;
    top: 51%
}

.user-types .type {
    width: 65px;
    height: 65px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 65px;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 22px
}

.user-types-title {
    padding-top: 23%
}


/* ---------------------
    
    Features

--------------------- */
#features-list {
    display: flex;
    flex-direction: row
}

    #features-list .list-group-item {
        border: 0;
        background-color: transparent;
        margin: 0 15px;
        padding: 0
    }

        #features-list .list-group-item a {
            background-color: #fff;
            display: block;
            line-height: 1.3;
            padding: 20px 15px;
            border-radius: 10px;
            transition: all .2s ease;
            border-bottom: 5px solid #fff;
            border-bottom-color: #fff;
            font-weight: 600;
            color: #8b8b8b;
            text-decoration: none
        }

            #features-list .list-group-item a:hover {
                transform: scale(1.16,1.16);
                box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1);
                border-color: #ff621a;
                color: #ff621a;
                font-size: 14px;
            }

    #features-list .divider {
        width: 1px;
        height: 135px;
        background-color: #ddd;
        position: absolute;
        right: -15px;
        top: 9px
    }

    #features-list a img {
        height: 35px
    }

.features-1-1 {
    position: relative;
    left: -76px
}

.features-1-2 {
    border-radius: 50%;
    position: absolute;
    left: 31px;
    top: 45%
}

.features-1-3 {
    position: absolute;
    right: 58px;
    top: 165px
}

.features-2-1 {
    position: relative;
    left: -50px;
    z-index: 1;
    top: 25px
}

.features-2-2 {
    position: relative;
    z-index: 2;
    bottom: 25px
}

.features-3-1 {
    margin: -20px auto
}

.features-3-2 {
    position: absolute;
    left: 50px;
    bottom: 63px
}

.features-3-3 {
    position: absolute;
    top: 259px;
    right: 60px
}

.features-4-1 {
    position: relative;
    margin-bottom: 190px;
    margin-top: 30px
}

.features-4-2 {
    position: absolute;
    top: 213px;
    right: 118px
}

.features-4-3 {
    position: absolute;
    right: -10px;
    bottom: 110px
}

.features-5-1 {
    position: absolute;
    right: 250px;
    top: 147px;
    z-index: 1
}

.features-5-2 {
    position: absolute;
    right: 15px;
    top: 118px
}

.features-5-3 {
    position: relative;
    left: -10px
}

#tools-for-your-business ul {
    margin: 15px 0 40px;
    padding: 0
}

    #tools-for-your-business ul li {
        display: inline-block;
        list-style: disc;
        padding: 0 19px;
        position: relative
    }

        #tools-for-your-business ul li::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #8b8b8b;
            border-radius: 50%;
            top: 12px;
            left: -7px
        }

        #tools-for-your-business ul li:first-child::before {
            content: "";
            width: 0;
            height: 0
        }

.features-6-2 {
    position: relative;
    margin-top: -101px;
    margin-bottom: -199px
}

.all-features-wrap {
    position: relative
}

.features-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .features-list li {
        padding: 16px 0 16px 40px;
        border-bottom: 1px solid #ddd;
        position: relative
    }

        .features-list li::before {
            content: url("../images/check-sm.svg");
            position: absolute;
            left: 0;
            width: 18px;
            height: 13px;
            line-height: 31px
        }

.security .icon {
    display: inline-block;
    background-color: #f2e4d8;
    border-radius: 50%;
    height: 91px;
    width: 91px;
    line-height: 91px;
    text-align: center;
    transition: all .2s ease
}

.security-item:hover .icon {
    transform: scale(1.2,1.2)
}

.security .icon img {
    height: 43px;
    transition: all .2s ease
}

.security-item:hover .icon img {
    transform: scale(1.3,1.3)
}

.security-list {
    margin: 0;
    padding: 0 0 0 14px
}

    .security-list li {
        padding: 4px 0 4px 5px
    }


/* ---------------------
    
    Login Page

--------------------- */
.admin-login .form-check-input {
    display: none
}

.admin-login .admin-login-label {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 2px transparent
}

.admin-login-label {
    transition: all .2s ease
}

    .admin-login-label:hover {
        box-shadow: 0 0 0 2px #ff621a;
    }

    .admin-login-label h5 {
        color: #8b8b8b;
        transition: all .2s ease
    }

    .admin-login-label svg.user-icon path, .admin-login-label svg.user-icon ellipse {
        fill: #bfc0c0;
        transition: all .2s ease
    }

    .admin-login-label .badge {
        border: 1px solid #efefef;
        width: 22px;
        height: 22px;
        line-height: 20px;
        position: absolute;
        z-index: 2;
        left: 20px;
        top: 20px;
        border-radius: 50%;
        transition: all 0.2s ease
    }

    .admin-login-label:hover .badge {
        border: 1px solid #aaaaaa
    }

    .admin-login-label .badge-check path {
        fill: transparent;
        transition: all 0.2s ease
    }

.admin-login input[type="radio"]:checked + .admin-login-label .badge-check path {
    fill: #fff
}

.admin-login-label:hover h5 {
    color: #ff621a
}

.admin-login-label:hover svg.user-icon path, .admin-login-label:hover svg.user-icon ellipse {
    fill: #ff621a
}

.employee-login-label .badge-check-employee path {
    fill: transparent;
    transition: all 0.2s ease
}

.employee-login-label:hover .badge {
    background-color: #ff621a;
    border-color: #ff621a
}

.employee-login-label:hover .badge-check-employee path {
    fill: #fff
}

.employee-link:hover h5 {
    text-decoration: none
}

.employee-link:hover {
    text-decoration: none
}

.admin-login input[type="radio"]:checked + .admin-login-label {
    box-shadow: 0 0 0 2px #ff621a
}

    .admin-login input[type="radio"]:checked + .admin-login-label h5 {
        color: #ff621a
    }

    .admin-login input[type="radio"]:checked + .admin-login-label .badge {
        border: 1px solid #ff621a;
        background-color: #ff621a;
    }

    .admin-login input[type="radio"]:checked + .admin-login-label svg.user-icon path, input[type="radio"]:checked + .admin-login-label svg.user-icon ellipse {
        fill: #ff621a !important
    }

    .admin-login input[type="radio"]:checked + .admin-login-label:hover svg.user-icon path, .admin-login input[type="radio"]:checked + .admin-login-label:hover svg.user-icon ellipse {
        fill: #ff621a
    }


/* ---------------------
    
    Meet Us Page

--------------------- */
.meet-us-next-section {
    border-radius: 50%;
    background-color: #fff;
    padding: 20px !important;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.08);
    width: 65px;
    height: 65px;
    position: absolute;
    bottom: -34px;
    transition: background-color .3s,box-shadow .3s
}

    .meet-us-next-section:hover {
        box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1);
        background-color: #fff
    }

    .meet-us-next-section:active {
        background-color: #f3f3f3
    }

.meet-us-down-button {
    position: relative;
    z-index: 1
}

.meet-us-next-section svg {
    top: 0;
    position: relative;
    transition: all .3s ease
}

.meet-us-next-section:hover svg {
    top: 5px
}

.meet-us-next-section svg path {
    fill: #ff621a;
    transition: all .3s ease
}

.meet-us-next-section:hover svg path {
    fill: #262626
}
/* Team Members Grid */
/* Entire Wrap */
.team-member {
    transition: all 150ms linear;
    box-shadow: 0 4px 15px 0 rgba(0,0,0,0.05);
    position: relative;
    cursor: pointer
}

    .team-member:hover {
        box-shadow: 0 20px 55px 0 rgba(0,0,0,0.2)
    }
/* Show More Arrow */
.show-more-arrow {
    width: 45px;
    height: 45px;
    display: inline-block;
    position: relative;
    text-align: center;
    opacity: 1;
    margin: 0 auto;
    line-height: 49px;
    transition: all 200ms linear;
    background-color: #ff621a;
    border-radius: 50%;
    left: 0
}

    .show-more-arrow svg {
        display: inline-block
    }

        .show-more-arrow svg path {
            fill: #fff
        }

.team-member:hover .show-more-arrow {
    left: 30px;
    opacity: 0
}
/* Bio hidden until hover */
.team-member-bio-overlay {
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 200ms linear
}

.team-member:hover .team-member-bio-overlay {
    visibility: visible;
    opacity: 1
}
/* Bio wrapped 3 times for the scroll */
.team-member-bio-overlay-wrap-one {
    height: 100%
}

.team-member-bio-overlay-wrap-two {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

    .team-member-bio-overlay-wrap-two p {
        margin: 0
    }
/* Team member name and title */
.team-member-name {
    line-height: 28px
}

.team-member-title {
    font-weight: 600;
    line-height: 16px;
    display: block
}


/* ---------------------
    
    Reviews Page

--------------------- */
/*
.midBlobWrap svg#img{margin:0 auto;padding-left:0;position:absolute;left:8px;right:0;top:0;transition:all .3s ease-in-out;opacity:0;z-index:1;transform:scale(0,0)}
.midBlobWrap.active svg#img{margin:0 auto;opacity:1;transform:scale(1,1)}
.midBlobWrap svg#midBlob{margin:0 auto;padding-left:0;position:absolute;left:-6px;right:0;top:27px;transition:all .3s ease-in-out;transform:scale(0,0);transition-delay:0;opacity:0}
.midBlobWrap.active svg#midBlob{opacity:1;transform:scale(1,1)}*/
.midBlobWrap {
    height: 234px;
    min-width: 224px;
    position: relative
}

    .midBlobWrap svg#blob {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        transition: all .3s ease-in-out;
        opacity: 0;
        transform: scale(0,0)
    }

    .midBlobWrap.active svg#blob {
        opacity: 1;
        transform: scale(1,1)
    }

    .midBlobWrap .outer-wrap {
        display: flex;
        margin: auto;
        justify-content: center;
        position: relative;
        z-index: 2;
        margin-top: 0;
    }

    .midBlobWrap .starsWrap {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
        border-radius: 0;
        padding: 9px 5px 10px 13px;
        margin-top: 114px;
        opacity: 0;
        transition: all .5s linear;
        transform: scale(0,0)
    }

    .midBlobWrap.active .starsWrap {
        background-color: #fff;
        box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
        border-radius: 30px;
        opacity: 1;
        transform: scale(1,1)
    }

    .midBlobWrap .starsWrap svg {
        margin: -1px 2px 0;
        opacity: 0
    }

    .midBlobWrap.active .starsWrap svg#star1 {
        animation-name: star1;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-duration: 1s;
        -webkit-animation-name: star1;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-duration: 1s
    }

@keyframes star1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes star1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.midBlobWrap.active .starsWrap svg#star2 {
    animation-name: star2;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: .3s;
    animation-duration: 1s;
    -webkit-animation-name: star2;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: .3s;
    -webkit-animation-duration: 1s
}

@keyframes star2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes star2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.midBlobWrap.active .starsWrap svg#star3 {
    animation-name: star3;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: 0.6s;
    animation-duration: 1s;
    -webkit-animation-name: star3;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0.6s;
    -webkit-animation-duration: 1s
}

@keyframes star3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes star3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.midBlobWrap.active .starsWrap svg#star4 {
    animation-name: star4;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: 0.9s;
    animation-duration: 1s;
    -webkit-animation-name: star4;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0.9s;
    -webkit-animation-duration: 1s
}

@keyframes star4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes star4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.midBlobWrap.active .starsWrap svg#star5 {
    animation-name: star5;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: 1.3s;
    animation-duration: 1s;
    -webkit-animation-name: star5;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.3s;
    -webkit-animation-duration: 1s
}

@keyframes star5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes star5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.midBlobWrap.active .starsWrap svg#star5 #path2 {
    animation-name: star5path2;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2.1s;
    animation-duration: 2s;
    -webkit-animation-name: star5path2;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2.1s;
    -webkit-animation-duration: 2s;
    opacity: 0
}

@keyframes star5path2 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

@-webkit-keyframes star5path2 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

.midBlobWrap.active .starsWrap svg#star5 #path3 {
    animation-name: star5path3;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2.2s;
    animation-duration: 2s;
    -webkit-animation-name: star5path3;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2.2s;
    -webkit-animation-duration: 2s;
    opacity: 0
}

@keyframes star5path3 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

@-webkit-keyframes star5path3 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

.midBlobWrap.active .starsWrap svg#star5 #path4 {
    animation-name: star5path4;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-duration: 2s;
    -webkit-animation-name: star5path4;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 2s;
    opacity: 0
}

@keyframes star5path4 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

@-webkit-keyframes star5path4 {
    0% {
        opacity: 0;
        transform: scale(0.8,0.8)
    }

    50% {
        opacity: 1;
        transform: scale(1,1)
    }
}

#lcqualitybadge svg {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.review-platforms a {
    transition: all 0.2s linear;
}

    .review-platforms a:hover {
        filter: grayscale(100);
    }

.review-platforms .img-fluid {
    max-width: 150px;
}

.otcReviewList div:last-child {
    margin-bottom: 0 !important;
}



/* ---------------------
    
    Active Banner above navigation and popup

--------------------- */
/*body.active-banner #topBanner {
    top: 0;
    transition: top 0.3s ease;
}
body.active-banner .header-wrap {
    top: 40px;
    transition: top 0.3s ease;
}
body.active-banner .header-shrink .header-wrap {
    top: 0;
}
body.active-banner #main {
    margin-top: 148px;
}
body.active-banner .header-shrink #topBanner {
    top:-40px;
}
.corona-modal-content-background {
    background: #fff url('https://prod-otc-cms-images-bucket.s3.amazonaws.com/corona-popup.png'); 
    background-position: top right;
    background-repeat: no-repeat;     
}

body.active-banner .modal-backdrop {
    z-index: 999999999;
}*/
/* Media screens for the banner/popup only */
/*@media screen and (max-width: 991px) {
    body .active-banner .offcanvas-collapse {
        top: 122px;
        transition: top 0.3s ease;
    }
    body.active-banner header.header-shrink .offcanvas-collapse {
        top: 82px;
    }
    body.active-banner #main {
        margin-top: 122px;
    }
    .corona-modal-content-background {
        background-position: 240px bottom;
    }
}
@media screen and (max-width:575px) {
    body.active-banner #topBanner {
        line-height: 16px;
        font-size: 13px;
        font-weight: 400;
    }
    body.active-banner .modal-body h4 {
        max-width: 320px;
    }
    .corona-modal-content-background {
        background-position: 240px 20px;
    }
}
@media screen and (max-width:415px) {
    .corona-modal-content-background {
        background-position: 189px 64px;
    }
}*/



/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1
}

    .owl-carousel .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        touch-action: manipulation;
        -moz-backface-visibility: hidden; /* fix firefox animation glitch */
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden; /* fix for flashing background */
        -webkit-transform: translate3d(0px,0px,0px)
    }

    .owl-carousel .owl-wrapper, .owl-carousel .owl-item {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0)
    }

    .owl-carousel .owl-item {
        position: relative;
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none
    }

        .owl-carousel .owl-item img {
            display: block;
            width: 100%
        }

    .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {
        display: none
    }

    .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {
        cursor: pointer;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel.owl-loaded {
        display: block
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block
    }

    .owl-carousel.owl-hidden {
        opacity: 0
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden
    }

    .owl-carousel.owl-drag .owl-item {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: grab
    }

    .owl-carousel.owl-rtl {
        direction: rtl
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right
        }
/* No Js */
.no-js .owl-carousel {
    display: block
}
/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
    animation-duration: 1000ms;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
/*
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
    transition: height 500ms ease-in-out
}

.owl-carousel .owl-item {
}

    .owl-carousel .owl-item .owl-lazy {
        opacity: 0;
        transition: opacity 400ms ease
    }

        .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
            max-height: 0
        }

    .owl-carousel .owl-item img.owl-lazy {
        transform-style: preserve-3d
    }
/*
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform 100ms ease
}

    .owl-carousel .owl-video-play-icon:hover {
        -ms-transform: scale(1.3,1.3);
        transform: scale(1.3,1.3)
    }

.owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 400ms ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}





/* ---------------------
    
    JS Popup message + google recaptcha

--------------------- */
.grecaptcha-badge {
    visibility: hidden;
}

.jsPopUpMessage {
    width: 600px;
    position: fixed;
    left: 50%;
    margin-left: -300px;
    top: 120px;
    font-size: 22px;
}



.jsPopUpMessageSuccess {
    background-color: #24b353;
}

    .jsPopUpMessageSuccess .jsPopUpMessageImage {
        width: 50px;
        height: 50px;
        margin-left: 50%;
        margin-right: 50%;
        background-repeat: no-repeat;
        background-image: url('');
    }



.jsPopUpMessageFailure {
    background-color: #ff130d;
}

    .jsPopUpMessageFailure .jsPopUpMessageImage {
        width: 50px;
        height: 50px;
        margin-left: 50%;
        margin-right: 50%;
        background-repeat: no-repeat;
        background-image: url('');
    }










/* ---------------------
    
    IE 9 and lower alert

--------------------- */
.alert.outdated {
    z-index: 99999;
    border-radius: 0;
}

.browser-compatibility-icons img {
    width: 55px;
    margin: 0 10px
}

.outdated button.close svg line {
    stroke: #262626
}

.outdated button.close {
    height: 50px;
    width: 50px;
    right: 20px;
    top: 20px;
    padding: 0;
    opacity: 1;
    font-size: 33px;
    border-radius: 50%;
    background-color: #fff
}

.outdated button.close:hover, .outdated button.close:active {
    background-color: #fff
}

.outdated button.close:hover svg line {
    stroke: #000bff
}


/* ----------

    Banner

---------- */
#ctl00_bannerMessage p {
    margin-bottom: 0 !important;
}

#ctl00_bannerMessage p a {
    color: #ffffff;
    text-decoration: underline;
}

/* ---------------------
    
    Target IE 10 & 11 

--------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modal-dialog-centered {
        height: 100%
    }

    .dropdown-menu.more {
        min-width: 630px
    }
}


/* ---------------------
    
    Media Queries 

--------------------- */

@media screen and (min-width:1726px) {
}

@media screen and (max-width:1725px) {
    img.mobile-time-card {
        margin-right: 67px
    }

    img.mobile-punch-locations {
        right: 174px
    }
    /*  How It Works  */
    .quickly-add-employees-1 {
        top: 190px;
        max-width: 89%
    }

    .quickly-add-employees-2 {
        max-width: 80%
    }

    .employees-punch-in-03 {
        right: 86px
    }

    .ring.ring-1 {
        width: 550px;
        height: 550px;
        top: 26px
    }

    .ring.ring-2 {
        width: 650px;
        height: 650px;
        top: -29px
    }

    .auto-calculation-img-01 {
        max-width: 84%
    }

    .auto-calculation-img-02 {
        max-width: 50%
    }

    .features-4-2 {
        right: -92px
    }

    .features-4-3 {
        right: -90px
    }

    .features-5-3 {
        max-width: 100%
    }

    .admin-login-label .user-icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-width:1479px) {
    .display-4 {
        font-size: 3.3rem!important;
        font-weight: 700!important;
        line-height: 1.2!important;
    }

    .padding-lr-100 {
        padding: 0 50px
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.1rem;
        padding-left: 1.1rem
    }

    .cta-btns a.btn {
        padding: 0.5rem 1rem
    }

    .intro-mobile {
        left: -4px;
        width: 240px
    }

    .intro-ipad {
        left: 73px;
        width: 397px
    }

    .intro-browser {
        right: -374px;
        width: 779px
    }

    .gps-information p, .payroll-information-wrap p, .mobile-app-information-wrap p, .pto-information p, #get-started p, #reviews p {
        font-size: 20px;
        line-height: 29px
    }

    .companies-wrap {
        padding: 150px 0 120px
    }

    #features-title {
        padding: 120px 0 80px
    }

    #divMapBody {
        height: 720px
    }

    .time-clock-integration-container {
        width: 590px
    }

    .time-clock svg {
        width: 590px;
        height: 600px
    }

    .clock-integration {
        z-index: 3;
        top: 180px;
        left: 179px
    }

    .partner-integrations {
        top: -11px;
        left: 19px
    }

        .partner-integrations img {
            width: 590px
        }

    .circle-1 {
        top: 70px
    }

    .circle-2 {
        bottom: 70px
    }

    img.mobile-punch-locations {
        right: 124px
    }

    img.mobile-time-card {
        margin-right: -79px
    }

    .review-people img {
        right: 252px;
        margin-top: -60px;
        max-width: 828px
    }
    /*  Signup Page  */
    /*.owl-signup .owl-item .row .d-block br {
            display: none
        }
        .signup-form-padding {
            padding: 50px 50px
        }*/
    /*  How It Works  */
    #how-it-works-list .list-group-item p {
        margin: 0 5px
    }

    #create-your-account img {
        max-width: 100%
    }

    .quickly-add-employees-1 {
        top: 173px
    }

    .ring.ring-1 {
        width: 500px;
        height: 500px;
        top: 21px
    }

    .ring.ring-2 {
        width: 570px;
        height: 570px;
        top: -13px
    }

    .employees-punch-in-02 {
        right: 73px;
        bottom: -67px
    }

    .employees-punch-in-03 {
        right: 216px;
        bottom: 17px
    }

    #how-it-works-list-pop {
        display: none
    }

    .user-types-title {
        padding-top: 30%
    }
    /*  Features  */
    #features-list .list-group-item {
        margin: 0 10px
    }

        #features-list .list-group-item a {
            padding: 20px 3px;
            font-size: 17px
        }

    #features-list .divider {
        right: -11px
    }

    .features-1-2 {
        left: -29px;
        max-width: 29%
    }

    .features-1-3 {
        max-width: 51%;
    }

    .features-1-1, .features-2-1, .features-2-2, .features-4-3, .features-6-1, .features-6-2 {
        max-width: 100%
    }

    .features-3-1 {
        max-width: 79%
    }

    .features-3-2 {
        left: 30px;
        bottom: 33px;
        max-width: 45%
    }

    .features-3-3 {
        max-width: 65%;
        top: 149px;
        right: 30px
    }

    .features-4-1 {
        max-width: 99%
    }

    .features-4-2 {
        max-width: 80%
    }

    .features-5-1 {
        max-width: 40%;
        right: 150px
    }

    .features-5-2 {
        max-width: 43%
    }

    .features-6-2 {
        margin-top: -151px
    }

    .intro-devices {
        margin-top: 231px
    }
}

@media screen and (max-width:1280px) {
    .what-we-offer-dropdown.dropdown-menu.show::before {
        left: 137px;
    }
    .resources-dropdown.dropdown-menu.show::before {
        left: 103px;
    }
    .dropdown-menu.show::before {
        right: 16px;
    }
    /*  Signup Page  */
    .signup .btn {
        padding: 0.5rem 1.5rem
    }

    .quickly-add-employees-1 {
        top: 166px
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.7rem;
        padding-left: 0.7rem
    }

    .btn.search-btn {
        margin-right: 13px !important
    }
}

@media screen and (max-width:1199px) {
    .padding-top-120 {
        padding-top: 90px;
    }

    .padding-bottom-120 {
        padding-bottom: 90px;
    }

    .padding-top-100 {
        padding-top: 70px;
    }

    .padding-bottom-100 {
        padding-bottom: 70px;
    }

    .py-120 {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .py-100 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .35rem;
        padding-left: .35rem;
        font-size: 15px
    }

    #navbarDropdownMeet.dropdown-toggle::after {
        margin-left: 0px
    }
    .dropdown-toggle::after {
        margin-left: 1px;
    }
    .what-we-offer-dropdown {
        max-width: 670px!important;
        width: 670px!important;
    }
        .what-we-offer-dropdown.dropdown-menu.show::before {
            left: 102px;
        }
    .nav-item.show a::after {
        top: 12px;
    }
    .resources-dropdown.dropdown-menu.show::before {
        left: 75px;
    }
    .dropdown-menu.show::before {
        right: 9px;
    }
    .btn.search-btn {
        margin-right: 5px !important;
        margin-left: 0px !important
    }

    .pre-footer-wrap {
        padding: 40px 0
    }

    h1, .h1 {
        font-size: 2.7rem
    }
    /*.pt-4,.py-4{padding-top:1rem!important}*/
    .lead {
        font-size: 1.1rem;
        font-weight: 400
    }

    .display-4 {
        font-size: 2.5rem!important;
    }

    .padding-120, .padding-100 {
        padding: 80px 0
    }

    .intro-devices {
        margin-bottom: -93px;
        margin-top: 200px
    }

    .intro-mobile {
        left: -5px;
        width: 186px;
        bottom: 20px
    }

    .intro-ipad {
        left: 51px;
        width: 307px;
        bottom: 29px
    }

    .intro-browser {
        right: -236px;
        width: 593px;
        bottom: 41px
    }

    .intro-buttons a.btn {
        padding: 0.6rem 1.5rem
    }

    .companies-wrap {
        padding: 110px 0 90px
    }

    #features-title {
        padding: 100px 0 80px
    }

    .punch-map-log-wrap {
        width: 75%;
        top: 46%
    }

    #divMapBody {
        height: 620px
    }

    .time-clock-integration-container {
        width: 470px
    }

    .time-clock svg {
        width: 470px;
        height: 480px
    }

    .circle-1 {
        top: 40px
    }

    .clock-integration {
        top: 150px;
        left: 142px
    }

        .clock-integration svg {
            width: 170px;
            height: 170px
        }

    .circle-2 {
        bottom: 30px
    }

    .partner-integrations img {
        width: 470px
    }

    .circle-3 {
        right: -30px;
        top: -23px;
        width: 15px;
        height: 15px
    }

    .circle-4 {
        top: -12px;
        right: 70px
    }

    .circle-5 {
        bottom: 36px;
        right: 30px;
        width: 11px;
        height: 11px
    }

    img.mobile-time-card {
        margin-right: 5px;
        width: 232px
    }

    img.mobile-punch-locations {
        right: 134px;
        width: 234px
    }

    img.mobile-punch-clock {
        right: -37px;
        width: 308px
    }

    .pto-tracking-wrap {
        padding: 80px 0 0
    }

    .pto-left img {
        width: 490px
    }

    .pto-middle img {
        width: 630px
    }

    .pto-right img {
        width: 490px
    }

    .get-started-wrap {
        padding: 100px 0
    }

    #reviews .owl-testimonials {
        margin-top: 34px
    }

    /*.owl-testimonials .owl-item {
        height: 15.5rem
    }*/

    .owl-item p {
        letter-spacing: 0 !important;
        font-size: 18px !important;
    }

    .review-people img {
        right: 230px;
        margin-top: -20px;
        max-width: 698px
    }

    footer h6, footer .h6 {
        font-size: 1rem;
        font-weight: 400
    }

    .available-apple {
        width: 30px
    }

    .available-play {
        width: 32px
    }

    .available-mobile {
        width: 23px
    }

    .available-tablet {
        width: 32px
    }

    .available-browser {
        width: 36px
    }

    #blog-posts .card {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: .5rem
    }

        #blog-posts .card a {
            position: relative;
            max-height: 240px;
            overflow: hidden
        }

    #blog-posts .card-img-top {
        border-top-left-radius: calc(0.50rem - 0px);
        border-top-right-radius: calc(0.50rem - 0px)
    }

    #blog-posts .card-body {
        padding: 1.25rem
    }

    #blog-posts .post {
        padding-bottom: 2rem
    }
    /*  Signup Page  */
    .signup .btn {
        padding: 0.4rem 1.4rem;
        font-size: 1rem
    }

    .owl-signup .btn {
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }

    .signup .col-xl-12.text-center.pb-5.pt-5.mt-3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 10px !important
    }

    .signup .form-group {
        margin-bottom: 14px !important
    }

    .signup .signup-padding .bottom-item {
        margin-top: 30px;
    }
    /* Pricing */
    .pricing-details-wrap h2 {
        font-size: 2.1rem
    }

    .whats-included-wrap .row .col-xl-4 .bg-white {
        padding-top: 23px !important;
        padding-bottom: 13px !important
    }

    .whats-included-wrap .icon {
        margin-bottom: 5px !important
    }

    .whats-included-wrap h6.mt-4 {
        margin-top: 10px !important
    }

    .whats-included-wrap .three {
        margin-top: 24px
    }

    .pricing-discounts-wrap .branches svg {
        width: 446px
    }
    /* How It Works */
    #how-it-works-list .list-group-item {
        padding: 10px
    }

    .quickly-add-employees-1 {
        top: 159px
    }

    .ring.ring-1 {
        width: 360px;
        height: 360px;
        top: 41px
    }

    .ring.ring-2 {
        width: 440px;
        height: 440px;
        top: -7px
    }

    .employees-punch-in-01 {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: -66px;
        max-width: 51%
    }

    .employees-punch-in-02 {
        right: 73px;
        bottom: -67px;
        max-width: 78%
    }

    .employees-punch-in-03 {
        max-width: 100%;
        right: 236px;
        bottom: 12px
    }

    .user-types-title {
        padding: 67px 60px 0 0
    }

    .manager, .employee {
        margin-top: 30px
    }
    /* Features */
    #features-list .list-group-item {
        margin: 0
    }

    #features-list .divider {
        display: none
    }

    #features-list .list-group-item a {
        padding: 20px 0px
    }

    .features-4-2 {
        right: -22px
    }

    .features-4-3 {
        right: -60px;
        bottom: 150px
    }

    .features-list li {
        padding: 10px 0 10px 25px
    }
    /* Meet Us Page */
    .show-more-arrow {
        width: 45px;
        height: 45px;
        line-height: 49px
    }

    .team-member-title br {
        display: inline-block
    }

    .team-member-name {
        font-size: 28px
    }
    /* Login */
    .cta-btns a.btn {
        padding: 0.15rem 0.35rem
    }

    /*  Reviews Page  */
    .review-platforms .img-fluid {
        max-width: 125px;
    }
}

@media screen and (max-width:991px) {
    .padding-top-120 {
        padding-top: 70px;
    }

    .padding-bottom-120 {
        padding-bottom: 70px;
    }

    .padding-top-100 {
        padding-top: 50px;
    }

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

    .py-120 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .py-100 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /*  Defaults CSS  */
    h1, .h1 {
        font-size: 2.2rem;
        line-height: 2.2rem
    }

    h2, .h2 {
        font-size: 1.8rem
    }

    .padding-120, .padding-100 {
        padding: 60px 0
    }
    /*  Get rid of some things  */
    .intro p.lead br, .dropdown-menu h6, .dropdown-divider, .dropdown-menu.meet-us::before, .dropdown-menu.show::before, nav .cta-btns, .owl-testimonials .owl-nav {
        display: none
    }
    /*  Navigation  */
    .header-wrap {
        box-shadow: none;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        z-index: 999999999
    }

    .header-shrink .header-wrap {
        box-shadow: 0 0 16px 0 rgba(0,0,0,0.06);
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem
    }

    .navbar-nav {
        max-height: 400px;
        overflow-x: auto;
        position: relative;
        z-index: 1
    }

    .navbar-brand {
        flex: 1
    }

    .search {
        display: none !important
    }

    .nav-link {
        font-size: 1.3rem !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #f3f3f3
    }

    .dropdown-menu {
        padding: 0;
        margin: 0;
        font-size: 1rem;
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    .dropdown-item {
        padding: 1rem;
        color: #8b8b8b;
        border-bottom: 1px solid #f3f3f3;
        font-size: 1.1rem
    }

    .dropdown-toggle::after {
        margin-left: 8px;
        top: -2px;
        width: 14px;
        height: 8px;
        content: url("../images/arrow-down-m.svg")
    }

    .nav-item.dropdown.show .dropdown-toggle::after {
        top: 15px
    }
    .what-we-offer-dropdown, .contactus-dropdown {
        max-width: 100% !important;
        width: 100% !important;
    }

    .contactus-dropdown a, .what-we-offer-dropdown a, .what-we-offer-bottom-title a h5 {
        border-bottom:1px solid #efefef;
    }
        .contactus-dropdown a span.text-dark, .what-we-offer-dropdown a span.text-dark, .what-we-offer-bottom-title a h5 {
            font-weight: 400!important;
            color: #8b8b8b !important;
            font-size:1rem
        }
        .contactus-dropdown a:hover span.text-dark, .contactus-dropdown a:active span.text-dark, .what-we-offer-dropdown a:hover span.text-dark, .what-we-offer-dropdown a:active span.text-dark, .what-we-offer-bottom-title a:hover h5, .what-we-offer-bottom-title a:active h5 {
            color: #ff621a !important;
        }
    .all-features-btn {
        border-top: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-bottom: 1px solid #efefef !important;
        color: #8b8b8b !important;
        font-weight: 400;
        background-color: transparent !important;
        font-size: 1rem;
        text-align: left;
        border-radius: 0;
        padding: 1rem 0;
        line-height: 1.4;
    }
    .all-features-btn:hover {
        background-color:transparent!important;
        text-decoration:underline;
    }
        .all-features-btn:not(:disabled):not(.disabled):active:focus, .all-features-btn:not(:disabled):not(.disabled).active:focus,
        .show > .all-features-btn.dropdown-toggle:focus {
            box-shadow:none;
        }
        .all-features-btn:focus {
            box-shadow:none;
        }
    

    /*  Login / Try free mobile buttons inside nav  */
    .cta-btns-mobile {
        padding: 20px 0 70px;
        position: relative;
        width: 100%;
        text-align: center;
        z-index: 2;
        background-color: #fff
    }

        .cta-btns-mobile .btn {
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            font-size: 1.2rem
        }

    .login-btn svg {
        width: 18px;
        height: 18px
    }

    .group.login-btn svg {
        width: 23px;
        height: 23px
    }
    /*  Bring in mobile nav on navbar-toggler  */
    .offcanvas-collapse {
        position: fixed;
        top: 82px;
        bottom: 0;
        right: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: #fff;
        transition-timing-function: ease-in-out;
        transition-duration: .3s;
        transition-property: right,visibility
    }

        .offcanvas-collapse.open {
            right: 0;
            visibility: visible
        }
    /*  Hamburger Icon effect  */
    .navbar-toggler span {
        width: 22px;
        height: 4px;
        position: relative;
        display: block;
        margin-bottom: 3px;
        background-color: #8b8b8b;
        border-radius: 3px;
        transition: all .2s linear;
        top: 0
    }

    .navbar-toggler .line-3 {
        margin-bottom: 0
    }

    .navbar-toggler:hover span {
        background-color: #515151
    }

    .navbar-toggler:active span {
        background-color: #262626
    }

    .navbar-toggler.open .line-2 {
        opacity: 0
    }

    .navbar-toggler.open .line-1 {
        transform: rotate(45deg);
        top: 8px;
        background-color: #262626
    }

    .navbar-toggler.open .line-3 {
        transform: rotate(-45deg);
        top: -6px;
        background-color: #262626
    }
    /*  full nav compressed down  */
    .navbar-nav .d-flex {
        flex-wrap: wrap
    }

    .navbar-nav .col-auto.ml-3, .navbar-nav .col-auto.ml-4, .navbar-nav .col.ml-4 {
        margin: 0 !important
    }

    .dropdown-menu .col-auto, .dropdown-menu .col {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%
    }

    .navbar-nav .dropdown-menu {
        min-width: 100%
    }
    /*  Begin Specific Layout items  */
    #main {
        margin-top: 82px
    }

    .container.intro {
        margin-top: -30px;
    }

    .intro-devices {
        margin-bottom: -61px;
        margin-top: 200px;
    }

    .intro-mobile {
        width: 146px
    }

    .intro-ipad {
        left: 36px;
        width: 237px
    }

    .intro-browser {
        right: -248px;
        width: 454px
    }

    #features-title {
        padding: 80px 0
    }

    .gps-information p, .payroll-information-wrap p, .mobile-app-information-wrap p, .pto-information p, #get-started p, #reviews p {
        font-size: 1rem;
        line-height: 24px
    }

    #divMapBody {
        height: 490px
    }

    .punch-map-log-wrap {
        height: 360px;
        top: 59%
    }

    .time-clock-integration-container {
        width: 365px
    }

    .time-clock svg {
        width: 365px;
        height: 375px
    }

    .circle-1 {
        top: 20px;
        width: 8px;
        height: 8px
    }

    .clock-integration {
        top: 115px;
        left: 112px
    }

        .clock-integration svg {
            width: 130px;
            height: 130px
        }

    .partner-integrations img {
        width: 365px
    }

    .circle-2 {
        bottom: 30px;
        width: 5px;
        height: 5px
    }

    .circle-4 {
        top: 18px;
        right: 21px
    }

    .circle-3 {
        top: 7px;
        width: 8px;
        height: 8px
    }

    .circle-5 {
        right: 30px;
        width: 8px;
        height: 8px
    }
    /*.mt-4,.my-4{margin-top:1rem!important}*/
    img.mobile-punch-locations {
        right: 128px;
        width: 204px;
        margin-top: 100px;
        margin-bottom: 100px
    }

    img.mobile-time-card {
        margin-right: 0;
        width: 202px;
        left: 20px;
        right: 0;
        position: absolute;
        margin-top: 95px
    }

    img.mobile-punch-clock {
        right: -37px;
        width: 258px;
        padding-top: 40px
    }

    .get-started-wrap {
        padding: 80px 0
    }

    .reviews-wrap {
        padding: 80px 0 0
    }
    #reviews .owl-testimonials {
        margin-top: 4px;
    }
    .owl-item p {
        font-size: 16px !important;
        line-height:22px;
    }

    .review-btns a.btn {
        padding: 0.3rem 1rem;
        font-size: 16px
    }

    .review-people img {
        right: 279px;
        margin-top: -10px;
        max-width: 637px
    }

    #blog-posts .blog-posts-wrap {
        padding: 100px 0 70px
    }

    .footer-navigation .col.mobile-split {
        flex: 0 50%;
        margin-bottom: 40px
    }

    #pto-tracking {
        overflow: hidden
    }

    .pto-screens {
        margin-bottom: -102px
    }

    .pto-screens-wrap {
        margin: 26px auto 0
    }

    .pto-middle img {
        width: 460px;
        margin: -43px auto 0
    }

    .pto-left img {
        width: 360px
    }

    .pto-right img {
        width: 360px
    }

    .footer-navigation h5 {
        position: relative;
        cursor: pointer;
        border-bottom: 1px solid #e6e6e6;
        padding: 18px 0;
        margin: 0
    }

        .footer-navigation h5.open {
            color: #262626
        }

        .footer-navigation h5:after {
            position: absolute;
            opacity: .5;
            line-height: 1;
            right: 0;
            top: 17px;
            width: 14px;
            height: 8px;
            content: url("../images/arrow-down-m.svg")
        }

        .footer-navigation h5:hover {
            color: #8b8b8b
        }

        .footer-navigation h5.open:hover {
            color: #262626
        }

    .footer-contact-title.open:after, .footer-product-title.open:after, .footer-company-title.open:after, .footer-support-title.open:after, .footer-resources-title.open:after {
        opacity: 1;
        transform: rotateX(180deg);
        top: 34px
    }

    .footer-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
        height: 0;
        overflow: hidden
    }

        .footer-navigation ul.open {
            height: 100%;
            overflow: hidden
        }

        .footer-navigation ul li {
            border-bottom: 1px solid #e6e6e6
        }

            .footer-navigation ul li a {
                padding: 15px 0;
                font-size: 1.1rem
            }
    /*  Signup Page  */
    .signup-wrap {
        flex-direction: column-reverse
    }

    .signup-padding {
        padding: 20px 0px 40px
    }

    .signup .col-lg-6.d-flex {
        margin-top: 50px;
        margin-bottom: 50px
    }

    .owl-signup h1 br {
        display: none
    }

    .owl-signup .bottom-item {
        margin-top: 30px
    }

    .owl-signup .owl-dots {
        bottom: -24px
    }

    .signup-form-padding form .form-row.mb-5 {
        margin-bottom: 0px !important
    }

    .pricing-details-wrap {
        padding-top: 130px;
        padding-bottom: 80px
    }

    .whats-included-wrap .col-12 {
        flex-direction: column;
        align-items: flex-start !important
    }

    .whats-included-wrap .row .col-12.d-flex a {
        margin-left: 0 !important;
        margin-bottom: 20px
    }

    .whats-included-wrap .row .col-xl-4 .bg-white {
        padding-top: 30px !important;
        padding-bottom: 20px !important
    }

    .whats-included-wrap .icon {
        margin-bottom: 10px !important
    }

    .whats-included-wrap h6.mt-4 {
        margin-top: 11px !important
    }

    .whats-included-wrap .row .three {
        margin-top: 24px
    }

    .pricing-discounts .row.branches {
        margin-top: -156px
    }

    .pricing-discounts .branches svg {
        width: 325px
    }

    .discounts-atn {
        margin-top: 0 !important
    }
    /* How It Works */
    #how-it-works-list .list-group-item {
        padding: 0px
    }

    #how-it-works-list.list-group a::after {
        content: ""
    }

    #how-it-works-list .list-group-item p {
        font-size: 16px;
        padding: 40px 0px;
    }

    .how-it-works-bullets li {
        font-size: 22px;
        line-height: 22px
    }

        .how-it-works-bullets li span {
            font-size: 20px
        }

    .how-it-works-number-title {
        font-size: 52px;
    }

    .add-employees-imgs div, .auto-calc-imgs {
        padding: 0 !important;
        margin: 40px 0 !important
    }

    .quickly-add-employees-1 {
        top: 93px;
        max-width: 91%
    }

    .quickly-add-employees-2 {
        max-width: 81%
    }

    .ring.ring-1 {
        width: 280px;
        height: 280px;
        top: 20px
    }

    .ring.ring-2 {
        width: 320px;
        height: 320px;
        top: 1px
    }

    .employees-punch-in-03 {
        max-width: 100%;
        right: 176px;
        bottom: -2px
    }
    /* Features */
    .features-intro p.lead br {
        display: none
    }

    #features-list {
        flex-direction: row;
        flex-wrap: wrap
    }

        #features-list .list-group-item {
            text-align: left;
            margin: 0 auto;
            width: 50%
        }

            #features-list .list-group-item a {
                padding: 15px;
                margin: 2px;
                align-items: center;
                display: flex
            }

                #features-list .line-sep-sq, #features-list .list-group-item a span.d-block br {
                    display: none !important
                }

            #features-list .list-group-item span.d-block {
                display: inline-block !important;
                text-align: left;
                margin-left: 15px;
            }

        #features-list a img {
            width: 35px
        }

        #features-list .list-group-item a:hover {
            transform: scale(1,1)
        }

    #for-your-employees .pt-5.pb-5.mt-5.mb-5, #mobile-online .pt-5.pb-5.mt-5.mb-5 {
        padding: 0 !important
    }

    .features-1-3 {
        right: 28px;
        top: 105px
    }

    .features-2-1 {
        top: 0;
        left: -20px
    }

    .features-3-1 {
        margin: -10px auto
    }

    .features-3-2 {
        bottom: 22px
    }

    .features-3-3 {
        top: 89px;
        right: 20px
    }

    .features-5-1 {
        right: 130px;
        top: 86px
    }

    .features-5-2 {
        top: 64px
    }

    #tools-for-your-business .pt-5.pb-5 {
        padding: 0 !important
    }

    .features-6-1 {
        max-width: 79%
    }

    #tools-for-your-business ul li::before {
        top: 7px
    }
    /*  Reviews Page  */
    .review-platforms .img-fluid {
        max-width: 91px;
    }

    .rating-reviews-title h1 {
        font-size: 79px;
    }
}

@media screen and (max-width:850px) {
    img.mobile-punch-locations {
        right: 88px;
        width: 204px;
        margin-top: 100px;
        margin-bottom: 100px
    }
}

@media screen and (max-width:767px) {
    .padding-top-120 {
        padding-top: 50px;
    }

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

    .padding-top-100 {
        padding-top: 40px;
    }

    .padding-bottom-100 {
        padding-bottom: 40px;
    }

    .py-120 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .py-100 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    h1, .h1 {
        font-size: 2rem
    }

    h2, .h2 {
        font-size: 1.6rem
    }

    .padding-120, .padding-100 {
        padding: 50px 0
    }

    .intro {
        overflow-x: hidden;
        max-width: 100%;
        margin-top: 0;
    }

        .intro .row {
            flex-direction: column-reverse
        }

        .intro .col-lg-5 {
            text-align: center;
            padding-bottom: 50px
        }

    .intro-devices {
        margin-bottom: 20px;
        padding-top: 150px;
        margin-top: 0
    }

    .intro-mobile {
        width: 158px;
        bottom: 0;
        left: 88px
    }

    .intro-ipad {
        left: 155px;
        width: 259px;
        bottom: 9px
    }

    .intro-browser {
        right: 0;
        width: 497px;
        bottom: 23px;
        left: 275px
    }

    .display-4 {
        font-size: 2.1rem!important;
        line-height: 2.4rem !important;
        margin-bottom: 0
    }

    .intro-buttons {
        padding-top: 0 !important
    }

        a.next-section, .intro-buttons a.btn-secondary, .circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .review-people {
            display: none
        }

    .companies-wrap {
        padding: 50px 0 60px
    }

    #companies a.btn {
        box-shadow: 0 8px 11px 4px rgba(0,0,0,0.1)
    }

    #features-title {
        padding: 40px 0 20px;
        border-bottom: 1px solid #eee;
        margin-bottom: 40px
    }

    .gps-information, .payroll-information, .mobile-app-information {
        text-align: center
    }

    .view-features-btn-wrap a.btn {
        margin-top: 10px !important
    }

    #gps-location .row.no-gutters, #mobile-apps .row.no-gutters {
        flex-direction: column-reverse
    }

    .gps-information {
        margin-bottom: 40px
    }

    .payroll-integration-wrap {
        padding: 50px 0 40px;
        border-bottom: 1px solid #eee;
        margin-bottom: 40px
    }

    .time-clock-integration-container {
        width: 100%;
        text-align: center;
        margin-top: 20px
    }

    .time-clock svg {
        width: 527px;
        height: 531px
    }

    .clock-integration {
        top: 171px;
        left: 0;
        right: 0;
        margin-left: -27px
    }

        .clock-integration svg {
            width: 180px;
            height: 180px
        }

    .partner-integrations {
        top: -8px;
        left: 0;
        right: 0;
        margin-left: 22px
    }

        .partner-integrations img {
            width: 530px
        }

    .companies-wrap .owl-companies {
        margin-top: 0 !important;
        padding-top: 0 !important
    }

    #companies p, #features-title p {
        font-size: 1.3rem
    }

    .mobile-screens {
        position: relative;
        text-align: center !important;
        background-color: transparent
    }

    img.mobile-time-card {
        width: 252px;
        box-shadow: 0 8px 19px 0 rgba(0,0,0,0.1);
        margin-top: 65px
    }

    img.mobile-punch-locations {
        right: -5px;
        width: 254px;
        margin-top: 70px;
        margin-bottom: 70px;
        box-shadow: 0 8px 19px 0 rgba(0,0,0,0.1)
    }

    img.mobile-punch-clock {
        right: 10px;
        width: 278px;
        padding-top: 34px
    }

    .pto-screens {
        margin-bottom: -50px
    }

    .pto-left img {
        width: 220px
    }

    .pto-middle img {
        width: 310px
    }

    .pto-right img {
        width: 220px
    }

    .pto-tracking-wrap {
        padding: 50px 0 0
    }

    .get-started-wrap {
        padding: 50px 0
    }

    .reviews-wrap {
        padding: 50px 0 0
    }

    .reviews-quote {
        width: 100%;
        flex: 0 0 100% !important;
        max-width: 100%;
        margin-bottom: 60px;
        text-align: center
    }

    #reviews .owl-testimonials {
        margin-top: 4px
    }

    /*.owl-testimonials .owl-item {
        height: 10.5rem
    }*/

    #blog-posts .blog-posts-wrap {
        padding: 50px 0 30px
    }

    #blog-posts h1 {
        line-height: 2.2rem
    }

    #blog-posts .container .row .col-6 a.btn.btn-secondary {
        margin-top: 10px
    }

    #blog-posts .row.pt-5.mt-2 {
        margin-top: 0 !important;
        padding-top: 25px !important
    }

    #blog-posts .post {
        padding-bottom: 2rem;
        max-width: 100%;
        flex: 0 0 100%
    }

        #blog-posts .post a img {
            width: 100%
        }

    .copyright {
        text-align: center;
        order: 2
    }

    .made-with-love {
        margin: 0 auto 6px;
        order: 1
    }

    .footer-extras {
        text-align: center !important;
        padding: 10px 0px 40px
    }

        .footer-extras ul li a {
            padding: 0 20px;
            font-size: 1.3rem;
            font-weight: 500
        }

    .footer-navigation .col {
        max-width: 50%;
        width: 100%;
        margin-bottom: 0 !important;
        flex: 0 0 100%
    }

    #back-to-top {
        bottom: -65px;
        right: 20px;
        width: 45px;
        height: 45px;
        line-height: 53px
    }

        #back-to-top.visible {
            bottom: 78px
        }

    /*  Signup Page  */
    /*.signup-form-padding {
            padding: 50px 0px
        }*/

    .signup-submit .form-group {
        width: 50% !important
    }

    .signup .signup-padding .bottom-item {
        margin-top: 20px
    }

    .whats-included-wrap .col-12 {
        flex-direction: column;
        align-items: center !important
    }

    .pricing .p-5.text-center.rounded {
        padding: 0 !important
    }

    .pricing-breakdown {
        margin-top: 50px
    }

    #pricingFaqAccordion .card-header button .plus-close {
        display: none
    }

    .card-header h5 button {
        font-size: 16px;
        word-wrap: break-word;
        white-space: normal;
        border-radius: 0 !important
    }

    .pricing-get-started {
        text-align: center
    }

        .pricing-get-started .text-right {
            text-align: center !important;
            margin-top: 15px !important
        }

    .pricing-discounts .row.branches {
        display: none
    }

    .pricing-discounts .col-12.item {
        margin-top: 50px
    }

    .pricing-discounts-wrap .item-wrap h4.mt-4 {
        font-size: 1.1rem
    }
    /* How It Works */
    #how-it-works-list.list-group {
        margin-top: 30px;
        flex-wrap: wrap
    }

    .list-group-item-action {
        width: 50%
    }

    #how-it-works-list .list-group-item {
        margin-top: 20px
    }

        #how-it-works-list .list-group-item p {
            padding: 20px 10px
        }

    .how-it-works-intro .lead.pt-2 br {
        display: none
    }

    #create-your-account, #employees-punch-in-out {
        flex-direction: column
    }

        #create-your-account .pt-5.pb-5 {
            padding: 0 !important;
            margin-bottom: -30px
        }

    #add-employees, #auto-calculate-time-cards {
        flex-direction: column-reverse;
        margin-top: 70px
    }

    .add-employees-imgs {
        margin-top: 0;
        margin-bottom: 40px
    }

    .employees-punch-in-out-img-wrap {
        margin: 90px auto 22px
    }

    #auto-calculate-time-cards .col-lg-6.col-md-6.col-sm-12 {
        margin-bottom: 40px
    }

    .user-types-title {
        padding: 107px 30px 0 0
    }

    .rings, #auto-calculate-time-cards h2 br {
        display: none
    }

    .quickly-add-employees-1 {
        top: 111px
    }

    .quickly-add-employees-2 {
        max-width: 85%
    }

    .employees-punch-in-01 {
        max-width: 44%
    }

    .employees-punch-in-02 {
        bottom: -60px;
        max-width: 61%
    }

    .employees-punch-in-03 {
        right: 16px;
        bottom: 19px;
        max-width: 79%
    }

    h3, .h3 {
        font-size: 1.5rem;
        font-weight: 700
    }
    /* Features */
    #features-list .list-group-item span.d-block {
        font-size: 14px
    }

    #for-your-employees, #payroll-project-reporting {
        flex-direction: column;
        margin-bottom: 80px
    }

    #whos-in-page, #paid-time-off-pto {
        flex-direction: column-reverse;
        margin-bottom: 70px
    }

    #for-your-employees h2 {
        margin-top: 40px
    }

    .add-employees-imgs div, .auto-calc-imgs {
        margin: 15px 0 !important
    }

    #whos-in-page .whos-in-imgs .pt-5.pb-5.mt-5.mb-5, #paid-time-off-pto .pt-5.pb-5.mt-5.mb-5 {
        padding: 0 !important;
        margin: 0 !important
    }

    #whos-in-page h2 {
        margin-top: 10px
    }

    #payroll-project-reporting h2, #mobile-online h2 {
        margin-top: 34px
    }

    .features-3-1 {
        margin: 20px auto
    }

    .features-3-2 {
        bottom: 32px;
        left: 20px
    }

    .features-4-1 {
        margin-bottom: 180px;
        margin-top: 0
    }

    .features-4-2 {
        top: 103px
    }

    .features-4-3 {
        right: -120px;
        bottom: 35px
    }

    #tools-for-your-business ul li::before {
        content: "";
        display: none;
        width: 0;
        height: 0
    }

    #tools-for-your-business .padding-120 {
        display: flex;
        flex-direction: column-reverse
    }

    .features-6-2 {
        margin-top: -31px;
        margin-bottom: 35px
    }

    .all-features h1.mb-5 {
        margin-bottom: 15px !important
    }

    #paid-time-off-pto {
        overflow: hidden
    }

    #auto-calculate-time-cards {
        border-bottom: 1px solid #ddd
    }

    #tools-for-your-business {
        margin-top: 60px;
        border-top: 1px solid #ddd
    }
    /* Login */
    .admin-login-label .user-icon {
        top: 0
    }

    .admin-login-label .user-icon {
        width: 35px;
        height: 35px
    }

    .admin-login .badge {
        right: 20px;
        top: 22px;
        left: auto
    }

    .emp-login-btns input {
        width: 100%
    }

    /*  Reviews Page  */
    .review-platforms .img-fluid {
        max-width: 120px;
    }

    #lcqualitybadge svg {
        width: 120px !important;
    }


    .review-btns a.btn {
        padding: 0.6rem 2.3rem;
        font-size: 18px
    }
}

@media screen and (max-width:575px) {
    .intro-devices {
        margin-bottom: 20px;
        margin-top: 0;
        padding-top: 134px
    }

    .intro-mobile {
        width: 140px;
        bottom: 0;
        left: -14px
    }

    .intro-ipad {
        left: 46px;
        width: 228px;
        bottom: 9px
    }

    .intro-browser {
        right: 0;
        width: 438px;
        bottom: 23px;
        left: 146px
    }

    .time-clock svg {
        width: 336px;
        height: 340px
    }

    .clock-integration {
        top: 112px;
        left: 0;
        right: 0;
        margin-left: -20px
    }

        .clock-integration svg {
            width: 110px;
            height: 110px
        }

    .partner-integrations img {
        width: 340px
    }

    .mobile-screens {
        margin-top: 10px
    }

    img.mobile-time-card {
        width: 196px;
        margin-top: 53px
    }

    img.mobile-punch-locations {
        width: 191px;
        margin-top: 65px;
        margin-bottom: 93px
    }

    img.mobile-punch-clock {
        right: 10px;
        width: 218px;
        padding-top: 30px
    }

    .pto-screens {
        margin-bottom: -28px;
        padding-top: 30px !important;
        overflow: hidden
    }

    .pto-left img {
        left: 20px;
        width: 180px
    }

    .pto-middle img {
        width: 244px;
        margin: -27px auto 0
    }

    .pto-right img {
        right: 20px;
        width: 180px
    }

    .get-started-wrap {
        padding: 50px 31px
    }

    /*.owl-testimonials .owl-item {
        height: 12rem
    }*/

    #blog-posts .blog-posts-wrap .container .row .col-6 {
        text-align: center !important
    }

    #blog-posts .row .col-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%
    }

    .available-browser {
        width: 30px;
        height: 26px
    }

    .available-tablet {
        width: 26px;
        height: 31px
    }

    .available-mobile {
        width: 19px;
        height: 31px;
        margin-right: 12px
    }

    .available-play {
        width: 26px;
        height: 28px
    }

    .available-apple {
        width: 25px;
        height: 31px;
        margin-right: 6px
    }

    .footer-navigation .col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100% !important
    }

    .social-btns a {
        margin-right: 0 !important
    }

    .footer-navigation {
        padding-bottom: 35px !important;
        padding-top: 35px !important
    }

    .pre-footer-wrap .item-text span {
        display: none
    }

    .padding-lr-100 {
        padding: 0 20px
    }
    /*  Signup Page  */
    .signup .col-xs-6.col-sm-6.col-md-6.col-lg-6.col-xl-3 {
        width: 50%
    }

    .signup-submit .form-group {
        width: 100% !important;
        text-align: center !important
    }

    .pricing-details-wrap {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .calculated-price-info {
        padding-top: 0 !important
    }

    .pricing-wrap h1.display-4 {
        margin-top: 0 !important
    }

    .get-started-pricing-btns {
        height: inherit;
        bottom: inherit;
        margin-bottom: 50px;
        overflow: visible;
        border-radius: 0 0 10px 10px;
        flex-direction: column;
        background-color: transparent
    }

    .pricing-btn {
        width: 100%
    }

        .pricing-btn.left {
            border-radius: 40px 40px
        }

        .pricing-btn.right {
            border-radius: 40px 40px
        }

    .pricing-discounts-wrap .col-12.item {
        margin-top: 0
    }

    .pricing-discounts-wrap .item-2 {
        margin-top: 30px;
        margin-bottom: 30px
    }

    .discounts-atn {
        margin-top: 31px !important
    }
    /* How It Works */
    #how-it-works-list.list-group {
        margin-top: 20px
    }

    #how-it-works-list .list-group-item {
        margin-top: 4px
    }

        #how-it-works-list .list-group-item:hover p {
            transform: none
        }

        #how-it-works-list .list-group-item span.number {
            text-align: center !important
        }

    .user-types-title {
        padding: 0 0 40px;
        text-align: center
    }

    .quickly-add-employees-1 {
        top: 105px;
        max-width: 96%
    }

    .quickly-add-employees-2 {
        max-width: 90%
    }

    .how-it-works-number-title {
        font-size: 44px
    }

    .user-types .admin, .user-types .manager, .user-types .employee {
        text-align: center
    }

    .get-started-pricing-btns {
        box-shadow: none
    }

    .pricing-btn.right {
        margin-top: 20px
    }

    .employees-punch-in-03 {
        bottom: -1px;
        max-width: 79%
    }

    .employees-punch-in-out-img-wrap {
        margin: 90px auto 42px
    }

    #create-your-account .pt-5.pb-5 {
        margin-bottom: 0
    }
    /* Features */
    #features-list {
        margin-top: 20px
    }

        #features-list .list-group-item {
            width: 100%
        }

            #features-list .list-group-item a {
                padding: 15px 15px
            }

            #features-list .list-group-item span.d-block {
                font-size: 16px
            }

            #features-list .list-group-item a span.d-block br {
                display: none !important
            }

    .features-1-3 {
        top: 85px
    }

    .features-4-1 {
        margin-bottom: 150px
    }

    .features-4-2 {
        top: 93px
    }

    .features-4-3 {
        right: -23px
    }

    .quickly-add-employees-1 {
        top: 65px
    }
}

@media screen and (max-width:415px) {
    .intro-devices {
        margin-bottom: 10px;
        margin-top: 0;
        padding-top: 98px
    }

    .intro-mobile {
        width: 110px;
        bottom: 0;
        left: -14px
    }

    .intro-ipad {
        left: 31px;
        width: 179px;
        bottom: 4px
    }

    .intro-browser {
        right: 0;
        width: 347px;
        bottom: 12px;
        left: 108px
    }

    img.mobile-time-card {
        width: 141px;
        margin-top: 49px
    }

    img.mobile-punch-locations {
        width: 138px;
        margin-top: 56px;
        margin-bottom: 76px;
        right: 0
    }

    img.mobile-punch-clock {
        right: 10px;
        width: 170px;
        padding-top: 21px
    }

    .pto-left img {
        width: 160px
    }

    .pto-middle img {
        width: 214px
    }

    .pto-right img {
        width: 160px
    }

    .time-clock svg {
        left: -7px;
        position: relative
    }

    .clock-integration {
        margin-left: -29px
    }

    .partner-integrations {
        top: -6px;
        margin-left: 0
    }

    .owl-testimonials .owl-item {
        height: 13.5rem
    }

    .review-stats-sep {
        width: 10px;
        margin: 0 4px
    }
    /* How It Works */
    .employees-punch-in-01 {
        bottom: -48px
    }

    .employees-punch-in-02 {
        bottom: -47px;
        max-width: 66%;
        right: 33px
    }

    .employees-punch-in-03 {
        max-width: 82%
    }

    .list-group-item-action {
        width: 100%
    }

    #how-it-works-list .list-group-item span.list-group-item-text {
        display: inline-block;
        padding-top: 0;
        text-align: left;
        position: relative;
        top: -4px;
        margin-left: 10px
    }

    #how-it-works-list .list-group-item p {
        padding: 14px;
        text-align: left
    }

    #how-it-works-list a p span.list-group-item-text br {
        display: none
    }

    .admin-manager-login-page-title {
        font-size: 1.8rem
    }
}