body {
    background-color: #071622;
}

.page-header-section {
    position: relative;
    padding-top: 0px;
    min-height: 80vh;
    background-size:1px 700px;
    background-repeat:repeat-x;
    background-position:center -200px;
    background-image:url(../assets/live-upper-gradient.png);
    margin-top:60px;
}
.page-header-section > .inner-row {
    height: 100%;
    padding: 220px 10px 40px;
    height: 100%;
    min-height: 700px;
    background-image: url(../assets/live-header-primary-image-sm.png);
    background-repeat: no-repeat;
    background-position: center top;
    align-items: flex-end;
    justify-content: flex-end;
}
.page-header-section > .inner-row .heading {
    font-size: 32px;
    line-height: 1.2;
    color: #fff;
    font-family: 'Myriad Pro Semibold';
    margin-bottom:20px;
    text-align:center;
}
.page-header-section > .inner-row .heading > span {
    font-family: 'Myriad Pro Regular';
    font-size: 32px;
}
.page-header-section > .inner-row .heading-par {
    line-height:1.6;
    margin-bottom:20px;
    text-align:center;
}
.page-header-section > .inner-row .heading-par > mark {
    background-color: rgba(7,22,34,0.6);
    color: #d1d1d1;
    font-size: 21px;
    padding:4px 2px;
    line-height:1.7;
    font-family: 'Myriad Pro regular';
}
.page-header-section > .inner-row .heading-par strong {
    font-family: 'Myriad Pro Semibold';
}
.body-container {
    padding: 0px 0px 0px;
    min-height: 200px;
}
.header-cta-holder{
    display:flex;
    justify-content:center;
}
.video-row{
    display:flex;
    flex-direction:column;
}
.video-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 100%;
    height: 200px;
    background-image: url(../assets/laptop.png);
    background-position: center top;
    background-size: 320px auto;
    background-repeat: no-repeat;
    padding-top: 14px;
}

.video-holder a, .video-holder a:link {
    display: flex;
    flex-direction: column;
    width: 230px;
    height: 144px;
    border-radius: 3px;
    background-color: #030b11;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background-image: url(../assets/test-video-thumb.jpg);
    background-size: auto 120%;
    background-position: center;
    transition: all ease 1s;
}
.video-holder a:hover {
    background-size: auto 100%;
    transition: all ease 1s;
}
.video-holder a div {
    font-size: 70px;
    line-height: 1;
    text-shadow: rgba(0,0,0,0.8) 0px 1px 10px;
}
.video-holder a span {
    font-size: 28px;
    color: #d1d1d1;
    text-shadow:rgba(0,0,0,0.8) 0px 1px 5px;
}
.introduction-holder{
    width:100%;
    padding:0px 0px 0px 0px;
    text-align:center;
}
.introduction-holder h2{
    color: #fff;
    font-size:32px;
    margin-bottom:0px;
}
.introduction-holder h3 {
    color: #d1d1d1;
    font-size: 22px;
    font-family: 'Myriad Pro Light';
    margin-bottom:20px;
}
.introduction-holder p {
    color: #d1d1d1;
    font-size: 16px;
    font-family: 'Myriad Pro Light';
}

.feature-col{
    display:inline-flex;
    flex-direction:column;
    color:#fff;
    max-width:320px;
    
}
.feature-icon-holder{
    width:100%;
    height:120px;
    justify-content:center;
    display:flex;
}
.feature-heading {
    font-size: 16px;
    font-family: 'Myriad Pro Regular';
    text-align:center;
    line-height:1.2;
}
.feature-list-group {
    color: #d1d1d1;
    font-size: 13px;
    font-family: 'Myriad Pro Light';
    margin:0px 0px 20px;
    padding:0px 0px;
}
.feature-list-group li{
    list-style-type:none;
    padding:5px 0px 5px 20px;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    min-height:30px;
    text-align:left;
}

