/*!
   ckin v0.0.1: Custom HTML5 Video Player Skins.
   (c) 2017
   MIT License
   git+https://github.com/hunzaboy/ckin.git
*/
@font-face {
  font-family: 'ckin';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABBIAAsAAAAAGoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3RY21hcAAAAYQAAADQAAADIjn098ZnbHlmAAACVAAACv4AABEIAwnSw2hlYWQAAA1UAAAAKgAAADYUHzoRaGhlYQAADYAAAAAbAAAAJA4DByFobXR4AAANnAAAAA8AAACE4AAAAGxvY2EAAA2sAAAARAAAAEQ9NEHGbWF4cAAADfAAAAAfAAAAIAEyAIFuYW1lAAAOEAAAASUAAAIK1cf1oHBvc3QAAA84AAABDwAAAZ5AAl/0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQ7xTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGBHcRdyA4RZgQRAC4HCwEAAHic7dFprsIgAEXhg8U61XmeWcBb1FuQP4w7ZQXK5boMm3yclFDSANAHmuKviBBeBPQ8ymyo8w3jOh/5r2ui5nN6v8sYNJb3WMdeWRvLji0DhozKdxM6psyYs2DJijUbtuzYc+DIiTMXrty4k8oGLb+n0xCe37ekM7Z66j1DbUy3l6PpHnLfdLO5NdSBoQ4NdWSoY9ON54mhdqa/y1NDnRnq3FAXhro01JWhrg11Y6hbQ90Z6t5QD4Z6NNSToZ4N9WKoV0O9GerdUJORPqkhTd54nJ1YDXBU1RV+576/JBs2bPYPkrDZt5vsJrv53V/I5mclhGDCTwgGBQQSTEji4hCkYIAGd4TGIWFAhV0RQTpWmQp1xv6hA4OTOlNr2zFANbHUYbq2OtNCpViRqsk+e+7bTQAhzti8vPfuPffcc88959zznbcMMPjHD/KDDGEY0ABpYX384NhlomIYlo4JISGEY9mMh2FSidYiqkEUphtNYDSY/dXg9023l4DdxlqUl0chuZRhncJKrsCQHIwcGuwfnhMIzBnuH4Sym+1D2zaGjheXlhYfD238z80mKYMmvJ5XeOTzd8z9eujbMxJNhu4C9xPE/bCMiDuSNIWgkTQwBE55hLSAE7ZwhrHLnAHZOGV/kmBGTiNjZxzI77Hb7Hqjz68TjT6vh+5JT/cCIkqS0D6CqPf5jX4Qjdx5j6vlDfZM4aZFdbVXIxtOlJaP/WottMnH6CJQ3bTiue3PrY23HjnChtuamxwvvzFjxkPrNj3z0tG9T561HDYf6OgmRWvlY3JQHoQb8ltV2Yet7YfWctEjR1AtxS/cSX6U4alf6NJEBQ7YKg9wrXQKd0IeZCb2ux75Uhh1Un+Nz+9LTOE7PK777nN5xqdTneTBhCbx446mZrhnUkrCz2YhA9dSMxaG0SYmT8hi9ZPu1E94PJYQSH6LRmhxec7Q7ZeXntgQuVpbh+a4qWNsckVyTdn0P7o7DpgPW84+uRcq0BITflBikGdUjAZ9wYBVI3mtrNvr9kpg1UsaK6t3690aoorC1lg0GpMH2HAMtkZjsSi5Ig9ESVosOh7GQfLjKNLvKpMKkLSKNFAka710GdgSi8oDMSoNhqjkKBXTgn3swtaxyzGkUzIzae9RtLdWkSlZ1KDX6EzgllzV4NV4SoDFSOGD4+HCeQUF8wrZ5Hs8zIb5EaVxy8DYFTbMCJPnLIWZxugZE2NlivC0gc1qEQUR8jEKgZcAXeH18BiCgl5nlHh0CrjB4Hb5fX4gb0J7c9PuHVsfgkx2n/vTY/JV8kn8PGxf7faOZ8qX8JVByuIf4whk9sqXli2hvPJV9hrp0hY7l8r2x37ydaVsb4xvXv/47v2NjfCl8m5oRDJclFMoE1yk0Uh1Te4/m8lFXe9qBZD0EkheicebXvzI2PLCuoKCukLuhPIeKwaHPEouxw3kMqaIUXDQ1p0mip+MyCORSCQaoUsnY1VZ38nUTrG21WvVo4f1OsEJFhvSfAFwGfT8VHRMeAVUpwLOoLzjT/REIj3O3FhuURE+nERF+0pTId5Fyxv5sfwGyg4O+my4vZv0sZm7oeQlFZORiB+tG0MweVNraeitl7yxiPIHTk4/diVxs94o5lEYishB2iAtkchEnsActoEpx44Fo8XnsQMaA22BlqC20RmhBKzYojZyYaxg+JggMc4HHY2m+L9EkWSYljirOisrO7d3VorxzyZ6Vc4lJqITAu1b2wOBdrLElAP+bFc2eGaZFVbkmJktv5uT6Jlz5D/MnBFor6ig/JPnRViBsV3LNKGGqB1ChJ0tgQywlVLFJIuQgTFttwkiKxhyQdAZMdMYtSaoAewqfvXVYPAbDT6/1mez85YS8FSDywQ6NfAnef6FNEGMilnppyvn5rB6tTyq1pOceRWnp2WJEZFXHeX5oyoem1nTTgdqc4heDY7bOeKz63vnz+/dRx+s31Ht2JGanQ5seirfWJL9tjozU/12TnEjn5oux9OzU3ckGbBzBwNOyk69JykKH0n/0LM9A72tuwM3zQpIRu4AxiToseEpgPOmbROyFe9/X2yeUvoUsCyEvjcgs7fpWP3/aKlFN0+6HFUe6D9HFz/XPwBlN9tTqNyZjFJ8UO2RUT5/h4CptCctEyeisnOyXjALEp7dXKaQKf6O7IMnGjNNACRMLxqdYJX8eMLvmmd68D+ayBLyKKYZwYxDt/GNhzETDJ05Qxlyi3pi3/Z93ndYVSumgj0V/KkIFlO6+1K3fF2+3g0q+YtuSIf0bvmLqV09nnobI6hwcjIP8aPCKayjsF5JBY3LaKAeRLSyYB1h81oTwe9SlPMkXB7G0mfL9q71gaqqwPqu67QRKS1+ObTx+sbQy9QV2OQHEScGkdFBeT7v7qisqqrs6N52i78/R+6S0qQONVj26agOVoswCyQWIV5D86vH53bxNUeXV0K+XZaHv/nm/KsHhOvylwsWnJX/HE8l/4WCv5x+l5n08z6UU8bUMa3MBpSmM7F63AxntdC9eBCKEZW9Hr+ABNqtxgAQrSbMtmrW7lKQuoSgBhSrTazWVU2QAKWY8wiiuhqFmQgWJBgoXiuWIm42N7hqZbBsgXz52O5P5uSvaNgFGnOuvsRw8I8Laha91wMvDuxqWFheN7/8GVtTltdS83DQsXRmqc5ZtcJXEVrlV2doTWk5+Yunm71dG5f55m/qY0MjI93vv9/NfpxXV9sUXrxy2fbNy1or65cOlDRnOoKFeeXcbw42H/bNDT5Qs3flgs31gWC1lD1nfUV/X7NdCnSUdHY2e8afzfKsqZ5ZljfDqjLOmk3UebNXB+aHArPYDRs+/HDDxeT5DiP+sFg7OpRaVQMGBV89PpeBdj22hCE0Uub0UqwLrNWsG0cuyadgLXTeR5rbO4+3c/vl15cur2nRq+TXCQDcS3SO+s6ak+e5/eMS+1dw3btu3YG2tvFL8XdIZvdjdW6TO/4B7IdrZWVPmctm5/59AgsPItTSbCiIBr2OqIGzmu20SMKAS7yqwGBUfGfgjDYlLLDeF0SfcLB2LSx8flT+08/kzz6yOj96rft4rpTjdPQcmLd47uKibbDq7ZSz/XtbH2nN717Nd62rU+c8Icevvv7I09wA6WvjVcafb+FsbNG+ZQ80Rn6ZZsvrP7teP2dzTdoETvNhjCmsr8FID2sJ69VYvdUcxk4AzYRlKcaE38eXNRlfW9H1as9i6acLHp1XpuNB5K7DIvkX08y1ZYvh3KfWaiCzH+ztrSDmD7LuX73x/mJelB8Yj39t8nhNQJJ2CAthpoFGLsGgtSOCJooCGoaJAMTjSWHVZ08YAa1Fg9lPI5U6DOsGVjDasJeZZ+YyhfCwfOzCxlBA69M9XLXtza7H/rav+9Tjq5xNi0wpKQIRNO4Lrzz7yp5QVYM6Jd/oc1Uvn/mQhhuWh6ENXoS2YTZ8QT42bF5d/559zp5r0Uff2VnR2tdf2/WCOd2cO0Mw6qpWPnvxpV0nrt5fZd2yItc199GWe8vlNfNDq+CH/7yAAnB9hn7T4QO4c1g9ScxsZgmzntnE/IDGndtHMw69lFwoCnYsMGx+rBp8JSBqdLzBr9QRPq/PbhWMWFtQZp1xguy/haw3TEHm3TWAnxFWQQWgt7M5OV0lCz1VRYucpWliy7z6Zd4urwPIyeZQqli2Lgg7szJV09PysATbOQtYIrB2YzbkJYkGgJ0m4AjPUap1pvYu1K9qr97z0Yl3p332b2LYB78ncYIlRkau/8GObSsOlZancACE5d5ily+c2+7h5Yj4lqhVmXXB+iXLfvdqSgqfKtQvfHDV0OnvQR1qhw42XS/vkvsh/hXcrDFP0a+SJNIomEfD1nsrYGO+1bgTOJhM8Hv6ek+7vVglxuSRwoKn17S937bm6YJCeSSG0Op1n+7tE37tcZ/p7dsTv4EUrGpDbWueKigsLHhqTVsoEj+JU0kaSjnj9tz8/gryQWwJ9BcJXBC/7smO+I/IFURJetFPrdt5WcoL6DbEJaygI8CTHfQTjf40ofD+DwalTqIAAHicY2BkYGAA4uByr8R4fpuvDNzsDCBw7f/3LmSanREszsHABKIAKi0J7gAAeJxjYGRgYGcAARD5/z87IwMjAypQBAAtgwI4AHicY2BgYGAfYAwAOkQA4QAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhHicY2BkYGBQZChlYGcAASYg5gJCBob/YD4DABfTAbQAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2PyXLCMBBE3YCNDWEL2ffk7o8S8oCnkCVHC5C/jzBQlUP6IHVPzYyekl5y0iL5X5/ooY8BUmQYIkeBEca4wgRTzDDHAtdY4ga3uMM9HvCIJzzjBa94wzs+8ImvZNAq8TM+HqVkKxWlrQiOxjujQkNlEzyNzl6Z/cU2XF06at7U83VQyklLpEvSnuzsb+HAPnPfQVgaupa1Jlu4sPLsFblcitaz0dHU0ZF1qatjZ1+aTXYCmp6u0gSvWNPyHLtFZ+ZeXWVSaEkqs3T8S74WklbGbNNNq4LL4+CWKtZDv2cfX8l8aFbKFhEnJnJ+IULFpqwoQnNHlHaVQtPBl+ypmbSWdmyC61KS/AKZC3Y+AA==) format("woff");
  font-weight: normal;
  font-style: normal; }

