@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700|Open+Sans:400,300,400italic,600,700,800);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    text-decoration: none;
    color: inherit
}

    a:link {
        color: inherit
    }

    a:hover {
        color: inherit
    }

    a:active {
        color: inherit
    }

#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

}

    #skip a:focus {
        /*position: static;*/
        width: auto;
        height: auto;
        overflow: visible;
        left: 0;
        top: 80px;
        background-color: #ffffff;
        color: #333333;
        -webkit-transition: top .1s ease-in, background .5s linear;
        transition: top .1s ease-in, background .5s linear;
        z-index:1000;
    }                       


.button {
    font-family: "Open Sans",sans-serif;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    transition: all 0.3s ease 0s;
    margin-right: 7px;
    margin-top: 5px;
    margin-bottom: 5px
}

.button {
    color: #fff;
    background-color: #007A7F;
    border: 1px solid transparent
}

    .button:hover {
        background-color: #01696D
    }

    .button a {
        color: #FFFFFF
    }

    .button.secondary {
        color: #606060;
        background-color: #fff;
        border: 1px solid #e8e8e8;
        opacity: 0.9;
        font-weight: 500
    }

        .button.secondary:hover {
            background-color: #eee
        }

        .button.secondary a {
            color: #606060
        }

    .button.red {
        color: #fff;
        background-color: #8A0000;
        border: 1px solid transparent;
        opacity: 0.9;
        font-weight: 500;
        margin-right: 0px
    }

        .button.red:hover {
            background-color: #A80000
        }

        .button.red a {
            color: #fff
        }

    .button.teal {
        color: #fff;
        background-color: #009688;
        border: 1px solid transparent;
        opacity: 0.9;
        font-weight: 500;
        margin-right: 0px
    }

        .button.teal:hover {
            background-color: #01696D
        }

        .button.teal a {
            color: #fff
        }

    .button.blue {
        color: #fff;
        background-color: #003161;
        border: 1px solid transparent;
        opacity: 0.9;
        font-weight: 500;
        margin-right: 0px
    }

        .button.blue:hover {
            background-color: #0052a2
        }

        .button.blue a {
            color: #fff
        }

    .button.overlay {
        color: #fff;
        background-color: rgba(255,255,255,0);
        border: 1px solid #e8e8e8;
        margin: 45px 0px 83px 0px
    }

        .button.overlay:hover {
            background-color: rgba(29,25,25,0.77)
        }

    .button.hero {
        width: 333px;
        padding: 31px 34px;
        font-size: 20px;
        font-weight: 600;
        margin: 0 10px;
        border-radius: 4px;
        display: inline-block;
        vertical-align: middle;
        text-transform: uppercase;
        background-color: rgba(255,255,255,0);
        border: 3px solid #fff
    }

        .button.hero:hover {
            background-color: rgba(255,255,255,0.43);
            color: #000
        }
        
        @media screen and (max-width: 750px) {
            .button.hero {
               /*display: block;*/
               text-align: center;
               margin: 10px auto;
               width:333px;
            }
        }

          @media screen and (max-width: 350px) {
            .button.hero {
               /*display: block;*/
               text-align: center;
               margin: 6px auto;
               width:230px;
               padding:10px;
               font-weight: 100;
               font-size: 18px;
            }
        }


    .button.large {
        padding: 10px 45px;
        font-size: 20px;
        font-weight: 600
    }

    .button.small {
        font-size: 13px;
        font-weight: 500
    }

    .button.right {
        float: right
    }

    .button.overlay {
        background-color: rgba(255,255,255,0);
        border-radius: 4px;
        padding: 10px 87px;
        margin: 50px 10px 0;
        border: 2px solid #fff
    }

        .button.overlay:hover {
            background-color: rgba(255,255,255,0.43);
            color: #000
        }
.banner-button {
    margin-top: 70px;
}

@media screen and (max-width:460px) {
    .button.large {
        padding: 10px 15px;
    }

    .button.overlay {
        margin: 10px auto;
        width: 231px;
        padding: 10px 0;
    }
    .banner-button {
        margin-top: 30px;
    }
}

.btn-primary {
    color: #fff;
    padding: 10px 20px;
    background: #007A7F;
    border: 0px;
    border-radius: .28571429rem;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 15px;
    text-align: center;
    font-family: "Open Sans",sans-serif;
    -webkit-transition: all 0.3s ease-in-out
}

    .btn-primary a {
        color: #fff
    }

    .btn-primary i {
        display: inline-block;
        vertical-align: middle
    }

    .btn-primary span {
        display: inline-block
    }

    .btn-primary:hover {
        background: #01696D
    }

