audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}


svg:not(:root) {
  overflow: hidden;
}


/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}


input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */

@font-face {
  font-family: 'Font-Name';
  src: url("../fonts/font-name.eot");
  src: url("../fonts/font-name.eot?#iefix") format("embedded-opentype"), url("../fonts/font-name.woff") format("woff"), url("../fonts/font-name.ttf") format("truetype"), url("../fonts/font-name.svg#font-name") format("svg");
  font-weight: normal;
  font-style: normal;
}

::selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}

::-webkit-selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
}

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
@font-face {
    font-family: 'IcoMoonFree';
    src: url('/fonts/IcoMoonFree.eot');
    src: url('/fonts/IcoMoonFree.eot') format('embedded-opentype'),
         url('/fonts/IcoMoonFree.woff2') format('woff2'),
         url('/fonts/IcoMoonFree.woff') format('woff'),
         url('/fonts/IcoMoonFree.ttf') format('truetype'),
         url('/fonts/IcoMoonFree.svg#IcoMoonFree') format('svg');
}


.icon-fullscreen-alt, .icon-fullscreen-exit-alt, .icon-play, .icon-pause, .icon-volume, .icon-volume-2 {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  height:16px;
}
.icon-fullscreen-alt:before {
  content:  url(/images/btns/full.png);
}
.icon-fullscreen-exit-alt:before {
  content: url(/images/btns/exit.png);
}
.icon-play:before {
  content: url(/images/btns/play.png);
}
.icon-pause:before {
  content: url(/images/btns/pause.png);
}
.icon-volume:before {
  content: url(/images/btns/sound.png);
}
.icon-volume-2:before {
  content: url(/images/btns/mute.png);
}
#playpause
{
	position:absolute;
	left:3%;
}

html, body {
  height: 100%;
}

body {
  background: url(../imgs/blurred.jpg) top left repeat;
  background-size: cover;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 0;
}

button {
  vertical-align: middle;
  background-color: transparent;
  color: white;
  margin:0;
  font-size: 1.2em;
  top:12px;
}
#mute
{
	position:absolute;
	left:77%;
	top:12px;
}
#volumebar
{
		position:absolute;
	left:80%;
	width:10%;
	top:19px;
}
#fullscreen
{
			position:absolute;
	left:92%;
	top:12px;
}
.custom-video {
  position: relative;
  height: 260px;
  width: 610px;
  margin: 40px auto;
  background-color: white;
}

video {
  display: block;
  background: url(../imgs/poster-img.png) no-repeat;
  background-size: cover;
}

.custom-video::full-screen {
  width: 100%;
  height: 100%;
}

::-moz-full-screen .custom-video {
  width: 100%;
  height: 100%;
}

.custom-video::-moz-full-screen {
  width: 100%;
  height: 100%;
}

.custom-video::-webkit-full-screen {
  width: 100%;
  height: 100%;
}

#mycontrols {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-size: .8em;
  width: 100%;
 height: 40px;

  background-color: black;
  background-color: rgba(109, 106, 104, 0.75);
  z-index: 99;


}

input[type=range] {
  border-radius: 2px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.7);
  height: 1px;
  border: none;
  cursor: pointer;
}

input[type=range]::-moz-range-track {
  vertical-align: middle;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.7);
  -moz-appearance: none;
  background-color: white;
  height: 1px;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  border-radius: 50%;
  height: 8px;
  width: 8px;
  background-color: white;
  border: 0;
}

input[type=range].light::-moz-range-thumb {
  box-shadow: 0 0 8px 2px white;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  background-color: white;
  border: 0;
}

input[type=range].light::-webkit-slider-thumb {
  box-shadow: 0 0 8px 2px white;
}

input[type=range]:active::-moz-range-track {
  background: orange;
}

.seeker {
  position: absolute;
  width: 70%;
 left:4%;
  z-index: 0;
  display: inline-block;
  margin-right: 5px;
  margin: 0 10px;
  top:12px;
}


.seekbar {
  z-index: 3;
  position: relative;
  width: 100%;
  background-color: transparent !important;
}

.progressbar, .bufferbar {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 100%;
  pointer-events: none;
  height: 1px;
  z-index: 2;
  /* Turns off styling - not usually needed, but good to know. */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /* gets rid of default border in Firefox and Opera. */
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #c0392b;
}
.progressbar::-moz-progress-bar, .bufferbar::-moz-progress-bar {
  background: #c0392b;
}
.progressbar::-webkit-progress-bar, .bufferbar::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.1);
}
.progressbar::-webkit-progress-value, .bufferbar::-webkit-progress-value {
  background: #c0392b;
}

.bufferbar {
  z-index: 1;
  color: #aaa;
}
.bufferbar::-moz-progress-bar {
  background: #aaa;
}
.bufferbar::-webkit-progress-value {
  background: #aaa;
}

.volumebar {
  width: 8%;
  margin: 0 1%;
}

/*hide controls from shadow DOM in webkit browsers*/
/* hides controls only in fullscreen, but shows them in normal screen even if controls is set to false*/
/*the most specific pseudo-element to target video controls on full screen*/
video::-webkit-media-controls-enclosure {
  display: none !important;
}
@media screen and (max-width :640px) {
	.seeker {
    width: 52%;
}
#mute {
    position: absolute;
    left: 63%;
  
}
#volumebar {
    position: absolute;
    left: 70%;
    width: 15%;

}
}