@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

@font-face {
    font-family: 'unvr68w';
    src: url('../fonts/unvr68w.eot') format('embedded-opentype'), url('../fonts/unvr68w.otf') format('opentype'), url('../fonts/unvr68w.svg') format('svg'), url('../fonts/unvr68w.ttf') format('truetype'), url('../fonts/unvr68w.woff') format('woff');
}

@font-face {
    font-family: 'unvr57w';
    src: url('../fonts/unvr57w.eot') format('embedded-opentype'), url('../fonts/unvr57w.otf') format('opentype'), url('../fonts/unvr57w.svg') format('svg'), url('../fonts/unvr57w.ttf') format('truetype'), url('../fonts/unvr57w.woff') format('woff');
}

@font-face {
    font-family: 'unvr58w italic';
    src: url('../fonts/unvr58w.eot') format('embedded-opentype'), url('../fonts/unvr58w.otf') format('opentype'), url('../fonts/unvr58w.svg') format('svg'), url('../fonts/unvr58w.ttf') format('truetype'), url('../fonts/unvr58w.woff') format('woff');
}

.course-plan-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 8px;
    border: 1px solid #004684;
}

.half-width { width: 50%; }

.course-plan {
    background: #004684;
    color: #ffffff;
    padding-top: 15px;
}

.course-plan-header {
    padding-left: 15px;
    width: 100%;
    color: #fff;
    border-bottom: 1px inset #fff;
}

