/*
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
@access private
@param {Number} $value - Pixel value to convert.
@param {Number} $base [null] - Base for pixel conversion.
@returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
*/
/*
Removes the unit (e.g. px, em, rem) from a value, returning the number only.
@param {Number} $num - Number to strip unit from.
@returns {Number} The same number, sans unit.
*/
/*
Converts one or more pixel values into matching rem values.
@param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
@param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
@returns {List} A list of converted values.
*/
/**
 * Contrast
 */
/**
*	Basic link hover function
*/
/*
* Fluid Type function
*/
/*
* Breakpoint Handler
* @usage: respond-to('tablet_small') { ... } to target 'tablet_small' and aboe
*/
/*
* Grid Layout
*/
/*
* Responsive Type mixins
*/
/*
* Helpers
*/
.video {
  border-radius: 16px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  cursor: pointer;
}
.video:hover:before {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.video .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.video .bg-image > img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.video .bg-image:hover > img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.video .bg-image .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100px;
  border: solid 2px #fff;
  width: 108px;
  height: 108px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.video .bg-image .video-play img {
  width: 40px;
  height: 40px;
  margin-left: 4px;
}
.video.is-playing:before {
  display: none;
}
.video--mp4:before {
  content: "";
  width: 84px;
  height: 84px;
  display: block;
  background-image: url("/wp-content/themes/bodytalk/assets/images/play-button.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 42px);
  left: calc(50% - 42px);
  z-index: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 50%;
}
.video video,
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video--hero-inset:before {
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}
.video--hero-inset.is-fullscreen {
  position: fixed;
  top: 50px;
  right: 50px;
  bottom: 50px;
  left: 50px;
  width: 100%;
  height: 100%;
  z-index: 100;
}
/*# sourceMappingURL=block-video.css.map */