[class^="ckin-"], [class*=" ckin-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ckin' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ckin-compress:before {
  content: "\f109";;
}

.ckin-expand:before {
  content: "\f108";;
}

.ckin-play:before {
  content: "\f101";
}

.ckin-pause:before {
  content: "\f103";
}

.ckin-stop:before {
  content: "\f10a";
}

.ckin-backward:before {
  content: "\f120";;
}

.ckin-forward:before {
  content: "\f11f";
}

.ckin-volume-high:before {
  content: "\f107";
}

.ckin-volume-medium:before {
  content: "\f106";
}

.ckin-volume-low:before {
  content: "\f105";
}

.ckin-volume-mute:before {
  content: "\f104";
}

body {
  font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
}

video {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.ckin__player {
  margin-bottom: 20px;
  font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
  letter-spacing: 0.02em;
  &.audio {
    overflow: visible;
    padding-top: 52px;
  }
}

.ckin__player.ckin__fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 10000000;
  background: #000;
  border-radius: 0 !important;
  display: -ms-flexbox;
  display: flex;
}

.ckin__overlay {
  position: relative;
}

.ckin__overlay:before {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
}

.ckin__overlay--2:before {
  background: rgba(24, 24, 24, 0.8);
}

.default {
  border: 0 solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.default:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
  transition: opacity .2s;
  opacity: 1;
  visibility: visible;
}

