﻿/*
Fonts
*/
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/JTUQjIg1_i6t8kCHKm45_QpRzS7mw9c.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/JTUQjIg1_i6t8kCHKm45_QpRxi7mw9c.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/JTUQjIg1_i6t8kCHKm45_QpRxy7mw9c.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/JTUQjIg1_i6t8kCHKm45_QpRyS7m.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_aZA3gTD_u50.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_aZA3g3D_u50.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_aZA3gbD_u50.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_aZA3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_cJD3g3D_u50.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_cJD3gbD_u50.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_cJD3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/JTURjIg1_i6t8kCHKm45_cJD3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Core styles
*/
*, *:after, *:before {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat","Proxima Nova", Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 90%;
    text-align: left;
    background: #fff;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.4rem;
    font-weight: normal;
    color: #000;
}

    h2 span {
        display: inline-block;
        color: #bbb;
        margin-right: 5px;
    }
        h2 span.warning {
            color: #c20524;
        }
img {
    margin: 0;
    border: 0;
}
img.flip {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
h1, h2, h3, h4 {
    text-transform: uppercase;
}

a {
    color: #69c;
    text-decoration: none;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.content {
    position: relative;
}

input[type=submit] {
    cursor: pointer
}

@media (max-width: 1049px) {
    .content {
        padding: 0 8px;
        text-align:left;
    }
}

@media (min-width: 1050px) {
    .content {
        width: 1050px;
        margin: 0 auto;
    }
}

/*
	Heading
*/
header {
    margin: 0;
    padding: 20px 0;
    background: #fff;
}

    header #MainIcon {
        vertical-align: middle;
        display: inline-block;
        width: 67%;
        height: 40px;
        background-image: url('../images/header/ncsf-corp-dt.png');
        background-repeat: no-repeat;
    }
        header #MainIcon a {
            display:block;
            width:100%;
            min-height:100%;
        }
    header #usericons {
        vertical-align: middle;
        display: inline-block;
        width: 31%;
        text-align: right;
        padding-right: 5px;
    }

#usericons span {
    display: inline-block;
    padding-right: 5px
}
#MiniCartCount {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    padding: 0 4px;
    font-weight: bold;
    vertical-align: middle;
}
.preloader {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center center;
    /*background-image	: url(/images/logo.png); */
}
/* 

	Menu

*/
.menu {
    padding: 3px 0 3px 5px;
    background-color: #00aed9;
    /*
	border-top: 1px solid #00aed9;
	border-bottom: 1px solid #00aed9;
    */
}

.menuitems {
    background-color: #333333;
    display: block;
}

@media (min-width: 1050px) {
    .menuitems {
        width: 1150px;
        margin: 0 auto;
    }
}

@media (max-width: 1049px) {
    .menuitems {
        margin: 0 auto;
    }
}

.menuitems ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 5px 10px 5px 0;
    overflow: hidden;
    background-color: #00aed9;
}

.menuitems li {
    float: left;
    color: #fff;
    line-height: 28px;
    vertical-align: middle;
}

    .menuitems li:not(:first-child):before {
        content: "|";
        padding: 14px
    }

    .menuitems li a {
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-size: .84rem;
    }

    .menuitems li.selected a {
        color: #03386e;
    }

    .menuitems li a:hover {
        color: #2380c5;
    }

.menuitems select {
    padding: 3px;
    border-radius: 4px;
    background-color: #fff;
    color: #fff
}

    .menuitems select a {
        color: #008dbf;
    }

#MobilePageMask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

#MobileMenu {
    display: none;
    height: 28px;
    line-height: 28px;
    text-align: left;
}

#HamburgerIcon {
    display: inline-block;
    padding: 3px
}

#HamburgerMenu {
    display: inline-block;
    height: 28px;
    font-size: 14px;
    color: #fff;
    padding: 0 0 0 5px;
    vertical-align: top;
}

.bar1, .bar2, .bar3 {
    display: block;
    width: 25px;
    height: 4px;
    background-color: #03386e;
    margin: 3px 0;
    transition: 0.2s;
}

.navigation-with-shadow {
    box-shadow: none;
}

@media (max-width: 1100px) {

    .menuitems li:not(:first-child):before {
        padding: 0px;
        content: "";
    }

    .menuitems li:first-child {
        padding-top: 20px;
    }

    .menuitems li:not(:last-child):after {
        content: "\276F";
        color: #2380c5;
        text-align: right;
        float: right;
    }

    #MobilePageMask {
        z-index: 98;
    }

    #MobileMenu {
        display: block;
    }

    .menuitems {
        display:none;
        position: fixed;
        top: 0;
        left: 0%;
        bottom: 0;
        width: 60%;
        z-index: 99;
        background-color: #111;
        transition: 0.5s;
    }

    .menuitems-with-shadow {
        box-shadow: 5px 0px 12px 0 rgba(0, 0, 0, 0.5);
    }

    .menuitems ul {
        list-style-type: auto;
        overflow: auto;
        margin: 10px;
        padding: 10px 10px 10px 0;
        background-color: #111;
    }

    .menuitems li {
        display: block;
        float: none;
        padding: 5px 0 5px 10px;
        background-color: #111;
        font-size: 16px;
        width: 98%;
        border-bottom: 1px solid #444;
    }

        .menuitems li a, .menuitems li a:hover {
            color: #fff;
        }

        .menuitems li.selected a {
            color: #00aed9
        }
    
    h1 {
        font-size: 1.4rem
    }
}
/* Footer*/
footer {
    margin-top: auto;
    text-align: center;
    background-color: #02a6cf;
    padding: 15px 0 15px 0;
}

    footer p {
        font-size: .6rem
    }

.footeritems {
    width: max-content;
    margin: 0 auto;
}

    .footeritems ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 5px 10px 5px 0;
        overflow: hidden;
    }

    .footeritems li {
        float: left;
        color: #fff;
        line-height: 28px;
        vertical-align: middle;
        font-size: .7rem
    }

        .footeritems li:not(:first-child):before {
            content: "|";
            padding: 14px
        }

        .footeritems li a {
            color: #fff;
            font-size: .8rem
        }
