:root {
    --bg-footer-link: transparent;
    --state-grid-text: white;
    --bg-state-grid-btn: #475760;
    --bg-state-btn-hover: #ac0634;
    --pagination-text-hover: white;
    --text-feature-app-btn: #f4f4f4;
    --bg-feature-app-btn: #38464c;
    --bg-request-btn-hover: #002d62;
    --bg-contact-us-btn: #002d62;
    --bg-contact-us-btn-hover: #ab0634;
    --bg-parent-nav-title: black;
    --bg-app-btn-hover: #ab0634;
    --bg-demo-btn-hover: #002660;
    --text-contact-us-btn: white;
}

/* Colors */
/****************************************** TYPOGRAPHY CSS ******************************************/
@font-face {
    font-family: 'Helvetica Neue';
    src: url("fonts/HelveticaNeue-Bold.eot");
    src: url("fonts/HelveticaNeue-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/HelveticaNeue-Bold.woff2") format("woff2"), url("fonts/HelveticaNeue-Bold.woff") format("woff"), url("fonts/HelveticaNeue-Bold.ttf") format("truetype"), url("And their font Helvetica fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
}

html {
    width: 100%;
}

body {
    background: #ffffff;
    padding: 0;
    margin: 0;
    font-size: 18px;
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
    font-weight: 400;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, input, select, textarea, button {
    outline: none !important;
}

/********************* LINK CSS *********************/
a {
    color: #0e7bef;
    outline: none !important;
    text-decoration: none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

    a:hover, a:focus {
        outline: none;
        text-decoration: none;
        color: #dd2424;
    }

select:focus, button:focus {
    outline: none;
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

    *:focus {
        outline: none;
    }

/********** INPUT **********/
.input-text {
    background-color: #fafafa;
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #4d4d4d;
    display: block;
    line-height: 52px;
    height: 52px;
    padding: 0 18px;
    font-size: 16px;
    outline: none;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 500;
}

    .input-text:focus {
        border: 2px solid #475760;
    }

textarea {
    height: auto !important;
    min-height: 230px;
    line-height: 22px;
    padding: 10px 18px !important;
    background-color: #fafafa;
    border: 2px solid #d1d1d1;
    color: #4d4d4d;
    display: block;
    width: 100%;
    font-size: 16px;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 500;
}

    textarea:focus {
        border: 2px solid #475760;
    }

    textarea::-moz-placeholder {
        opacity: 1;
        color: #4d4d4d;
    }

label {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #56605f;
}

    label.required:after {
        content: "*";
        color: #56605f;
        position: relative;
        left: 5px;
    }

.redH2 {
    color: #ab0634;
}

.hide {
    display: none !important;
}

.emptyElement {
    border: 3px solid red;
}

#FieldValidator {
    padding: 0.5rem;
}

/*.form-group {
    width: 100%;
    float: left;
    margin-bottom: 28px;
}*/
input::-moz-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
    opacity: 1;
    color: #4d4d4d;
}

/********************* HEADING CSS *********************/
h1, h2, h3, h4, h5, h6 {
    margin: 22px 0 16px 0;
    display: block;
    line-height: normal;
    color: #475760;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 26px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 22px;
}

/********************* P CSS *********************/
p {
    float: none;
    margin: 0 0 22px 0;
    padding: 0;
}

    p:last-child {
        margin: 0;
    }

    p a {
        color: #0e7bef;
    }

        p a:hover, p a:focus {
            color: #ab0634;
        }

    p strong {
        font-weight: 700;
    }

/********************* LISTING CSS *********************/
ul {
    margin: 0 0 30px 0;
    padding: 0;
    display: block;
    text-align: left;
}

    ul li {
        margin: 0 0 8px 0;
        padding: 0;
        position: relative;
        line-height: 24px;
        list-style: none;
    }

        ul li:last-child {
            margin-bottom: 0px;
        }

        ul li a {
            color: #0e7bef;
        }

            ul li a:hover {
                color: #ab0634;
                text-decoration: none;
            }

        ul li ul {
            margin: 14px 0 12px 15px;
        }

    ul.nice-listing {
        margin: 0 0 30px 0;
        padding: 0;
        display: block;
        text-align: left;
    }

        ul.nice-listing li {
            margin: 0 0 12px 0;
            padding: 0 0 0 44px;
            font-size: 20px;
            line-height: 26px;
        }

            ul.nice-listing li:before {
                content: "";
                background: url(../Images/list-icon.png) no-repeat left top;
                position: absolute;
                left: 0px;
                top: 2px;
                width: 27px;
                height: 22px;
            }

            ul.nice-listing li ul {
                margin: 14px 0 12px 15px;
            }

ol {
    margin: 0 0 15px 22px;
    padding: 0;
    text-align: left;
}

    ol li {
        margin: 0 0 5px 0;
        padding: 0;
        position: relative;
        line-height: normal;
        list-style: decimal;
    }

        ol li a {
            color: #0e7bef;
        }

            ol li a:hover {
                color: #ab0634;
                text-decoration: none;
            }

/********************* IMAGE CSS *********************/
img {
    border: none;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

.alignleft {
    float: left;
    margin: 7px 30px 20px 0;
}

.alignright {
    float: right;
    height: auto;
    margin: 30px 0 20px 30px;
}

.aligncenter {
    display: block;
    margin: 22px auto 30px auto;
}

/********************* BLOCKQUOTE CSS *********************/
blockquote {
    background: #fdedee;
    border-left: 4px solid #dd2424;
    color: #000;
    display: inline-block;
    border-right: none;
    border-top: none;
    border-bottom: none;
    margin: 0 0 30px 0;
    padding: 28px 36px 26px 36px;
    white-space: normal;
    font-size: 20px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    font-weight: 300;
    line-height: 32px;
}

    blockquote p {
        margin: 0 0 7px 0;
    }

    blockquote span {
        font-weight: 700;
        color: #dd2424;
    }

hr {
    border-color: #dcdce1;
    margin: 36px 0 36px 0;
    padding: 0px;
}

/********************* BUTTON CSS *********************/
.contact-button {
    background: var(--bg-contact-us-btn);
    border: solid 1px var(--contact-us-btn-border);
    font-weight: bold;
    padding: .8rem 3rem;
    border-radius: 15px;
}
    .contact-button:hover {
        background: var(--bg-contact-us-btn-hover);
        color: var(--text-contact-us-btn);
        text-decoration: none;
    }

.btn {
    /*background-color: $blueSteel;*/
    border: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    line-height: 44px;
    padding: 0 28px;
    font-size: 16px;
    outline: none;
}

    .btn:hover, .btn:focus {
        background-color: #ab0634;
        color: #ffffff;
    }

.btn-big-rounded {
    background-color: #475760;
    border: none;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    color: #ffffff;
    display: block;
    line-height: 46px;
    padding: 0 28px 2px;
    font-size: 17px;
    outline: none;
}

    .btn-big-rounded:hover, .btn-big-rounded:focus {
        background-color: #ab0634;
        color: #ffffff;
    }

.btn-square {
    background-color: #ffffff;
    border: 2px solid #4e5d66;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    color: #4e5d66;
    display: block;
    line-height: 38px;
    padding: 0 28px;
    font-size: 18px;
    outline: none;
}

    .btn-square:hover, .btn-square:focus {
        background-color: #ab0634;
        border: 2px solid #ab0634;
        color: #ffffff;
    }

/********************* HEADER CSS *********************/
.header {
    padding: 20px 0 20px !important;
    display: block;
    width: 100%;
}

.main-nav {
    float: right;
}

    .main-nav ul {
        padding-top: 10px;
        margin-bottom: 0;
    }

        .main-nav ul li {
            display: inline-block;
            padding: 0 7px;
            margin: 0;
        }

            .main-nav ul li a {
                /*font-family: 'Helvetica Neue';*/
                /*text-transform: uppercase;*/
                font-weight: bold;
            }

#CTA {
    text-align: center;
    background-color: #ab0634;
    font-size: 22px;
    color: white;
    padding: 10px;
}

.ctaText {
    position: relative;
    top: 4px;
    margin-right: 15px;
}

#CTA > .btn-big-rounded {
    display: inline-block;
}

    #CTA > .btn-big-rounded:hover {
        background-color: #002d62;
    }

