a, a:hover, a:focus, a:active{text-decoration: none}
h1 {font-size: 35px;}
h2 {font-size: 24px;}
p {font-size: 18px;line-height: 26px;}
ul{padding-left: 20px; font-size: 16px; margin-bottom: 60px}
.hero{height: 375px; position: relative; color: #fff; margin-bottom: 70px}
.learn-features p,.five-features p{font-size: 16px; color: #000}
.learn-features  p{margin-bottom: 60px}
.learn-features .col-sm-4:last-child p{margin-bottom: 10px}
.play a{background: #ececec; color: #000;font-size: 16px;padding: 6px 15px;display: inline-block;margin-top: 5px;}
.play a:hover,.play a:focus {background: #ececec; color: #000; text-decoration: none}
.flex{display: flex}
.glyphicon.glyphicon-play-circle {margin-right: 5px; font-size: 21px}
.five-features {display: flex;flex-wrap: wrap; margin-top: 40px;}
.five-features > div {width: 20%; padding: 0 12px; text-align: center}
.five-features img {max-width: 125px;}
.five-features h3 {font-size: 18px}
.video-wrap:before{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, 0.7); left: 0; top: 0; content: ''}
.video-wrap{background: black;height: 375px;position: absolute;overflow: hidden;max-width: 100%;width: 100%;left: 0;top: 0;}
.video-wrap video {min-width: 100%;min-height: 100%;width: auto;height: auto;}
.lazy-hidden {opacity: 1;}
.hero {background: url(/images/learning/2021/hero-bg.jpg) 50% 50% no-repeat; height:auto; background-size: cover;padding: 80px 0 180px;}
.relative{position: relative}
.artist-name{position: absolute; right: 15px; bottom: -100px;  opacity: 0.5;}
@media (max-width: 991px) {
    h1 {max-width: 100%;}
    .five-features > div {width: 33%;}

    .hero .container{ max-width: 600px; margin: 0 auto}
    .video-wrap{display: none}
}

@media (max-width: 767px) {
    .five-features > div {width: 50%;}
}
@media (max-width: 575px) {
    .five-features > div {width: 100%;}
}