/* Content areas*/
#breadcrumb {
    font-size: 0.85em;
    list-style: none;
    margin: 0px 3px 0px 3px;
    padding: 4px 15px;
    border-radius: 4px;
    color: #fff;
    text-align: left;
}

    #breadcrumb li {
        display: inline-block;
        margin: 0;
        line-height: 1em;
    }

        #breadcrumb li + li:before {
            padding: 0 3px;
            color: #ccc;
            content: "/\00a0";
        }

    #breadcrumb a {
        color: #000;
    }

.columns {
    display: block;
}
p.formalert {
    color: #c20524;
    font-weight: 600;
}
p.formcomplete {
    color: #369;
    font-weight:600;
}
.formRow {
    display: flex;
    align-items: center;
}

    .formRow .formCell {
        -webkit-flex: 1;
        flex-grow: 1;
        margin: 0 10px 0 0;
    }

        .formRow .formCell:last-child {
            margin-right: 0;
        }

.formCell {
    position: relative;
    padding: 10px 0;
}

    .formCell label {
        font-size: 12px;
        position: absolute;
        top: 4px;
        left: 16px;
        color: #369;
        font-weight: bold;
        background: #fff;
        z-index: 1;
        transition: all 150ms ease;
    }
    .formCell span {
        color: #c20524;
        font-size:1.2em;
    }
.empty label {
    font-size: 16px;
    top: 26px;
    color: #ccc;
    font-weight: normal;
    z-index: 0;
}

.input {
    /*-webkit-appearance: none;*/
    font-size: 16px;
    position: relative;
    display: block;
    width: 100%;
    padding: 15px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0);
}

textarea.input {
    height: 150px;
}

.empty input.input, .empty textarea.input, .empty select.input {
    border-color: #d9d9d9;
}

    .input:focus, .empty input.input:focus {
        border-color: #aaa;
    }
/**
.input[pattern]:valid {
    border-color: #42d142;
}

.input:invalid {
    border-color: #ff8e7a;
}
*/
.form-submitted .empty .input:invalid {
    border-color: #ff8e7a;
}

label.nonEmpty {
    top: 2px;
    font-weight: bold;
    color: #69c;
    z-index: 1;
}

.darkInput {
    background: #444;
    color: #fff;
    border-radius: 5px;
}

.submit {
    text-align: center;
    color: #000;
    font-size: 15px;
    display: block;
    width: 100%;
    padding: 14px;
    text-transform: uppercase;
    background: #eee;
    background: linear-gradient(#eee, #ddd);
    border: 1px solid #999;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Montserrat';
}
.enrollnow .submit {
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    display: block;
    width: 100%;
    padding: 14px;
    text-transform: none;
    background:linear-gradient(#3d7bb9, #14518f);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Montserrat';
}
.grid {
}

.grid-row {
    display: flex;
}

.grid-column {
    -webkit-flex: 1;
    flex-grow: 1;
    padding: 10px;
    text-align: left;
}
.enrollnow {
    border-radius: 5px;
    position: relative;
    background-color: #369;
    width: 160px;
    margin: 0 auto;
    color: #000;
    padding: 1px 0 1px;
}
.enrollnow a {
    display: block;
    color: #fff;
    padding: 15px;
    font-size: 1.2em
}
    @media (min-width: 600px) {
        .columns {
            display: flex;
        }

        .column {
            -webkit-flex: 2;
            flex-grow: 2;
        }

        .column-padding:nth-child(2n+1) {
            padding-right: 15px;
        }

        .column-padding:nth-child(2n) {
            padding-right: 15px;
        }
    }
    /* My Profile*/
    .column.box-image-grid {
    flex-grow: 1;
    flex-basis: 50%;
    min-width: 300px;
    margin-bottom: 10px
}

#accountitems h2 {
    text-align: center;
    font-size: 1.65em;
}

#accountitems .itemcontainer {
    border: 1px solid #000;
    border-radius: 7px;
    margin: 2px 5px 2px 5px
}

#accountitems .itembody {
    height: 250px;
    background-color: #eee;
    border-radius: 7px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.picture-box-grid-picture {
    height: 282px;
    background-size: auto
}

.grid-column:first-child {
    text-align: right;
    color: #fff;
}

@media (max-width: 799px) {
    .grid-column:last-child {
        flex-grow: 2;
    }

    #accountitems {
        width: 98%;
        margin: 0 auto;
    }
}

#accountitems {
    width: 1000px;
    margin: 0 auto;
}

@media(max-width:1000px) {
    #accountitems {
        width: 96%;
        margin: 0 auto;
    }
}


/* Info Bar */
.info-bar {
    padding: 30px 0;
    margin: 30px 0;
}

.info-bar-columns {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 999px) {
    .info-bar-columns {
        display: flex;
    }
}

.info-bar-columns li {
    display: block;
    -webkit-flex: 1;
    flex-grow: 1;
    padding: 0;
    margin: 0 20px 0 0;
    text-align: center;
}

@media (max-width: 599px) {
    .info-bar-columns li {
        margin: 0 0 50px 0;
    }
}

.info-bar-columns li:last-child {
    margin: 0 0 0 0;
}

.info-bar-columns h3 {
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 30px;
    line-height: 1em;
    font-weight: normal;
}

@media (max-width: 799px) {
    .info-bar-columns h3 {
        font-size: 20px;
    }
}

.info-bar-columns h3::after {
    position: absolute;
    left: 25%;
    bottom: 0;
    border-top: 1px solid #fff;
    width: 50%;
    height: 0px;
    content: "";
}

.info-bar-columns p {
    font-weight: 400;
}

.info-bar-columns a {
    font-size: 16px;
    display: inline-block;
    padding: 12px 25px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    transition: background 0.3s;
}