.btn-tertiary {
    background: #fff;
    color: #606060;
    border: 1px solid #e8e8e8;
    font-size: 12px;
    opacity: .9;
    font-weight: 500;
    font-family: "Open Sans",sans-serif
}

    .btn-tertiary i {
        display: inline-block;
        vertical-align: middle
    }

    .btn-tertiary span {
        display: inline-block;
        vertical-align: middle
    }

    .btn-tertiary:hover {
        background: #eee
    }

.btn-small {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 3px;
    text-align: center;
    line-height: 1.4;
    display: inline-block;
    transition: all 0.3s ease 0s;
    font-family: "Open Sans",sans-serif
}

    .btn-small span {
        vertical-align: middle
    }

.btn-big {
    cursor: pointer;
    font-family: "Open Sans",sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 45px;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out
}

    .btn-big a {
        color: #FFF
    }

.cfp-dropdown {
    width: 20%;
    min-width: 300px;
    text-align: center;
    margin: 3em auto 0;
}


.search-button {
    vertical-align: middle;
    margin-left: 10px;
    padding: 4px 11px;
    border: 1px solid #D6D6D6;
    color: #606060;
    border-radius: 3px;
    cursor: pointer
}

    .search-button:hover {
        background-color: #D6D6D6;
        color: #fff
    }

    .search-button:active {
        color: #606060
    }

