.class-lord::before {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9JwSs6-hKkZEeP4Xvxfv2aNyh0hNkP_gZTy_vCErQOTCCLJFcjcJITi88ta6Moi7coaCReXLVGsNyY768CRsQwKbu7I81F5JUAh-9qW3bc-jx5yoFlmQeRde0mXczEudTagPcPWg8nKd_zS7MQKh70KSr_2bXcMUi2TZNPgvil-VYVvUj0TCx5gZcRqa/s1600/char0_m.png');
}
.class-knight::before {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWUI2Y_YOTzGdUyK2EekfUVQyMjJZu_jzGmWngun_dTPpD_TvZ7lekg5DSIGYugwhNRrTt5c4OXHNdnlHn3KgvbAn79zY-SwkT1Q4ZBSc2ZN8L9gGlQqibxzMxl7ee6lx1uZduwur22Auym2arRUKBWmkR3VY2GLE8D5djhKNrZMnZR7bySmhHc265-bN/s1600/char1_m.png');
}
.class-elf::before {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ydR5lsBxoZ6lHuqUVaJjJzikzMqWdVvqhdC6u6264M2uykX4HJCChcbJ_MXFQEaH-_uIDw_Hz35txDn9Y3FvnJBgPLYhPrZ8dPsN7cSt54XG2g-QKhVltWrIMZD_4ag-5u7NcMxOt85KHfh-pUI9Tz7yW-EsUH3I0gs0OVysEI6XMiE1A9NHQbTSTeyn/s1600/char2_f.png');
}
.class-darkelf::before {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3v-F0-epXEJuURP_tXKSgRicO6lNW4rL-weJkRoDgCbXRu5A1t9yup-U-hUHYg6amBK9AfcHb4AWq2wcx6FahgFSBSregGxH3n_S4BaQGL9zxQSVsC9SQvcxRC9PPhLF5IqC7T5BnPWGrTvlmKPfgS5ceMPsRREmyzwfBJ6_RgreqSPRrjCz7D4ehpUEO/s1600/char4_f.png');
}
.class-wizard::before {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj894_T2bZO7f-Toc8xJ7deJHDxYsYCXNE_nBXsqnFAWuD9JWSR0Jo9BXk74ZKrliiN8xOQsyLDMnqqOYpTlkiKTWAL9xA30F3fSa-VUXpSbhcfoUYDtLoB07BSzwQ4vwXNLp45GCnr65YL9ZaNFZZGkB8_YKg1Olhpj_QR4u_Vbn0ko5_tB3pGNoRBdgej/s1600/char3_m.png');
}
.class_type {
margin-right:10px; font-size:14px; color:#ccc; vertical-align:middle;
}
.class_type {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
}
.class_type::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius:10px;
}


.ncgt-cover {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-top: 2px solid #857164;
  border-bottom: 2px solid #857164;
}

.ncgt-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
object-position: 100% 57%;
}

.video-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 100%;
}

.video-title {
  font-size: 48px;
  font-weight: bold;
  margin: 0;
  color: #fff;
  background: linear-gradient(to bottom, #ffdd99 10%, #fff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
  font-family: "HeirofLightBold" !important;
  filter: drop-shadow(2px 4px 6px black);
}

.video-subtitle {
  background: linear-gradient(to bottom, #fff 50%, #eaeaea 50%, #eaeaea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 21px;
  margin: 5px 0 0;
  font-weight: bold;
  filter: drop-shadow(2px 4px 6px black);
}

@media screen and (max-width: 768px) {
  .video-title {
    font-size: 32px;
  }
  .video-subtitle {
    font-size: 16px;
  }
}