/* visual area */


.benefits-header.detailed-stats {
    font-size: 2.6rem;
    line-height: 2.8rem;
    font-weight: 700;
    left: 2.8rem;
    margin-top: 2.5rem;
}

.background-image-container {
    background-position: center center;
}


@media screen and (max-width: 39.9375em) {
    #visual-area-small {

        text-align: center;

        min-height: 375px;
    }

    .background-image-container {
        background-size: auto 500px;
        background-position: center -20px;
    }

    #visual-area-small h1 {
        color: white;
        font-size: 2rem;
        line-height: 2rem;
        font-weight: 600;
        align-self: flex-end;
    }

    .slogan-container-small {
        height: 320px;
        display: flex;
    }

    #visual-area .buy-button {
        margin-top: 1.875rem;
    }

    #visual-area .buy-button a {
        font-weight: 400;
        font-size: 1rem;
    }

    .benefit-text {
        padding-top: 1rem;
    }

    .benefits-padding {
        padding: 1rem .625rem;
    }

    .benefits-header.detailed-stats {
        font-size: 1.6rem;
        line-height: 1.8rem;
        font-weight: 700;
    }

    img.benefits-header {
        max-height: 200px;
    }


}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    #visual-area {
        min-height: 26.875rem;

    }

    #visual-area.main {
        /*background: #87c9ea url('/sites/all/themes/sublime/images/bg-visual.png') repeat-x 0 100%;*/
    }

    .home-slogan-block {
        margin-top: 250px;
    }


    #visual-area h1 {
        color: white;
        font-size: 3rem;
        line-height: 2.5rem;
        margin-top: 1.875rem;
        font-weight: 600;
    }

    #visual-area .text-holder {
        margin-top: 0.5rem;
    }

    #visual-area .buy-button {
        margin-top: 1.875rem;
    }

    #visual-area .buy-button a {
        font-weight: 400;
        font-size: 1rem;
    }

    #visual-area .buy-button a span {
        font-weight: 300;
    }

    .benefits-padding {
        padding: 2rem;
    }

    .benefit-text {
        padding-top: 2rem;
    }

    .JE-home .benefits-padding {
        padding: 2rem;
    }

    .background-image-container {
        background-position: center top !important;
    }
}

@media screen and (min-width: 64em) {
    #visual-area {
        min-height: 34rem;
        /* background: #89bdd9 url(/template/images/frontpage/bg-visual-2.png) repeat-x 0 100%;*/
    }

    #visual-area.main {
        /* background: #87c9ea url('/sites/all/themes/sublime/images/bg-visual.png') repeat-x 0 100%;*/
    }

    #visual-area h1 {
        color: white;
        font-size: 3.75rem;
        line-height: 3.75rem;
        margin-top: 3.75rem;
        font-weight: 700;
    }

    .home-slogan-block {
        margin-top: 250px;

    }

    .home-slogan-block div.slogan {
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .home-slogan-block div.slogan > div {
        width: 100%;
        text-align: center;
    }

    #visual-area .text-holder {
        margin-top: 1.5rem;
    }

    #visual-area .buy-button {
        margin-top: 1.5rem;
    }

    #visual-area .buy-button a {
        font-weight: 400;
    }

    #visual-area .buy-button a span {
        font-weight: 300;
    }

    .benefit-text {
        padding-top: 2rem;
    }

    .benefits-padding {
        padding: 2.5rem;
    }

}


@media screen and (min-width: 1920px) {
    .background-image-container {
        background-size: 100%;
        background-position: center top;
    }

    .background-image-container.visual-area {
        min-height: 650px;
    }

}


.panel {
    box-shadow: none !important;
}

.blue-panel {

    border-top: 1px dotted #c7e0e9;
    border-bottom: 1px dotted #c7e0e9;
}

.dark-blue-panel {
    background-color: #add3e5;
}

/** subs comparison */
#subs-comparison {
    padding: 40px 25px 0px 25px;
    text-align: center;
}

#subs-comparison table {
    width: 100%;
    border-collapse: collapse;
}

#subs-comparison table th {
    color: white;
    background: #89bdd9;
    font: 400 24px/42px 'Source Sans Pro', sans-serif;
}

#subs-comparison table td {
    height: 30px;
    vertical-align: middle;
    color: black;
}

#subs-comparison table tr td:first-child {
    width: 25%;
    border-left: 1px dotted #CEE5EF;
    border-right: 1px dotted #CEE5EF;
}

#subs-comparison table tr td:last-child {
    width: 25%;
    border-left: 1px dotted #CEE5EF;
    border-right: 1px dotted #CEE5EF;
}

#subs-comparison table tr.topic {
    background-color: #f9fcfd;
    height: 40px;
    font-weight: 600;
}

#subs-comparison tr {
    background-color: white;
}

#subs-comparison table tr.topic td {
    color: #5496bf;
}

#subs-comparison table td.td-first {
    padding-top: 10px;
}

#subs-comparison table td.td-last {
    padding-bottom: 10px;
}

#subs-comparison table td.td-info {
    font: 400 14px/16px 'Source Sans Pro', sans-serif;
    color: #666666;
}

#subs-comparison table td.tr-last {
    border-bottom: 1px dotted #CEE5EF;
}

.green-light {
    height: 20px;
    width: 20px;
    margin: 0 auto;
    background: url(/template/images/frontpage/tick-cross-sprite.svg) no-repeat 0 0;
    background-size: 40px 100px;
}

