/* CUSTOM PLAYER (to be integrated as CodeSnippet) */

#VideoPlayer ::after, #VideoPlayer ::before {
	-moz-box-sizing: initial;
	box-sizing: initial;
}

/* START CREDITS */
#ftCreditLink {
	position: absolute;
	bottom: 25px;
	right: 20px;
	font-family: 'Rubik', helvetica, sans-serif;
	font-weight: 600;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1em;
	text-shadow: 0 0 2px rgba(0, 0, 0, .5);
	cursor: pointer;
	z-index: 12;
}

.areaRightContainer {
	border: none !important;
}

.areaRightContainer[data-size="large"] {
	flex: 0 0 500px;
	min-width: 500px;
}

.areaRightContainer.closed {
	flex: 0 0 0px;
	min-width: 0px;
}

.layoutArea[data-area="areaRight"] .layoutAreaTabs {
	display: none;
}

.layoutArea[data-area="areaRight"] .contentViewContainer {
  left: 40px; 
  width: calc(100% - 40px);
}

.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer {
  padding: 10px 13px 13px 13px;
  margin: 0;
  max-height: 100%;
}

.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer td {
	padding: 0px 10px;
}

.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer h2 {
	font-family: 'Rubik', helvetica, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 58px;
}

.layoutArea[data-area="areaRight"] .contentViewContainer {
	left: 0px;
	width: 100%;
}

.layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
	position: fixed;
	top: 30px;
	right: 30px;
	left: auto;
	transform: translateY(0%);
	opacity: 1 !important;
}

.creditsClosed .layoutArea[data-area="areaRight"] .layoutAreaToggleCloseButton {
	display: none;
}

.layoutArea .layoutAreaToggleCloseButton::after {
	font-family: 'fieldtrip' !important;
	content: "\e90e" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-moz-osx-font-smoothing: grayscale;
}

.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer {
  line-height: 1.45em;
}

.ftLayer#fthypervideo #VideoPlayer h3 {
  font-size: 1.15em;
}

.ftLayer#fthypervideo #VideoPlayer h3,
.ftLayer#fthypervideo #VideoPlayer p {
  margin-bottom: .75em;
}

body:not(.creditsClosed) #fthypervideo .ftNavigation, body:not(.creditsClosed) #fthypervideo #ftCreditLink, body:not(.creditsClosed) #fthypervideo .ftNavCooperation {
	display: none !important;
}

body:not(.creditsClosed) .ftAboutIconContainer {
	display: none;
}

@media (max-width: 1400px) {

  .areaLeftContainer[data-size="large"]:not(.closed), .areaRightContainer[data-size="large"]:not(.closed) {
    flex: 0 0 100%;
  }

  /*
  .layoutAreaToggleCloseButton {
  	top: 90px !important;
  }
  */
  
  .layoutArea {
    transition-duration: 600ms;
  }
  
  .layoutArea .contentViewContainer .contentViewContents .customhtmlContainer {
    padding: 100px 13px 10px 13px;
  }

  body:not(.creditsClosed) .fticon-about {
  	font-size: 100%;
  }

  body:not(.creditsClosed) .ftAboutIconContainer  {
	width: 40px;
	height: 40px;
	line-height: 40px;
  }
}

@media (max-width: 820px) {

  #ftCreditLink {
    font-size: .65em;
    bottom: 10px;
    right: 10px;
  }

  .layoutAreaToggleCloseButton {
  	top: 20px !important;
  }
  
  .layoutArea .contentViewContainer .contentViewContents .customhtmlContainer {
    padding: 55px 13px 10px 13px;
  }
}

/* END CREDITS */

.frametrail-body .mainContainer ::before, 
.frametrail-body .mainContainer ::after, 
.frametrail-body .ui-resizable-handle {
	-moz-box-sizing: unset;
	box-sizing: unset;
}

.frametrail-body .ui-tabs-panel {
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}