.info-bar-default {
    background: #eee;
    background: linear-gradient(#eee, #e9e9e9);
    color: #333;
}

    .info-bar-default a {
        background: #ef6e02;
    }

        .info-bar-default a:hover {
            background: #ff7e12;
        }

    .info-bar-default h3 {
        color: #000;
    }

.info-bar-columns h3::after {
    border-top: 1px solid #999;
}

.info-bar-blue {
    background: #29639c;
    background: linear-gradient(#29639c, #19538c);
    color: #eee;
}

    .info-bar-blue a {
        background: #ef6e02;
    }

        .info-bar-blue a:hover {
            background: #ff7e12;
        }

    .info-bar-blue h3 {
        color: #fff;
    }

.info-bar-light {
    background: #eee;
    background: linear-gradient(#eee, #e9e9e9);
    color: #333;
}

.info-bar-white {
    background: #fff;
    color: #333;
}

.info-bar-green {
    background: #507f50;
    background: linear-gradient(#507f50, #406f40);
    color: #fff;
}

.info-bar-orange {
    background: #ff7e12;
    background: linear-gradient(#ff7e12, #ef6e02);
    color: #000;
}

    .info-bar-orange h3 {
        color: #fff;
    }

.info-bar {
    padding: 0
}

.info-bar-default {
    background: none;
}

    .info-bar-default li p.intro {
        text-align: left
    }

.info-bar-columns li {
    text-align: left
}

    .info-bar-columns li:last-child {
        text-align: right
    }
/*Body*/
info, .list-container {
    position: relative;
    display: block;
    padding: 0;
    text-align: left;
}

.info li {
    margin-bottom: 7px;
    line-height: 1.4em;
}
.list-view {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
 
}

    .list-view li {
        display: block;
        position: relative;
        margin: 0;
    }

.list-view-no-links li {
    display: flex;
}

.list-view a {
    display: block;
    display: flex;
    color: #000;
    background: url(/assets/images/template/misc/list-arrow-right.png) no-repeat right 15px center;
}

a.disabled {
    background: #fff;
    cursor: default;
}

.list-view span {
    display: inline-block;
    -webkit-flex: 1;
    flex-grow: 1;
    padding: 17px 40px 17px 20px;
    border-bottom: 1px solid #e1e1e1;
    line-height: 1.5em;
}

.list-view label {
    color: #999;
    margin-right: 5px;
}

    .list-view label.break {
        margin-right: 0;
        display: block;
    }
span.list-view-box {
    width: 130px; 
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    flex: 0 0 60px;
    text-align: center;
}

span.list-view-box-a {
    background: #f8be1c;
    border-bottom: 1px solid #f8be1c;
}

span.list-view-box-b {
    background: #f7571b;
    border-bottom: 1px solid #f7571b;
}

span.list-view-box-c {
    background: #09a896;
    border-bottom: 1px solid #09a896;
}

span.list-view-box-d {
    background: #0c74ab;
    border-bottom: 1px solid #0c74ab;
}

span.list-view-box-pdf {
    background: #eee url(/assets/images/template/misc/list-view-pdf.png) no-repeat center center;
}

span.list-view-box-zip {
    background: #eee url(/assets/images/template/misc/list-view-zip.png) no-repeat center center;
}

span.list-view-box-pps {
    background: #e6e6e6 url(/assets/images/template/misc/list-view-pps.png) no-repeat center center;
}

span.list-view-box-doc {
    background: #e6e6e6 url(/assets/images/template/misc/list-view-doc.png) no-repeat center center;
}

span.list-view-box-www {
    background: #eee url(/assets/images/template/misc/list-view-www.png) no-repeat center center;
}

span.list-view-box-calc {
    background: #ddd url(/assets/images/template/misc/list-view-calc.png) no-repeat center center;
}

span.list-view-box-channel {
    background: #eee url(/assets/images/template/misc/list-view-channel.png) no-repeat center center;
}

span.list-view-box-video {
    background: #eee url(/assets/images/template/misc/list-view-video.png) no-repeat center center;
}

span.list-view-box-e-learn-audio {
    background: #ddd url(/assets/images/template/misc/list-view-e-learn-audio.png) no-repeat center center;
}

span.list-view-box-e-learn-quiz {
    background: #ddd url(/assets/images/template/misc/list-view-e-learn-quiz.png) no-repeat center center;
}

span.list-view-box-e-learn-video {
    background: #ddd url(/assets/images/template/misc/list-view-e-learn-video.png) no-repeat center center;
}

span.list-view-box-e-learn {
    background: #ddd url(/assets/images/template/misc/list-view-e-learn.png) no-repeat center center;
}

span.list-view-box-e-prod {
    background: #ddd url(/assets/images/template/misc/list-view-e-prod.png) no-repeat center center;
}

span.list-view-box-e-tutorial {
    background: #ddd url(/assets/images/template/misc/list-view-e-tutorial.png) no-repeat center center;
}

span.list-view-box-session {
    background: #eee url(/assets/images/template/misc/list-view-session.png) no-repeat center center;
}

span.list-view-box-flash-card {
    background: #eee url(/assets/images/template/misc/list-view-flash-card.png) no-repeat center center;
}

span.list-view-box-user {
    background: #ddd url(/assets/images/template/misc/list-view-user.png) no-repeat center center;
}

span.list-view-box-job {
    background: #ddd url(/assets/images/template/misc/list-view-job.png) no-repeat center center;
}

span.list-view-box-edit {
    background: #ddd url(/assets/images/template/misc/list-view-edit.png) no-repeat center center;
}

span.list-view-box-specialities {
    background: #ddd url(/assets/images/template/misc/specialities.png) no-repeat center center;
}
span.list-view-box-courses {
    background: #ddd url(/assets/images/template/misc/courses.png) no-repeat center center;
}
span.list-view-box-quiz {
    background: #ddd url(/assets/images/template/misc/quiz.png) no-repeat center center;
}
.info, .list-container {
    position: relative;
    display: block;
    padding: 0;
    text-align: left;
}
.info-page{
    position: relative;
    display: block;
    padding: 0 0 50px 0;
    text-align: left;
}
@media (min-width: 1250px) {
    .info, .info-page, .list-container {
        width: 1125px;
        margin: 0 auto;
        position: relative;
    }
}

@media (max-width: 1249px) {
    .info, .info-page, .list-container {
        padding: 0 30px;
    }

    #BreadcrumbContainer .info {
        padding: 0
    }
}

@media (max-width: 800px) {
    .list-container {
        padding: 0;
    }
    .list-view label.break-for-mobile {
        margin-right: 0;
        display: block;
    }
}
.videoholder {
    width: 100%;
}
#videoholderlib {
    width: 75%;
    margin: 0 auto;
    display:none;
}
.bgvid {
    width: 100%;
}
.indent {
    padding: 0 0 0 15px;
}
/* E-learning*/
.e-section-header {
    border-radius: 6px;
    padding: 0px 0 5px 0;
    border: 1px solid #ddd;
}
.e-section-back {
    border-radius: 6px;
    background-color: #004d8f;
    margin-bottom: 10px;
}
.e-section-back span.unitArrow {
    position: absolute;
    left: -1px;
    top: 22px;
}

.e-section-back a {
    display: block;
    display: flex;
    color: #fff;
    font-size: 1.45em;
    padding: 20px;
    text-indent: 12px;
}
.e-part-opener {
    display: inline-block;
    float: right;
    width: 10%;
    height: 45px;
    line-height: 45px;
    vertical-align: middle;
}
.e-part-opener-img {
    display: inline-block;
    float: right;
    width: 40px;
    height: 50px;
    background: url(/assets/images/template/misc/list-view-edit-ceu.png) no-repeat center;
    vertical-align: middle;
    transition: all 0.4s;
}

.e-part-opener-img.no-link {
    display: inline-block;
    float: right;
    width: 40px;
    height: 50px;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/images/template/misc/list-view-edit-ceu.png) no-repeat center;
    vertical-align: middle;
    transition: all 0.4s;
}
 e-part-opener-img.link{
    cursor: pointer;
    background: url(/assets/images/template/misc/list-view-edit-ceu-open.png) no-repeat center;
}

.e-section-expanded .e-part-opener-img {
  display:block;
}

.e-section-data {
    display: none;
    width:94%;
    padding:10px 0 10px 0;
    margin:0 auto;
}

.e-section-expanded .e-section-data {
    display: block
}
.e-partholder {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: 5px 5px 5px 10px;
    vertical-align: middle;
    line-height: 45px;
    color: #ddd;
}
    .e-partholder a {
        color: #000;
        cursor: pointer;
    }
    .e-partholder.section {
        color: #000;
        cursor: pointer;
    }
    .e-partholder.section-expanded {
        color: #000;
        cursor: pointer;
    }
.e-part-expanded {
    background-color: #00aed9;
    border-radius: 6px;
    padding: 5px 0 0 0;
}
.e-parttext {
    display: inline-block;
    width:85%;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
    /*background-color: #fff*/
}
.note-section  {
    padding: 15px 0 15px 0;
}
div.questiontitle, div.notetitle {
    text-align: left;
    font-size: 1.45em;
    color: #369;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #ddd;
    padding: 8px 10px 8px 10px;
    border-radius: 4px;
    background-color: #f7f7f7;
}
.completespan:before {
    display: inline-block;
    width: 15px;
    height: 45px;
    line-height: 45px;
    text-transform: uppercase;
    vertical-align: top;
    content: "\2714";
    color: #393;
    font-weight: bold;
    font-style: italic;
    margin-right: 10px;
    font-size: 1.7em;
}
.incompletespan {
    display: inline-block;
    width: 30px;
    height: 35px;
    line-height: 35px;
    color: red;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
}
.ceuprogresslabel {
    height: 20px;
    line-height: 20px;
    vertical-align: top;
    font-weight: bold
}

.ceuprogressbar {
    display: inline-block;
    width: 60%;
    border: 1px solid #3e7ce4;
    border-radius: 4px 4px 4px 4px;
    height: 20px;
    line-height: 75%;
    text-align: left;
    margin-bottom: 15px;
}
.quiz-questions-expand-icon, .quiz-notes-expand-icon {
    background: url(/assets/images/template/misc/list-arrow-up.png) no-repeat center right;
    display: inline-block;
    margin-right: 2%;
    font-size: 1.75em;
    height: 25px;
    width: 25px;
    line-height: 25px;
    vertical-align: middle;
    transition: all 0.3s;
    float:right;
}
.questionarea, .notesarea {
    display: none;
    width: 100%;
    margin: 0 auto
}

.quiz-questions-expand-icon {
    transform: rotate(-180deg);
}
   
.questionarea .formarea {
        width: 90%;
        margin: 0 auto
    }

    .questionarea .submit {
        width: 50%;
        margin: 0 auto
    }

.quiz-questions-expanded .quiz-questions-expand-icon, .quiz-notes-expanded .quiz-notes-expand-icon {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(-180deg);
}
.quiz-notes-expanded .notesarea  {
    display: block;
    width: 94%;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 9px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: normal;
    color: #333;
    font-size: 85%;
    background-color: #fff;
    border-radius: 4px;
}
.quiz-questions-expanded .questionarea {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: normal;
    color: #333;
    font-size: 85%;
    background-color: #fff;
}
.questionarea {
    padding: 0px 0px 0px 0px
}
    .notesarea .noteimgholder {
        text-align: center
    }

.notesarea p {
    text-align: left
}

.question {
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 5px;
}
.question-id {
    display:inline-flex;
    flex: 0 0 50px;
    text-align: center;
    color: #fff;
    background: #23588e;
    padding: 15px;
    border-radius: 5px 0 0 5px;
    vertical-align:middle;
}
.question-description {
}

.answers {
    padding: 20px 0;
}

.answer-feedback {
    padding-top: 7px;
    flex: 0 0 20px;
    font-weight: bold;
}

.answer-correct {
    color: #090 !important;
}

.answer-incorrect {
    color: #900 !important;
}

.answer-input {
    padding-left: 10px;
    padding-right: 0;
    flex: 0 0 20px;
}

.answer-selected {
    color: #369;
    font-weight: bold;
}

ul.instruct {
    list-style: none;
}

    ul.instruct li {
        line-height: 1.5;
        text-indent: -30px;
        padding: 8px 0 8px 30px;
    }

        ul.instruct li:before {
            float: left;
            display: block;
            content: '\2756';
            color: #00aed9;
            margin: 0 30px 0 0;
        }
.notesRight {
    float: right;
    margin: 0 0 0 5px;
    max-width: 33%;
}

.notesleft {
    max-width: 60%;
}

.notesMax, .notesCentre, .question-image {
    margin: 0 auto;
    text-align: center;
    display: block;
    padding: 7px;
}
.info p {
    text-align: left;
}
.notesarea p {
    text-align: left
}
#examresults {
    display: block;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -290px;
    z-index: 998;
    background-color: #f1f1f1;
    padding: 15px;
    border: 1px solid #000;
    border-radius: 7px;
}
label.grid-column {
    cursor: pointer;
}
li {
    margin-top: 10px;
}

div.learningGoals ol {
    background: #eee;
    padding-left: 60px;
}

div.learningGoals li {
    background: #fff;
    font-style: italic;
    font-size: 20px;
    font-weight:600;
    color: #00aed9;
    margin-top: 0;
    padding: 6px 0 15px 10px;
    /*border-left: 1px solid #eee;*/
}

    div.learningGoals li div.learningGoalLine {
        font-size: 14px;
        font-style: normal;
        color: #555;
    }
.imgholder {
    text-align: center;
}
@media (max-width:650px) {
    .e-section-back a {
        font-size: 1.25em;
    }
    .e-parttext {
        font-size: 1em;
        width: 80%;
    }
    .e-part-opener-img {
        width:25px;
        background-size:contain;
    }
    .e-section-data {
        width: 98%
    }
    div.notetitle, div.questiontitle {
        padding: 4px 4px 4px 4px;
        font-size: 1.15em;
    }

    .quiz-questions-expand-icon, .quiz-notes-expand-icon {
        width: 22px;
    }
    .quiz-notes-expand-icon {
    }
    .notesMax, .notesCentre, .question-image {
        margin: 0 auto;
        text-align: center;
        display: block;
        max-width: 100%;
    }
    .quiz-notes-expanded .notesarea, .questionarea, .questionarea .formarea {
        width: 100%
    }
    .notesarea ul {
        padding-left: 15px;
    }
    .notesRight {
        max-width: 50%;
    }

    .notesLeft {
        max-width: 100%;
        clear: both;
    }

    #parts-list {
        padding: 5px
    }
    #videoholderlib {
        width: 100%;
    }
}
@media (max-width: 599px) {
    .info, .info-page, .list-container {
        padding: 10px;
        width:100%;
    }
    #breadcrumb {
        font-size: 0.8em;
        list-style: none;
        margin: 0px;
        padding:0px;
    }
        .footeritems li:not(:first-child):before {
        content: "|";
        padding: 8px
    }

    .footeritems li a {
        font-size: .6rem
    }

    .picture-box-grid-column .picture-box-grid-picture {
        margin: 0;
        padding: 10px 10px 0 10px;
    }
}

