/*!
 * 
 *                                                                       
 *                              ::;;;;                                   
 *    ::,,,,::    ::,,  ,,,,::::::11ii::,,::,,,,::      ::::,,::,,,,::   
 *  ,,111111ii,,::1111::111111ii::111111::111111ii,,    ii11,,ii111111,, 
 *  11ii::;;11;;ii11::iiii::;;11;;11ii::ii11::::11ii    ii11;;11;;::ii11 
 *  11;;  ::11ii11;;::11ii  ::11ii11ii,,iiii..  iiii    ii11;;11::  ;;11 
 *  1111;;ii11;;11;;,,ii11::ii11;;ii11;;;;11;;;;11;;;;;;ii11::11ii;;11ii 
 *  11111111;;::11;;  ::ii1111;;  ::ii11::ii1111ii::11ii;;11,,;;1111ii:: 
 *  11;;,,::  ,,::,,      ::,,        ::::  ::::    ,,,,::::    ::,,     
 *  ;;;;                                                                 
 *                                                                       
 *  Build: 6/3/2019, 6:11:05 PM
 */
/*
$spaces-thumb-overlay-color: rgba(62,66,69,0.1);
*/
/*******************************
 iNextGen variables from here on
 *******************************/
/******************
 GENERAL VARIABLES
******************/
/***************************
 ELEMENT SPECIFIC VARIABLES
***************************/
/***********************
 SPECIAL CASE VARIABLES
************************/
.mask-inner {
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat; }
  .mask-inner .mask-inner {
    transform: none !important; }

.mask-filter {
  height: 100%;
  width: 100%; }

.mask-border .mborder {
  border: 1px solid rgba(255, 255, 255, 0.8);
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none; }

.mask-border .area-border {
  border: 1px solid #00A1C0;
  left: 0;
  top: 0;
  position: absolute;
  transform-origin: 0 0;
  box-sizing: border-box; }

.mask-border .mask-radius {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute; }
  .mask-border .mask-radius .mask-radius-border {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8); }

.mask-border.hide-handles .prx-resizable-handle {
  opacity: 0;
  pointer-events: none !important; }