#videoContainer {
    height: 600px;
}

.responsive-iframe {
    width: 100%;
    height: 100%;
}

/********************* HERO CSS *********************/
.hero-section {
    text-align: center;
    position: relative;
    background: url('/Images/hero-section-background.jpg') center; /* It will extend the hero image on bigger screens */
}

    .hero-section img {
        object-fit: cover;
        height: 400px !important;
    }

.header-image {
    content: url('/Images/header-main-cropped.jpg'); /* Default image */
}

.hero-overlay {
    position: absolute !important;
    bottom: 5% !important;
    padding: 33px 25px 24px 25px;
    left: 0;
    right: 0;
    width: 1009px;
    color: #ffffff;
    display: flex;
    align-items: end;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    min-height: 300px;
}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .hero-text ul {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

        .hero-text ul li {
            display: inline-block;
            margin-bottom: 0;
            text-transform: uppercase;
            font-size: 31px;
            font-weight: 900;
            padding: 0 13px;
        }

    .hero-text span {
        font-size: 25px;
        line-height: normal;
    }

    .hero-text img {
        width: 250px;
        object-fit: contain;
        max-height: 50px;
        margin: 10px;
    }

    .hero-text a {
        background-color: darkred;
        border-radius: 20px;
        padding: 0px 40px;
    }

/********************* NAVIGATION CSS *********************/
.navigation {
    background: #38464c;
    text-align: center;
    display: block;
    width: 100%;
}

    .navigation ul {
        margin: 0;
        text-align: center;
    }

        .navigation ul li {
            display: inline-block;
            font-family: 'Roboto';
            text-transform: uppercase;
            font-weight: bold;
            font-size: 22px;
            padding: 11px 18px;
            margin: 8px 0;
        }

            .navigation ul li a {
                color: #ffffff;
            }

                .navigation ul li a:hover, .navigation ul li a:focus {
                    color: #8cc63f;
                }

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
    opacity: 1;
    transform: rotate(45deg) translate(-10px, -19px);
}

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
        transform: rotate(-45deg) translate(0, 10px);
    }

    #menuToggle span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

