/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 17, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../.rvm/gems/ruby-2.1.0/gems/compass-0.12.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/*!
Video.js Default Styles (http://videojs.com)
Version 4.3.0
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
/* line 13, ../sass/_video-js.scss */
.vjs-default-skin {
  color: #cccccc;
}

/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: 'VideoJS';
  /*  src: url('font/vjs.eot');
  */
  /*  src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
*/
  font-weight: normal;
  font-style: normal;
}

/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
/* line 32, ../sass/_video-js.scss */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9);
}

/* line 42, ../sass/_video-js.scss */
.vjs-default-skin .vjs-slider:focus {
  /* box-shadow */
  -webkit-box-shadow: 0 0 2em #ffffff;
  -moz-box-shadow: 0 0 2em #ffffff;
  box-shadow: 0 0 2em #ffffff;
}

/* line 48, ../sass/_video-js.scss */
.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

/* line 54, ../sass/_video-js.scss */
.vjs-default-skin .vjs-slider-handle:before {
  content: "\e009";
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
/* line 76, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
}

/* Show the control bar only once the video has started playing */
/* line 93, ../sass/_video-js.scss */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */
  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}

/* Hide the control bar when the video is playing and the user is inactive  */
/* line 106, ../sass/_video-js.scss */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}

/* line 116, ../sass/_video-js.scss */
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}

/* line 119, ../sass/_video-js.scss */
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}

/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0screen {
  /* line 128, ../sass/_video-js.scss */
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
/* line 133, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}

/* FontAwsome button icons */
/* line 144, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Replacement for focus outline */
/* line 158, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #ffffff;
}

/* line 161, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
  this is set to 0 */
}

/* Hide control text visually, but have it available for screenreaders */
/* line 168, ../sass/_video-js.scss */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Play/Pause
--------------------------------------------------------------------------------
*/
/* line 182, ../sass/_video-js.scss */
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}

/* line 186, ../sass/_video-js.scss */
.vjs-default-skin .vjs-play-control:before {
  content: "\e001";
}

/* line 189, ../sass/_video-js.scss */
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}

/* Volume/Mute
-------------------------------------------------------------------------------- */
/* line 195, ../sass/_video-js.scss */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}

/* line 200, ../sass/_video-js.scss */
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006";
}

/* line 204, ../sass/_video-js.scss */
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}

/* line 208, ../sass/_video-js.scss */
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}

/* line 212, ../sass/_video-js.scss */
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}

/* line 215, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right;
}

/* line 219, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}

/* line 224, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}

/* line 227, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

/* line 234, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
}

/* line 238, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}

/* line 245, ../sass/_video-js.scss */
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}

/* Progress
--------------------------------------------------------------------------------
*/
/* line 252, ../sass/_video-js.scss */
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
/* line 271, ../sass/_video-js.scss */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  /* transition */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
/* line 283, ../sass/_video-js.scss */
.vjs-default-skin .vjs-progress-holder {
  height: 100%;
}

/* Progress Bars */
/* line 288, ../sass/_video-js.scss */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

/* line 298, ../sass/_video-js.scss */
.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

/* line 310, ../sass/_video-js.scss */
.vjs-default-skin .vjs-load-progress {
  background: #646464;
  background: rgba(255, 255, 255, 0.4);
}

/* line 314, ../sass/_video-js.scss */
.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}

/* line 318, ../sass/_video-js.scss */
.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em;
}

/* Time Display
--------------------------------------------------------------------------------
*/
/* line 324, ../sass/_video-js.scss */
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}

/* line 329, ../sass/_video-js.scss */
.vjs-default-skin .vjs-current-time {
  float: left;
}

/* line 332, ../sass/_video-js.scss */
.vjs-default-skin .vjs-duration {
  float: left;
}

/* Remaining time is in the HTML, but not included in default design */
/* line 336, ../sass/_video-js.scss */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left;
}

/* line 340, ../sass/_video-js.scss */
.vjs-time-divider {
  float: left;
  line-height: 3em;
}

/* Fullscreen
--------------------------------------------------------------------------------
*/
/* line 347, ../sass/_video-js.scss */
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}

/* line 352, ../sass/_video-js.scss */
.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000";
}