body.userinactive .mainContainer:not(.editActive) .playerContainer #playCircleContainer, 
body.userinactive #ftPointer,
body.userinactive #fthypervideo .ftNavigation,
body.userinactive #fthypervideo .ftNavCooperation,
body.userinactive #fthypervideo .ftAboutIconContainer,
body.userinactive #VideoPlayer .titlebar:not(.editActive) {
    display: block;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1.5s, opacity 1.5s;
     -moz-transition: visibility 1.5s, opacity 1.5s;
      -ms-transition: visibility 1.5s, opacity 1.5s;
       -o-transition: visibility 1.5s, opacity 1.5s;
          transition: visibility 1.5s, opacity 1.5s;
}

.editPropertiesContainer .overlayOptionsTabs .message {
	width: 360px;
}

#VideoPlayer .playerContainer #playCircleContainer {
	position: absolute;
	top: 50%;
	left: 25%;
	margin-top: -90px;
	margin-left: -90px;
	width: 180px;
	height: 180px;
	text-align: center;
	font-size: 2em;
	z-index: 30;
	color: #fec570;
	border-radius: 100%;
	background: url('../../_data/resources/1_1556104792_icon-play.svg') no-repeat center center;
	background-size: 25px;
	cursor: pointer;
}

.mainContainer.editActive #playCircleContainer {
	display: none;
}

#VideoPlayer .playerContainer #playCircleContainer.playing {
	background-image: url('../../_data/resources/1_1556104813_icon-pause.svg')
}

#VideoPlayer .playerContainer #playCircleContainer .fticon-right, #VideoPlayer .playerContainer #playCircleContainer svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	line-height: 180px;
}

#VideoPlayer .playerContainer #playCircleContainer svg > .circle {
	fill: transparent !important;
	stroke: #fec570;
	stroke-width: 3;
	stroke-dasharray: 900;
	transition-duration: 0ms !important;
	/* firefox bug fix - won't rotate at 90deg angles */
	transform: rotate(-90deg) translateX(-179px);
	-moz-transform: rotate(-90deg) translateX(-179px);
}

#VideoPlayer .playerContainer #playCircleContainer svg > .circle.inner {
	stroke-width: 0;
}

#VideoPlayer .playerContainer #playCircleContainer svg > .circle.progress-interaction {
	stroke-width: 0;
}

#VideoPlayer .playerContainer #playCircleContainer svg > .circle.progress-move {
	fill: transparent !important;
	stroke: #fec570;
	stroke-width: 6;
  opacity: 0;
	stroke-dasharray: 900;
}

#VideoPlayer .playerContainer #playCircleContainer svg > .circle-bg {
	fill: transparent !important;
	stroke: #FFFFFF;
	stroke-width: 2;
	stroke-dasharray: none;
	transition-duration: 0ms !important;
	/* firefox bug fix - won't rotate at 90deg angles */
	transform: rotate(-90deg) translateX(-179px);
	-moz-transform: rotate(-90deg) translateX(-179px);
	opacity: .5;
}


#VideoPlayer .playerContainer #playCircleContainer svg > .circle.progress--activated {
	stroke-width: 6;
  transition: stroke-width 0.5s linear;
}

/* Subtitle Element */

.captionContainer .subtitleElement {
	color: #ffffff;
	font-size: 2vw;
	letter-spacing: 0;
	font-weight: 200;
	line-height: 1;
	margin: 1em 5vw;
	text-align: center;
	background: transparent;
	display: none;
	width: 90vw;
}

@media (min-width: 1700px) {
	.captionContainer .subtitleElement {
    	margin: .5em 5vw;
	}
}

@media (max-width: 920px) {
	.captionContainer .subtitleElement {
		font-size: 3vw;
	}
}

@media (max-width: 650px) { 
	.captionContainer .subtitleElement {
		font-size: 4vw;
	}
}

.hypervideoContainer .videoContainer {
	border: 0px !important;
}

.hypervideoContainer .videoContainer .hypervideo .captionContainer {
	position: fixed !important;
}

.mainContainer.editActive .hypervideoContainer .videoContainer .hypervideo .captionContainer {
	display: none !important;
}