.default__title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.default__button {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  outline: 0;
  padding: 0;
  cursor: pointer;
  -ms-flex-pack: center;
      justify-content: center;
  display: -ms-flexbox;
  display: flex;
  max-width: 50px;
}

.default__button i {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.default__button--big {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
  font-size: 64px;
  transition: all .2s;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.default__slider {
  width: 10px;
  height: 30px;
}

.default__controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  transition: all .3s;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: @dark-blue;
  font-size: 32px;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px;
  -ms-transform: translateY(0);
      transform: translateY(0);
  -ms-flex-pack: justify;
      justify-content: space-between;
  border-radius: 0 0 5px 5px;
}

.default.is-playing:before {
  opacity: 0;
  visibility: hidden;
  -ms-transform: translate(-50%, -50%) scale(1.3);
      transform: translate(-50%, -50%) scale(1.3);
}

.default.is-playing .default__button--big {
  opacity: 0;
  visibility: hidden;
}

.default.is-playing .default__controls {
  -ms-transform: translateY(52px);
      transform: translateY(52px);
}

.default.is-playing:hover .default__controls {
  -ms-transform: translateY(0);
      transform: translateY(0);
}

.default__controls > * {
  -ms-flex: 1;
      flex: 1;
}

.default .progress {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 17px;
  margin-bottom: 0px;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius: 4px;
}

.default .progress__filled {
  width: 0%;
  background: #00CF7D;
  -ms-flex: 0;
      flex: 0;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
  border-radius: 4px;
}

.default .progress__breaker {
  display: block;
  width: 100%;
  height: 0;
}

.default {
  .progress__time {
    font-size: small;
    margin-right: 5px;
  }
}

.minimal {
  border: 0 solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.minimal:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
  transition: opacity .2s;
  opacity: 1;
  visibility: visible;
}

.minimal__title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.minimal__button {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  outline: 0;
  padding: 0;
  cursor: pointer;
  -ms-flex-pack: center;
      justify-content: center;
  display: -ms-flexbox;
  display: flex;
  max-width: 50px;
}

.minimal__button i {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.minimal__button--big {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
  font-size: 64px;
  transition: all .2s ease-in;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.minimal__slider {
  width: 10px;
  height: 30px;
}

.minimal__controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  transition: all .3s;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: @dark-blue;
  font-size: 32px;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px;
  -ms-transform: translateY(0);
      transform: translateY(0);
  -ms-flex-pack: justify;
      justify-content: space-between;
  border-radius: 0 0 5px 5px;
}

.minimal.is-playing:before {
  opacity: 0;
  visibility: hidden;
}

.minimal.is-playing .minimal__button--big {
  opacity: 0;
  visibility: hidden;
  -ms-transform: translate(-50%, -50%) scale(1.3);
      transform: translate(-50%, -50%) scale(1.3);
}

.minimal.is-playing .minimal__controls {
  -ms-transform: translateY(52px);
      transform: translateY(52px);
}

.minimal.is-playing:hover .minimal__controls {
  -ms-transform: translateY(0);
      transform: translateY(0);
}

.minimal__controls > * {
  -ms-flex: 1;
      flex: 1;
}

.minimal .progress {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 17px;
  margin-bottom: 0px;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius: 4px;
}

.minimal .progress__filled {
  width: 0%;
  background: #00CF7D;
  -ms-flex: 0;
      flex: 0;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
  border-radius: 4px;
}

.minimal .progress__breaker {
  display: block;
  width: 100%;
  height: 0;
}

.minimal {
  .progress__time {
    font-size: small;
    margin-right: 5px;
  }
}


.compact {
  border: 0 solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.compact:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
  transition: opacity .2s;
  opacity: 1;
  visibility: visible;
}

.compact__title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.compact__button {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  outline: 0;
  padding: 0;
  cursor: pointer;
  -ms-flex-pack: center;
      justify-content: center;
  display: -ms-flexbox;
  display: flex;
  max-width: 50px;
}

.compact__button i {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.compact__button--big {
  background: none;
  border: 0;
  line-height: 1;
  color: #00CF7D;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
  font-size: 64px;
  transition: all .2s ease-in;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.compact__slider {
  width: 10px;
  height: 30px;
}

.compact__controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  max-width: 400px;
  bottom: 0;
  right: 0;
  left: 50%;
  transition: all .3s;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: @dark-blue;
  font-size: 32px;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px;
  -ms-transform: translateY(-20px) translateX(-50%);
      transform: translateY(-20px) translateX(-50%);
  -ms-flex-pack: justify;
      justify-content: space-between;
  border-radius: 5px;
}

.compact.is-playing:before {
  opacity: 0;
  visibility: hidden;
}

.compact.is-playing .compact__button--big {
  opacity: 0;
  visibility: hidden;
  -ms-transform: translate(-50%, -50%) scale(1.3);
      transform: translate(-50%, -50%) scale(1.3);
}

.compact.is-playing .compact__controls {
  -ms-transform: translateY(52px) translateX(-50%);
      transform: translateY(52px) translateX(-50%);
}

.compact.is-playing:hover .compact__controls {
  -ms-transform: translateY(-20px) translateX(-50%);
      transform: translateY(-20px) translateX(-50%);
}

.compact__controls > * {
  -ms-flex: 1;
      flex: 1;
}

.compact .progress {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 17px;
  margin-bottom: 0px;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius: 4px;
}

.compact .progress__filled {
  width: 0%;
  background: #00CF7D;
  -ms-flex: 0;
      flex: 0;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
  border-radius: 4px;
}

.compact .progress__breaker {
  display: block;
  width: 100%;
  height: 0;
}

.compact {
  .progress__time {
    font-size: small;
    margin-right: 5px;
  }
}



@media (max-width: 480px) {
  .ckin__player button {
    font-size: 18px;
  }
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}