.mask-border.hide-handles .area-border {
  border: 1px dashed #B4BCBF; }

.mask-wrapper {
  overflow: hidden;
  height: 100%;
  pointer-events: none; }
  .mask-wrapper.borderPos-inside {
    box-sizing: border-box; }
  .mask-wrapper.borderPos-outside {
    width: 100%;
    height: 100%; }
    .mask-wrapper.borderPos-outside .mask-inner {
      box-sizing: content-box; }

.mask-edit-mode-handles {
  pointer-events: none; }
  .mask-edit-mode-handles.hide-handles .prx-resizable-handle, .mask-edit-mode-handles.hide-handles .prx-rotate-handle {
    opacity: 0;
    pointer-events: none !important; }
  .mask-edit-mode-handles.hide-handles .xborder {
    border-color: #B4BCBF !important; }

/* HTML5/CSS3 RESET ANNAM COPIED FROM UI.CSS BECAUSE PLAYER DID NOT RESET THE SAME AS EDITOR */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; }

article, aside, figure, footer, header, hgroup, nav, section {
  display: block; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

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

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 13px; }

/* ANNAM FOR COMPATIBILITY WITH EDITOR */
body, button, input, select, textarea {
  font-family: sans-serif;
  color: #222; }

a {
  color: #00e; }

a:visited {
  color: #551a8b; }

a:hover {
  color: #06e; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

dfn {
  font-style: italic; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

ins {
  background: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold; }

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

small {
  font-size: 85%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

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

figure {
  margin: 0; }

form {
  margin: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal;
  *overflow: visible; }

table button, table input {
  *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] {
  -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

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

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input:invalid, textarea:invalid {
  background-color: #f0dddd; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== media queries ====================================================== */
@media only screen and (min-width: 800px) {
  /* Styles */ }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */ }

/* ==|== non-semantic helper classes ======================================== */
.nocallout {
  -webkit-touch-callout: none; }

textarea[contenteditable] {
  -webkit-appearance: none; }

.gifhidden {
  position: absolute;
  left: -100%; }

.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.ir br {
  display: none; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* ==|== print styles ======================================================= */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  /* Black prints faster: h5bp.com/s */
  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: ""; }
  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  /* h5bp.com/t */
  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; } }

#eval-iframe {
  display: none; }

body {
  -webkit-appearance: none;
  -webkit-box-flex: 1;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none; }

input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text; }

/* DIV INSIDE DEFAULT ELEMENT FOR TEXT HOLDER */
#dragarea {
  font-family: Helvetica,Arial,sans-serif;
  text-align: left; }

.text {
  height: 95%;
  overflow: auto; }

.wrap {
  overflow: hidden; }

.pos {
  position: absolute; }

.spos {
  position: absolute; }

.action-highlight {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 0, 0.5);
  background: rgba(64, 208, 255, 0.3);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  border: 2px solid #40c8f4;
  padding: 3px;
  box-sizing: border-box; }

.action-highlight-visible, .action-highlight-simple-visible {
  opacity: 1; }

.action-highlight-visible .actionicon, .action-highlight-simple-visible .actionicon {
  pointer-events: auto; }

.actionicon {
  width: 20px !important;
  height: 20px !important;
  float: left !important;
  background: #40c8f4 url(/images/player/actions-sprite-1.png) no-repeat 0 0;
  -moz-background-origin: content-box !important;
  -webkit-background-origin: content-box !important;
  -o-background-origin: content-box !important;
  background-origin: content-box !important;
  border: 0 none !important;
  margin: 1px 0 0 1px;
  padding: 0px !important;
  border-radius: 3px !important;
  display: block !important;
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  -o-box-sizing: content-box !important;
  box-sizing: content-box !important;
  opacity: 1;
  -webkit-transition: opacity 0s ease-in 0.2s;
  transition: opacity 0s ease-in 0.2s; }

.action-highlight-simple-visible .actionicon {
  opacity: 0;
  -webkit-transition: opacity 0s ease-in;
  transition: opacity 0s ease-in; }

.actionicon.action-click,
.actionicon.action-tap,
.actionicon.action-delayedtap {
  background-position: -30px -20px; }

.actionicon.action-taphold,
.actionicon.action-forcetouch,
.actionicon.action-press,
.actionicon.action-pressup {
  background-position: -30px -40px; }

.actionicon.action-doubletap {
  background-position: -30px -398px; }

.actionicon.action-touch,
.actionicon.action-release {
  background-position: -30px -419px; }

.actionicon.action-swipe,
.actionicon.action-pan,
.actionicon.action-panstart,
.actionicon.action-panend {
  background-position: -30px -0px; }

.actionicon.action-swipeleft,
.actionicon.action-panleft {
  background-position: -30px -100px; }

.actionicon.action-swiperight,
.actionicon.action-panright {
  background-position: -30px -120px; }

.actionicon.action-swipeup,
.actionicon.action-panup {
  background-position: -30px -140px; }

.actionicon.action-swipedown,
.actionicon.action-pandown {
  background-position: -30px -160px; }

.actionicon.action-pinch,
.actionicon.action-pinchout {
  background-position: -30px -180px; }

.actionicon.action-pinchin {
  background-position: -30px -200px; }

.actionicon.action-containerpageenter,
.actionicon.action-containerpagechange,
.actionicon.action-containerscroll,
.actionicon.action-containerscrollend,
.actionicon.action-containerscrollto {
  background-position: -30px -360px; }

.actionicon.action-keydown {
  background-position: -30px -460px; }

.actionicon.action-mouseover,
.actionicon.action-mouseout {
  background-position: -30px -340px; }

.actionicon.action-ondrag,
.actionicon.action-ondragstart,
.actionicon.action-ondragend,
.actionicon.action-onthrowupdate,
.actionicon.action-onthrowcomplete {
  background-position: -30px -60px; }

.actionicon.action-onrotate,
.actionicon.action-onrotatestart,
.actionicon.action-onrotateend,
.actionicon.action-onrotatethrowupdate,
.actionicon.action-onrotatethrowcomplete {
  background-position: -30px -476px; }

.actionicon.action-stateenter,
.actionicon.action-stateleave,
.actionicon.action-statetransitionstart,
.actionicon.action-statetransitionend {
  background-position: -30px -440px; }

.actionicon.action-inputfocus,
.actionicon.action-inputblur,
.actionicon.action-inputkeyup {
  background-position: -30px -460px; }

.actionicon.action-change,
.actionicon.action-checkboxchange,
.actionicon.action-pickerchange,
.actionicon.action-selectchange {
  background-position: -30px -496px; }

.actionicon.action-sliderdrag,
.actionicon.action-sliderdragstart,
.actionicon.action-sliderdragend,
.actionicon.action-rangedrag,
.actionicon.action-rangedragstart,
.actionicon.action-rangedragend {
  background-position: -30px -80px; }

.actionicon.action-videoplay,
.actionicon.action-videopause,
.actionicon.action-videoend {
  background-position: -30px -561px; }

.actionicon.action-audioplay,
.actionicon.action-audiopause,
.actionicon.action-audioend {
  background-position: -30px -539px; }

.actionicon.action-vectoranimationend {
  background-position: -30px -516px; }

#appModeNote {
  background-color: #333333;
  border-top: 5px solid #000000;
  bottom: 0px;
  color: #F0F0F0;
  display: none;
  font-family: helvetica;
  left: 0px;
  padding: 10px 0px 10px 0px;
  position: fixed;
  text-align: center;
  width: 100%; }

#appModeNote em {
  display: block;
  font-size: 20px;
  font-weight: bold;
  line-height: 26px; }

#appModeNote span {
  display: block;
  font-size: 14px;
  line-height: 20px; }

.hidden {
  display: none; }

.prx-page.loadedFrom {
  display: block; }

.prx-page.loadedTo {
  z-index: 999999; }

.prx-page.loadedTo-1 {
  z-index: 10000000; }

.prx-page.loadedTo-2 {
  z-index: 10000001; }

.prx-page.loadedTo-3 {
  z-index: 10000002; }

.prx-page.loadedTo-4 {
  z-index: 10000003; }

.prx-page.loadedTo-5 {
  z-index: 10000004; }

.prx-page.loadedTo-6 {
  z-index: 10000005; }

.prx-page.loadedTo-7 {
  z-index: 10000006; }

.prx-page.loadedTo-8 {
  z-index: 10000007; }

.prx-page.loadedTo-9 {
  z-index: 10000008; }

.prx-page.loadedTo-10 {
  z-index: 10000009; }

.prx-page.loadedTo-11 {
  z-index: 10000010; }

.prx-page.loadedTo-12 {
  z-index: 10000011; }

.prx-page.loadedTo-13 {
  z-index: 10000012; }

.prx-page.loadedTo-14 {
  z-index: 10000013; }

.prx-page.loadedTo-15 {
  z-index: 10000014; }

.prx-page.loadedTo-16 {
  z-index: 10000015; }

.prx-page.loadedTo-17 {
  z-index: 10000016; }

.prx-page.loadedTo-18 {
  z-index: 10000017; }

.prx-page.loadedTo-19 {
  z-index: 10000018; }

.prx-page.loadedTo-20 {
  z-index: 10000019; }

.prx-page.loadedTo-21 {
  z-index: 10000020; }

.prx-page.loadedTo-22 {
  z-index: 10000021; }