/* Switch to the exit icon when the player is in fullscreen */
/* line 356, ../sass/_video-js.scss */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
/* line 364, ../sass/_video-js.scss */
.vjs-default-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 4em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  border: 0.1em solid #3b4249;
  /* border-radius */
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  border-radius: 0.8em;
  /* box-shadow */
  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/* Optionally center */
/* line 397, ../sass/_video-js.scss */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -2.1em;
  /* Center it vertically */
  top: 50%;
  margin-top: -1.4000000000000001em;
}

/* Hide if controls are disabled */
/* line 406, ../sass/_video-js.scss */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}

/* Hide when video starts playing */
/* line 410, ../sass/_video-js.scss */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}

/* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
/* line 415, ../sass/_video-js.scss */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none;
}

/* line 419, ../sass/_video-js.scss */
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  /* IE8 needs a non-glow hover state */
  background-color: #505050;
  background-color: rgba(50, 50, 50, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 3em #ffffff;
  -moz-box-shadow: 0 0 3em #ffffff;
  box-shadow: 0 0 3em #ffffff;
  /* transition */
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}

/* line 435, ../sass/_video-js.scss */
.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Loading Spinner
--------------------------------------------------------------------------------
*/
/* line 452, ../sass/_video-js.scss */
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

/* line 470, ../sass/_video-js.scss */
.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}

@-moz-keyframes spin {
  /* line 482, ../sass/_video-js.scss */
  0% {
    -moz-transform: rotate(0deg);
  }

  /* line 485, ../sass/_video-js.scss */
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  /* line 490, ../sass/_video-js.scss */
  0% {
    -webkit-transform: rotate(0deg);
  }

  /* line 493, ../sass/_video-js.scss */
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  /* line 498, ../sass/_video-js.scss */
  0% {
    -o-transform: rotate(0deg);
  }

  /* line 501, ../sass/_video-js.scss */
  100% {
    -o-transform: rotate(359deg);
  }
}

@keyframes spin {
  /* line 506, ../sass/_video-js.scss */
  0% {
    transform: rotate(0deg);
  }

  /* line 509, ../sass/_video-js.scss */
  100% {
    transform: rotate(359deg);
  }
}

/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
/* line 516, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}

/* line 520, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000000;
  /* Same width top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */
}

/* Button Pop-up Menu */
/* line 540, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  /* box-shadow */
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}

/* line 562, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block;
}

/* line 565, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

/* line 574, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}

/* line 580, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}

/* line 591, ../sass/_video-js.scss */
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

/* Subtitles Button */
/* line 602, ../sass/_video-js.scss */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c";
}

/* Captions Button */
/* line 606, ../sass/_video-js.scss */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008";
}

/* Replacement for focus outline */
/* line 611, ../sass/_video-js.scss */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}

/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
/* line 629, ../sass/_video-js.scss */
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Provide some basic defaults for fonts */
  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */
  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
/* line 662, ../sass/_video-js.scss */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
/* line 671, ../sass/_video-js.scss */
.video-js:-moz-full-screen {
  position: absolute;
}

/* Fullscreen Styles */
/* line 675, ../sass/_video-js.scss */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}

/* line 682, ../sass/_video-js.scss */
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}

/* line 695, ../sass/_video-js.scss */
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

/* line 699, ../sass/_video-js.scss */
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

/* Poster Styles */
/* line 703, ../sass/_video-js.scss */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

/* line 714, ../sass/_video-js.scss */
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

/* Hide the poster when native controls are used otherwise it covers them */
/* line 722, ../sass/_video-js.scss */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
/* line 727, ../sass/_video-js.scss */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em;
}

/* Individual tracks */
/* line 736, ../sass/_video-js.scss */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}

/* line 746, ../sass/_video-js.scss */
.video-js .vjs-subtitles {
  color: white;
}

/* line 749, ../sass/_video-js.scss */
.video-js .vjs-captions {
  color: #ffcc66;
}

/* line 752, ../sass/_video-js.scss */
.vjs-tt-cue {
  display: block;
}

/* Hide disabled or unsupported controls */
/* line 756, ../sass/_video-js.scss */
.vjs-default-skin .vjs-hidden {
  display: none;
}

/* line 759, ../sass/_video-js.scss */
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
/* line 19, ../sass/screen.scss */
body {
  height: 614px;
  width: 850px;
  overflow: hidden;
}

/* line 25, ../sass/screen.scss */
#intro_video div {
  display: none;
}