#menuToggle .collapsed span {
    transform: rotate(0deg) translate(0px, 0px);
}

    #menuToggle .collapsed span:nth-last-child(2) {
        transform: rotate(0deg) translate(0, 0px);
    }

    #menuToggle .collapsed span:nth-last-child(3) {
        opacity: 1;
        transform: rotate(0deg) scale(1, 1);
    }

/********************* PARENTS CSS *********************/
.parents-home-section {
    padding: 20px 0;
}

.parents-btn {
    border-radius: 14px;
    text-align: center;
    padding: 12px;
    vertical-align: bottom;
}

    .parents-btn a {
        border-radius: 14px;
        background-color: #ab0634;
        text-transform: uppercase;
        font-size: 19px;
        font-weight: 900;
        line-height: 1.18;
        display: block;
        color: #ffffff;
        padding: 5px 20px;
    }

        .parents-btn a span {
            font-size: 16px;
            text-transform: none;
            display: block;
            font-weight: 400;
        }

        .parents-btn a:hover, .parents-btn a:focus {
            background: #002d62;
            color: white;
        }

.btnParents {
    background-color: #ab0634;
    text-align: center;
    border-radius: 14px;
}

    .btnParents a {
        color: white;
        text-transform: uppercase;
    }

    .btnParents span {
        font-size: 14px;
        color: white;
        text-transform: none;
    }

/********************* MANAGEMENT FEATURE CSS *********************/
.management-features-section {
    background: #002d62;
    padding: 45px 0 60px 0;
}

    .management-features-section .container-big {
        text-align: center;
    }

.management-features-text {
    color: #ffffff;
    padding: 0 0 120px;
    max-width: 880px;
    margin: 0 auto;
}

    .management-features-text h2 {
        color: #ffffff;
        font-size: 32px;
        line-height: 45px;
        text-transform: uppercase;
        position: relative;
        padding-bottom: 13px;
    }

        .management-features-text h2:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 375px;
            height: 3px;
            background: #ffffff;
            bottom: -3px;
        }

.features-item-block {
    border-radius: 27px;
    -moz-border-radius: 27px;
    -webkit-border-radius: 27px;
    background-color: #ffffff;
    padding: 0 15px 10px;
    max-width: 298px;
    margin: 0 auto;
    width: 100%;
    min-height: 298px;
}

    .features-item-block ul {
        margin-bottom: 0;
    }

        .features-item-block ul li {
            text-align: center;
            margin-bottom: 13px;
        }

.features-icon img {
    margin-top: -47px;
}

.request-section-left h2 {
    margin-top: 18px;
    margin-bottom: 20px;
}

/********************* REQUEST DEMO CSS *********************/
.request-demo-section {
    background: #ab0634;
    padding: 30px 0;
}

.request-section-left {
    text-align: right;
    max-width: 1080px;
    color: #ffffff;
    float: left;
    width: 100%;
    padding-right: 7px;
}

    .request-section-left h2 {
        font-size: 33px;
        line-height: 39px;
        color: #ffffff;
        text-transform: uppercase;
        margin: 0;
    }

    .request-section-left p {
        font-size: 24px;
        line-height: 28px;
    }

.request-section-right {
    float: left;
    padding-left: 17px;
    padding-top: 6px;
}

.request-a-demo-btn a {
    width: 254px;
    line-height: 61px;
    background-color: #96002e;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
}

    .request-a-demo-btn a:hover, .request-a-demo-btn a:focus {
        background: var(--bg-request-btn-hover);
        text-decoration: none;
    }

/********************* EVERYTHING IN ONE PLACE CSS *********************/
.everything-in-one-place {
    padding: 100px 0;
}

.everything-in-one-place-right {
    padding: 0 0 0 70px;
}

    .everything-in-one-place-right h2 {
        font-size: 36px;
        margin-top: 0;
    }

    .everything-in-one-place-right ul li {
        font-size: 18px;
        font-weight: 700;
        color: #475760;
        margin-bottom: 10px;
    }

    .everything-in-one-place-right p {
        font-size: 16px;
    }

    .everything-in-one-place-right a {
        display: inline-block;
        text-decoration: none !important;
    }