/** Page Content **/
.header-image-wrapper {
    position: relative;
    height: 600px;
    background: #eee;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
@media (max-width: 799px) {
    .header-image-wrapper {
        height: 300px;
    }
}
.header-image-overlay{
    font-weight:bold;
}
.landing-page-intro-header1 {
    position: relative;
    margin: 0;
    padding: 10px 0 15px 0;
    background: #ddd;
    z-index: 1;
}
.setting-standards {
    background: #eee;
    border-radius: 0 0 3px 3px;
    border: 1px solid #fff;
}
.setting-standards h1 {
        padding: 0 20px;
        color: #058dbd;
        font-weight:600;
        font-style: italic;
}
.landing-page-intro-header1 p {
    font-size: 20px;
    line-height: 1.7em;
    font-style: italic;
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
Accredited - Preferred - Recognised
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
@media (min-width: 800px) {
    .apr-container {
        position: relative;
        display: block;
        text-align: left;
    }
    .apr-holder {
        background-color: #d4d4d4;
        border: 1px solid #ddd;
    }
    .apr {
        display: flex;
        margin-bottom: 20px;
    }

    .apr-intro {
        position: relative;
        -webkit-flex: 1;
        flex-grow: 2;
        padding: 20px 0 10px 0;
        color: #777;
        background: #fff;
        z-index: 3;
    }
        .apr-intro:before {
            content: '';
            background: inherit;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            transform-origin: 100% 0;
            transform: skew(344deg) translateX(-105%);
            z-index: -1;
        }

        .apr-intro:after {
            content: '';
            background: inherit;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            transform-origin: 100% 0;
            transform: skew(20deg) translateX(-100%);
            z-index: -1;
        }

        .apr-intro h1 {
            font-size: 2em;
            margin: 0;
            color: #369;
        }

        .apr-intro p {
            margin-top: 38px;
            font-size: 20px;
            line-height: 1.7em;
            font-style: italic;
        }
    .apr-breakdown {
        display: flex;
        flex-direction: column;
        -webkit-flex: 1;
        flex-grow: 3;
        padding: 0;
        z-index: 1;
    }

   
}
@media (min-width: 1250px) {
    .apr-container {
        width: 790px;
        margin: 0 auto;
    }
}

@media (max-width: 1249px) {
    .apr-container {
        padding: 0 20px;
    }
}
@media (max-width: 799px) {
    .apr-holder {
        background-color: none;
        border: none;
    }
    .apr-container {
        margin: 0;
        padding:0px;
        text-align: left;
    }

    .apr {
        margin-bottom: 20px;
    }

    .apr-intro {
        padding: 10px;
        color: #777;
        background: #d4d4d4;
        z-index: 3;
    }

        .apr-intro h1 {
            font-size: 1.5em;
            margin: 0;
            color: #00aed9;
        }

   
}

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
How it works
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
.how-it-works {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}

.how-it-works-title {
    font-size: 30px;
    margin-bottom: 40px;
}
    .how-it-works-1 .how-it-works-number span {
        background: #009a03;
    }

    .how-it-works-1 h3 {
        color: #009a03;
    }

    .how-it-works-2 .how-it-works-number span {
        background: #d0a73d;
    }

    .how-it-works-2 h3 {
        color: #d0a73d;
    }

    .how-it-works-3 .how-it-works-number span {
        background: #0051a2;
    }

    .how-it-works-3 h3 {
        color: #0051a2;
    }
@media (min-width: 600px) {
    .how-it-works-columns {
        display: flex;
        text-align: center;
        align-items: flex-start;
    }

    .how-it-works-column {
        -webkit-flex: 1;
        flex-grow: 1;
        padding: 0 10px;
    }

        .how-it-works-column:first-child {
            padding-left: 0;
        }

        .how-it-works-column:last-child {
            padding-right: 0;
        }

    .how-it-works-number {
        position: relative;
        margin: 0 0 30px 0;
    }

    .how-it-works-column:not(:last-child) .how-it-works-number:after {
        content: '';
        display: block;
        background-image: url(/assets/images/landing-pages/personal-trainer/line.png);
        background-repeat: no-repeat;
        position: absolute;
        right: -50%;
        top: -30px;
        background-size: 70%;
        background-position: center top;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .how-it-works-number span {
        color: #fff;
        font-size: 40px;
        line-height: 100px;
        font-weight: bold;
        vertical-align: central;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-block;
    }

    .how-it-works-picture {
        background-position: center center;
        background-repeat: no-repeat;
        height: 300px;
        overflow: hidden;
        background-size: cover;
        margin: 0 0 20px 0;
    }

    .how-it-works h3 {
        font-size: 25px;
        margin: 0;
    }
}


/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
CPR
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
@media (min-width: 800px) {
    .cpr-container {
        position: relative;
        display: block;
        text-align: left;
    }

    @media (min-width: 1250px) {
        .cpr-container {
            width: 1200px;
            margin: 0 auto;
        }
    }

    @media (max-width: 1249px) {
        .cpr-container {
            padding: 0 20px;
        }
    }

    .cpr {
        display: flex;
        margin-bottom: 20px;
    }

    .cpr-intro {
        position: relative;
        -webkit-flex: 1;
        flex-grow: 2;
        padding: 20px 0 10px 0;
        color: #fff;
        background: #058dbd;
        z-index: 3;
    }

        .cpr-intro:before {
            content: '';
            background: inherit;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            transform: translateX(-199%);
            z-index: -1;
        }

        .cpr-intro:after {
            content: '';
            background: inherit;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            transform-origin: 100% 0;
            transform: skew(-20deg) translateX(-70%);
            z-index: -1;
        }

        .cpr-intro h1 {
            font-size: 2em;
            margin: 0;
            color: #f4f4ff;
        }

        .cpr-intro p {
            margin-top: 38px;
            font-size: 20px;
            line-height: 1.7em;
            font-style: italic;
        }

    .cpr-breakdown {
        display: flex;
        flex-direction: column;
        -webkit-flex: 1;
        flex-grow: 3;
        padding: 0;
        z-index: 1;
    }

    .cpr-breakdown-item {
        position: relative;
        z-index: 10;
        padding: 20px 0 20px 180px;
        -webkit-flex: 1;
        flex-grow: 1;
    }

        .cpr-breakdown-item:nth-child(1) {
            background: #fff;
        }

        .cpr-breakdown-item:nth-child(2) {
            background: #dff3fc;
        }

        .cpr-breakdown-item:nth-child(3) {
            background: #bfe4f5;
            border-radius: 0 0 15px 0;
        }

        .cpr-breakdown-item h3 {
            position: relative;
            font-size: 1.2em;
            color: #0053a0;
            margin: 0 0 3px 0;
            padding-left: 35px;
        }

            .cpr-breakdown-item h3 span {
                position: absolute;
                left: -5px;
                top: -5px;
                background: #03386e;
                border-radius: 0.8em;
                color: #fff;
                display: inline-block;
                font-weight: bold;
                line-height: 1.6em;
                text-align: center;
                width: 1.6em;
            }

        .cpr-breakdown-item p {
            margin: 0;
        }
}

@media (max-width: 799px) {
    .cpr-container {
        margin: 0;
        text-align: left;
    }

    .cpr {
        margin-bottom: 20px;
    }

    .cpr-intro {
        padding: 20px;
        color: #fff;
        background: #058dbd;
        z-index: 3;
    }

        .cpr-intro h1 {
            font-size: 1.7em;
            margin: 0;
            color: #f4f4ff;
        }

    .cpr-breakdown-item {
        padding: 20px;
    }

        .cpr-breakdown-item:nth-child(1) {
            background: #fff;
        }

        .cpr-breakdown-item:nth-child(2) {
            background: #effafe;
        }

        .cpr-breakdown-item:nth-child(3) {
            background: #dff3fc;
            border-radius: 0 0 15px 0;
        }

        .cpr-breakdown-item h3 {
            position: relative;
            font-size: 1.2em;
            color: #0053a0;
            margin: 0 0 3px 0;
            padding-left: 35px;
        }

            .cpr-breakdown-item h3 span {
                position: absolute;
                left: -5px;
                top: -5px;
                background: #03386e;
                border-radius: 0.8em;
                color: #fff;
                display: inline-block;
                font-weight: bold;
                line-height: 1.6em;
                text-align: center;
                width: 1.6em;
            }

        .cpr-breakdown-item p {
            margin: 0;
        }
}





/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
Grid with picture boxes
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
.picture-box-grid { 
    margin: 20px 0; 
}

.picture-box-grid-columns {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: flex-start;
}

.picture-box-grid-column {
    flex-grow: 1;
    flex-basis: 25%;
    min-width: 250px;
    padding: 2px;
}

.picture-box-grid-3-columns .picture-box-grid-column {
    flex-basis: 33%;
}

.picture-box-grid-picture {
    background-position: center center;
    background-repeat: no-repeat;
    height: 250px;
    overflow: hidden;
    background-size: cover;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

    .picture-box-grid-picture a {
        display: block;
        width: 100%;
        height: 100%;
    }

.picture-box-grid-text {
    padding: 0 2px;
    font-size: 0.95em;
}

.picture-box-grid-text-body {
    text-align: center;
}

.picture-box-grid-text-footer {
    margin: 20px 0;
}

.picture-box-grid-button {
    display: inline-block;
    color: #fff;
    background: #369;
    padding: 10px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.95em;
}
/* basket/order display */
#BasketTable {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}

    #BasketTable thead th {
        padding: 0 15px 5px 0;
        font-weight: normal;
        font-size: 0.9em;
        color: #666;
        text-align:center;
    }

    #BasketTable tbody td, #BasketTable tfoot td {
        padding: 15px 15px 15px 0;
        border-top: 1px solid #eee;
        vertical-align: top;
    }

.basket-image {
    width: 80px;
}

.basket-title {
    font-weight: bold;
}

@media (min-width: 800px) {
    .basket-title {
        font-size: 1.1em;
    }
}

.basket-qty {
    padding: 3px 10px;
    border-radius: 3px;
    background-image: linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
    font-size: 0.8em;
}

    .basket-qty option {
        padding: 10px;
        text-align: right;
    }

.basket-delete {
    margin: 20px 0 0 0;
    font-size: 0.9em;
}

.basket-price {
    color: #b12704;
    font-weight: bold;
    width: 155px;
}

.basket-discount {
    color: #447;
    font-weight: bold;
}

.basket-item-promotion-message {
    background: rgb(255, 255, 234);
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2em;
    color: #777;
}

#BasketTable tbody tr.basket-item-promotion-message td {
    padding-left: 10px;
}

.basket-item-promotion-message b {
    font-weight: normal;
    color: #555;
}

.basket-item-delete {
    padding: 5px 10px;
    color: #fff;
    background: #222;
    background: linear-gradient(to bottom, #222, #333);
    border: 1px solid #000;
    border-radius: 3px;
    font-size: 0.9em;
}

.basket-item-property-option select {
    padding: 3px 10px;
    border-radius: 3px;
    background-image: linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
}

@media (max-width: 799px) {
    #BasketTable th:first-child, #BasketTable td:first-child

{
    display: none;
}

}
@media (max-width: 799px) {
    .info {
        padding: 0 8px;
    }
    #BasketTable tbody td, #BasketTable tfoot td {
        padding: 15px 6px 15px 0;
    }

    .basket-item-property {
        font-size: 0.9em;
    }

    span.basket-item-property-title {
        display: block;
        margin: 3px 0;
    }

    span.basket-item-property-title-checkbox {
        display: inline-block;
        vertical-align: middle;
    }

    span.basket-item-property-option input[type=checkbox] {
        margin: 0;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .basket-item-property-option select {
        padding: 3px 6px;
        max-width: 195px;
    }

    .basket-price {
        width: 105px;
        font-size: .9em;
    }

    .basket-qty {
        padding: 3px 6px;
    }

    .basket-item-delete {
        padding: 5px 6px;
    }
}

@media (min-width: 800px) {
    .basket-item-property {
        font-size: 0.9em;
        display: flex;
        align-items: center;
    }

        .basket-item-property span {
            display: inline-block;
            padding: 3px 0;
        }

    span.basket-item-property-title {
        width: 150px;
        text-align: right;
        padding-right: 10px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    span.basket-item-property-option input[type=checkbox] {
        margin: 0;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
}

span .basket-item-property-title-enroll {
}

span.basket-item-property-title-flex {
    color: #8b8c8f;
    font-weight: bold;
}

span.basket-item-property-title-pay {
    color: #91c74a;
    font-weight: bold;
}


#BasketTable td.sub-title {
    text-align: right;
    font-weight: bold;
}

#BasketTable tfoot tr:last-child {
    background: #eee;
}
/* checkout steps*/
#CheckoutSteps {
    margin: 20px 0 0 0;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

    #CheckoutSteps .info {
        display: flex;
    }

.step {
    flex: 1;
}

.step {
    color: #999;
}

    .step span {
        display: inline-block;
        color: #fff;
        font-size: 15px;
        line-height: 30px;
        vertical-align: central;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 50%;
        margin: 0 10px 0 0;
        vertical-align: middle;
        background: #ccc;
    }

.step-complete {
    color: #d8c400;
    color: #5fa700;
}

    .step-complete span {
        background: #d8c400;
        background: #5fa700;
    }

.step-active {
    color: #0aadd6;
}

    .step-active span {
        background: #0aadd6;
    }


@media (min-width: 600px) {
    .list-2-columns {
        column-count: 2;
        list-style: none;
        padding: 0 0 0 30px;
        margin: 0;
    }

        .list-2-columns li {
            position: relative;
            margin: 0 0 6px 0;
            padding: 0 0 0 15px;
        }

            .list-2-columns li:before {
                content: '\2022';
                font-weight: bold;
                color: #333;
                position: absolute;
                top: 0;
                left: 0;
            }
}
@media (max-width: 599px) {
    #videoholder1 h1 {font-size:1.5rem}
    #videoholder1 p {padding:0 5px; text-align:left}
    .how-it-works{
        margin-top:5px;
    }
    .how-it-works-column {
        position: relative;
        padding: 0 2px;
    }

    .how-it-works-number {
        position: absolute;
        top: 160px;
        left: 50%;
        margin: 0 0 30px -40px;
    }

        .how-it-works-number span {
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            font-weight: bold;
            vertical-align: central;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: inline-block;
        }

    .how-it-works-text {
        text-align: left;
        padding-top: 0px;
    }

    .how-it-works-picture {
        background-position: center center;
        background-repeat: no-repeat;
        height: 200px;
        overflow: hidden;
        background-size: cover;
        margin: 0 0 20px 0;
    }

    .how-it-works-text h3 {
        font-size: 20px;
    }

    .how-it-works-text p {
        font-size: 0.9em;
    }
}
/*****************************
Check your answers
******************************/
div.questionsAnswersCheck {
   padding: 5px 10px 5px 10px;

}

#CheckYourWork {
    display: none;
    background: #eee;
    border: 1px solid #999;
    border-radius: 3px;
    margin: 20px 0 0 0;
    min-height: 300px;
}

