.web {
  overflow: hidden;
  padding: 0 0 0;
  height: 100%;
  overflow: scroll;
}

:focus {
  outline: none;
}

* {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lazy {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

img:not([src]):not([srcset]) {
  opacity: 0;
  display: block;
}

.main {
  max-width: 89.333vw;
  margin: 0px auto;
  width: 100%;
  z-index: 5;
  position: relative;
}

body {
  font-family: "Raleway", sans-serif;
  margin: 0;
  background: #1F0D47;
  height: 100%;
  overflow: hidden;
}
.video {
  width: 89.333vw;
  height: 89.333vw;
  margin: 2.5vh 0 0;
  border-radius: 6.400vw;
  background-size: cover;
}

.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6.400vw;
}h1 {
  font-size: 6.400vw;
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin: 6.1vw 0 1.667vw;
  line-height: 120%;
}

p.time {
  border-radius: 100px;
  background: var(--Style, linear-gradient(90deg, #6A4DFF 0.01%, #431EFF 100%));
  height: 8.533vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.067vw;
  margin: 0 auto;
  color: #FCF1E8;
  font-family: Raleway;
  font-size: 4.267vw;
  font-style: normal;
  font-weight: 600;
  line-height: 137%; /* 137.5% */
  margin: 0 auto 6.533vw;
}

.text {
  box-sizing: border-box;
}

.text {
  border-radius: 6.400vw;
  background: rgba(252, 241, 232, 0.15);
  backdrop-filter: blur(12px);
  padding: 7vw 5.3vw 5vw;
  margin: 0 auto 58vw;
  background: #402E5E;
  max-width: 87.200vw;
}

.text h2 {
  color: #fff;
  font-size: 3.267vw;
  margin: 0.4vw 0 6.6vw 0.2vw;
  font-weight: 700;
}

.text ul {
  list-style: disc;
  color: #776887;
  font-weight: 500;
  font-size: 3.733vw;
  padding: 0;
  list-style: none;
  line-height: 135%;
}

.text ul li {
  margin: 0 0 0.2vw;
}

.text p {
  color: #fff;
  font-size: 3.733vw;
  /* text-align: justify; */
  margin: 5.6vw 0 0;
  color: #776887;
  /* opacity: 0.7; */
  line-height: 5.333vw;
  letter-spacing: 0.03vw;
}
.calamansi-skin--dummy {
  border: 2px solid black;
}

.calamansi-skin--dummy .clmns--playback-bar {
  position: relative;
  height: 1.5vw;
  background-color: #473662;
  margin: 0;
  border-radius: 50px;
}
.calamansi-skin--dummy .clmns--playback-load {
  height: 100%;
  width: 100%;
  background-color: #675784;
  border-radius: 50px;
}
.calamansi-skin--dummy .clmns--playback-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: #5d37ff;
  background: var(--Style, linear-gradient(90deg, #6A4DFF 0.01%, #431EFF 100%));
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #4C22B3;
  bottom: 0;
}

.calamansi-skin--dummy .clmns--volume-container {
  margin: 1rem 1rem;
}
.calamansi-skin--dummy .clmns--volume-bar {
  display: inline-block;
  position: relative;
  width: 5rem;
  height: 1rem;
  background-color: #eee;
  border: 1px solid #000;
}
.calamansi-skin--dummy .clmns--volume-value {
  height: 100%;
  width: 100%;
  background-color: #13abea;
}

/* Track info */
.calamansi-skin--dummy .clmns--album-cover,
.calamansi-skin--dummy .clmns--track-name,
.calamansi-skin--dummy .clmns--track-links,
.calamansi-skin--dummy .clmns--controls,
.calamansi-skin--dummy .clmns--track-playback-info
{
  text-align: center;
}

.calamansi-skin--dummy .clmns--track-info--albumCover {
  max-width: 300px;
}
.calamansi-skin--dummy .clmns--track-name {
  font-weight: 700;
}

.calamansi-skin--dummy .clmns--controls {display: flex;justify-content: center;}
.calamansi-skin--dummy .clmns--control {
  font-size: 2rem;
  font-size: 0;
}

.calamansi-skin--dummy .clmns--states {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.calamansi-skin--dummy .clmns--playback-speed-container {position: absolute;right: 0;bottom: 0;top: 0;margin: auto;display: flex;align-items: center;display: none;}

/* Playlists */
.calamansi-skin--dummy .clmns--playlists-select-container {
  margin: 1rem 1rem;
  font-size: 1rem;
}
.calamansi-skin--dummy .clmns--playlists {
  width: 100%;
}

/* Playlist */
.calamansi-skin--dummy .clmns--playlist-container {
  width: 100%;
  overflow: auto;
}
.calamansi-skin--dummy .clmns--playlist {
  width: 100%;
}

.calamansi-skin--dummy .clmns--playlist th {
  text-align: left;
}

.calamansi-skin--dummy .clmns--playlist .clmns--playlist-item.clmns--template {
  display: none;
}

.calamansi-skin--dummy div.clmns--playlist .clmns--playlist-item {
  display: flex;
}

.calamansi-skin--dummy .clmns--playlist-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.calamansi-skin--dummy div.clmns--playlist .clmns--playlist-item--name {
  flex: 1;
}

.calamansi-skin--dummy .clmns--playlist-item.clmns--active {
  background-color: rgb(185, 217, 231);
}
.audio {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #1F0D47;
  padding: 8.333vw 5.333vw 5.333vw;
}

.audio:after {
  content: "";
  left: 0;
  right: 0;
  bottom: 100%;
  background: linear-gradient(180deg, rgba(31, 13, 71, 0.00) 0%, #1F0D47 100%);
  height: 13.600vw;
  display: block;
  position: absolute;
}

.calamansi {
  border: 0;
}

.calamansi-skin--dummy .clmns--playback-progress:after {
  content: "";
  width: 5vw;
  height: 5vw;
  display: block;
  background: #4C22B3;
  border-radius: 50%;
  min-width: 5vw;
  margin-right: -2.5vw;
  box-shadow: 0 0 13px 0 #0000007a;
}

.clmns--track-playback-info {
  display: flex;
  justify-content: space-between;
  font-size: 4.067vw;
  color: #675784;
  font-weight: 500;
  margin: 5vw 0 0;
}
.clmns--control.clmns--control-resume.clmns--hide-on-play:after, a.clmns--control.clmns--control-pause:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 163.861 163.861' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M34.857 3.613C20.084-4.861 8.107 2.081 8.107 19.106v125.637c0 17.042 11.977 23.975 26.75 15.509L144.67 97.275c14.778-8.477 14.778-22.211 0-30.686L34.857 3.613z' fill='%23ffffff' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  font-size: 0;
  width: 9vw;
  height: 9vw;
  display: block;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


.clmns--control.clmns--control-resume.clmns--hide-on-play {
  font-size: 0;
}


.line2 {
  position: relative;
  margin: 0vw 0 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
}

.clmns--playback-speed-container {
  margin: 0;
}

select.clmns--playback-rate {
  font-size: 3vw;
  text-align: center;
  height: 7vw;
  width: 10vw;
  border-radius: 50px;
  font-weight: bold;
  color: #ffffff40;
  background: #47366294;
  border: 0;
}

a.clmns--control.clmns--control-pause:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 32 32' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M13 5v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h1a3 3 0 0 1 3 3zm10-3h-1a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h1a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3z' data-name='Layer 30' fill='%23ffffff' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}


button.bt_time:after {
  background-image: url("data:image/svg+xml, %3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 19' x='0' y='0' width='19' height='19'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23777;%7D.cls-2%7Bfill:none;stroke:%23777;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E2%3C/title%3E%3Cg id='jumpforward'%3E%3Cpath class='cls-1' d='M32.1,2.3L27.8,4.5V0.2Z' transform='translate(-20.7 -0.2)'/%3E%3Cpath class='cls-1' d='M34.8,2.3L30.5,4.5V0.2Z' transform='translate(-20.7 -0.2)'/%3E%3Cpath class='cls-2' d='M29.9,2.3a8.15,8.15,0,0,0-8.2,8.1h0' transform='translate(-20.7 -0.2)'/%3E%3Cpath class='cls-2' d='M21.8,10a8.15,8.15,0,0,0,8.1,8.2h0' transform='translate(-20.7 -0.2)'/%3E%3Cpath class='cls-2' d='M29.5,18.2a8.15,8.15,0,0,0,8.2-8.1h0' transform='translate(-20.7 -0.2)'/%3E%3C/g%3E%3C/svg%3E");
  width: 8.750vw;
  height: 9.063vw;
  background-position: center;
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='29' viewBox='0 0 28 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2707_4093)'%3E%3Cpath d='M27.125 23.3447C27.125 22.8635 26.7313 22.4697 26.25 22.4697L10.5 22.4697C6.16 22.4697 2.625 18.9347 2.625 14.5947C2.625 10.2547 6.16 6.71973 10.5 6.71973L24.1413 6.71973L25.0163 5.84473L24.1413 4.96973L10.5 4.96973C5.18875 4.96973 0.875001 9.28348 0.875001 14.5947C0.875 19.906 5.18875 24.2197 10.5 24.2197L26.25 24.2197C26.7313 24.2197 27.125 23.826 27.125 23.3447Z' fill='white'/%3E%3Cpath d='M27.09 5.62599C27.09 5.58224 27.0725 5.54724 27.055 5.50349C27.0112 5.39849 26.95 5.30224 26.8712 5.22349L23.3712 1.72349C23.1962 1.55724 22.9775 1.46974 22.75 1.46974C22.5225 1.46974 22.3037 1.55724 22.1287 1.72349C21.7875 2.06474 21.7875 2.62474 22.1287 2.96599L24.1412 4.96974L25.0162 5.84474L24.1412 6.71974L22.1287 8.72349C21.7875 9.06474 21.7875 9.62474 22.1287 9.96599C22.47 10.3072 23.03 10.3072 23.3712 9.96599L26.8712 6.46599C26.95 6.38724 27.0112 6.29099 27.055 6.18599C27.0725 6.14224 27.09 6.10724 27.09 6.06349C27.1337 5.92349 27.1337 5.76599 27.09 5.62599Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2707_4093'%3E%3Crect width='28' height='28' fill='white' transform='matrix(1 8.74228e-08 8.74228e-08 -1 0 28.5947)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 100%;
}

button.bt_time {
  border: 0;
  padding: 0;
  margin: 0 15px 0;
  background: none;
  position: relative;
}

button.bt_time:before {
  content: "15";
  color: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
}

button.bt_time.bt_time_prev:after {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}html {
  height: 100% !important;
  overflow: hidden;
}