.red-light {
    height: 20px;
    width: 20px;
    margin: 0 auto;
    background: url(/template/images/frontpage/tick-cross-sprite.svg) no-repeat 0 -20px;
    background-size: 40px 100px;
}


.benefits-header {
    font-weight: 600;
    color: #337aab;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

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

ul.benefits li {
    vertical-align: top;
    position: relative;
    padding: 0 0 0 32px;
}

ul.benefits li:after {
    position: absolute;
    content: "";
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: url(/template/images/frontpage/tick-cross-sprite.svg) no-repeat 0 0;
    background-size: 32px 80px;
}

ul.benefits-schools {
    margin: 1rem 0 0 0;
    padding: 0;
    list-style: none;
}

ul.benefits-schools li {
    vertical-align: top;
    position: relative;
    padding: 0 0 0 32px;
    margin-top: 0.2rem;
}

ul.benefits-schools li:after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: url(/template/images/frontpage/tick.png) no-repeat;
}

table.testimonial {
    margin: 0 auto;
    border: 0px !important;
    border-collapse: separate;
    width: 300px !important;
}

.testimonial tr td.testimonial-text {
    width: 300px;
    height: 141px;
    font-style: italic;
    line-height: 1.2rem;
    vertical-align: top;
    background: url(/template/images/frontpage/textballon.png) center no-repeat;
    background-color: #99cfe2 !important;
    border: 0px !important;
    padding: 0.5rem;
}

.testimonial tr td.testimonial-pic {
    padding: rem-calc(15) 0;
    background-color: #99cfe2 !important;
    border: 0px !important;
}


.subheader {
    line-height: 1.4;
    color: #6fabd4;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.schools-header-right {
    padding-top: 1.25rem;
}

@media screen and (min-width: 64em) and (max-width: 68em) {
    .schools-header-right {
        padding-top: 5rem;
    }
}

.stars-container-big {

    display: inline-block;
    width: 120px;
    height: 23px;
    background-image: url("/template/images/webshop/sprite-stars.svg");
    -webkit-background-size: 120px 255px;
    background-size: 125px 255px;
    background-repeat: no-repeat;
    margin-top: 2px;

}

.stars-container {

    display: inline-block;
    width: 80px;
    height: 15px;
    background-image: url("/template/images/webshop/sprite-stars-green.svg");
    -webkit-background-size: 80px 170px;
    background-size: 80px 170px;
    background-repeat: no-repeat;
    margin-top: 2px;

}

.stars-container.stars-0 {
    background-position: 0 0;
}

.stars-container.stars-1 {
    background-position: 0 -15px;
}

.stars-container.stars-2 {
    background-position: 0 -30px;
}

.stars-container.stars-3 {
    background-position: 0 -45px;
}

.stars-container.stars-4 {
    background-position: 0 -60px;
}

.stars-container.stars-5 {
    background-position: 0 -75px;
}

.stars-container.stars-6 {
    background-position: 0 -90px;
}

.stars-container.stars-7 {
    background-position: 0 -105px;
}

.stars-container.stars-8 {
    background-position: 0 -120px;
}

.stars-container.stars-9 {
    background-position: 0 -135px;
}

.stars-container.stars-10 {
    background-position: 0 -150px;
}

.stars-container-big.stars-0 {
    background-position: 0 0;
}

.stars-container-big.stars-1 {
    background-position: 0 -23px;
}

.stars-container-big.stars-2 {
    background-position: 0 -45px;
}

.stars-container-big.stars-3 {
    background-position: 0 -68px;
}

.stars-container-big.stars-4 {
    background-position: 0 -90px;
}

.stars-container-big.stars-5 {
    background-position: 0 -113px;
}

.stars-container-big.stars-6 {
    background-position: 0 -135px;
}

.stars-container-big.stars-7 {
    background-position: 0 -158px;
}

.stars-container-big.stars-8 {
    background-position: 0 -180px;
}

.stars-container-big.stars-9 {
    background-position: 0 -203px;
}

.stars-container-big.stars-10 {
    background-position: 0 -225px;
}

.no-reviews {
    color: #9B9B9B;
}


.footer-hcats a {
    color: #333;
}

.footer-groups a:hover {
    text-decoration: underline;
}

.schools-second-block {
    padding: 2rem;
}

.JE-home .schools-second-block {
    padding: 2rem 0;
}

.JE-home .benefits-padding.blue-panel {
    background-color: #fff;
    border-top: 1px dotted #92cfed;
    border-bottom: 1px dotted #92cfed;
}

body {
    background-color: #FFFFFF;
}


@media screen and (max-width: 1024px) {
    body {
        background-color: #3391bd !important;
    }
}

body.JE-home {
    background-color: #FFFFFF;
}

.application-footer {
    background-color: #f5f9fb;
}

.inline-list.support-menu {
    border-top: 1px dotted #c7e0e9 !important;
}


.frontpage .button.ghost {
    border-color: rgba(255, 255, 255, 0.4);
}


.frontpage .background-image-container .user-anon-buttons a.button {
    border: none !important;
    padding: 0;
    font-weight: 600 !important;
    display: inline-block;
    text-transform: uppercase;
    margin: -3px 0 0 0 !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid transparent !important;
}

.frontpage .background-image-container .user-anon-buttons a.button i {
    display: none;
}