.CheckYourWorkTitle {
    color: #fff;
    text-shadow: 0 0 10px #000;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    background: #999;
    font-size: 90%;
    padding: 10px 0 10px 10px;
    font-weight: normal;
}

#CheckYourWorkAnswers {
    font-size: 12px;
    overflow: auto;
    padding: 5px;
}

    #CheckYourWorkAnswers h3 {
        font-size: 13px;
        font-weight: bold;
        margin: 6px 0;
    }

        #CheckYourWorkAnswers h3:first-child {
            margin-top: 0;
        }

div.checkYourWorkAnswer {
    padding: 3px 0;
    margin: 2px 0; 
}

table.checkYourAnswerTable {
    width: 100%;
}

    table.checkYourAnswerTable th, table.checkYourAnswerTable td {
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

    table.checkYourAnswerTable th {
        border-bottom: 1px solid #000;
    }

.CheckYourWorkButtons {
    text-align: center;
    padding: 10px
}
.CheckYourWorkButtons button{
    text-align: center;
    color: #000;
    font-size: 15px;
    display: block;
    width: 25%;
    padding: 14px;
    text-transform: uppercase;
    background: #eee;
    background: linear-gradient(#eee, #ddd);
    border: 1px solid #999;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Montserrat';
    margin:0 auto;
}
/*****************************
Questions answers
******************************/
#Sizer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    display: none;
}

#TableSizer {
    position: fixed;
    left: 0;
    top: 0;
    width: 700px;
    padding: 0;
    background: red;
    z-index: 9000;
    display: none;
}

