/*.....................................
  vhx bar
......................................*/
.player {
  z-index: -1;
}

#poster {
  font-family: Arial, sans-serif;
}

.player-container {
  margin: auto;
  position: relative;
  z-index: -1;
}

.player-background {
  background-color: rgb(0, 0, 0);
  position: relative;
  z-index: 0;
}

/*.....................................
  button styles for our bar
......................................*/
.vhx {
  z-index: 1;
  position: relative;
}

.vhx.vimeo-btn {
  cursor: pointer;
}

.vhx.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.4s, opacity 0.4s linear;
}

.vhx.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.03s, opacity 0.03s linear;
}

.vimeo-btn {
  position: relative;
  pointer-events: all;
  text-transform: uppercase;
}

.vimeo-btn:link,
.vimeo-btn:visited {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #22b9b0;

  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;

  font-weight: 500;
  font-size: 14px;
  font-family: 'brandon-grotesque-n1', 'brandon-grotesque', 'Helvetica',
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/*.....................................
  positioning
......................................*/
.vimeo-player-button {
  margin-left: 10px;
  float: right;
}

.vimeo-player-bar {
  margin: 2% 5%;
  position: absolute;
}

.icon {
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.icon.small {
  bottom: -3px;
  margin-right: 2px;
  width: 16px;
  height: 16px;
}

.icon.medium {
  width: 13px;
  height: 13px;
  bottom: -1px;
}

.icon.facebook {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M19%201.5h-15c-1.4%200-2.5%201.1-2.5%202.5v15c0%201.4%201.1%202.5%202.5%202.5h7.6v-7.2h-2.4v-3.1h2.4v-1.6c0-2.4%201.8-4.3%204.1-4.3h2.2v3.5h-2c-.5%200-.7.3-.7.7v1.6h2.6v3.1h-2.6v7.2h3.8c1.4%200%202.5-1.1%202.5-2.5v-14.9c0-1.4-1.1-2.5-2.5-2.5z%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cg%20fill%3D%22%23149996%22%3E%3Cpath%20d%3D%22M4%2021.5h7.6v-7.2h-2.4v-2.8h-7.7v7.5c0%201.4%201.1%202.5%202.5%202.5zM17.8%2011.5v2.8h-2.6v7.2h3.8c1.4%200%202.5-1.1%202.5-2.5v-7.5h-3.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon.twitter {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M21.5%205.3c-.7.3-1.5.5-2.4.6.8-.5%201.5-1.3%201.8-2.3-.8.5-1.7.8-2.6%201-2.8-3-7.9-.2-7%203.7-3.4-.1-6.4-1.7-8.4-4.2-1.1%201.9-.5%204.3%201.3%205.5-.7%200-1.3-.2-1.9-.5%200%201.9%201.4%203.7%203.3%204.1-.6.2-1.2.2-1.9.1.5%201.6%202%202.8%203.8%202.8-1.7%201.3-3.9%202-6.1%201.7%204%202.6%209.5%202.5%2013.4-.5%203-2.3%204.8-6.1%204.6-9.9.9-.6%201.5-1.3%202.1-2.1-.7.3-.6.8%200%200z%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cg%20fill%3D%22%23375667%22%3E%3Cpath%20d%3D%22M20.9%203.7c-.8.5-1.7.8-2.6%201%20.2.2.6.8.8%201.3.9-.6%201.5-1.4%201.8-2.3-.7.4-.3.9%200%200zM19.1%205.9c.2.5.3%201%20.3%201.5v-.1c.8-.6%201.5-1.3%202-2.1-.6.4-1.4.6-2.3.7.2.5.9-.1%200%200z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon.tumblr {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M17.6%2020.4c-2%201-4.4%201.4-6.6.8-2.3-.6-3.4-2.3-3.4-4.5v-7h-2.2v-2.8c2.5-.8%203.7-2.9%204-5.4h2.8v5.1h4.7v3.1h-4.7v5.1c0%201-.2%202.4.9%203%201.4.8%203.2.2%204.5-.6v3.2z%22%20fill%3D%22%23375667%22%2F%3E%3C%2Fsvg%3E');
}

.icon.email {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M22.6%209c0-.2-.1-.5-.3-.6l-10.3-7.6c-.3-.2-.6-.2-.9%200l-10.4%207.6c-.2.1-.3.4-.3.6v12.6c0%20.4.3.8.8.8h20.7c.4%200%20.8-.4.8-.8v-12.6zm-11.1-6.6l9.6%207v.9l-6.6%204.7%205.2%203.3c.8.5%200%201.8-.8%201.3l-7.4-4.6-7.4%204.7c-.8.5-1.7-.8-.8-1.3l5.2-3.3-6.6-4.7v-1l9.6-7zM19.7%2018.4%22%20fill%3D%22%23375667%22%2F%3E%3Cpath%20fill%3D%22%2322B8AF%22%20d%3D%22M11.5%2013.1l1.9%201.2%206.1-4.4-8-5.9-8%205.9%206.1%204.4z%22%2F%3E%3C%2Fsvg%3E');
  margin-right: 5px;
}

.icon.link {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20%23ffffff%20!important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M19.3%208.2c-1.8%201.8-3.7%204.6-6.6%203.8l2.4-2.4c.9-.9%201.8-1.8%202.6-2.7%201.9-1.9-.8-4.8-2.6-2.9l-1.4%201.4c-.2.2-1.4%201.1-1.4%201.4l-2.4%202.4c-.4-1.3%200-2.8%201-3.8%201.3-1.3%202.7-3.3%204.5-3.8%203.9-1.1%206.7%203.8%203.9%206.6%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%2322B8AF%22%2F%3E%3Cpath%20d%3D%22M7.9%2015.6c-.9.9-2.4-.6-1.4-1.5l4.1-4.1%202.3-2.3.5-.5c1-.6%202%20.7%201.2%201.6-2.2%202.4-4.5%204.5-6.7%206.8z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23375667%22%2F%3E%3Cpath%20d%3D%22M5.8%2013.4c-.9.9-1.8%201.8-2.6%202.7-1.9%201.9.8%204.8%202.6%202.9.9-.9%202-1.8%202.8-2.9l2.4-2.4c.4%201.3%200%202.8-1%203.8-1.3%201.3-2.7%203.3-4.5%203.8-3.8%201.1-6.7-3.8-3.9-6.6%201.8-1.7%203.8-4.5%206.6-3.7l-2.4%202.4%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%2322B8AF%22%2F%3E%3C%2Fsvg%3E');
}