/* line 27, ../sass/screen.scss */
#peppa-bat-and-ball {
  position: relative;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  left: -102px;
  top: -77px;
  background: #90b0e0;
  text-align: center;
  line-height: 600px;
  /* img.preloader{
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      transform: scale(2);
  } */
}
/* line 37, ../sass/screen.scss */
#peppa-bat-and-ball * {
  -webkit-user-select: none;
  -moz-user-select: none;
}
/* line 42, ../sass/screen.scss */
#peppa-bat-and-ball img.preloader {
  position: relative;
  left: -30px;
}
/* line 46, ../sass/screen.scss */
#peppa-bat-and-ball canvas {
  position: absolute;
  top: 0;
  left: 0;
}
/* line 51, ../sass/screen.scss */
#peppa-bat-and-ball .hidden {
  display: none !important;
}
/* line 54, ../sass/screen.scss */
#peppa-bat-and-ball .preloader-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #90b0e0;
}
/* line 70, ../sass/screen.scss */
#peppa-bat-and-ball .letter-hit-area {
  position: absolute;
  bottom: 45px;
  width: 180px;
  height: 200px;
  background: #78C273;
  opacity: 0.01;
}
/* line 78, ../sass/screen.scss */
#peppa-bat-and-ball .letter-hit-area.pos-zero {
  left: 105px;
}
/* line 79, ../sass/screen.scss */
#peppa-bat-and-ball .letter-hit-area.pos-one {
  left: 325px;
}
/* line 80, ../sass/screen.scss */
#peppa-bat-and-ball .letter-hit-area.pos-two {
  left: 543px;
}
/* line 83, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area {
  position: absolute;
  bottom: 165px;
  width: 105px;
  height: 225px;
  opacity: 0;
}
/* line 89, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.danny-dog {
  left: 143px;
}
/* line 90, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.emily-elephant {
  left: 246px;
  bottom: 55px;
  width: 132px;
}
/* line 91, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.pedro-pony {
  left: 380px;
}
/* line 92, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.rebecca-rabbit {
  left: 486px;
  bottom: 54px;
}
/* line 93, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.suzy-sheep {
  left: 588px;
}
/* line 94, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.candy-cat {
  left: 702px;
  bottom: 47px;
}
/* line 95, ../sass/screen.scss */
#peppa-bat-and-ball .character-hit-area.zoe-zebra {
  left: 822px;
}
/* line 99, ../sass/screen.scss */
#peppa-bat-and-ball a.throw-btn {
  position: absolute;
  top: 205px;
  left: 305px;
  display: block;
  width: 397px;
  height: 205px;
  background-image: url("../img/throw.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 397px 205px;
}
/* line 112, ../sass/screen.scss */
#peppa-bat-and-ball a.start-btn {
  position: absolute;
  top: 198px;
  left: 305px;
  display: block;
  width: 422px;
  height: 207px;
  background-image: url("../img/start-button.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 422px 207px;
}
/* line 125, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 131, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .motion-text.well-done {
  background-size: 520px 142px;
  width: 520px;
  height: 142px;
  left: 250px;
  top: 80px;
}
/* line 138, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen a.play-again-btn {
  position: absolute;
  bottom: -10px;
  left: 330px;
  display: block;
  width: 397px;
  height: 205px;
  background-image: url("../img/score-screen/play-again-button.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 397px 205px;
}
/* line 150, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .batball {
  position: absolute;
  bottom: 78px;
  left: 58px;
  -webkit-transform: scale(0.4, 0.4) rotate(-8deg);
  -o-transform: scale(0.4, 0.4) rotate(-8deg);
  transform: scale(0.4, 0.4) rotate(-8deg);
}
/* line 158, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .peppa {
  position: absolute;
  bottom: -23px;
  left: -150px;
  -webkit-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
/* line 166, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .george {
  position: absolute;
  bottom: -60px;
  right: -178px;
  -webkit-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
/* line 174, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard {
  position: absolute;
  top: 175px;
  left: 150px;
  background-image: url("../img/score-screen/scoreboard.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 753px 424px;
  width: 753px;
  height: 424px;
}
/* line 184, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number {
  position: absolute;
  display: block;
  width: 88px;
  height: 78px;
  background-image: url("../img/score-screen/score-numbers.png");
  background-position: 0 -312px;
  background-repeat: no-repeat;
  background-size: 88px 390px;
}
/* line 194, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.zero {
  background-position: 0 0;
}
/* line 197, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.one {
  background-position: 0 -78px;
}
/* line 200, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.two {
  background-position: 0 -156px;
}
/* line 203, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.three {
  background-position: 0 -234px;
}
/* line 206, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.four {
  background-position: 0 -312px;
}
/* line 209, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.hits-score {
  top: 143px;
  left: 169px;
}
/* line 213, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.hits-fixed {
  top: 143px;
  left: 368px;
}
/* line 217, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.catch-score {
  top: 245px;
  left: 142px;
}
/* line 221, ../sass/screen.scss */
#peppa-bat-and-ball .score-screen .scoreboard .number.catch-fixed {
  top: 245px;
  left: 342px;
}
/* line 229, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.65);
}
/* line 236, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg {
  background-image: url("../img/help/help-background.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 1024px 768px;
  width: 100%;
  height: 100%;
  position: relative;
}
/* line 244, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg .screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-position: 0 0;
  background-repeat: no-repeat;
}
/* line 255, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg .page-one {
  background-image: url("../img/help/help-screen-1-small.png");
}
/* line 258, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg .page-two {
  background-image: url("../img/help/help-screen-2-small.png");
}
/* line 261, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg .page-three {
  background-image: url("../img/help/help-screen-3-small.png");
}
/* line 265, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg a.btn {
  position: absolute;
  top: 80px;
  right: 404px;
  width: 54px;
  height: 54px;
  display: block;
}
/* line 272, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg a.btn.next {
  background-image: url("../img/help/next-prev-button.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 54px 109px;
}
/* line 278, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg a.btn.prev {
  background-image: url("../img/help/next-prev-button.png");
  background-position: 0 -54px;
  background-repeat: no-repeat;
  background-size: 54px 109px;
  right: 584px;
}
/* line 286, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg a.help-close {
  background-image: url("../img/help/help-close.png");
  background-position: 0 -218px;
  background-repeat: no-repeat;
  background-size: 218px 436px;
  display: block;
  width: 218px;
  height: 218px;
  position: absolute;
  bottom: 0;
  left: 30px;
}
/* line 298, ../sass/screen.scss */
#peppa-bat-and-ball .help-overlay .screen-bg a.help-close:hover {
  background-position: 0 0;
}
/* line 304, ../sass/screen.scss */
#peppa-bat-and-ball .video-container {
  background: #007bc6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 672px;
  padding: 96px 0 0 0;
}
/* line 312, ../sass/screen.scss */
#peppa-bat-and-ball .video-container a.video-skip {
  position: absolute;
  bottom: 3px;
  right: 5px;
  display: block;
  width: 135px;
  height: 86px;
  background-image: url("../img/skip-button.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 135px 86px;
}
/* line 326, ../sass/screen.scss */
#peppa-bat-and-ball .peppa-pig-logo {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/peppa-logo.png");
  background-position: 270px 30px;
  background-repeat: no-repeat;
  background-size: 494px 426px;
}
/* line 337, ../sass/screen.scss */
#peppa-bat-and-ball .sun {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 280px;
  height: 280px;
  background-image: url("../img/sun.gif");
  background-repeat: no-repeat;
  background-position: 6px -9px;
  -webkit-background-size: 280px;
  background-size: 130px;
}
/* line 350, ../sass/screen.scss */
#peppa-bat-and-ball .cloud {
  display: block;
  width: 243px;
  height: 132px;
  position: absolute;
  animation-duration: 70s;
  animation-name: leftToRight;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-duration: 70s;
  -webkit-animation-name: leftToRight;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 70s;
  -moz-animation-name: leftToRight;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}