/********************* FAVORITE FEATURE CSS *********************/
.favorite-features-app {
    position: relative;
    padding: 0 0 50px;
}

    .favorite-features-app .row {
        margin: 0;
    }

    .favorite-features-app .col-md-6.col-12 {
        padding: 0;
    }

    .favorite-features-app:after {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 90px;
        width: 100%;
        height: 350px;
        background: #002d62;
        z-index: -1;
    }

.favorite-features-details {
    padding: 120px 0 0;
    color: #ffffff;
}

    .favorite-features-details h2 {
        font-size: 34px;
        color: #ffffff;
    }

    .favorite-features-details p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .favorite-features-details ul li {
        position: relative;
        padding-left: 34px;
        font-weight: 500;
        font-size: 18px;
    }

        .favorite-features-details ul li:before {
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            background: #ffffff;
            width: 14px;
            height: 14px;
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
        }

.favorite-features-app .app-btn {
    padding-top: 77px;
}

    .favorite-features-app .app-btn a {
        margin-right: 6px;
        border: none;
        background: var(--bg-feature-app-btn);
        display: inline-block;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        font-size: 18px;
        font-weight: 700;
        position: relative;
        width: 188px;
        height: 56px;
        padding: 8px 0 0 56px;
        color: var(--text-feature-app-btn);
        text-decoration: none;
    }

        .favorite-features-app .app-btn a:last-child {
            margin-right: 0;
        }

        .favorite-features-app .app-btn a:hover, .favorite-features-app .app-btn a:focus {
            background: #ab0634;
        }

    .favorite-features-app .app-btn i {
        position: absolute;
        left: 0;
        top: 0;
    }

    .favorite-features-app .app-btn span {
        font-size: 10px;
        font-weight: 400;
        display: block;
    }

    .favorite-features-app .app-btn strong {
        display: block;
        line-height: normal;
    }

/********************* RANK ONE CSS *********************/
.rank-one-section {
    text-align: center;
    background: url(../Images/rank-one-bg.png) no-repeat center top;
    padding: 135px 0 105px;
}

    .rank-one-section h2 {
        font-size: 43px;
    }

/********************* FOOTER CSS *********************/
footer {
    background: #38464c;
    padding: 70px 0 50px;
    text-align: center;
    color: #ffffff;
}

    footer ul {
        text-align: center;
        font-size: 18px;
        margin: 0;
    }

        footer ul li {
            display: inline-block;
            position: relative;
        }

            footer ul li strong {
                display: block;
                font-size: 30px;
            }

            footer ul li a {
                color: #ffffff;
            }

                footer ul li a:hover, footer ul li a:focus {
                    color: #8cc63f;
                    background-color: var(--bg-footer-link) !important;
                }

.footer-logo {
    margin-bottom: 30px;
}

    .footer-logo a:hover {
        background-color: var(--bg-footer-link) !important;
    }

.compliant-list {
    margin-bottom: 20px;
}

    .compliant-list ul li {
        padding: 0 18px;
        font-size: 17px;
    }

.footer-links ul li {
    padding: 0 6px 3px;
}

    .footer-links ul li:before {
        content: "I";
        position: absolute;
        left: -4px;
        top: 0;
    }

    .footer-links ul li:first-child:before {
        display: none;
    }

/********************* LEARN MORE CSS *********************/
.navigation-top {
    background: #475760;
    display: block;
    width: 100%;
    padding: 25px 0;
}

    .navigation-top .nav-title {
        display: inline-block;
        font-family: 'Roboto';
        text-transform: uppercase;
        font-weight: bold;
        font-size: 24px;
        color: #ffffff;
    }

.learn-more-hero-section {
    background-size: cover !important;
    display: block;
    width: 100%;
}

.learn-more-hero-overlay {
    height: 520px;
    display: table;
    text-align: center;
    width: 100%;
}

.learn-more-hero-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

    .learn-more-hero-text h1 {
        color: #ffffff;
        margin-top: 7px;
    }

    .learn-more-hero-text p {
        color: #ffffff;
    }

.learn-more-section-top {
    padding: 55px 0 20px;
}

.learn-more-item {
    padding: 43px 0;
}

.learn-more-box {
    max-width: 675px;
}

    .learn-more-box p {
        line-height: 30px;
        font-size: 20px;
    }

    .learn-more-box .app-btn {
        padding-top: 0px;
    }

        .learn-more-box .app-btn i {
            position: absolute;
            left: 0;
            top: 0;
        }

        .learn-more-box .app-btn span {
            font-size: 10px;
            font-weight: 400;
            display: block;
        }

        .learn-more-box .app-btn strong {
            display: block;
            line-height: normal;
        }

        .learn-more-box .app-btn a {
            margin-right: 6px;
            border: none;
            background: var(--bg-feature-app-btn);
            display: inline-block;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            font-size: 18px;
            font-weight: 700;
            position: relative;
            width: 188px;
            height: 56px;
            padding: 8px 0 0 56px;
            color: var(--text-feature-app-btn);
            text-decoration: none;
        }

            .learn-more-box .app-btn a:hover, .learn-more-box .app-btn a:focus {
                background: var(--bg-app-btn-hover);
            }

