/* Don't show config tables */
#hpt-config,#hpt-videos{display:none;}

/* Animations */
@keyframes result-acknowledgement {
  0% { transform: translate(0,100%);opacity:0; }
  100% { transform: translate(0,0);opacity:1; }
}
@keyframes result-outcome {
  0% { transform: translate(0,-100%);opacity:0; }
  50% { transform: translate(0,-100%);opacity:0; }
  100% { transform: translate(0,0);opacity:1; }
}
@keyframes result-close {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes load-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.hpt {margin:0 0 24px;}

/* Whole module loading indicator*/
.hpt__loading{display:flex;align-items:center;justify-content:center;margin:0;color:#253544;font-size:1.2rem;}
.hpt__loading:before{margin-right:14px;width:20px;height:20px;content:'';background:url(/assets/img/icons/refresh--blue.svg) no-repeat 0 0;background-size:100% auto;animation:load-spin 1.5s infinite;}

/* Whole launch button */
.hpt__launch-btn{outline:none;-webkit-appearance: none;appearance: none;border-radius: 4px;font-size: 13px;font-family: inherit;border: 1px solid transparent;position: relative;background-color: #80b816;background-repeat: no-repeat;color: #fff;font-weight: 700;margin: 0;align-items: center;justify-content: center;box-sizing: border-box;line-height: 1.3;white-space: normal;background-image: url(/assets/img/icons/arrow-right-white.svg);background-position: calc(100% - 15px) 50%,100vw 100vh;background-size: 18px 18px;padding: 11px 17px;text-align: left;display: inline-flex;width: auto;min-height: 0;padding-right: 50px;}
.hpt__launch-btn:hover,
.hpt__launch-btn:active,
.hpt__launch-btn:focus{background-color:#253544;}

/* Screen (container for demo content which can go full screen if supported) */
.hpt__screen{margin-top:10px;}
.hpt__screen-inner{outline:none;position:relative;}
/*.hpt__screen--loading{height:100px;display:flex;align-items:center;justify-content:center;margin:0;color:#fff;font-size:1.2rem;background:#000;}
.hpt__screen--loading:before{margin-right:14px;width:20px;height:20px;content:'';background:url(/assets/img/icons/refresh.svg) no-repeat 0 0;background-size:100% auto;animation:load-spin 1.5s infinite;}
.hpt__screen--main{position:relative;}*/

/* Head section, with back button that conditionally appears */
.hpt__screen-head{background:#253544;color:#fff;padding:10px;min-height:30px;display:flex;align-items:center;position:relative;}
.hpt__screen-head-back{outline:none;position:absolute;top:calc(50% - 15px);left:10px;-webkit-appearance:none;appearance:none;border:0;padding:0;width:30px;height:30px;flex-grow:0;flex-shrink:0;display:block;background:#fff url(/-/media/Media/Licences/HPT-Demos/chevron-left--blue.svg) no-repeat 46% 50%;margin-right:10px;background-size:33% auto;border-radius:50%;}
.hpt__screen-head-back:hover,
.hpt__screen-head-back:active,
.hpt__screen-head-back:focus{opacity:0.5;}
.hpt__screen-head-title{width:100%;color:#fff;margin:0 40px 0 0;}
.hpt__screen-head-back + .hpt__screen-head-title{margin-left:40px;text-align:center;}
.hpt__screen-head-close{outline:none;position:absolute;top:calc(50% - 15px);right:10px;-webkit-appearance:none;appearance:none;border:0;padding:0;width:30px;height:30px;flex-grow:0;flex-shrink:0;display:block;background:url(/-/media/Media/Licences/HPT-Demos/close.svg) no-repeat;margin-left:10px;background-size:100% auto;}
.hpt__screen-head-close:hover,
.hpt__screen-head-close:active,
.hpt__screen-head-close:focus{opacity:0.5;}

/* Menu screen */
.hpt__screen-menu{background:#000;padding: 20px;}
.hpt__screen-menu-options{display:flex;flex-direction:column;list-style:none;padding:0;margin:0 auto;max-width: 400px;}
.hpt__screen-menu-option{margin:0;}
.hpt__screen-menu-option + .hpt__screen-menu-option{margin-top: 14px;}
.hpt__screen-menu-demo-btn{outline:none;-webkit-appearance: none;appearance: none;border-radius:5px;font-size:13px;font-family:inherit;position:relative;background-repeat:no-repeat;font-weight:700;margin:0;align-items:center;justify-content: flex-start;box-sizing: border-box;line-height: 1;white-space: normal;background-image: url(/-/media/Media/Licences/HPT-Demos/chevron-right--black.svg);background-position: calc(100% - 15px) 50%;background-size: 10px auto;background-color: #fff;color: #253544;border: 1px solid transparent;padding: 12px 17px;text-align: left;display: inline-flex;width: 100%;min-height: 0;padding-right: 50px;}
.hpt__screen-menu-demo-btn:hover,
.hpt__screen-menu-demo-btn:active,
.hpt__screen-menu-demo-btn:focus{background-color:#eef2f3;}
.hpt__screen-shuffle-outer{display:flex;justify-content: center;margin-top: 20px;}
.hpt__screen-shuffle{display:block;padding:10px 28px 10px 10px;outline:none;-webkit-appearance: none;appearance: none;font-family:inherit;background:none;color:#fff;border:none;line-height:1;border-radius:4px;background:url(/assets/img/icons/refresh.svg) no-repeat calc(100% - 10px) 50%;background-size:12px auto;}
.hpt__screen-shuffle:hover,
.hpt__screen-shuffle:active,
.hpt__screen-shuffle:focus{background-color:#444;}

/* Demo screen, video player and results */
.hpt-demo{padding:10px;background:#eef2f3;}
.hpt-demo__loading{height:100px;display:flex;align-items:center;justify-content:center;margin:0;color:#fff;font-size:1.2rem;background:#000;}
.hpt-demo__loading:before{margin-right:14px;width:20px;height:20px;content:'';background:url(/assets/img/icons/refresh.svg) no-repeat 0 0;background-size:100% auto;animation:load-spin 1.5s infinite;}
.hpt-demo__ready{position:relative;}
.hpt-demo__instruction{color:#253544;background:#fff;margin:0;padding:10px;}
.hpt-demo__controls{background: #221d1f;padding:10px;}
.hpt-demo__controls-text{color: #fff;margin:0 0 8px 0;line-height:1.4;}
.hpt-demo__controls-btn{-webkit-appearance:none;appearance:none;line-height: 1;background: #fff;border: 0;color: #333f48;border-radius: 100vh;text-transform: uppercase;font-family: inherit;font-size: 0.875rem;font-weight: 700;flex-grow:0;flex-shrink:0;padding: 10px 16px;}
.hpt-demo__controls-btn:hover,
.hpt-demo__controls-btn:active,
.hpt-demo__controls-btn:focus{background-color:#e0e0e0}

.hpt-demo__video-container{position:relative;background:#000;}
.hpt-demo__video-control-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1;}
.hpt-demo__video-play{-webkit-appearance:none;appearance:none;background:none;border:0;display:block;padding:0;margin:0;outline:none;border-radius:0;}
.hpt-demo__video-play:hover path,
.hpt-demo__video-play:active path,
.hpt-demo__video-play:focus path{fill:#253544;}
.hpt-demo__video-play-icon{display:block;width:50px;height:50px;}
.hpt-demo__video-stop{-webkit-appearance:none;appearance:none;display:block;padding:0;margin:0;background:none;border-radius:0;border:0;width:100%;height:100%;outline:none;}
.hpt-demo__video{display:block;width:100%;height:auto;}

.hpt-demo__result{text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;outline:none;}
.hpt-demo__result-acknowledgement{margin:0;padding:10px;font-weight:700;color:#fff;background:#000;animation: 1s result-acknowledgement;position:relative;z-index:1;}
.hpt-demo__result-outcome{margin:0;color:#253544;background:#fff;padding:10px;animation: 2s result-outcome;}
.hpt-demo__result-actions{display:flex;align-items:center;justify-content:center;padding-top:10px;}
.hpt-demo__result-close{opacity:0;outline:none;animation: 0.5s result-close;animation-delay:1.5s;animation-fill-mode: forwards;-webkit-appearance: none;appearance: none;border-radius:5px;font-size:13px;font-family:inherit;position:relative;background-repeat:no-repeat;font-weight:700;margin:0;align-items:center;justify-content: center;box-sizing: border-box;line-height: 1;white-space: normal;background-image: url(/-/media/Media/Licences/HPT-Demos/chevron-right--black.svg);background-position: calc(100% - 15px) 50%;background-size: 10px auto;background-color: #fff;color: #253544;border: 1px solid transparent;padding: 12px 17px;text-align: left;display: inline-flex;width: auto;min-height: 0;padding-right: 50px;}
.hpt-demo__result-close:hover,
.hpt-demo__result-close:active,
.hpt-demo__result-close:focus{background-color:#eef2f3;border-color:#253544;}

/* Media query applies when we are in full screen as well, regardless of screen size */
@media only screen and (min-width: 30em) , (display-mode: fullscreen) {
	.hpt__screen-head{padding:20px;}
	.hpt__screen-head-close{right:20px;}
	.hpt__screen-head-back{left:20px;}
	.hpt__screen-head-title{font-size:1.2rem;}
	.hpt-demo__instruction{padding:10px 20px;}
	.hpt-demo__controls{padding:10px 20px;display:flex;justify-content: space-between;align-items: center;}
	.hpt-demo__controls-text{margin:0 8px 0 0;}
	.hpt-demo__result-actions{position: absolute;bottom:20px;left:0;right:0;padding:0;}
	.hpt-demo__video-play-icon{width:80px;height:80px;}
}

/* Media query applies when we are in full screen as well, regardless of screen size */
@media only screen and (min-width: 30em) , (display-mode: fullscreen) {
	.hpt__screen-head-title{margin-left:40px;width:100%;text-align:center;font-size:1.4rem;}
	.hpt-demo__result{font-size:1.2rem;}
	.hpt-demo__instruction{text-align:center;font-size:1rem;}
	.hpt-demo__controls{font-size:1rem;}
	.hpt-demo__controls-text {margin-right:24px;}
	.hpt-demo__video-play-icon{width:100px;height:100px;}
}

.hpt__screen--fullscreen {display: flex;background:#000;justify-content: center;}

.hpt__screen--fullscreen .hpt__screen-inner{height:100vh;width:calc(100vh / 9 * 16);}
.hpt__screen--fullscreen .hpt__screen-head{position:absolute;top:0;left:0;right:0;height:8.88vh;overflow:hidden;z-index:2;padding:0;}
.hpt__screen--fullscreen .hpt__screen-head-back{left: 2vh;height: 4.5vh;width: 4.5vh;top:calc(50% - (4.5vh/2));}
.hpt__screen--fullscreen .hpt__screen-head-title{font-size:4.5vh;margin:0 9vh;}
.hpt__screen--fullscreen .hpt__screen-head-close{right: 2vh;height: 4.5vh;width: 4.5vh;top:calc(50% - (4.5vh/2));}

.hpt__screen--fullscreen .hpt__screen-menu{height:100vh;box-sizing:border-box;padding:8.88vh 0 0;}

.hpt__screen--fullscreen .hpt__screen-menu-options{max-width:120vh;margin-top:10vh;}
.hpt__screen--fullscreen .hpt__screen-menu-option + .hpt__screen-menu-option {margin-top:3vh;}
.hpt__screen--fullscreen .hpt__screen-menu-demo-btn{border-radius:0;font-size: 3vh;padding: 3vh 16vh 3vh 4vh;background-size: 2vh auto;background-position-x: calc(100% - 4vh);}
.hpt__screen--fullscreen .hpt__screen-shuffle-outer{margin-top:5vh;}
.hpt__screen--fullscreen .hpt__screen-shuffle{font-size:2.5vh;font-size: 2.5vh;padding: 3vh 7.5vh 3vh 4vh;background-size: 2vh auto;background-position-x: calc(100% - 4vh);}

.hpt__screen--fullscreen .hpt-demo{padding:0;}

.hpt__screen--fullscreen .hpt-demo__loading{height:100vh;font-size:8vh;font-family:'Museo-500', Verdana, sans-serif;}
.hpt__screen--fullscreen .hpt-demo__loading:before{margin-right: 6vh;width: 6vh;height: 6vh;}
.hpt__screen--fullscreen .hpt-demo__instruction{position:absolute;top:8.88vh;left:0;right:0;height:8.88vh;z-index:2;font-size:3vh;line-height:160%;padding:1.5vh 30vh 1.8vh;}
.hpt__screen--fullscreen .hpt-demo__controls{position:absolute;top:8.88vh;left:0;right:0;height:8.88vh;z-index:2;font-size:2.5vh;padding:1.5vh 2vh 1.8vh;}
.hpt__screen--fullscreen .hpt-demo__controls--started{top: 0;}
.hpt__screen--fullscreen .hpt-demo__controls-btn{font-size: 2.5vh;padding: 1.75vh 2.25vh;}
.hpt__screen--fullscreen .hpt-demo__controls-text{margin-right: 1vw;}

.hpt__screen--fullscreen .hpt-demo__video-container{height:100vh;}
.hpt__screen--fullscreen .hpt-demo__video-control-container{top:13.4vh;}
.hpt__screen--fullscreen .hpt-demo__video-play-icon{width:30vh;height:30vh;}

.hpt__screen--fullscreen .hpt-demo__result-acknowledgement{font-size:4.5vh;padding:3vh 5vh;line-height:120%;}
.hpt__screen--fullscreen .hpt-demo__result-outcome{font-size:4.5vh;padding:3vh 5vh;line-height:120%;}

.hpt__screen--fullscreen .hpt-demo__result-actions{bottom:6.6vh;}
.hpt__screen--fullscreen .hpt-demo__result-close{font-size:3vh;padding:2vh 16vh 2vh 3vh;background-size: 2vh auto;background-position-x: calc(100% - 4vh);}