.hypervideoContainer .videoContainer .hypervideo .captionContainer .subtitleElement {
	margin: 16px 50px;
}

#VideoPlayer .message.statusMessage.active {
	display: none !important;
}

#VideoPlayer .message.statusMessage.active.error {
	top: 0px;
	display: block !important;
}

#VideoPlayer .titlebarViewMode {
	display: none !important;
}

#VideoPlayer .titlebar:not(.editActive) {
	position: absolute;
	top: 0px;
	left: 0px;
	flex: none;
	height: 60px;
	background: transparent;
	pointer-events: none;
}

#VideoPlayer .titlebar:not(.editActive) .titlebarTitle {
	font-family: 'Rubik', helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.2em;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 58px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

#VideoPlayer .titlebar:not(.editActive) .titlebarActionButtonContainer, 
#VideoPlayer .sharingWidget, 
#VideoPlayer .titlebar .leaveEditModeButton,
#VideoPlayer .controls .rightControlPanel {
	display: none !important;
}

#VideoPlayer .sidebarContainer {
	margin-top: 54px;
}

#VideoPlayer .titlebarViewMode {
	margin-left: 164px;
}

#VideoPlayer .ui-tabs .ui-tabs-nav li a, #VideoPlayer .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	padding: 2px 4px;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .ui-slider-handle-circle {
	display: none;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls {
	position: absolute;
	flex: none;
	bottom: 0px;
	height: 20px;
	min-height: 0;
	display: none;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls .playButton {
	height: 20px;
	width: 30px;
	margin-left: -5px;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls .playButton [class^="icon-"]::before {
	font-size: 15px;
	margin-top: -10px;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls .timeDisplay div {
	float: left;
	margin-top: -3px;
	margin-left: 3px;
}

#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .playerContainer .controls .timeDisplay div.totalDuration {
	display: none;
}


#VideoPlayer .mainContainer:not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]) .hypervideoContainer {
	margin-bottom: 0px;
}

#VideoPlayer .videoStartOverlay {
	display: none !important;
}

#VideoPlayer .mainContainer:not(.editActive) .viewOverview {
	display: none !important;
}

#VideoPlayer .mainContainer:not(.editActive) .viewVideo {
	display: block !important;
}

/* buttons */

#VideoPlayer button, #VideoPlayer input[type="submit"], #VideoPlayer input[type="button"], #VideoPlayer .button {
	/*font-family: 'Rubik', sans-serif;*/
	font-family: 'Inconsolata', monospace;
	letter-spacing: -0.9px;
	text-transform: inherit;
}

#VideoPlayer input[type="text"], #VideoPlayer input[type="password"], #VideoPlayer textarea {
	font-family: 'Inconsolata', monospace;
	letter-spacing: 0px;
}


/* Start iOS / Safari */
.fullscreen-no #VideoPlayer .mainContainer:not(.editActive) .videoContainer {
	width: 100vw !important;
	height: 100vh !important;
}

.fullscreen-no #VideoPlayer .mainContainer:not(.editActive) .videoContainer .hypervideo {
	top: 0%;
	left: 0%;
	width: 100vw !important;
	height: 100vh !important;
	margin-left: 0px !important;
	margin-top: 0px !important;
	min-height: none !important
}

.fullscreen-no #VideoPlayer .mainContainer:not(.editActive) .videoContainer video {
	top: 0%;
	left: 0%;
	width: 100vw !important;
	height: 100vh !important;
	object-fit: contain;
}

.fullscreen-no #VideoPlayer .mainContainer:not(.editActive) .slideArea {
	min-height: 0 !important;
}

.fullscreen-no #VideoPlayer .mainContainer:not(.editActive) .overlayElement .resourceDetail[data-type="text"] {
	display: none !important;
}
/* End iOS / Safari */


/* Inside Hypervideo */
.hypervideo .video {
	-webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: filter;
    transition-duration: 1s;
}