@media screen and (max-width: 421px) {
    .learn-more-box .app-btn {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-start;
    }

        .learn-more-box .app-btn a {
            width: 100%;
            max-width: 300px;
            font-size: 14px;
            padding: 10px 0 0 53px;
        }
}

.link-list a {
    font-size: 20px;
    font-weight: 700;
    margin-right: 64px;
}

    .link-list a:last-child {
        margin-right: 0;
    }

.learn-more-item .text-left, .learn-more-item .text {
    padding-top: 34px;
}

.schedule-demo-section {
    padding: 118px 0 90px;
    background: #f2f2f2;
    text-align: center;
}

.schedule-item-icon {
    display: block;
    width: 100%;
}

.schedule-demo-item {
    max-width: 323px;
    margin: 0 auto 40px;
    width: 100%;
}

    .schedule-demo-item h2 {
        margin-top: 15px;
        margin-bottom: 24px;
        font-size: 36px;
        text-transform: uppercase;
    }

    .schedule-demo-item p {
        font-size: 22px;
        line-height: 25px;
        color: #475760;
    }

.schedule-demo-btn {
    margin-top: 60px;
}

    .schedule-demo-btn .btn {
        line-height: 54px;
        min-width: 236px;
        font-size: 21px;
        background: #316491;
    }

        .schedule-demo-btn .btn:hover, .schedule-demo-btn .btn:focus {
            background-color: #ab0634;
            color: #ffffff;
        }

.rank-one-plays-section {
    padding: 76px 0 120px;
    text-align: center;
}

.rank-one-plays-title {
    margin-bottom: 38px;
}

    .rank-one-plays-title h2 {
        font-size: 26px;
        margin-bottom: 5px;
    }

.rank-one-plays-item {
    margin-bottom: 30px;
}

/********************* FEATURES CSS *********************/
.change-the-game-section {
    padding: 90px 0;
}

.change-the-game-details h1 {
    margin-top: 0;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
}

    .change-the-game-details h1 strong {
        color: #ab0634;
        font-weight: 900;
        text-transform: uppercase;
    }

.red-demo-btn .btn {
    background: #ab0634;
    font-size: 16px;
    line-height: 34px;
    text-transform: uppercase;
    font-family: 'Roboto';
    margin-top: 15px;
    padding: 0 24px;
    font-weight: bold;
}

    .red-demo-btn .btn:hover, .red-demo-btn .btn:focus {
        background: var(--bg-demo-btn-hover);
    }

.our-software-save-you-time-section {
    background: #002d62;
    position: relative;
    display: block;
    width: 100%;
    color: #ffffff;
    padding: 40px 0 15px;
}

    .our-software-save-you-time-section:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 140px;
        height: 40px;
        background: #ffffff;
        clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 0);
        margin: 0 auto;
    }

    .our-software-save-you-time-section h2 {
        color: #ffffff;
        font-size: 28px;
        font-weight: 700;
    }

.our-software-save-you-time {
    display: block;
    width: 100%;
    background: url(../Images/player.png) no-repeat right top;
    background-size: auto 100%;
}

.save-you-time-top-title {
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 60px;
}

    .save-you-time-top-title h2 {
        color: #ffffff;
        font-size: 26px;
        line-height: 42px;
        position: relative;
        padding-bottom: 13px;
        font-weight: 900;
    }

        .save-you-time-top-title h2:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 5px;
            background: #ffffff;
            bottom: -10px;
        }

.masonry-item-list {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.our-software-save-you-time-list ul.nice-listing li {
    margin-bottom: 10px;
}

.rank-one-btn {
    width: 100%;
    border-radius: 13px;
    background-color: #ab0634;
    text-align: center;
    padding: 22px 22px;
    display: block;
}

    .rank-one-btn span {
        margin-bottom: 40px;
        display: block;
    }

    .rank-one-btn .btn {
        line-height: 54px;
        min-width: 236px;
        font-size: 21px;
        background: #a70032;
        margin-bottom: 4px;
    }

        .rank-one-btn .btn:hover, .rank-one-btn .btn:focus {
            background: #002d62;
        }

.bottom-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 64px;
}

    .bottom-btn .schedule-demo-btn {
        margin: 40px 0 0;
    }

        .bottom-btn .schedule-demo-btn a {
            background: #002660;
        }

.what-uers-are-saying {
    background-color: #f2f2f2;
    width: 100%;
    display: inline-block;
    padding: 35px 0 25px;
}