.prx-page.loadedTo-23 {
  z-index: 10000022; }

.prx-page.loadedTo-24 {
  z-index: 10000023; }

.prx-page.loadedTo-25 {
  z-index: 10000024; }

.prx-page.loadedTo-26 {
  z-index: 10000025; }

.prx-page.loadedTo-27 {
  z-index: 10000026; }

.prx-page.loadedTo-28 {
  z-index: 10000027; }

.prx-page.loadedTo-29 {
  z-index: 10000028; }

.prx-page.loadedTo-30 {
  z-index: 10000029; }

#statusbar, #navigationbar {
  background: transparent 0 0;
  display: block;
  width: 100%;
  border: 0px none;
  top: 0px;
  position: fixed;
  z-index: 1; }

/*********Loader********/
#loader-wrapper {
  background: #f8f9fa;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  font-size: 11px;
  /*
	opacity: 0;
	pointer-events: none;
	display: none;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;

}
#loader-wrapper.loader-visible {
	display: block;
	opacity: 1;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	pointer-events: auto;

	*/ }

#loader-wrapper .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  width: 50%;
  height: 4px;
  background-color: #ddd; }

#loader-wrapper .progress-bar {
  position: relative;
  width: 0;
  height: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color; }

#loader-wrapper .progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

#loader-wrapper .progress-bar:before {
  bottom: 0;
  background-color: #ddd; }

#loader-wrapper .progress-bar:after {
  z-index: 2;
  bottom: 0;
  background: #00A1C0; }

#loader-wrapper #app-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -150%);
  /* Chrome, Safari, Opera */
  width: 114px;
  height: 114px; }

#loader-wrapper #poweredby {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  /* IE 9 */
  -webkit-transform: translate(-50%, 0%);
  /* Chrome, Safari, Opera */
  width: 100%;
  height: 16px;
  background-image: url("/images/player/madewithproto.png");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999; }

body {
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear; }

.reloading {
  background: #fff !important;
  opacity: 0; }

@media (min-width: 481px) and (max-width: 1079px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto@2x.png");
    height: 32px; }
  #loader-wrapper .progress {
    height: 4px; }
  #loader-wrapper .progress-bar {
    height: 4px; } }

@media (min-width: 1080px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto@3x.png");
    height: 48px; }
  #loader-wrapper .progress {
    height: 6px; }
  #loader-wrapper .progress-bar {
    height: 6px; } }

@media (width: 1280px) and (height: 768px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto.png");
    height: 32px; }
  #loader-wrapper .progress {
    height: 2px; }
  #loader-wrapper .progress-bar {
    height: 2px; } }

.pointer-events-none {
  pointer-events: none !important; }

body {
  background: white; }

/********** FROM device/index.cfm ****************/
/* 	annam v5.7.7 removing this because it is interfering with "position fixed" for mpoverlay="1" 
	http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform
	hopefully this bug doesnt exist anymore? :/
	annam 5.7.7.1 adding it back because the fix i did for position fixed did not work anyway
 */
body .prx-page {
  -webkit-trans1form: translate3d(0, 0, 0); }

/* FIX JQUERYMOBILE TRANSITION FLICKER BUG */
/* annam v5.8.7.4 sometimes when scrolling containers boxes appear an disappear, added webkit-transform: translate3d() and it fixed it. */
/* annam v5.9.17 traced this to extreme performance issues on the ipad, even causing crashes :( need to find another fix for the issue above */
.prx-page .type-symbol .box {
  -w1ebkit-transform: translate3d(0, 0, 0); }

html {
  background: transparent; }

body {
  background: white;
  overflow: hidden; }

body.mobile-device-true * {
  -webkit-text-size-adjust: 100%; }

body.mobile-device-false * {
  -webkit-text-size-adjust: initial; }

#window-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; }

#dragarea {
  background: transparent;
  display: none; }

#underlay, #overlay, #trash, #quick-audios {
  position: absolute;
  top: 0px;
  left: 0px; }

#trash, #quick-audios {
  display: none; }

.hide {
  display: none !important; }

.visible {
  display: block !important; }

* {
  outline: none; }

.iScrollVerticalScrollbar, .iScrollHorizontalScrollbar {
  z-index: auto !important; }

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }

/* was causing flickering on change page when page was moved. annam removing jquery removing this to see whether its not needed*/
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .prx-page {
  o1verflow: visible !important; }

/* was causing some issues with components being positioned on top of other components in safari only. only in safari it seems that z-index:0 is injected on all .box */
.box[style*="z-index: 0;"], .box[style*="z-index:0;"] {
  z-index: auto !important; }

.box[data-mpoverlay="1"] {
  pos1ition: fixed; }

#temp-for-external-link {
  display: none; }

html {
  background: transparent !important; }

#dragarea {
  background: transparent !important; }

.hide {
  display: none !important; }

* {
  outline: none; }

.ghost-component, .ghost-component *, .ghost-component .box * {
  pointer-events: none !important; }

#statusbar {
  position: fixed !important; }

/* JQUERY MOBILE SUBSTITUTES */
.prx-page {
  position: absolute;
  display: none; }

.prx-page.prx-page-active, .prx-page[class*="prx-page-transitioning-"] {
  display: block; }

.prx-page[class*="prx-page-transitioning-"] {
  overflow: hidden; }

.prx-page.prx-page-transitioning-overlay-in-source, .prx-page.prx-page-transitioning-overlay-out-target {
  overflow: visible; }

.prx-page.prx-page-below {
  z-index: 10; }

.prx-page.prx-page-above {
  z-index: 20; }

#overlay {
  z-index: 30; }

.prx-page.prx-page-transition-flip {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden; }

.prx-page.prx-page-transition-turn {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 0 center;
  -moz-transform-origin: 0 center;
  transform-origin: 0 center;
  transform: translate3d(0, 0, 0); }

