* {
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
}

.hidden {
  display: none;
}

input {
  background-color: #111;
  color: #fff;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-8 {
  width: 66.666666%
}
.col-4 {
  width: 33.333333%
}

@media (max-width: 968px) {
  .col-8, .col-4 {
    width: 100%
  }
}

.btns {
  margin: -3px;
}

.btn, button {
  background-color: #666;
  color: #fff;
  box-shadow: none;
  border: 1px solid #aaa;
  margin: 3px;
  display: inline-block;
  cursor: pointer;
}

button:hover {
  background-color: #444;
}
button:active {
  background-color: #222;
}


.btn--active {
  background-color: #111;
  color: #fff;
  pointer-events: none;
}

#menu {
  display:flex;
  flex-direction: column;
  align-items: stretch;
}


.pp {
  position: relative;
  max-width:100%;
  width: 1280px;
  /*height: 720px;*/
}

.pp--overlay .pp__overlay {
  opacity: 1;
}

.pp .pp__loader {
  opacity: 0;
}

.pp--loading .pp__overlay {
  background-color: rgba(0,0,0,0.6);
}

.pp--loading .pp__loader {
  opacity: 1;
}


.pp__video {
  width: 100%;
  z-index: 0;
}


.pp__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  /*background-color: rgba(0,0,0,0.3);*/
}

.pp__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pp__time-info {
  padding: 10px 10px;
  cursor: default;
  line-height: 30px;
}

.pp__progress-bar {
  position: relative;
  width: 100%;
  height: 5px;
  /*background-color: rgba(0, 0, 0, 0.2);*/
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: height 0.1s ease-in-out;
}

.pp__progress-bar:hover {
  height:15px;
}


.pp__progress {
  position: absolute;
  left: 0;
  height: 100%;
  background-color: #ff0033;
  z-index: 2;
}

.pp__progress--load {
  z-index: 1;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  /*background-color: rgba(0, 0, 0, 0.7);*/
}

/* HTML: <div class="loader"></div> */
.pp__loader {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #ff0033;
  border: 2px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pp__loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 25%;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: currentColor;
  animation: l3 1s infinite linear;
}

.pp__toggle {
  cursor: pointer;
  padding: 10px;
}
.pp__toggle div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #FFFFFF;
  transform: rotate(0deg);
  /*transition: all 0.1s ease-in-out;*/
  position: relative;
}

.pp__toggle--pause div {
  border-width: 0;
  width: 15px;
  height: 20px;
}
.pp__toggle--pause div::before, .pp__toggle--pause div::after {
  content: '';
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}
.pp__toggle--pause div::after {
  left: auto;
  right: 0;
}

@keyframes l3 {
  50% {
    left: 100%;
    transform: translateX(calc(-100% - 4px))
  }
}

.pp__controls-bar {
  display: flex;
  justify-content: space-between;
  /*padding: 10px 10px;*/
  background-color: rgba(0,0,0,0.7);
  height: 50px;
}


.pp__speed-controls {
  padding: 10px 0;
  display: flex;
  margin-left: auto;
  margin-right: 10px;
}

.pp__speed-up {
  font-size: 1em;
  line-height: 1.2;
}
.pp__speed-down {
  font-size: 1.2em;
  line-height: 1;
}

.pp__volume-wrap {
  display: flex;
  padding: 10px;
}

.pp__volume-icon {
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-image: url("../img/volume.svg")
}

.pp__volume-icon--muted {
  background-image: url("../img/volume-mute.svg")
}

.pp__fs-wrap {
  display: flex;
  padding: 10px;
}

.pp-fs-icon {
  background-image: url("../img/expand.svg")
}



.name {
  display: inline-block;
  font-size: 1.4em;
  margin-right: 10px;
}
.name::after {
  content: '-';
  padding-left:10px;
}
.model {
  position: relative;
  display: inline-block;
  padding: 2px 2px 4px;
  line-height: 1;
  margin: 2px 2px;
}

.model::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}

.model--ts::after {
  background-color: #ff0090
}
.model--m::after {
  background-color: #050044
}
.model--f::after {
  background-color: #b00101
}