.authorizations-row {
    border-top: solid 5px rgba(255, 255, 255, 0.08);
}
.authorizations-row h2 {
    font-size: 42px;
}
.authorizations-row p {
    color: #d1d1d1;
    font-size: 18px;
    font-family: 'Myriad Pro Light';
    max-width:640px;
    margin:0px auto 20px;
}
.accreditations-logos-holder {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.accreditations-logos-holder .authorizations-holder{
    width:120px;
    height:80px;
    background-color:#fff;
    border-radius:5px;
    margin:0px 10px 20px;
}
.accreditations-logos-holder .authorizations-holder img{
    height:100%;
    width:auto;
}

.available-courses-section {
    background-color: #0d283e;
    background-image:url(../assets/lc-camp-blue-bg.png);
    background-size:1px 300px;
    background-repeat:repeat-x;
}
.live-subjects-row {
    justify-content:center;
}
.live-subjects-row > ul {
    margin: 0px 0px 40px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width:960px;
}
.live-subjects-row > ul > li {
    list-style-type: none;
    padding: 0px;
    margin: 0px 5px 10px;
    width: auto;
}
.live-subjects-row > ul > li > a{
    display:flex;
    width:100%;
    padding:5px 15px;
    min-height:45px;
    border:solid 2px rgba(255,255,255,0.4);
    text-decoration:none;
    color:#eee;
    line-height:1;
    font-size:15px;
    justify-content:center;
    align-items:center;
    border-radius:5px;
    transition:all ease 0.3s;
}
.live-subjects-row > ul > li > a:hover {
    border: solid 2px rgba(255,255,255,1);
    transition: all ease 0.3s;
}
.live-subjects-row > ul > li > a.active {
    border: solid 2px #f9c51e;
}
.live-courses-row > div{
    margin: 0px 0px 2px;
}
.live-courses-row > div > a {
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    min-height: 60px;
    align-items: flex-start;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition:all ease 0.3s;
}
.live-courses-row > div > a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: all ease 0.3s;
}
.live-courses-row > div > a > .item-thumb {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0px 20px 0px 0px;
}

.desktop-view{
    display:none;
}
.tablet-view {
    display:flex;
}

@media only screen and (min-width: 576px) {
    .page-header-section {
        min-height: 100vh;
    }
    .page-header-section > .inner-row {
        background-image: url(../assets/live-header-primary-image-md.png);
    }
}

@media only screen and (min-width: 992px) {
    .page-header-section{
        min-height:60vh;
        margin-top:0px;
    }
    .page-header-section > .inner-row {
        min-height: 700px;
        background-image: url(../assets/live-header-primary-image.png);
        align-items: flex-start;
    }
    .page-header-section > .inner-row .heading {
        font-size: 46px;
        text-align:left;
    }
    .page-header-section > .inner-row .heading > span{
        font-size:38px;
    }
    .page-header-section > .inner-row .heading-par{
        text-align:left;
    }
    .header-cta-holder {
        display: flex;
        justify-content: flex-start;
    }
    .video-row {
        flex-direction: row;
        flex-wrap:nowrap;
    }
    .video-holder {
        width: 500px;
        min-width: 500px;
        height:300px;
        background-size:500px 300px;
    }
    .video-holder a, .video-holder a:link {
        width: 363px;
        height: 232px;
    }
     .video-holder a div {
         font-size: 90px;
     }
    .introduction-holder {
        text-align: left;
        padding: 0px 0px 0px 20px;
    }
    .introduction-holder h2 {
        color: #fff;
        font-size: 42px;
        margin-bottom: 0px;
    }
    .introduction-holder h3 {
        color: #d1d1d1;
        font-size: 32px;
        font-family: 'Myriad Pro Light';
        margin-bottom: 20px;
    }
    .introduction-holder p {
        color: #d1d1d1;
        font-size: 18px;
        font-family: 'Myriad Pro Light';
    }

    .desktop-view {
        display: flex;
    }
    .tablet-view {
        display: none;
    }
}

@media only screen and (min-width: 1120px) {
    .page-header-section > .inner-row .heading {
        font-size: 52px;
    }
    .page-header-section > .inner-row .heading > span {
        font-size: 42px;
    }
}