.prx-page.prx-page-transition-flow:not(.prx-page-transition-flow-overlay),
.prx-page.prx-page-transition-overlay-top {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

.prx-page-above.prx-page-transition-notificationInWatchOS {
  transition: background-color 0.45s ease-out; }

.prx-page-above.prx-page-transition-notificationInWatchOS.prx-page-transition-notificationInWatchOS-notification-in {
  background-color: transparent !important;
  transition: background-color 0s ease-out; }

.device-cursor-touch, .device-cursor-touch * {
  cursor: url("/images/player/touch-cursor-64.png") 32 32, default; }

.device-cursor-web, .device-cursor-web * {
  cursor: default; }

.device-cursor-web .interaction-tap, .device-cursor-web .interaction-tap *,
.device-cursor-web .interaction-click, .device-cursor-web .interaction-click *,
.device-cursor-web .touch, .device-cursor-web .touch *,
.device-cursor-web .delayedtap, .device-cursor-web .delayedtap *,
.device-cursor-web .release, .device-cursor-web .release * {
  cursor: pointer;
  cursor: hand; }

.device-cursor-web [data-component-type="text"] {
  cursor: default; }

.device-cursor-web .move, .device-cursor-web .move * {
  cursor: move; }

.device-cursor-web input, .device-cursor-web textarea {
  cursor: text; }

/* moved on iframe in player preview */
.do-chrome-fix #window-wrapper {
  -webkit-perspective: 1; }

.do-chrome-fix .pos {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); }

.do-chrome-fix * {
  -w1ebkit-transform: translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }

.do-chrome-fix.dont-do-chrome-fix #window-wrapper {
  -webkit-perspective: none; }

.do-chrome-fix.dont-do-chrome-fix .pos {
  -webkit-backface-visibility: visible;
  -webkit-transform: none; }

/**/
.prx-page-transitioning:not(.prx-page-transitioning-overlay-in-source):not(.loadedFrom) [data-mpoverlay="1"] {
  display: none; }

#fps {
  position: fixed;
  z-index: 9999;
  font-size: 18px;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: white;
  padding: 3px 10px;
  pointer-events: none; }

.cbutton {
  position: absolute;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  color: #286aab;
  font-size: 1.4em;
  overflow: visible;
  -webkit-transition: color 0.7s;
  transition: color 0.7s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: none; }

.cbutton.cbutton--click,
.cbutton:focus {
  outline: none;
  color: #3c8ddc; }

.cbutton::after {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none; }

/* Jelena */
.cbutton--effect-jelena::after {
  border: 3px solid rgba(211, 211, 211, 0.7); }

.cbutton--effect-jelena.cbutton--click::after {
  -webkit-animation: anim-effect-jelena 0.3s ease-out forwards;
  animation: anim-effect-jelena 0.3s ease-out forwards; }

@-webkit-keyframes anim-effect-jelena {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.6, 0.6, 1);
    transform: scale3d(0.6, 0.6, 1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1); } }

@keyframes anim-effect-jelena {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1); } }

/* Sanja */
.cbutton--effect-sanja::after {
  background: rgba(192, 192, 192, 0.3); }

.cbutton--effect-sanja.cbutton--click::after {
  -webkit-animation: anim-effect-sanja 1s ease-out forwards;
  animation: anim-effect-sanja 1s ease-out forwards; }

@-webkit-keyframes anim-effect-sanja {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes anim-effect-sanja {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

#log {
  position: fixed;
  z-index: 9999;
  font-size: 24px;
  top: 20px;
  right: 20px;
  pointer-events: none; }

.watchOSscrollbars .iScrollVerticalScrollbar {
  position: fixed !important;
  width: 12px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  z-index: 99999 !important; }

.watchOSscrollbars .iScrollIndicator {
  background: white !important;
  border-radius: 8px !important;
  left: 2px !important;
  width: 8px !important; }

.applewatch-rounded-corners {
  -webkit-clip-path: inset(0px 0px 0px 0px round 63px);
  clip-path: inset(0px 0px 0px 0px round 63px); }

.group-action-prediv {
  position: absolute; }

.player .type-symbol.type-symbol-transparent .group-action-prediv {
  pointer-events: auto; }

.initialise-hidden-container {
  display: block !important;
  visibility: hidden !important; }

.a-enter-vr {
  height: 0 !important; }

.fullscreen-vr .prx-page {
  transform: none !important;
  position: fixed !important; }

/*!
 * Waves v0.5.5
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE 
 */
.waves-effect {
  position: relative;
  overflow: hidden;
  /*
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  */ }

.waves-effect.box {
  position: absolute; }

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /*
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translateZ(0);
  -moz-transform: scale(0) translateZ(0);
  -ms-transform: scale(0) translateZ(0);
  -o-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  */
  pointer-events: none; }

.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.4); }

.waves-notransition {
  /*
	-webkit-transition-property: opacity!important;
	-moz-transition-property: opacity!important;
	-o-transition-property: opacity!important;
	transition-property: opacity!important;

	-webkit-transition-duration: 0.2s!important;
	-moz-transition-duration: 0.2s!important;
	-o-transition-duration: 0.2s!important;
	transition-duration: 0.2s!important;
*/ }

.waves-button,
.waves-circle {
  /*
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  */
  -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%); }

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button:link,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  z-index: 1; }

.waves-button {
  padding: 10px 15px;
  border-radius: 2px; }

.waves-button-input {
  margin: 0;
  padding: 10px 15px; }

.waves-input-wrapper {
  border-radius: 2px;
  vertical-align: bottom; }

.waves-input-wrapper.waves-button {
  padding: 0; }

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1; }

.waves-circle {
  /*
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  */ }

.waves-float {
  /*
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.2);
  */ }

.waves-float:active {
  /*
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  */ }