div.questionsAnswers h3 {
    text-decoration: underline;
    margin-bottom: 20px;
}

span.slot {
    color: #999;
    padding: 0 15px;
    font-weight: bold;
    font-style: italic;
    border-bottom: 1px dotted #aaa;
}

div.question {
    position: relative;
    margin: 20px 0 0 0;
    clear: both;
}

div.questionSmallImage {
    padding: 20px;
}

div.questionBigImage {
    text-align: center;
    padding: 20px;
}

span.questionNo {
    font-weight: bold;
}

div.answer {
    margin: 4px 0 4px 25px;
}

div.answer2 {
    margin: 4px 0 4px 25px;
    font-weight: bold;
    color: #89c33c;
}

div.answer3 {
    margin: 4px 0 4px 25px;
    font-weight: bold;
    color: red;
}
div.answer select {
    -webkit-appearance: none;
    padding-top: 3px;
    padding-bottom: 3px;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 6px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC), -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
    background-position: right center;
    background-repeat: no-repeat;
    font-size: 90%;
    border-radius:4px;
}
span.answerPrefix {
    font-weight: bold;
    font-style: italic;
    color: #555;
    margin-right: 10px;
}

table.answers {
    margin: 0 0 0 25px;
}

    table.answers input.answerInput, table.match input.answerInput, table.grid input.answerInput {
        border: 0;
        border-bottom: 1px solid #666;
        border-radius: 0;
        width: 200px;
        font-size: 90%;
    }