/* line 368, ../sass/screen.scss */
#peppa-bat-and-ball .cloud.c-one {
  top: 60px;
  left: -245px;
  background-image: url("../img/cloud-one.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 243px 132px;
  animation-delay: -14s;
  -webkit-animation-delay: -14s;
  -moz-animation-delay: -14s;
}
/* line 379, ../sass/screen.scss */
#peppa-bat-and-ball .cloud.c-two {
  top: 140px;
  left: -10px;
  background-image: url("../img/cloud-two.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 243px 132px;
  animation-delay: -48s;
  -webkit-animation-delay: -48s;
  -moz-animation-delay: -48s;
}
/* line 390, ../sass/screen.scss */
#peppa-bat-and-ball .cloud.c-three {
  top: 250px;
  left: -245px;
  background-image: url("../img/cloud-three.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 243px 132px;
  animation-delay: -32s;
  -webkit-animation-delay: -32s;
  -moz-animation-delay: -32s;
}
/* line 403, ../sass/screen.scss */
#peppa-bat-and-ball .controls .control a.no-hover:hover {
  cursor: default;
}
/* line 406, ../sass/screen.scss */
#peppa-bat-and-ball .controls .control a:not(.no-hover):hover, #peppa-bat-and-ball .cta-buttons-container a img:hover, #peppa-bat-and-ball a.video-skip:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
/* line 413, ../sass/screen.scss */
#peppa-bat-and-ball .controls {
  position: absolute;
  top: 7px;
  right: 10px;
  height: 94px;
  width: 100%;
  /*  .sound {
       a, a.inactive:hover{background-position: 0 -94px;}
       a:hover, a.inactive{background-position: 0 8px;}
   }
   .music {
       a, a.inactive:hover{background-position: -83px -94px;}
       a:hover, a.inactive{background-position: -83px 8px;}
   }
   .help {
       a, a.inactive:hover{background-position: -166px -94px;}
       a:hover, a.inactive{background-position: -166px 8px;}
   } */
}
/* line 419, ../sass/screen.scss */
#peppa-bat-and-ball .controls .control {
  width: 83px;
  height: 94px;
  float: right;
  /* a:hover,  */
}
/* line 423, ../sass/screen.scss */
#peppa-bat-and-ball .controls .control a, #peppa-bat-and-ball .controls .control a.inactive {
  display: block;
  width: 83px;
  height: 94px;
  background-image: url("../img/controls-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 -94px;
  background-size: 249px 188px;
}
/* line 432, ../sass/screen.scss */
#peppa-bat-and-ball .controls .control a.inactive {
  background-position: 0 0;
}
/* line 449, ../sass/screen.scss */
#peppa-bat-and-ball .controls .sound a {
  background-position: 0 -94px;
}
/* line 450, ../sass/screen.scss */
#peppa-bat-and-ball .controls .sound a.inactive {
  background-position: 0 8px;
}
/* line 453, ../sass/screen.scss */
#peppa-bat-and-ball .controls .music a {
  background-position: -83px -94px;
}
/* line 454, ../sass/screen.scss */
#peppa-bat-and-ball .controls .music a.inactive {
  background-position: -83px 8px;
}
/* line 457, ../sass/screen.scss */
#peppa-bat-and-ball .controls .help a {
  background-position: -166px -94px;
}
/* line 458, ../sass/screen.scss */
#peppa-bat-and-ball .controls .help a.inactive {
  background-position: -166px 8px;
}
/* line 462, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container {
  position: absolute;
  top: 450px;
  width: 100%;
  height: 317px;
  background-image: url("../img/batball.png");
  background-repeat: no-repeat;
  background-position: 410px;
  background-size: 150px 53px;
}
/* line 471, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .cta {
  position: absolute;
  top: 0;
  width: 320px;
  height: 288px;
}
/* line 476, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .cta a {
  display: block;
  width: 320px;
  height: 220px;
}
/* line 480, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .cta a .text {
  position: absolute;
  bottom: 0px;
  height: 52px;
  width: 100%;
  display: block;
}
/* line 489, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .how-to-play {
  right: 112px;
  top: 0px;
  height: 298px;
}
/* line 493, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .how-to-play a {
  /*  background-image: url('img/how-to-play.gif');
   background-repeat: no-repeat;
   background-position: 13px 27px;
   background-size: 300px 300px;
   height: 320px; */
  height: 320px;
}
/* line 499, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .how-to-play a img {
  position: absolute;
  left: 0;
}
/* line 506, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .how-to-play a .text {
  background-image: url("../img/how-to-play-text.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 248px 52px;
  left: 29px;
}
/* line 515, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .play-game {
  left: 157px;
  top: -18px;
  height: 315px;
}
/* line 524, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .play-game a img {
  position: absolute;
  left: 0;
  top: -10px;
}
/* line 532, ../sass/screen.scss */
#peppa-bat-and-ball .cta-buttons-container .play-game a .text {
  background-image: url("../img/play-game-text.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 203px 52px;
  left: 10px;
}
/* line 542, ../sass/screen.scss */
#peppa-bat-and-ball .graphics-container.full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
/* line 550, ../sass/screen.scss */
#peppa-bat-and-ball .power-meter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* line 556, ../sass/screen.scss */
#peppa-bat-and-ball .power-meter img {
  -webkit-transform: scale(0.5);
}
/* line 559, ../sass/screen.scss */
#peppa-bat-and-ball .power-meter .meter, #peppa-bat-and-ball .power-meter .slider {
  position: absolute;
  display: block;
  top: 250px;
  left: 450px;
}
/* line 565, ../sass/screen.scss */
#peppa-bat-and-ball .power-meter .slider {
  top: 350px;
  left: 676px;
}
/* line 571, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text {
  position: absolute;
  display: block;
  top: 140px;
  -webkit-animation: grow 1s 1 linear;
  -moz-animation: grow 1s 1 linear;
  animation: grow 1s 1 linear;
}
/* line 581, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.now {
  background-image: url("../img/spritesheet/go.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 358px 184px;
  width: 358px;
  height: 184px;
  left: 344px;
  top: 100px;
  animation-duration: 0.5s;
  animation-name: textBounceRotate;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: textBounceRotate;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: textBounceRotate;
}
/* line 597, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.hide {
  -webkit-animation: shrink 0.5s 1 linear;
  -moz-animation: shrink 0.5s 1 linear;
  animation: shrink 0.5s 1 linear;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
}
/* line 605, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.ready {
  background-image: url("../img/spritesheet/ready.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 410px 184px;
  width: 410px;
  height: 184px;
  left: 311px;
  top: 100px;
  animation-duration: 1s;
}
/* line 616, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.steady {
  background-image: url("../img/spritesheet/steady.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 482px 184px;
  width: 482px;
  height: 184px;
  left: 278px;
  top: 100px;
}
/* line 627, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.pick-team {
  background-image: url("../img/spritesheet/pick-a-team.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 770px 216px;
  width: 770px;
  height: 216px;
  left: 147px;
}
/* line 636, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.lets-play {
  background-image: url("../img/spritesheet/lets-play.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 556px 184px;
  width: 556px;
  height: 184px;
  left: 237px;
  top: 46px;
}
/* line 646, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.well-done {
  background-image: url("../img/spritesheet/well-done.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 720px 196px;
  width: 720px;
  height: 196px;
  left: 150px;
  top: 80px;
}
/* line 656, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.oops {
  background-image: url("../img/spritesheet/oops.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 396px 226px;
  width: 396px;
  height: 226px;
  left: 307px;
}
/* line 665, ../sass/screen.scss */
#peppa-bat-and-ball .motion-text.your-turn {
  background-image: url("../img/its-your-turn-to-throw.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1000px 176px;
  width: 1000px;
  height: 176px;
  left: 10px;
  top: 100px;
}