.waves-block {
  display: block; }

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple {
  z-index: -1; }

/*
$spaces-thumb-overlay-color: rgba(62,66,69,0.1);
*/
/*******************************
 iNextGen variables from here on
 *******************************/
/******************
 GENERAL VARIABLES
******************/
/***************************
 ELEMENT SPECIFIC VARIABLES
***************************/
/***********************
 SPECIAL CASE VARIABLES
************************/
.mask-inner {
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat; }
  .mask-inner .mask-inner {
    transform: none !important; }

.mask-filter {
  height: 100%;
  width: 100%; }

.mask-border .mborder {
  border: 1px solid rgba(255, 255, 255, 0.8);
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none; }

.mask-border .area-border {
  border: 1px solid #00A1C0;
  left: 0;
  top: 0;
  position: absolute;
  transform-origin: 0 0;
  box-sizing: border-box; }

.mask-border .mask-radius {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute; }
  .mask-border .mask-radius .mask-radius-border {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.8); }

.mask-border.hide-handles .prx-resizable-handle {
  opacity: 0;
  pointer-events: none !important; }

.mask-border.hide-handles .area-border {
  border: 1px dashed #B4BCBF; }

.mask-wrapper {
  overflow: hidden;
  height: 100%;
  pointer-events: none; }
  .mask-wrapper.borderPos-inside {
    box-sizing: border-box; }
  .mask-wrapper.borderPos-outside {
    width: 100%;
    height: 100%; }
    .mask-wrapper.borderPos-outside .mask-inner {
      box-sizing: content-box; }

.mask-edit-mode-handles {
  pointer-events: none; }
  .mask-edit-mode-handles.hide-handles .prx-resizable-handle, .mask-edit-mode-handles.hide-handles .prx-rotate-handle {
    opacity: 0;
    pointer-events: none !important; }
  .mask-edit-mode-handles.hide-handles .xborder {
    border-color: #B4BCBF !important; }

/* HTML5/CSS3 RESET ANNAM COPIED FROM UI.CSS BECAUSE PLAYER DID NOT RESET THE SAME AS EDITOR */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; }

article, aside, figure, footer, header, hgroup, nav, section {
  display: block; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

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

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 13px; }

/* ANNAM FOR COMPATIBILITY WITH EDITOR */
body, button, input, select, textarea {
  font-family: sans-serif;
  color: #222; }

a {
  color: #00e; }

a:visited {
  color: #551a8b; }

a:hover {
  color: #06e; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

dfn {
  font-style: italic; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

ins {
  background: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold; }

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

small {
  font-size: 85%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

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

figure {
  margin: 0; }

form {
  margin: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal;
  *overflow: visible; }

table button, table input {
  *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] {
  -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

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

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input:invalid, textarea:invalid {
  background-color: #f0dddd; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== media queries ====================================================== */
@media only screen and (min-width: 800px) {
  /* Styles */ }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */ }

/* ==|== non-semantic helper classes ======================================== */
.nocallout {
  -webkit-touch-callout: none; }

textarea[contenteditable] {
  -webkit-appearance: none; }

.gifhidden {
  position: absolute;
  left: -100%; }

.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.ir br {
  display: none; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* ==|== print styles ======================================================= */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  /* Black prints faster: h5bp.com/s */
  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: ""; }
  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  /* h5bp.com/t */
  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; } }

#eval-iframe {
  display: none; }

body {
  -webkit-appearance: none;
  -webkit-box-flex: 1;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none; }

input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text; }

/* DIV INSIDE DEFAULT ELEMENT FOR TEXT HOLDER */
#dragarea {
  font-family: Helvetica,Arial,sans-serif;
  text-align: left; }

.text {
  height: 95%;
  overflow: auto; }

.wrap {
  overflow: hidden; }

.pos {
  position: absolute; }

.spos {
  position: absolute; }

.action-highlight {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 0, 0.5);
  background: rgba(64, 208, 255, 0.3);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  border: 2px solid #40c8f4;
  padding: 3px;
  box-sizing: border-box; }

.action-highlight-visible, .action-highlight-simple-visible {
  opacity: 1; }

.action-highlight-visible .actionicon, .action-highlight-simple-visible .actionicon {
  pointer-events: auto; }

.actionicon {
  width: 20px !important;
  height: 20px !important;
  float: left !important;
  background: #40c8f4 url(/images/player/actions-sprite-1.png) no-repeat 0 0;
  -moz-background-origin: content-box !important;
  -webkit-background-origin: content-box !important;
  -o-background-origin: content-box !important;
  background-origin: content-box !important;
  border: 0 none !important;
  margin: 1px 0 0 1px;
  padding: 0px !important;
  border-radius: 3px !important;
  display: block !important;
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  -o-box-sizing: content-box !important;
  box-sizing: content-box !important;
  opacity: 1;
  -webkit-transition: opacity 0s ease-in 0.2s;
  transition: opacity 0s ease-in 0.2s; }

.action-highlight-simple-visible .actionicon {
  opacity: 0;
  -webkit-transition: opacity 0s ease-in;
  transition: opacity 0s ease-in; }

.actionicon.action-click,
.actionicon.action-tap,
.actionicon.action-delayedtap {
  background-position: -30px -20px; }

.actionicon.action-taphold,
.actionicon.action-forcetouch,
.actionicon.action-press,
.actionicon.action-pressup {
  background-position: -30px -40px; }

.actionicon.action-doubletap {
  background-position: -30px -398px; }

.actionicon.action-touch,
.actionicon.action-release {
  background-position: -30px -419px; }

.actionicon.action-swipe,
.actionicon.action-pan,
.actionicon.action-panstart,
.actionicon.action-panend {
  background-position: -30px -0px; }

.actionicon.action-swipeleft,
.actionicon.action-panleft {
  background-position: -30px -100px; }

.actionicon.action-swiperight,
.actionicon.action-panright {
  background-position: -30px -120px; }

.actionicon.action-swipeup,
.actionicon.action-panup {
  background-position: -30px -140px; }

.actionicon.action-swipedown,
.actionicon.action-pandown {
  background-position: -30px -160px; }

.actionicon.action-pinch,
.actionicon.action-pinchout {
  background-position: -30px -180px; }

.actionicon.action-pinchin {
  background-position: -30px -200px; }

.actionicon.action-containerpageenter,
.actionicon.action-containerpagechange,
.actionicon.action-containerscroll,
.actionicon.action-containerscrollend,
.actionicon.action-containerscrollto {
  background-position: -30px -360px; }

.actionicon.action-keydown {
  background-position: -30px -460px; }

.actionicon.action-mouseover,
.actionicon.action-mouseout {
  background-position: -30px -340px; }

.actionicon.action-ondrag,
.actionicon.action-ondragstart,
.actionicon.action-ondragend,
.actionicon.action-onthrowupdate,
.actionicon.action-onthrowcomplete {
  background-position: -30px -60px; }

.actionicon.action-onrotate,
.actionicon.action-onrotatestart,
.actionicon.action-onrotateend,
.actionicon.action-onrotatethrowupdate,
.actionicon.action-onrotatethrowcomplete {
  background-position: -30px -476px; }

.actionicon.action-stateenter,
.actionicon.action-stateleave,
.actionicon.action-statetransitionstart,
.actionicon.action-statetransitionend {
  background-position: -30px -440px; }

.actionicon.action-inputfocus,
.actionicon.action-inputblur,
.actionicon.action-inputkeyup {
  background-position: -30px -460px; }

.actionicon.action-change,
.actionicon.action-checkboxchange,
.actionicon.action-pickerchange,
.actionicon.action-selectchange {
  background-position: -30px -496px; }

.actionicon.action-sliderdrag,
.actionicon.action-sliderdragstart,
.actionicon.action-sliderdragend,
.actionicon.action-rangedrag,
.actionicon.action-rangedragstart,
.actionicon.action-rangedragend {
  background-position: -30px -80px; }

.actionicon.action-videoplay,
.actionicon.action-videopause,
.actionicon.action-videoend {
  background-position: -30px -561px; }

.actionicon.action-audioplay,
.actionicon.action-audiopause,
.actionicon.action-audioend {
  background-position: -30px -539px; }

.actionicon.action-vectoranimationend {
  background-position: -30px -516px; }

#appModeNote {
  background-color: #333333;
  border-top: 5px solid #000000;
  bottom: 0px;
  color: #F0F0F0;
  display: none;
  font-family: helvetica;
  left: 0px;
  padding: 10px 0px 10px 0px;
  position: fixed;
  text-align: center;
  width: 100%; }

#appModeNote em {
  display: block;
  font-size: 20px;
  font-weight: bold;
  line-height: 26px; }