.user-reviews-section {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 0 15px;
}

    .user-reviews-section h2 {
        font-size: 26px;
        margin-bottom: 24px;
    }

    .user-reviews-section p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 45px;
    }

        .user-reviews-section p:last-child {
            color: #475760;
        }

.custom-for-user-section .learn-more-box {
    max-width: 590px;
}

    .custom-for-user-section .learn-more-box h2 {
        margin-top: 6px;
    }

    .custom-for-user-section .learn-more-box p {
        margin-bottom: 40px;
    }

    .custom-for-user-section .learn-more-box.full-center p {
        margin-bottom: 22px;
    }

.custom-for-user-section .order-md-2 .learn-more-img.text-center {
    text-align: left;
    padding-left: 20px;
}

.custom-for-user-section .learn-more-item .text {
    text-align: right;
    float: right;
    padding-top: 0;
}

    .custom-for-user-section .learn-more-item .text h2 {
        margin-top: 0;
    }

.learn-more-box.full-center {
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.center-logo {
    margin-bottom: 50px;
}

/********************* CONTACT US CSS *********************/
.contact-us-section {
    display: block;
    width: 100%;
    padding: 60px 0 120px;
}

.contact-message {
    position: relative;
    background-color: #d88500;
    padding: 15px 85px 11px;
    text-align: center;
    margin-bottom: 40px;
}

    .contact-message:before {
        position: absolute;
        background: url(../Images/info-icon.png) no-repeat left top;
        width: 38px;
        height: 38px;
        content: "";
        left: 25px;
        top: 50%;
        margin-top: -19px;
    }

    .contact-message p {
        font-size: 22px;
        margin: 0;
        color: #ffffff;
        line-height: normal;
    }

.contact-us-form {
    max-width: 500px;
    width: 100%;
}

    .contact-us-form h2 {
        margin-top: 5px;
        margin-bottom: 30px;
    }

    .contact-us-form fieldset {
        margin-bottom: 20px;
    }

    .contact-us-form .btn {
        min-width: 138px;
        font-size: 16px;
        text-transform: uppercase;
        font-family: 'Roboto';
        line-height: 48px;
        border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        font-weight: 600;
    }

.quick-contact-info {
    width: 100%;
}

.quick-contant-box {
    background: #475760;
    color: #ffffff;
    padding: 29px 34px 22px;
    margin-bottom: 25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

    .quick-contant-box p {
        margin: 0;
        line-height: normal;
    }

    .quick-contant-box a {
        color: #ffffff;
    }

        .quick-contant-box a:hover {
            color: #ffa30f;
        }

.quick-contant-time-number {
    margin-bottom: 22px;
}

.email-support {
    font-size: 16px;
    margin-bottom: 25px;
}

    .email-support a {
        color: #4d4d4d;
    }

.rank-payments {
    font-size: 16px;
}

    .rank-payments p {
        line-height: normal;
    }

/********************* PARENT APP CSS *********************/
.header.header-2 {
    background: #002d62;
}

.header-2 .logo {
    width: 100%;
    text-align: center;
}

.header-2 a {
    color: #c9c9c9;
    font-family: 'Roboto';
    font-size: 18px;
    line-height: normal;
}

    .header-2 a:hover, .header-2 a:focus {
        color: #ffffff;
    }

.header-2 .left-nav a {
    text-decoration: underline;
}

.right-nav {
    text-align: right;
    width: 100%;
}

    .right-nav ul {
        text-align: right;
        margin-bottom: 0;
    }

    .right-nav li {
        display: inline-block;
        padding-right: 62px;
    }

        .right-nav li:last-child {
            padding-right: 0;
        }

.navigation-top-2 {
    background: #f2f2f2;
    padding: 14px 0;
}

.nav-title ul {
    padding: 0;
    margin: 0;
}

    .nav-title ul li {
        display: inline-block;
        font-size: 18px;
        color: var(--bg-parent-nav-title);
        font-family: 'Roboto';
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 0;
        font-weight: 500;
    }

        .nav-title ul li a {
            color: var(--bg-parent-nav-title);
            font-weight: 500;
        }

            .nav-title ul li a:hover, .nav-title ul li a:focus {
                color: #002d62;
            }

.parent-app-section-main {
    padding: 130px 0 100px;
}

.parent-app-section {
    max-width: 830px;
    margin: 0 auto;
    width: 100%;
}

.parent-app-full {
    /*display: table;*/
    padding-bottom: 120px;
}

.app-left-content-table {
    height: 540px;
    display: table;
    width: 100%;
}

.app-left-content-table-cell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 12px;
}

    .app-left-content-table-cell ul {
        color: white;
    }

.app-iphone-mobile img {
    padding-left: 50px;
}

.app-left-content h1 {
    font-size: 38px;
    color: #000;
    line-height: 51px;
    text-transform: none;
    margin-top: 0;
}

    .app-left-content h1 strong {
        color: #337ab7;
    }

.app-left-content p {
    color: #000;
}

.app-left-content .app-btn {
    padding-top: 50px;
}

    .app-left-content .app-btn a {
        margin-right: 6px;
        border: none;
        background: var(--bg-feature-app-btn);
        display: inline-block;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        font-size: 18px;
        font-weight: 700;
        position: relative;
        width: 188px;
        height: 56px;
        padding: 8px 0 0 56px;
        color: var(--text-feature-app-btn);
        text-decoration: none;
    }

        .app-left-content .app-btn a:last-child {
            margin-right: 0;
        }

        .app-left-content .app-btn a:hover {
            background: #ab0634;
        }

    .app-left-content .app-btn i {
        position: absolute;
        left: 8px;
        top: 0;
    }

    .app-left-content .app-btn span {
        font-size: 10px;
        font-weight: 400;
        display: block;
    }

    .app-left-content .app-btn strong {
        display: block;
        line-height: normal;
    }

.favorite-features-app .app-btn a:focus {
    background: #ab0634;
}

.return-parent-portal-btn {
    display: block;
    width: 100%;
    text-align: center;
}

    .return-parent-portal-btn .btn {
        line-height: 50px;
        min-width: 272px;
        font-size: 22px;
        font-weight: 700;
        background: #002d62;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
    }

        .return-parent-portal-btn .btn:hover, .return-parent-portal-btn .btn:focus {
            background: #ab0634;
        }

/********************* PARENT LANDING CSS *********************/
.parent-portal {
    background: #002d62;
}

    .parent-portal .container-big {
        display: table;
    }

.welcome-parent-portal {
    text-align: center;
    color: #ffffff;
}

    .welcome-parent-portal h1 {
        font-size: 32px;
        color: #ffffff;
        margin-bottom: 10px;
        margin-top: 16px;
    }

    .welcome-parent-portal .btn {
        font-size: 16px;
        line-height: 34px;
        background: #ab0634;
        min-width: 404px;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        font-weight: 700;
    }

        .welcome-parent-portal .btn:hover {
            cursor: default;
        }

.parent-portal-block {
    padding: 145px 0 133px;
}

    .parent-portal-block .btn {
        padding: 0 22px;
    }

.NCSALogo {
    height: 115px;
}

.ppbox-right {
    margin-right: auto;
}

.ppbox-left {
    margin-left: auto;
}

.parent-portal-box {
    max-width: 360px;
    border: 1px solid #707070;
    background: #ffffff;
    border-radius: 11px;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    position: relative;
    padding: 20px 6px 20px 140px;
    min-height: 144px;
}

    .parent-portal-box h2 {
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 3px;
        line-height: 28px;
    }

    .parent-portal-box p {
        font-size: 16px;
        color: #666666;
        margin-bottom: 11px;
    }

    .parent-portal-box .btn {
        background: #002d62;
        line-height: 36px;
        font-size: 16px;
        text-transform: uppercase;
        min-width: 200px;
    }

        .parent-portal-box .btn:hover, .parent-portal-box .btn:focus {
            background-color: #ab0634;
            color: #ffffff;
        }

.parent-portal-icon {
    position: absolute;
    left: 20px;
    top: 20px;
}

.enjoy-parent-app-section {
    display: block;
    width: 100%;
    overflow-x: hidden !important;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#95aab5+0,475760+100 */
    background: white;
    /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(149,170,181,1) 0%, rgba(71,87,96,1) 100%);
    background: -webkit-linear-gradient(top, rgba(149,170,181,1) 0%,rgba(71,87,96,1) 100%);
    background: linear-gradient(to bottom, rgba(149,170,181,1) 0%,rgba(71,87,96,1) 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95aab5', endColorstr='#475760',GradientType=0 );
    /* IE6-9 */
}

    .enjoy-parent-app-section .blueRibbonWrapper {
        padding: 140px 0;
    }

        .enjoy-parent-app-section .blueRibbonWrapper .blueRibbon {
            background: #002660;
            height: 370px;
        }

    .enjoy-parent-app-section .app-mobile-right {
        position: relative;
        /*&:before {
            content: "";
            position: absolute;
            left: 540px;
            top: 0;
            height: 100%;
            z-index: 1;
            width: 1200px;
        }*/
    }

        .enjoy-parent-app-section .app-mobile-right:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            /*clip-path: polygon(62% 0, 100% 0, 100% 100%, 0% 100%);*/
            width: 100%;
            /*background: $blueGrayish1;*/
            z-index: 1;
        }

        .enjoy-parent-app-section .app-mobile-right .app-iphone-mobile {
            position: relative;
            z-index: 2;
            padding: 0;
        }

    .enjoy-parent-app-section .app-left-content-table {
        height: 508px;
        /*padding-top: 50px;*/
    }

    .enjoy-parent-app-section .app-left-content h1, .enjoy-parent-app-section .app-left-content p {
        color: #ffffff;
    }