@keyframes leftToRight {
  /* line 678, ../sass/screen.scss */
  0% {
    -webkit-transform: translateX(-245px);
  }

  /* line 682, ../sass/screen.scss */
  100% {
    -webkit-transform: translateX(1280px);
  }
}

@-webkit-keyframes leftToRight {
  /* line 687, ../sass/screen.scss */
  0% {
    -webkit-transform: translateX(-245px);
  }

  /* line 691, ../sass/screen.scss */
  100% {
    -webkit-transform: translateX(1280px);
  }
}

@-moz-keyframes leftToRight {
  /* line 696, ../sass/screen.scss */
  0% {
    -webkit-transform: translateX(-245px);
  }

  /* line 700, ../sass/screen.scss */
  100% {
    -webkit-transform: translateX(1280px);
  }
}

@keyframes grow {
  /* line 709, ../sass/screen.scss */
  0% {
    transform: scale(0);
    opacity: 0;
  }

  /* line 714, ../sass/screen.scss */
  55% {
    transform: scale(0.95);
    opacity: 1;
  }

  /* line 719, ../sass/screen.scss */
  65% {
    transform: scale(1);
  }

  /* line 723, ../sass/screen.scss */
  75% {
    transform: scale(0.9);
  }

  /* line 727, ../sass/screen.scss */
  85% {
    transform: scale(1);
  }

  /* line 731, ../sass/screen.scss */
  95% {
    transform: scale(0.95);
  }

  /* line 735, ../sass/screen.scss */
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes grow {
  /* line 741, ../sass/screen.scss */
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  /* line 746, ../sass/screen.scss */
  55% {
    -webkit-transform: scale(0.95);
    opacity: 1;
  }

  /* line 751, ../sass/screen.scss */
  65% {
    -webkit-transform: scale(1);
  }

  /* line 755, ../sass/screen.scss */
  75% {
    -webkit-transform: scale(0.9);
  }

  /* line 759, ../sass/screen.scss */
  85% {
    -webkit-transform: scale(1);
  }

  /* line 763, ../sass/screen.scss */
  95% {
    -webkit-transform: scale(0.95);
  }

  /* line 767, ../sass/screen.scss */
  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes grow {
  /* line 773, ../sass/screen.scss */
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }

  /* line 778, ../sass/screen.scss */
  55% {
    -moz-transform: scale(0.95);
    opacity: 1;
  }

  /* line 783, ../sass/screen.scss */
  65% {
    -moz-transform: scale(1);
  }

  /* line 787, ../sass/screen.scss */
  75% {
    -moz-transform: scale(0.9);
  }

  /* line 791, ../sass/screen.scss */
  85% {
    -moz-transform: scale(1);
  }

  /* line 795, ../sass/screen.scss */
  95% {
    -moz-transform: scale(0.95);
  }

  /* line 799, ../sass/screen.scss */
  100% {
    -moz-transform: scale(1);
  }
}

@keyframes shrink {
  /* line 805, ../sass/screen.scss */
  0% {
    transform: scale(1);
  }

  /* line 808, ../sass/screen.scss */
  100% {
    transform: scale(0);
  }
}

@-webkit-keyframes shrink {
  /* line 813, ../sass/screen.scss */
  0% {
    -webkit-transform: scale(1);
  }

  /* line 816, ../sass/screen.scss */
  100% {
    -webkit-transform: scale(0);
  }
}

@-moz-keyframes shrink {
  /* line 821, ../sass/screen.scss */
  0% {
    -moz-transform: scale(1);
  }

  /* line 824, ../sass/screen.scss */
  100% {
    -moz-transform: scale(0);
  }
}

@keyframes textBounceRotate {
  /* line 830, ../sass/screen.scss */
  0% {
    transform: scale(0);
    opacity: 0;
  }

  /* line 835, ../sass/screen.scss */
  55% {
    transform: scale(0.95);
  }

  /* line 839, ../sass/screen.scss */
  65% {
    transform: scale(1);
  }

  /* line 843, ../sass/screen.scss */
  75% {
    transform: scale(0.9) rotate(8deg);
  }

  /* line 847, ../sass/screen.scss */
  85% {
    transform: scale(1) rotate(-8deg);
  }

  /* line 851, ../sass/screen.scss */
  95% {
    transform: scale(0.95) rotate(8deg);
  }

  /* line 855, ../sass/screen.scss */
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes textBounceRotate {
  /* line 861, ../sass/screen.scss */
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  /* line 866, ../sass/screen.scss */
  55% {
    -webkit-transform: scale(0.95);
  }

  /* line 870, ../sass/screen.scss */
  65% {
    -webkit-transform: scale(1);
  }

  /* line 874, ../sass/screen.scss */
  75% {
    -webkit-transform: scale(0.9) rotate(8deg);
  }

  /* line 878, ../sass/screen.scss */
  85% {
    -webkit-transform: scale(1) rotate(-8deg);
  }

  /* line 882, ../sass/screen.scss */
  95% {
    -webkit-transform: scale(0.95) rotate(8deg);
  }

  /* line 886, ../sass/screen.scss */
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@-moz-keyframes textBounceRotate {
  /* line 892, ../sass/screen.scss */
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }

  /* line 897, ../sass/screen.scss */
  55% {
    -moz-transform: scale(0.95);
  }

  /* line 901, ../sass/screen.scss */
  65% {
    -moz-transform: scale(1);
  }

  /* line 905, ../sass/screen.scss */
  75% {
    -moz-transform: scale(0.9) rotate(8deg);
  }

  /* line 909, ../sass/screen.scss */
  85% {
    -moz-transform: scale(1) rotate(-8deg);
  }

  /* line 913, ../sass/screen.scss */
  95% {
    -moz-transform: scale(0.95) rotate(8deg);
  }

  /* line 917, ../sass/screen.scss */
  100% {
    -moz-transform: scale(1);
    opacity: 1;
  }
}