#appModeNote span {
  display: block;
  font-size: 14px;
  line-height: 20px; }

.hidden {
  display: none; }

.prx-page.loadedFrom {
  display: block; }

.prx-page.loadedTo {
  z-index: 999999; }

.prx-page.loadedTo-1 {
  z-index: 10000000; }

.prx-page.loadedTo-2 {
  z-index: 10000001; }

.prx-page.loadedTo-3 {
  z-index: 10000002; }

.prx-page.loadedTo-4 {
  z-index: 10000003; }

.prx-page.loadedTo-5 {
  z-index: 10000004; }

.prx-page.loadedTo-6 {
  z-index: 10000005; }

.prx-page.loadedTo-7 {
  z-index: 10000006; }

.prx-page.loadedTo-8 {
  z-index: 10000007; }

.prx-page.loadedTo-9 {
  z-index: 10000008; }

.prx-page.loadedTo-10 {
  z-index: 10000009; }

.prx-page.loadedTo-11 {
  z-index: 10000010; }

.prx-page.loadedTo-12 {
  z-index: 10000011; }

.prx-page.loadedTo-13 {
  z-index: 10000012; }

.prx-page.loadedTo-14 {
  z-index: 10000013; }

.prx-page.loadedTo-15 {
  z-index: 10000014; }

.prx-page.loadedTo-16 {
  z-index: 10000015; }

.prx-page.loadedTo-17 {
  z-index: 10000016; }

.prx-page.loadedTo-18 {
  z-index: 10000017; }

.prx-page.loadedTo-19 {
  z-index: 10000018; }

.prx-page.loadedTo-20 {
  z-index: 10000019; }

.prx-page.loadedTo-21 {
  z-index: 10000020; }

.prx-page.loadedTo-22 {
  z-index: 10000021; }

.prx-page.loadedTo-23 {
  z-index: 10000022; }

.prx-page.loadedTo-24 {
  z-index: 10000023; }

.prx-page.loadedTo-25 {
  z-index: 10000024; }

.prx-page.loadedTo-26 {
  z-index: 10000025; }

.prx-page.loadedTo-27 {
  z-index: 10000026; }

.prx-page.loadedTo-28 {
  z-index: 10000027; }

.prx-page.loadedTo-29 {
  z-index: 10000028; }

.prx-page.loadedTo-30 {
  z-index: 10000029; }

#statusbar, #navigationbar {
  background: transparent 0 0;
  display: block;
  width: 100%;
  border: 0px none;
  top: 0px;
  position: fixed;
  z-index: 1; }

/*********Loader********/
#loader-wrapper {
  background: #f8f9fa;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  font-size: 11px;
  /*
	opacity: 0;
	pointer-events: none;
	display: none;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;

}
#loader-wrapper.loader-visible {
	display: block;
	opacity: 1;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	pointer-events: auto;

	*/ }