.hypervideo .video.nocolor {
	
}

.hypervideo .video.dark {
	
}

.overlayContainer .overlayElement {
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: 800ms;
}

.overlayContainer .overlayElement.active {
	opacity: 1;
	pointer-events: all;
}

.overlayElement .resourceDetail {
	transform-origin: center;
}

.mainContainer:not(.editActive) .overlayElement .resourceDetail {
	overflow: visible !important;
}

.overlayElement .resourceDetail[data-type="text"] * {
	color: #ffffff !important;
	font-size: 1vw;
	background: rgba(0,0,0,.45);
	padding: 1vw;
	letter-spacing: 0;
	line-height: 1.15em;
}

.overlayElement .resourceDetail[data-type="image"] img {
	-webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: scale;
	transform: scale(0.8, 0.8);
	transform-origin: center bottom;
	transition-property: all;
	transition-duration: 300ms;
}

.overlayElement .resourceDetail[data-type="image"] img:hover {
	cursor: pointer;
  	transform: scale(1,1);
}

.overlayElement .resourceDetail[data-type="image"] img[src="_data/resources/1_1560762493_animation-plane-head.gif"] {
	transform-origin: right center;
}

/* TODO: Fix sizing & scaling of overlays; */
.overlayElement .resourceDetail[data-type="image"] .ps-scrollbar-x-rail, 
.overlayElement .resourceDetail[data-type="image"] .ps-scrollbar-y-rail {
	display: none !important;
}


.overlayElement svg {
	top: 10px;
	left: 10px;
  	width: calc(100% - 20px);
}

.overlayElement svg {
	position: absolute;
	z-index: 11;
	overflow: visible !important;
	transition-property: all;
	transition-duration: 1300ms;
	pointer-events: none;
}

.overlayElement svg.centered {
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	margin-top: -30px;
	margin-left: -30px;
	width: 65px !important;
	height: 65px !important;
	-webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    animation-delay: 1s
}

.overlayElement svg.centered polygon {
	width: 100% !important;
	height: 100% !important;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.overlayElement .resourceDetail[data-type="image"] svg path, .overlayElement .resourceDetail[data-type="image"] svg polygon {
	stroke: #fff;
	stroke-miterlimit: 1;
	stroke-width: 2px;
	transition-property: fill, opacity;
	transition-duration: 800ms;
	pointer-events: none;
}

.overlayElement svg.active {
	pointer-events: all;
}

.overlayElement svg.active path, .overlayElement svg.active polygon {
	opacity: 1;
	pointer-events: all;
}

.overlayElement svg.active path:hover, .overlayElement svg.active polygon:hover {
	cursor: pointer;
	fill: rgba(255,255,255,.4);
}

#transitionContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: 1s;
	background: rgba(0,0,0,.8);
}

#transitionContainer.active {
	opacity: 1;
	pointer-events: all;
}

#transitionContainer audio {
	position: absolute;
}

.transitionCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

.transitionCanvas svg {
	position: absolute;
	top: 0px;
	left: 0px;
}

.continueButton {
	position: absolute;
	bottom: -60px;
	right: 20px;
	width: 70px;
	height: 34px;
	transition-property: all;
	transition-duration: 800ms;
	background: transparent;
	z-index: 14;
	opacity: 0;
	pointer-events: none;
}

.continueButton svg, .continueButton svg polygon {
	opacity: 1;
	stroke-width: 1px;
}

.continueButton span {
	position: absolute;
	color: #fff;
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-size: 26px;
	line-height: 30px;
}

.continueButton.active {
	bottom: 20px;
	opacity: 1;
	pointer-events: all;
}

.continueButton.active:hover {
	cursor: pointer;
	background: rgba(255,255,255,.4);
}

/*
.continueButton.full {
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
}

.continueButton.full:hover {
	background:transparent;
}

.continueButton.full span {
	opacity: 0;
}
*/

/* IE fix */
.mainContainer:not(.editActive) .hypervideoContainer .videoContainer {
  min-height: 100vh !important;
}