div.revealAnswers {
    clear: both;
    margin: 50px 0 0 0;
    padding: 10px;
    border-radius: 5px;
}
    div.revealAnswers button {
        text-align: center;
        color: #000;
        font-size: 15px;
        display: block;
        width: 25%;
        padding: 14px;
        text-transform: uppercase;
        background: #eee;
        background: linear-gradient(#eee, #ddd);
        border: 1px solid #999;
        border-radius: 3px;
        cursor: pointer;
        font-family: 'Montserrat';
    }

/*****************************
Match questions
******************************/
table.match td {
    position: relative;
}

/*****************************
Grid questions
******************************/
table.grid {
    margin: 4px 0 4px 25px;
}

    table.grid th, table.grid td {
        position: relative;
        padding: 0 60px 0 0;
        text-align: left;
    }

    table.grid th {
        text-align: left;
    }

div.gridContainer {
    padding: 4px 0 4px 25px;
}

table.gridMixed {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

    table.gridMixed th {
        /*position: relative;*/
        padding: 5px 10px;
        margin: 0;
        background: #eee;
        border: 1px solid #ccc;
        text-align: left;
    }

    table.gridMixed td {
        /*position: relative;*/
        padding: 0;
        margin: 0;
        border: 1px solid #ccc;
    }

        table.gridMixed td.gridLabel {
            background: #f9f9f9;
        }

        table.gridMixed td span {
            display: inline-block;
            padding: 0 10px;
        }

        table.gridMixed td input {
            width: 100%;
            height: 100%;
            padding: 0 10px;
            background: #fff;
            border: 0;
            border-radius: 0;
        }

/*****************************
Quiz
******************************/
div.answer label, div.answer2 label, div.answer3 label {
    margin-left: 10px;
}

div.answerCorrect {
    font-weight: bold;
}

span.quizTag {
    margin: 0 0 0 10px;
    font-weight: bold;
}

span.quizTagCorrect {
    color: #809c38;
}

span.quizTagIncorrect {
    color: red;
}
/*****************************
Match table
******************************/
table.match-table {
    border-collapse: collapse;
}

    table.match-table td {
        vertical-align: middle;
    }

        table.match-table td input {
            width: 50px;
            border: 0;
            border-bottom: 1px solid #000;
            font-size: 18px;
        }
/* Overlay additions */
.answerOverlay {
    border: 0;
    border-bottom: 1px solid #666;
    border-radius: 0;
    width: 200px;
}

.answerOverlayGrid {
    min-height: 2em;
    color: #444;
    padding: 0 10px;
}

table.gridMixed .answerOverlay {
    border: 0;
    border-radius: 0;
}