#loader-wrapper .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  width: 50%;
  height: 4px;
  background-color: #ddd; }

#loader-wrapper .progress-bar {
  position: relative;
  width: 0;
  height: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color; }

#loader-wrapper .progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

#loader-wrapper .progress-bar:before {
  bottom: 0;
  background-color: #ddd; }

#loader-wrapper .progress-bar:after {
  z-index: 2;
  bottom: 0;
  background: #00A1C0; }

#loader-wrapper #app-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -150%);
  /* Chrome, Safari, Opera */
  width: 114px;
  height: 114px; }

#loader-wrapper #poweredby {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  /* IE 9 */
  -webkit-transform: translate(-50%, 0%);
  /* Chrome, Safari, Opera */
  width: 100%;
  height: 16px;
  background-image: url("/images/player/madewithproto.png");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999; }

body {
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear; }

.reloading {
  background: #fff !important;
  opacity: 0; }

@media (min-width: 481px) and (max-width: 1079px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto@2x.png");
    height: 32px; }
  #loader-wrapper .progress {
    height: 4px; }
  #loader-wrapper .progress-bar {
    height: 4px; } }

@media (min-width: 1080px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto@3x.png");
    height: 48px; }
  #loader-wrapper .progress {
    height: 6px; }
  #loader-wrapper .progress-bar {
    height: 6px; } }

@media (width: 1280px) and (height: 768px) {
  #loader-wrapper #poweredby {
    background-image: url("/images/player/madewithproto.png");
    height: 32px; }
  #loader-wrapper .progress {
    height: 2px; }
  #loader-wrapper .progress-bar {
    height: 2px; } }

.pointer-events-none {
  pointer-events: none !important; }

body {
  background: white; }

/********** FROM device/index.cfm ****************/
/* 	annam v5.7.7 removing this because it is interfering with "position fixed" for mpoverlay="1" 
	http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform
	hopefully this bug doesnt exist anymore? :/
	annam 5.7.7.1 adding it back because the fix i did for position fixed did not work anyway
 */
body .prx-page {
  -webkit-trans1form: translate3d(0, 0, 0); }

/* FIX JQUERYMOBILE TRANSITION FLICKER BUG */
/* annam v5.8.7.4 sometimes when scrolling containers boxes appear an disappear, added webkit-transform: translate3d() and it fixed it. */
/* annam v5.9.17 traced this to extreme performance issues on the ipad, even causing crashes :( need to find another fix for the issue above */
.prx-page .type-symbol .box {
  -w1ebkit-transform: translate3d(0, 0, 0); }

html {
  background: transparent; }

body {
  background: white;
  overflow: hidden; }

body.mobile-device-true * {
  -webkit-text-size-adjust: 100%; }

body.mobile-device-false * {
  -webkit-text-size-adjust: initial; }

#window-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; }

#dragarea {
  background: transparent;
  display: none; }

#underlay, #overlay, #trash, #quick-audios {
  position: absolute;
  top: 0px;
  left: 0px; }

#trash, #quick-audios {
  display: none; }

.hide {
  display: none !important; }

.visible {
  display: block !important; }

* {
  outline: none; }

.iScrollVerticalScrollbar, .iScrollHorizontalScrollbar {
  z-index: auto !important; }

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }

/* was causing flickering on change page when page was moved. annam removing jquery removing this to see whether its not needed*/
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .prx-page {
  o1verflow: visible !important; }

/* was causing some issues with components being positioned on top of other components in safari only. only in safari it seems that z-index:0 is injected on all .box */
.box[style*="z-index: 0;"], .box[style*="z-index:0;"] {
  z-index: auto !important; }

.box[data-mpoverlay="1"] {
  pos1ition: fixed; }

#temp-for-external-link {
  display: none; }

html {
  background: transparent !important; }

#dragarea {
  background: transparent !important; }

.hide {
  display: none !important; }

* {
  outline: none; }

.ghost-component, .ghost-component *, .ghost-component .box * {
  pointer-events: none !important; }

#statusbar {
  position: fixed !important; }

/* JQUERY MOBILE SUBSTITUTES */
.prx-page {
  position: absolute;
  display: none; }

.prx-page.prx-page-active, .prx-page[class*="prx-page-transitioning-"] {
  display: block; }

.prx-page[class*="prx-page-transitioning-"] {
  overflow: hidden; }

.prx-page.prx-page-transitioning-overlay-in-source, .prx-page.prx-page-transitioning-overlay-out-target {
  overflow: visible; }

.prx-page.prx-page-below {
  z-index: 10; }

.prx-page.prx-page-above {
  z-index: 20; }

#overlay {
  z-index: 30; }

.prx-page.prx-page-transition-flip {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden; }

.prx-page.prx-page-transition-turn {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 0 center;
  -moz-transform-origin: 0 center;
  transform-origin: 0 center;
  transform: translate3d(0, 0, 0); }

.prx-page.prx-page-transition-flow:not(.prx-page-transition-flow-overlay),
.prx-page.prx-page-transition-overlay-top {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

.prx-page-above.prx-page-transition-notificationInWatchOS {
  transition: background-color 0.45s ease-out; }

.prx-page-above.prx-page-transition-notificationInWatchOS.prx-page-transition-notificationInWatchOS-notification-in {
  background-color: transparent !important;
  transition: background-color 0s ease-out; }

.device-cursor-touch, .device-cursor-touch * {
  cursor: url("/images/player/touch-cursor-64.png") 32 32, default; }

.device-cursor-web, .device-cursor-web * {
  cursor: default; }

.device-cursor-web .interaction-tap, .device-cursor-web .interaction-tap *,
.device-cursor-web .interaction-click, .device-cursor-web .interaction-click *,
.device-cursor-web .touch, .device-cursor-web .touch *,
.device-cursor-web .delayedtap, .device-cursor-web .delayedtap *,
.device-cursor-web .release, .device-cursor-web .release * {
  cursor: pointer;
  cursor: hand; }

.device-cursor-web [data-component-type="text"] {
  cursor: default; }

.device-cursor-web .move, .device-cursor-web .move * {
  cursor: move; }

.device-cursor-web input, .device-cursor-web textarea {
  cursor: text; }

/* moved on iframe in player preview */
.do-chrome-fix #window-wrapper {
  -webkit-perspective: 1; }