.course-plan-header p { color: #fff; }

.course-plan-header > div {
    width: 24.5%;
    float: left;
    text-align: center;
    border-right: 1px inset #fff;
    white-space: normal;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
}
.course-plan-header > div:last-child { border-right: none; }

.course-plan-header h4 { line-height: 4;  font-family: 'Open Sans', sans-serif; }

.course-plan-header h4, .course-plan-header h5 {
    padding: 5px;
    color: #fff;
}

.course-plan-row {
    padding-left: 15px;
    width: 100%;
    color: #004684;
    background: #fff;
    border-top: 1px solid #004684;
    font-family: 'Open Sans', sans-serif;
}


/*.course-plan-row:nth-child(even) { background: #007cc2; }
.course-plan-row:nth-child(even) > div { border-right: 1px inset #fff; color: #fff; }
*/

.course-plan-row > div { 
    width: 24.5%; 
    float: left; 
    text-align: center; 
    border-right: 1px inset #007cc2; 
    justify-content: center; 
    white-space: normal; 
    display: flex; 
    flex-direction: column; 
    font-family: 'Open Sans', sans-serif;
}
.course-plan-row > div:last-child { border-right: none; }


.col-5 {
    width: 19.5%!important;
}

.col-3 {
    width: 33%!important;
}

.price-ro-140 {
    height: 140px!important;
}

.course-plan-class {
    border-radius: 3px;
    border: 1px solid #dddddd;
    background-color:  #ffffff;
    color:  #151925;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    margin-top: 25px;
}

.h-color-dark-blue { color: #004684!important; }

.h-color-white { color: #fff!important; }

.background-dark-blue { background: #004684; }


.course-plan-header-2 {
    padding-left: 15px;
    width: 100%;
    color: #fff;
    height: 80px; 
    border-bottom: 1px inset #fff;
    font-family: 'Open Sans', sans-serif;
}

.course-plan-header-2 > div {
    width: 13.5%;
    float: left;
    text-align: center;
    border-right: 1px inset #fff;
    height: 80px;
    white-space: normal;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
}
.course-plan-header-2 > div:last-child { border-right: none; }

.course-plan-header-2 h4 { line-height: 4; }

.course-plan-header-2 h4, .course-plan-header-2 h5 {
    padding: 5px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

.course-plan-row-2 {
    padding-left: 15px;
    width: 100%;
    color: #004684;
    background: #fff;
    border-top: 1px solid #004684;
    font-family: 'Open Sans', sans-serif;
}

/*
.course-plan-row-2:nth-child(even) { background: #007cc2; }
.course-plan-row-2:nth-child(even) > div { border-right: 1px inset #fff; color: #fff; }
*/

.course-plan-row-2 > div { 
    width: 13.5%; 
    float: left; 
    text-align: center; 
    border-right: 1px inset #007cc2; 
    justify-content: center; 
    white-space: normal; 
    display: flex; 
    flex-direction: column; 
    font-family: 'Open Sans', sans-serif;
}
.course-plan-row-2 > div:last-child { border-right: none; }


.height-250 { height: 250px!important; }
.height-200 { height: 200px!important; }
.height-150 { height: 150px!important; }
.height-100 { height: 100px!important; }
.height-75 { height: 75px!important; }

.course-plan-header-3 {
    padding-left: 15px;
    width: 100%;
    color: #fff;
    height: 80px; 
    border-bottom: 1px inset #fff;
    font-family: 'Open Sans', sans-serif;
}

.course-plan-header-3 > div {
    width: 33%;
    float: left;
    text-align: center;
    border-right: 1px inset #fff;
    height: 80px;
    white-space: normal;
    vertical-align: top;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
}
.course-plan-header-3 > div:last-child { border-right: none; }

.course-plan-header-3 h4 { line-height: 4; }

.course-plan-header-3 h4, .course-plan-header-3 h5 {
    padding: 5px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

.course-plan-row-3 {
    padding-left: 15px;
    width: 100%;
    color: #004684;
    background: #fff;
    border-top: 1px solid #004684;
    font-family: 'Open Sans', sans-serif;
}

/*
.course-plan-row-3:nth-child(even) { background: #007cc2; }
.course-plan-row-3:nth-child(even) > div { border-right: 1px inset #fff; color: #fff; }
*/

.course-plan-row-3 > div { 
    width: 33%; 
    float: left; 
    text-align: center; 
    border-right: 1px inset #007cc2; 
    justify-content: center; 
    white-space: normal; 
    display: flex; 
    flex-direction: column; 
    font-family: 'Open Sans', sans-serif;
}
.course-plan-row-3 > div:last-child { border-right: none; }

.line-height2 { line-height: 2!important; }
.line-height1 { line-height: 1!important; }

.course-bank-left { width: 60%; float: left; }
.course-bank-right { width: 35%; float: right; }

/* Course Prices */

.cp-price-wrapper { max-width: 1200px; width: 100%; }

.cp-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    overflow-y: hidden !important;
    overflow-x: auto;
    border: 3px solid #02a7df;
    border-radius: 10px;
}

.cp-scroll {
    position: absolute;
    width: 280px;
    z-index: 99;
    left: 3px;
    top: 0px;
}

.cp-scroll .cp-header-placeholder {
    height: 100px;
    border-top-left-radius: 15px;
    z-index: 999;
}

.cp {
    overflow: hidden;
    width: 1200px;
    position: relative;
}

.cp-header {
    background: #004684;
    color: #ffffff;
    height: 80px;
    padding-top: 15px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    
}

.cp-header > div {
    float: left;
    width: 300px;
    z-index: -1;
}

.cp-header > div.placeholder {
    width: 300px;
}

.cp-row {
    background: #ffffff;
    float: left;
    height: 70px;
}



.cp-coursename {
    float: left;
    width: 280px;
    text-align: left;
}

.cp-courseprice {
    float: left;
    width: 290px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    padding-left: 5px;
    height: 50px;
}

.cp-courseprice-placeholder { width: 280px; float: left; height: 20px; }

.cp-row .cp-course {
    float: left;
    width: 1200px;
    height: 505px;
}

.cp-coursename h3 {
    color:  #1c1c1c;
    font-size: 16px;
    line-height: 20px;
    padding: 20px 40px;
    font-family: 'Open Sans', sans-serif;
}

.cp-course {
    position: relative;
}

.cp-class {
    border-radius: 3px;
    border: 1px solid #dddddd;
    background-color:  #ffffff;
    color:  #151925;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    margin-top: 25px;
}

.margin-t20 { margin-top: 20px; }
.margin-t10 { margin-top: 10px; }

@media screen and (max-width: 420px) {
    .course-plan-row > div {
        font-size: 8px;
    }

    .course-plan-row > div p {
        font-size: 8px;
    }
}

@media screen and (min-width: 421px) and (max-width: 780px) {
    .course-plan-row > div {
        font-size: 9px;
    }

    .course-plan-row > div p {
        font-size: 9px;
    }
}

@media screen and (min-width: 781px) and (max-width: 1025px) {
    .course-plan-row > div {
        font-size: 10px;
    }

    .course-plan-row > div p {
        font-size: 10px;
    }
}

@media screen and (min-width: 1026px) and (max-width: 1399px) {
    .course-plan-row > div {
        font-size: 11px;
    }

    .course-plan-row > div p {
        font-size: 11px;
    }
}