/*.....................................
  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;
}

.watchlist {
  display: block;
}

.back-link {
  color: #22b9b0;
  text-decoration: none;
  position: relative;
  padding-left: 25px;
  pointer-events: all;
  -moz-osx-font-smoothing: grayscale;
  font-family: "brandon-grotesque-n1", "brandon-grotesque", "Helvetica", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0px 0px 5px rgba(0,0,0,.5);
}

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

.vhx.vimeo-btn, .vhx.back-link {
  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-decoration: uppercase;
}

.vimeo-btn:link,
.vimeo-btn:visited {
  background: rgba(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-left {
  float: left;
  margin: 2% 0px 0px 5%;
}

.vimeo-player-bar-right {
  float: right;
  margin: 2% 5% 0px 0px;
}

/*......................................
  share controls
......................................*/
.share-btn {
  border: 1px solid #22b9b0;
  background: rgba(0, 0, 0, .7);
  pointer-events: all;
  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;
  background-size: contain;
  padding: 0px;
  width: 50px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2250%22%20height%3D%2240%22%20viewBox%3D%220%200%2050%2040%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M24.58%2C9.34V22.18h.85V9.34L28.19%2C12l.63-.59L25%2C7.75l-3.82%2C3.61.63.59Zm2.55%2C4.78V15h5.1V29.4H17.78V15h5.1v-.85H16.93V30.25H33.07V14.12Z%22%20fill%3D%22none%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22b%22%3E%3Crect%20x%3D%228.33%22%20y%3D%22-0.85%22%20width%3D%2233.34%22%20height%3D%2244.1%22%20fill%3D%22none%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EArtboard%201%3C%2Ftitle%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cg%20clip-path%3D%22url%28%23b%29%22%3E%3Crect%20x%3D%2211.56%22%20y%3D%222.37%22%20width%3D%2226.89%22%20height%3D%2233.26%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.share-modal,
.share-modal * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  pointer-events: auto;
}

.share-modal-header, .share-modal-action {
  font-family: "brandon-grotesque-n1", "brandon-grotesque", "Helvetica", sans-serif;
}

.share-modal {
  -webkit-transition: opacity .4s ease-out;
  transition: opacity .4s ease-out;
}

.share-modal {
  z-index: 25;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: visible;
  background-color: #000;
  background-color: rgba(0, 0, 0, .75);
}

.share-modal.is-active {
  opacity: 1;
}

.share-modal.is-visible {
  visibility: visible;
}

.share-modal-container {
  position: absolute;
  background-color: #141414;
  top: 50%;
  left: 50%;
  z-index: 15;
  margin-left: -300px;
  width: 600px;
  pointer-events: all;
}

.share-modal .share-modal-container {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.share-modal.show-child .share-modal-container {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.share-modal-header {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  font-size: 18px;
  margin: 0;
  padding: 30px 30px 0 30px;
}

.share-modal-close {
  position: absolute;
  top: -40px;
  right: -40px;
  display: block;
  width: 40px;
  height: 40px;
  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.6%2017.5l-6-6%206-6c.3-.3.3-.8%200-1.1l-.9-.9c-.3-.3-.8-.3-1.1%200l-6%206-6-6c-.3-.3-.8-.3-1.1%200l-1.1.9c-.3.3-.3.8%200%201.1l6%206-6%206c-.3.3-.3.8%200%201.1l.9.9c.3.3.8.3%201.1%200l6-6%206%206c.3.3.8.3%201.1%200l.9-.9c.5-.3.5-.8.2-1.1z%22%20fill%3D%22%23D3104A%22%2F%3E%3C%2Fsvg%3E');
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center center;
}

.share-modal-actions-list {
  list-style-type: none;
  padding: 0;
  margin: 25px 45px 0 35px;
}

.share-modal-actions-list-item {
  float: left;
  width: 25%;
}

.share-modal-actions-list-item.small-only {
  display: none;
}

.share-modal-action {
  display: block;
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 40px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

.share-facebook {
  background-color: #3b5999;
}

.share-twitter {
  background-color: #00a5e5;
}

.share-tumblr {
  background-color: #36465d;
}

.share-email {
  background-color: #3f3f3f;
}

.share-embed {
  background-color: #22b9b0;
}

.share-embed .icon.embed {
  background-size: 22px;
  width: 22px;
  background-position: 0px;
}

.share-modal-row {
  padding: 30px 45px;
}

.share-modal-row + .share-modal-row {
  padding-top: 0;
}

.share-modal-row.share-modal-link-container {
  padding-top: 25px;
}

.share-modal-subhead {
  margin-top: 0;
  font-weight: 400;
  color: #fff;
}

.share-modal-subhead .icon.embed {
  background-position: 0px;
  background-size: 18px;
  width: 20px;
}

.share-modal-code-field, .share-modal-action {
  border-radius: 3px;
}

.share-modal-code-field, .share-modal-subhead {
  font-size: 14px;
}

.share-modal-code-field {
  padding: 10px 15px;
  color: #fff;
  color: rgba(255, 255, 255, .5);
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: none;
}

.share-modal-code-link {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: none;
  font-size: 14px;
}

.share-modal-code-link:hover {
  color: #22b9b0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.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');
}

@media only screen and (max-width: 600px), (max-height: 680px) {
  .action-text,
  .small-hide,
  .share-modal-link-container .share-modal-code-field,
  .share-modal-link-container .share-modal-subhead {
    display: none;
  }

  .share-modal-action .icon {
    bottom: -6px;
    margin-right: 0;
    width: 20px;
    height: 20px;
  }

 .share-modal-code-link {
    display: block;
  }

  .share-modal-container {
    width: 320px;
    left: 50%;
    margin-left: -160px;
    overflow: hidden;
  }

  .share-modal-close {
    z-index: 6;
    right: 0;
    top: 0;
    background-size: 15px;
  }
}