.do-chrome-fix .pos {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); }

.do-chrome-fix * {
  -w1ebkit-transform: translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }

.do-chrome-fix.dont-do-chrome-fix #window-wrapper {
  -webkit-perspective: none; }

.do-chrome-fix.dont-do-chrome-fix .pos {
  -webkit-backface-visibility: visible;
  -webkit-transform: none; }

/**/
.prx-page-transitioning:not(.prx-page-transitioning-overlay-in-source):not(.loadedFrom) [data-mpoverlay="1"] {
  display: none; }

#fps {
  position: fixed;
  z-index: 9999;
  font-size: 18px;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: white;
  padding: 3px 10px;
  pointer-events: none; }

.cbutton {
  position: absolute;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  color: #286aab;
  font-size: 1.4em;
  overflow: visible;
  -webkit-transition: color 0.7s;
  transition: color 0.7s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: none; }

.cbutton.cbutton--click,
.cbutton:focus {
  outline: none;
  color: #3c8ddc; }

.cbutton::after {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none; }

/* Jelena */
.cbutton--effect-jelena::after {
  border: 3px solid rgba(211, 211, 211, 0.7); }

.cbutton--effect-jelena.cbutton--click::after {
  -webkit-animation: anim-effect-jelena 0.3s ease-out forwards;
  animation: anim-effect-jelena 0.3s ease-out forwards; }

@-webkit-keyframes anim-effect-jelena {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.6, 0.6, 1);
    transform: scale3d(0.6, 0.6, 1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1); } }

@keyframes anim-effect-jelena {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1); } }

/* Sanja */
.cbutton--effect-sanja::after {
  background: rgba(192, 192, 192, 0.3); }

.cbutton--effect-sanja.cbutton--click::after {
  -webkit-animation: anim-effect-sanja 1s ease-out forwards;
  animation: anim-effect-sanja 1s ease-out forwards; }

@-webkit-keyframes anim-effect-sanja {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes anim-effect-sanja {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1); }
  25% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

#log {
  position: fixed;
  z-index: 9999;
  font-size: 24px;
  top: 20px;
  right: 20px;
  pointer-events: none; }

.watchOSscrollbars .iScrollVerticalScrollbar {
  position: fixed !important;
  width: 12px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  z-index: 99999 !important; }

.watchOSscrollbars .iScrollIndicator {
  background: white !important;
  border-radius: 8px !important;
  left: 2px !important;
  width: 8px !important; }

.applewatch-rounded-corners {
  -webkit-clip-path: inset(0px 0px 0px 0px round 63px);
  clip-path: inset(0px 0px 0px 0px round 63px); }

.group-action-prediv {
  position: absolute; }

.player .type-symbol.type-symbol-transparent .group-action-prediv {
  pointer-events: auto; }

.initialise-hidden-container {
  display: block !important;
  visibility: hidden !important; }

.a-enter-vr {
  height: 0 !important; }

.fullscreen-vr .prx-page {
  transform: none !important;
  position: fixed !important; }

/*!
 * Waves v0.5.5
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE 
 */
.waves-effect {
  position: relative;
  overflow: hidden;
  /*
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  */ }

.waves-effect.box {
  position: absolute; }

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /*
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translateZ(0);
  -moz-transform: scale(0) translateZ(0);
  -ms-transform: scale(0) translateZ(0);
  -o-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  */
  pointer-events: none; }

.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.4); }

.waves-notransition {
  /*
	-webkit-transition-property: opacity!important;
	-moz-transition-property: opacity!important;
	-o-transition-property: opacity!important;
	transition-property: opacity!important;

	-webkit-transition-duration: 0.2s!important;
	-moz-transition-duration: 0.2s!important;
	-o-transition-duration: 0.2s!important;
	transition-duration: 0.2s!important;
*/ }

.waves-button,
.waves-circle {
  /*
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  */
  -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%); }

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button:link,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  z-index: 1; }

.waves-button {
  padding: 10px 15px;
  border-radius: 2px; }

.waves-button-input {
  margin: 0;
  padding: 10px 15px; }

.waves-input-wrapper {
  border-radius: 2px;
  vertical-align: bottom; }

.waves-input-wrapper.waves-button {
  padding: 0; }

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1; }

.waves-circle {
  /*
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  */ }

.waves-float {
  /*
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.2);
  */ }

.waves-float:active {
  /*
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  */ }

.waves-block {
  display: block; }

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple {
  z-index: -1; }

#loader-wrapper #poweredby {
  background-image: url("../images/player/madewithproto.png") !important; }

@media (min-width: 481px) and (max-width: 1079px) {
  #loader-wrapper #poweredby {
    background-image: url("../images/player/madewithproto@2x.png") !important; } }

@media (min-width: 1080px) {
  #loader-wrapper #poweredby {
    background-image: url("../images/player/madewithproto@3x.png") !important; } }

@media (width: 1280px) and (height: 768px) {
  #loader-wrapper #poweredby {
    background-image: url("../images/player/madewithproto.png") !important; } }

.actionicon {
  background-image: url("../images/player/actions-sprite-1.png"); }

.device-cursor-touch, .device-cursor-touch * {
  cursor: url("../images/player/touch-cursor-64.png") 32 32, default !important; }