.margin-favorites {
    margin: 20px 0;
}

@media (max-width: 991px) {
    .enjoy-parent-app-section .blueRibbonWrapper .blueRibbon {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .enjoy-parent-app-section .blueRibbonWrapper {
        padding: 60px 0;
    }

        .enjoy-parent-app-section .blueRibbonWrapper .blueRibbon {
            height: auto;
        }
}

/***************View_Schedules CSS****************/
.redHeader {
    color: #a70032;
}

#SchedulesTab_Wrapper {
    margin: 30px 0;
}

    #SchedulesTab_Wrapper .nav-link {
        border-bottom: none;
    }

#SchedulesTabContent {
    height: 19rem;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 20px;
}

.nav-tabs .nav-link.active, .tab-content {
    background-color: #f6f7f9;
}

.leftBarNav li {
    width: 100%;
    float: left;
    padding: 0 0 14px 0;
    margin: 0 0 15px 0;
    border-bottom: solid 1px #eae8e5;
}

    .leftBarNav li a {
        color: #38464c;
    }

        .leftBarNav li a svg {
            float: right;
        }

.stateGridCell {
    width: 50%;
    float: left;
    background: #475760;
    border: 1px solid #fff;
    -webkit-box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

    .stateGridCell > a {
        color: #fff;
        padding: 15px 12px;
        display: block;
        line-height: 24px;
        word-wrap: break-word;
        background-color: #475760;
    }

/* Buttons on States and District pages start */

.center-Adv .stateGridCell {
    width: 50%;
    float: left;
    background: var(--bg-state-grid-btn);
    -webkit-box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

    .center-Adv .stateGridCell > a {
        color: var(--state-grid-text);
        padding: 15px 12px;
        display: block;
        line-height: 24px;
        background-color: var(--bg-state-grid-btn);
        width: 100% !important;
    }

        .center-Adv .stateGridCell > a:hover {
            text-decoration: none !important;
            background-color: var(--bg-state-btn-hover) !important;
        }

/* Buttons on States and District pages end */

.NoticeDiv {
    border: 2px solid black;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    position: relative;
    top: 10px;
}

    .NoticeDiv a {
        color: #a70032;
        text-decoration: underline;
    }

        .NoticeDiv a:hover {
            color: #0e7bef;
            text-decoration: none;
        }

.ParentAdTop {
    border: 1px solid black;
    height: 100px;
}

.ParentAdRight {
    border: 1px solid black;
    height: 300px;
}

/*Advertisement*/
.outerAdv {
    display: flex;
    flex-direction: column !important;
}

.headerAdv {
    display: flex;
    /*height: 200px;*/
    margin: 0 0 20px 0;
    /*background: #858585;*/
}

.main-contentAdv {
    margin: auto;
    width: 1200px;
    display: flex;
    justify-content: flex-start;
}

.left-sideAdv {
    width: 20%;
    float: left;
    height: 640px;
}

.center-Adv {
    text-align: center;
    float: left;
    width: 50%;
    height: auto;
}

.right-sideAdv {
    float: right;
    width: 20%;
    height: auto;
}

.stateGridCell:hover {
    background-color: #ac0634;
}

a:hover {
    /*    background-color: #ac0634 !important;*/
    text-decoration: underline;
}

.footerAdv {
    display: flex;
    height: 500px;
    margin: 20px 0 0 0;
    background: #858585;
}

.side-contentAdv {
    height: 300px;
    /*background: #858585;*/
    margin-left: auto !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.sticky-ad {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

.ad {
    width: 300px;
    height: 650px;
}

.ad2 {
    width: 300px;
    height: 650px;
}

@media screen and (max-width: 1300px) {
    .main-contentAdv {
        width: 1000px;
    }
}

@media screen and (max-width: 1050px) {
    .main-contentAdv {
        width: 900px;
    }

    .header-image {
        content: url('/Images/header-large-width.jpg');
    }
}

@media screen and (max-width: 950px) {
    .main-contentAdv {
        margin: auto;
        width: auto;
        display: flex;
        justify-content: flex-start;
    }

    .center-Adv {
        width: auto !important;
    }

    .left-sideAdv {
        display: none;
    }

    .right-sideAdv {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .header-image {
        content: url('/Images/header-mobile-width.jpg');
    }
}

@media screen and (max-width: 600px) {
    .main-contentAdv {
        margin: auto;
        width: auto;
        display: flex;
        justify-content: flex-start;
    }

    .center-Adv {
        width: auto !important;
    }

    .left-sideAdv {
        display: none;
    }

    .right-sideAdv {
        display: none;
    }
}

.main-container {
    padding: 20px 0;
}