input[type="text"], input[type="date"], input[type="datetime"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], input[type="tel"], textarea {
    width: 100%;
    margin-bottom: .5em;
    border: 2px solid #D6D6D6;
    border-radius: 3px;
    padding: 6px 6px 6px 6px;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif
}

    input[type="text"].large, input[type="date"].large, input[type="datetime"].large, input[type="email"].large, input[type="password"].large, input[type="number"].large, input[type="search"].large, input[type="time"].large, input[type="url"].large, input[type="tel"].large, textarea.large {
        font-size: 18px;
        margin-bottom: .75em;
        padding: 10px
    }

    input[type="text"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus {
        outline: none;
        border: 2px solid #007A7F;
        padding: 5px 5px 5px 5px;
        -webkit-transition: border-color 0.2s ease-in-out;
        transition: border-color 0.2s ease-in-out
    }

        input[type="text"]:focus.large, input[type="date"]:focus.large, input[type="datetime"]:focus.large, input[type="email"]:focus.large, input[type="password"]:focus.large, input[type="number"]:focus.large, input[type="search"]:focus.large, input[type="time"]:focus.large, input[type="url"]:focus.large, input[type="tel"]:focus.large, textarea:focus.large {
            font-size: 18px;
            margin-bottom: .75em;
            padding: 10px
        }

input.error {
    border: 2px solid red
}

select {
    width: 100%;
    margin-bottom: 1em;
    border: 2px solid #D6D6D6;
    border-radius: 3px;
    padding: 5px;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif
}

    select.large {
        font-size: 18px;
        margin-bottom: .75em;
        padding: 10px
    }

    select:focus {
        outline: none;
        border: 2px solid #007A7F;
        padding: 4px
    }

    select.error {
        border: 2px solid red
    }

.pnumber-input-wrap {
    width: 70%;
    margin-right: 2%;
    display: inline-block
}

.pext-input-wrap {
    width: 26%;
    display: inline-block;
    vertical-align: top
}

.large-input-label {
    font-weight: 700;
    color: #606060;
    margin-bottom: .5em;
    display: block;
    font-size: 18px
}

.float-left {
    float: left !important
}

.float-right {
    float: right !important
}

.hidden {
    display: none !important
}

.teal-link {
    color: #007A7F;
    cursor: pointer
}

    .teal-link:link {
        color: #007A7F
    }

    .teal-link:hover {
        color: #01696D
    }

.mb-75 {
    margin-bottom: .75em
}

.mb-1 {
    margin-bottom: 1em
}

.mb-15 {
    margin-bottom: 1.5em
}

.mb-2 {
    margin-bottom: 2em
}

.mt-75 {
    margin-top: .75em
}

.mt-1 {
    margin-top: 1em
}

.mt-2 {
    margin-top: 2em
}

.left {
    float: left
}

.right {
    float: right
}

.light-gray-background {
    background: #F9F9F9
}

* {
    box-sizing: border-box
}

html {
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: "Open Sans",sans-serif
}

body {
    -webkit-font-smoothing: antialiased;
    background: #fff;
    color: #333;
    height: 100%
}

section {
    display: block;
    width: 100%;
    clear: both;
    overflow: hidden
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 28px
}

h3 {
    font-size: 24px
}

p {
    line-height: 1.4;
    margin-top: 1em;
    font-size: 20px;
    font-weight: 400
}

a {
    text-decoration: none
}

.center-align-item {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.page-background {
    background-color: #ebebeb
}

.section-overview {
    text-align: center;
    padding: 7em 0em 7em 0em;
    font-weight: 100
}
.white.section-overview {
    background-color: #FFFFFF
}

.section-overview-alt {
    text-align: center;
    padding:10em 0em 12em 0em;
    font-weight: 100
}

@media screen and (max-width: 460px) {
    .section-overview, .section-overview-alt {
        padding: 2em 0;
    }
}

.course-category-wrapper {
    margin-left: auto;
    margin-right: auto;
    text-align: left
}

@media screen and (max-width: 900px) {
    .course-category-wrapper {
        margin-left: 8%
    }
}

@media screen and (max-width: 740px) {
    .course-category-wrapper {
        margin-left: 19%
    }
}

@media screen and (max-width: 620px) {
    .course-category-wrapper {
        margin-left: 8%
    }
}

@media screen and (max-width: 507px) {
    .course-category-wrapper {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-left: 5%;
        padding-right: 5%
    }
}

.course-category-head {
    font-size: 29px;
    text-align: left;
    margin-right: auto;
    margin-bottom: 36px
}

@media screen and (max-width: 900px) {
    .course-category-head {
        margin-right: 8%;
        margin-left: 8%
    }
}

@media screen and (max-width: 507px) {
    .course-category-head {
        margin-left: auto;
        margin-right: auto;
        padding: 5%
    }
}

.course-category-subtext {
    font-size: 15px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 56px
}

@media screen and (max-width: 900px) {
    .course-category-subtext {
        margin-right: 8%;
        margin-left: 8%
    }
}

@media screen and (max-width: 450px) {
    .course-category-head {
      margin-bottom:0;
    } 
    .course-category-subtext {
        margin-right: 7%;
        margin-left: 4%;
        line-height: 28px;
    }
}

.course-category-subhead {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 20px;
    margin-right: 8%
}

.course-boxes {
    width: 175px;
    height: 180px;
    background-color: #fff;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 34px;
    margin-bottom: 50px;
    box-shadow: 0px 2px 3px 0px #9E9E9E;
    cursor: pointer;
    transition: all .2s ease-in-out
}

    .course-boxes:hover {
        transform: scale(1.1)
    }

    .course-boxes.red {
        border-top: 5px solid #a80000
    }

    .course-boxes.blue {
        border-top: 5px solid #6786e4
    }

    .course-boxes.teal {
        border-top: 5px solid teal
    }
    .course-boxes.purple {
        border-top: 5px solid #733ff1
    }


.course-icons {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10%;
    height: 50%;
    margin-bottom: 20px;
    margin-top: 3px;
    vertical-align: middle
}

    .course-icons img {
        width: 70px;
        height: 70px
    }

.course-title {
    background-color: #ffffff;
    color: #606060;
    padding: 0px 16px 9px 16px;
    text-align: center;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
}

    .course-title.long-title {
        padding-bottom: 0px;
        margin-bottom: 3px
    }

        .course-title.long-title.extra {
            font-size: 15px
        }

.class-promo-head {
    width: 100%;
    color: #FFFFFF;
    text-align: center;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif
}

    .class-promo-head h1 {
        font-size: 70px;
        line-height: 100px;
        text-transform: uppercase;
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 100
    }

    .class-promo-head p {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 16px
    }

p.class-promo-subhead {
    margin-top: 25px
}

.course-type-subnav {
    margin-bottom: 75px;
    margin-top: 75px; /*50px;*/
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

@media screen and (max-width: 460px) {
    .course-type-subnav {
        margin-top:15px;
        margin-bottom: 15px;
    }
}
    

.course-type-subnav-item {
    display: inline-block;
    margin-right: 4%;
    margin-left: 4%;
    cursor: pointer;
    letter-spacing: 1
}

@media screen and (max-width: 460px) {
    .class-promo-head h1 {
        font-size: 37px;
        line-height: 59px;
        margin-bottom:25px;
    }
}

.pull-quote-section {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    text-align: left
}

    .pull-quote-section h3 {
        text-transform: uppercase;
        font-weight: 900;
        line-height: 30px
    }

    .pull-quote-section p {
        line-height: 40px
    }

    .pull-quote-section.red {
        color: #a80000
    }

    .pull-quote-section.blue {
        color: #224BC3; /*#6786e4*/
    }

    .pull-quote-section.teal {
        color: #00857A;  /*#009688*/
    }
    .pull-quote-section.purple {
        color: #5c37b7;
    }


.pull-quote-head {
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    color: #606060
}

    .pull-quote-head.white {
        color: #FFF
    }

    .pull-quote-head.red {
        color: #a80000
    }

    .pull-quote-head.blue {
        color: #6786e4
    }

    .pull-quote-head.teal {
        color: #009688
    }

.pull-quote-box {
    padding: 20px 43px 20px 27px;
    background-color: #a80000;
    color: #FFF;
    font-size: 50px;
    margin: 0px 40px 138px 60px;
    vertical-align: middle;
    height: 64px;
    width: 50px;
    font-family: roboto-slab;
    display: inline-block
}

    .pull-quote-box.blue {
        background-color: #003161
    }

    .pull-quote-box.teal {
        background-color: #009688
    }

.pull-quote-name {
    text-align: right;
    padding-right: 35px;
    text-transform: uppercase;
    font-weight: 700
}

@media screen and (max-width:450px) {
    .pull-quote-section {
        min-width: 250px;
        text-align: center;
        margin-left: -20px;
    }

    .pull-quote-head {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .pull-quote-section h3 {
        font-size: 17px;
    }

    .pull-quote-section p {
        font-size: 17px;
        line-height: 36px;
    }
}

.promo-display-box img {
    width: 75px;
    height: 75px
}

    .promo-display-box img:hover {
        transform: translate(0, -6px)
    }

.promo-display-box h1 {
    text-transform: uppercase;
    font-size: 50px;
    margin-top: 50px
}

.promo-display-box h3 {
    font-size: 20px;
    font-weight: 400;
}

.pull-quote-short-wrap {
    text-align: center;
    width: 80%
}

    .pull-quote-short-wrap h4 {
        width: 80%;
        padding-left: 10%
    }

    @media screen and (max-width: 450px) {
        .promo-display-box h1 {
            font-size: 36px;
        }

        .promo-display-box h3 {
            font-size: 18px;
            line-height: 28px;
        }
        .pull-quote-short-wrap h4 {
            width: 100%;
            padding-left: 0;
        }
    }


.trapezium {
    background: linear-gradient(rgba(0,150,136,0.63), rgba(0,43,84,0.9)) 100%,url(../../pics/iconBannerTransparentWhite.png) 100%;
    transform: skewY(-6deg);
    transform-origin: top left;
    margin-top: 150px
}

.trapezium-right {
    background-image: linear-gradient(#ff9d2f, #cc0013);
    transform: skewY(6deg);
    transform-origin: top left;
    margin-top: 150px
}

.trapezium-words {
    transform: skewY(6deg)
}

.trapezium-white {
    background-color: white;
    transform: skewY(-4deg);
    transform-origin: top left;
    margin-top: -1px;
    margin-bottom: -133px;
    padding-top: 90px;
    padding-bottom: 53px
}

.trapezium-words-white {
    transform: skewY(4deg);
    margin-top: 22px;
    margin-bottom: 53px
}

@media screen and (max-width: 450px) {
    .trapezium-words-white {
        min-width: 250px;
        padding: 0;
    }
}

.block-wrapper {
    display: block;
    width: 100%;
    text-align: center
}

.page-wrap {
    position: absolute;
    left: 0;
    width: 100%
}

.main-banner {
    background: linear-gradient(90deg, rgba(96,0,97,0.72) -20%, rgba(0,122,127,0.68) 100%),url(../../pics/woman-with-ipad.jpg) 50%;
    color: #FFF
}

@media screen and (max-width: 1646px) {
    .main-banner {
        background-size: auto
    }
}

.home-banner {
    background: linear-gradient(90deg, rgba(96,0,97,0.72) -20%, rgba(0,122,127,0.68) 100%),url(../../pics/woman-with-ipad.jpg) 50% bottom;
    color: #FFF;
    background-size: cover;
}

@media screen and (max-width: 1646px) {
    .home-banner {
        background-size: auto
    }
}

.course-banner {
    background: linear-gradient(90deg, rgba(96,0,97,0.72) -20%, rgba(0,122,127,0.68) 100%),url(../../pics/man-with-ipad.jpg) 50% bottom;
    color: #FFF;
    padding-bottom: 10em;
}

@media screen and (max-width: 450px) {
    .course-banner {
        padding-bottom: 6em;
    }
}

.hero-banner {
    background: linear-gradient(90deg, rgba(177,30,30,0.8) 25%, rgba(32,20,82,0.78) 100%),url(../../pics/computer-learning-small.jpg);
    color: #FFF;
    background-size: cover;
}

    .hero-banner.blue {
        background: linear-gradient(90deg, rgba(52,104,253,0.85) 25%, rgba(32,20,82,0.78) 100%),url(../../pics/computer-learning-small.jpg);
        background-size: cover;
    }

    .hero-banner.teal {
        background: linear-gradient(90deg, rgba(0,174,152,0.8) 25%, rgba(32,20,82,0.78) 100%),url(../../pics/computer-learning-small.jpg);
        background-size: cover;
    }

    .hero-banner.purple {
        background: linear-gradient(90deg, rgba(92, 55, 183, 0.67) 25%, rgba(13, 8, 33, 0.83) 100%),url(../../pics/computer-learning-small.jpg);
        background-size: cover;
    }
.study-banner {
    color: #FFF;
    background: linear-gradient(90deg, rgba(0,79,97,0.88) 15%, rgba(14,5,5,0.83) 100%),url(../../pics/computer-study.jpg) 10% center fixed
}

    .study-banner.blue {
        background: linear-gradient(90deg, rgba(24,46,105,0.894) 25%, rgba(52,104,253,0.78) 100%),url(../../pics/computer-study.jpg) 10% center fixed
    }

    .study-banner.teal {
        background: linear-gradient(90deg, rgba(6,97,100,0.85) 25%, rgba(0,174,152,0.75) 100%),url(../../pics/computer-study.jpg) 10% center fixed
    }

.promo-course-title {
    margin-right: auto;
    text-align: center;
    margin-left: 0px;
    margin-bottom: 36px;
    font-size: 65px;
    line-height: 90px;
    padding-left: 7px;
    padding-right: 7px
}

    .promo-course-title h1 {
        font-weight: 100
    }

.promo-subtitle-breakout {
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    width: 87%;
    margin-left: auto;
    margin-right: auto;
    line-height: 42px;
    max-width: 950px
}


.promo-features-wrap {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    min-width: 225px;
    max-width: 1200px;
    font-size: 20px;
    width: 95%;
    margin-top: 85px;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 460px) {
    .promo-subtitle-breakout {
        font-size: 14px;
        line-height: 30px;
        margin-top: 10px;
        width: 68%;
    }
    .promo-course-title {
        font-size: 38px;
        line-height: 52px;
        margin-bottom: 15px;
    }


}

.promo-features-head {
    text-transform: uppercase;
    font-size: 45px;
    margin-top: 50px;
    font-weight: 100;
    line-height: 66px;
    margin-bottom: 13px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 500px
}

@media screen and (max-width: 460px) {
    .promo-features-head {
        font-size: 35px;
        line-height: 58px;
    }
}

    .promo-features-head.white-background {
        width: 100%;
        text-transform: none;
        max-width: 2000px;
        margin-top: 0px
    }


.course-features-head {
    text-transform: uppercase;
    max-width: 674px;
    font-size: 58px;
    line-height: 82px;
    margin-top: 70px;
    font-weight: 100;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


@media screen and (max-width: 460px) {
    .course-features-head {
        font-size: 37px;
        line-height: 59px;
        margin-bottom: 0px;
        margin-top:15px;
    }
}

.news-features-head {
    text-transform: uppercase;
    font-size: 70px;
    margin: 93px auto 0;
    font-weight: 100;
    line-height: 85px;
    width: 94%;
    text-align: center;
    max-width: 1000px;
}

@media screen and (max-width: 460px) {
    .news-features-head {
        font-size: 54px;
        line-height: 67px;
        margin-bottom: 0px;
        margin-top: 15px;
    }
}

.promo-features-subhead {
    font-size: 20px;
    line-height: 32px;
    margin-top: 15px
}

.promo-features-image-wrap {
    width: 60%;
    vertical-align: middle;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right
}

    .promo-features-image-wrap img {
        width: 100%;
        max-width: 1000px;
        margin-top: 20px;
        margin-bottom: 20px
    }

.promo-course-detail {
    margin-top: 50px;
    line-height: 30px;
    padding-bottom: 50px;
    display: inline-block;
    width: 44%;
    vertical-align: middle;
    font-weight: 400;
}

    .promo-course-detail h3 {
        margin-bottom: 25px;
        text-align: left;
        padding-left: 4%;
        font-weight: 100;
    }

    .promo-course-detail h4 {
        margin-bottom: 20px;
        text-align: left;
        padding-left: 4%;
        width: 95%
    }

.course-details {
    font-style: italic !important;
    font-size: 16px;
    line-height: 35px;
}

@media screen and (max-width: 820px) {
    .promo-course-detail {
        width: 100%
    }
}
@media screen and (max-width: 450px) {
    .promo-course-detail h4 {
        font-size: 14px;
    }
}

    .promo-course-list {
        text-align: left;
        line-height: 30px;
        vertical-align: top;
        width: 40%;
        display: inline-block;
        padding-bottom: 0px;
        margin-top: 25px
    }

        .promo-course-list h4 {
            color: #8A0000;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 8px;
            min-width: 350px
        }

        .promo-course-list ul {
            margin-left: 37px
        }

            .promo-course-list ul li {
                margin-bottom: 8px
            }

    .more-info {
        line-height: 30px;
        font-weight: 600;
        margin-top: 75px;
        margin-bottom: 50px;
        padding-left: 8%;
        padding-bottom: 0px;
        text-align: left;
        width: 95%
    }

    .promo-features-list {
        line-height: 42px;
        text-align: left;
        display: inline-block;
        width: 45%;
        vertical-align: top;
        padding-left: 6%
    }

        .promo-features-list div {
            margin-bottom: 55px;
            line-height: 32px
        }

        .promo-features-list h4 {
            vertical-align: middle;
            display: inline-block;
            width: 62%;
            font-weight: 400;
        }

        .promo-features-list img {
            vertical-align: middle;
            margin-right: 15px;
            transition: all .2s ease-in-out
        }

            .promo-features-list img:hover {
                transform: translate(0, -6px)
            }

    @media screen and (max-width: 700px) {
        .promo-features-list img {
            margin-right: 0px
        }
    }

    @media screen and (max-width: 585px) {
        .promo-features-list {
            text-align: center;
            padding-left: 0px
        }

            .promo-features-list img {
                margin-bottom: 10px
            }
    }

    .ipad-display-right {
        display: inline-block;
        vertical-align: middle;
        width: 30%;
        max-width: 500px;
        min-width: 300px;
        margin: 20px 8% 10px 8%
    }

        .ipad-display-right img {
            width: 100%
        }

        @media screen and (max-width: 450px) {
            .ipad-display-right {
                margin: 0px;
                min-width: 100px;
                width: 100%;
            } 
            .ipad-display-right img {
                width: 50px;
                min-width: 150px;
            }
        }

    .display-promo-subhead {
        font-size: 17px;
        line-height: 32px;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .display-header-top {
        text-transform: uppercase;
        font-size: 60px;
        margin-top: 68px;
        margin-bottom: 8px
    }

    .display-header-bottom {
        text-transform: uppercase;
        font-size: 60px;
        letter-spacing: 5px
    }

    .display-section-web {
        vertical-align: middle;
        padding-top: 19%;
        padding-bottom: 15%
    }

        .display-section-web h3 {
            font-size: 20px
        }

    .promo-study-header {
        text-transform: uppercase;
        font-size: 50px;
        margin-top: 50px
    }

    .promo-light-background {
        display: inline-block;
        width: 33%;
        height: 700px
    }

    .banner-icon {
        width: 90px;
        margin-bottom: 30px;
        transition: all .2s ease-in-out
    }

        .banner-icon:hover {
            transform: translate(0, -6px)
        }

    .banner-drown-arrow {
        margin-top: 50px;
        margin-bottom: -50px
    }

        .banner-drown-arrow i {
            cursor: pointer;
            transition: all .2s ease-in-out
        }

            .banner-drown-arrow i:hover {
                transform: translate(0, 6px)
            }

    @media screen and (max-width: 460px) {
        .banner-drown-arrow {
            margin-top: 0px;
            margin-bottom: 0px
        }


        .banner-icon {
            width: 70px;
            margin-bottom: 15px;
        }
    }


    .promo-breakout {
        color: #FFF;
        text-align: center;
        padding: 2em 0px
    }

    .promo-breakout {
        background: linear-gradient(90deg, rgba(189,0,0,0.84) 25%, rgba(132,41,41,0.86) 100%),url(../../pics/computer-learning.jpg) fixed
    }

        .promo-breakout.blue {
            background: linear-gradient(90deg, rgba(21,38,70,0.75) 25%, rgba(0,74,174,0.95) 100%),url(../../pics/computer-learning.jpg) fixed
        }

        .promo-breakout.teal {
            background: linear-gradient(90deg, rgba(16,80,71,0.89) 25%, rgba(75,204,163,0.92) 100%),url(../../pics/computer-learning.jpg) fixed
        }

    .promo-breakout-body {
        width: 28%;
        height: auto;
        display: inline-block;
        margin: 2em 20px;
        vertical-align: top;
        font-size: 17px;
        line-height: 32px;
        min-width: 259px
    }

        .promo-breakout-body img {
            width: 75px;
            margin-bottom: -25px;
            transition: all .2s ease-in-out
        }

            .promo-breakout-body img:hover {
                transform: translate(0, -6px)
            }

    @media screen and (max-width: 924px) {
        .promo-breakout-body {
            width: 75%
        }
    }

    @media screen and (max-width: 924px) {
        .promo-breakout-body {
            margin: 2em 5px;
        }
    }

    .licensing-cta-body {
        width: 44%;
        height: auto;
        display: inline-block;
        /*margin: 2em 10% 2em 20px;*/
        vertical-align: top;
        font-size: 17px;
        line-height: 32px;
        min-width: 259px;
        margin-right: 10%;
        padding-top: 6%;
    }

        .licensing-cta-body img {
            width: 75px;
            margin-bottom: 0px;
            transition: all .2s ease-in-out;
        }

            .licensing-cta-body img:hover {
                transform: translate(0, -6px)
            }

    @media screen and (max-width: 1400px) {
        .licensing-cta-body {
            padding-top: 3%;
        }
    }

    @media screen and (max-width: 1250px) {
        .licensing-cta-body {
            padding-top: 1%;
        }
    }


    .licensing-cta-head {    
        margin: 55px auto;
        width: 94%;
    }

    .licensing-image {
        display: inline-block;
        min-width: 300px;
        margin-right: 3%;
    }

    @media screen and (max-width: 924px) {
        .licensing-cta-body {
            padding-top: 0%;
            margin-right: 25px;
        }

        .licensing-cta-head {
            margin-top: 0px;
            margin-bottom: 24px;
        }
    }

    @media screen and (max-width: 640px) {
        .licensing-cta-body {
            display: block;
            width: 100%;
            margin-bottom: 50px;
        }

        .licensing-cta-head {
            margin-top: 36px;
            margin-bottom: 40px;
        }

        .licensing-image {
            width: 25%;
            max-width: 250px;
            min-width: 200px;
            margin: 18px 0px 0px 0px;
        }
    }


    @media screen and (max-width: 460px) {
        .licensing-cta-body {
            display: block;
            width: 100%;
            margin-bottom: 50px;
        }

        .licensing-cta-head {
            font-size: 37px;
            line-height: 59px;
            margin-top: 0px;
            margin-bottom: 20px;
        }

        .licensing-image {
            display: none;
            /*width: 25%;
        max-width: 250px;
        min-width: 150px;
        margin: 0px 0px 2em;*/
        }
    }


    .alt-learning-wrap {
        background-color: white;
        color: #FFF;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        background: linear-gradient(90deg, rgba(9,47,76,0.84) 17%, rgba(51,27,82,0.91) 100%),url("../../pics/man-standing-with-ipad-2.jpg") 50% fixed;
        padding-top: 12em;
    }

        .alt-learning-wrap.blue {
            background: linear-gradient(90deg, rgba(0,19,70,0.93) 25%, rgba(0,85,199,0.82) 100%),url("../../pics/man-standing-with-ipad-2.jpg") 50% fixed
        }

        .alt-learning-wrap.teal {
            background: linear-gradient(90deg, rgba(16,80,71,0.97) 25%, rgba(23,187,157,0.86) 100%),url("../../pics/man-standing-with-ipad-2.jpg") 50% fixed
        }

    .alt-learn-section-wrap {
        width: 100%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 50px 0px 18px
    }

    @media screen and (max-width: 460px) {
       .alt-learning-wrap {
            font-size: 39px;
            line-height: 58px;
            padding-top:6em;
        }
    }

    .alt-learn-header {
        font-size: 39px;
        display: block;
        width: 100%;
        font-weight: 100;
        padding: 0px 12px;
        line-height: 60px
    }

    .outerWrapper::before {
        content: '';
        width: 100%;
        height: 25px;
        background: rgba(204,56,56,0.05);
        position: absolute;
        top: 1442px;
        left: 0;
        -webkit-transform: skew(0deg, 15deg);
        -moz-transform: skew(0deg, 15deg);
        -ms-transform: skew(0deg, 15deg);
        -o-transform: skew(0deg, 15deg);
        transform: skew(0deg, 15deg)
    }

    .innerWrapper::before {
        content: '';
        width: 100%;
        height: 25px;
        background: rgba(58,56,204,0.05);
        position: absolute;
        top: 1674px;
        left: 0;
        -webkit-transform: skew(0deg, -15deg);
        -moz-transform: skew(0deg, -15deg);
        -ms-transform: skew(0deg, -15deg);
        -o-transform: skew(0deg, -15deg);
        transform: skew(0deg, -15deg)
    }

    .wrapper-transition {
        animation-name: site-transition;
        animation-duration: 0.5s;
        position: relative;
        animation-timing-function: ease-in-out
    }

    @keyframes site-transition {
        0% {
            top: -15px;
            opacity: 0
        }

        100% {
            top: 0px;
            opacity: 1
        }
    }

    .item-transition {
        visibility: visible;
        transform: translateX(0) scale(1);
        opacity: 1;
        transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s,opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s
    }

    .container {
        margin-right: auto;
        margin-left: auto;
        padding-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 8em;
        max-width: 1700px;
        box-sizing: border-box
    }

    .wide-container {
        margin-right: auto;
        margin-left: auto;
        padding-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        max-width: 1200px;
        box-sizing: border-box
    }

    .full-width {
        clear: both;
        width: 100%;
        box-sizing: border-box
    }

    section {
        display: block;
        width: 100%;
        clear: both;
        overflow: hidden
    }

    h1 {
        font-size: 26px
    }

    h2 {
        font-size: 23px
    }

    label.customError {
        color: red;
        margin-top: 0px;
        display: none;
        margin-bottom: 10px;
        font-size: 13px
    }

    label.error {
        color: red;
        margin-top: -6px;
        display: block;
        margin-bottom: 10px
    }

    .radio-option {
        transition: background-color 0.3s ease 0s
    }

    .checkbox-option {
        transition: background-color 0.3s ease 0s
    }

    .hidden {
        display: none !important
    }

    .passwordRequirements {
        margin-bottom: 1em;
        display: none
    }

        .passwordRequirements i {
            margin-right: .5em;
            vertical-align: middle;
            color: #eee
        }

        .passwordRequirements span {
            display: block
        }

        .passwordRequirements ul {
            display: inline-block;
            vertical-align: top;
            margin: 0em .5em 0em 1.5em
        }

        .passwordRequirements li {
            font-size: 14px
        }

    .meetsRequirements {
        margin: 0em 0em 1em .5em;
        display: none
    }

        .meetsRequirements i {
            margin-top: -2px;
            margin-right: .5em;
            color: #007A7F;
            vertical-align: middle
        }

    .material-icons.md-12 {
        font-size: 12px
    }

    .material-icons.md-14 {
        font-size: 14px
    }

    .material-icons.md-14 {
        font-size: 16px
    }

    .material-icons.md-18 {
        font-size: 18px
    }

    .material-icons.md-24 {
        font-size: 24px
    }

    .material-icons.md-36 {
        font-size: 36px
    }

    .material-icons.md-42 {
        font-size: 42px
    }

    .material-icons.md-48 {
        font-size: 48px
    }

    .material-icons.md-60 {
        font-size: 60px
    }

    .material-icons.md-80 {
        font-size: 80px
    }