body, html{
  height: 100%;
  margin:0;border:0;padding:0;
  overflow:hidden;
  background:#000
}
@supports (-webkit-touch-callout: none) {
	body, html{touch-action: none;}
}
.player-box{position: relative}
/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation:portrait) {
	.player-box {
	  transform: rotate(90deg);
	  transform-origin: left top;
	  width: calc(100vh - 40px);
	  height: 100vw!important;
	  overflow-x: hidden;
	  position: absolute;
	  left:100vw;
	  top:40px;
	}
}*/
.toolbar-box{height: 40px;background-color: #f14444;position: relative;}
.fs-logo{float:left;color:yellow;text-shadow: 0px 3px 0px rgba(0,0,0,0.1), 0px 14px 10px rgba(0,0,0,0.15), 0px 34px 30px rgba(0,0,0,0.1);text-align:center;font:Bolder 30px/40px Arial;text-transform:uppercase;margin:0;padding:0 10px;border:0;text-decoration:none;background-color: red;}
.fs-logo a{display:block;text-decoration:none}
.left-arrow{float: left;height: 0;border: 20px solid transparent; border-left-color: red;margin: 0;}
.game-name{float: left;font:Bold 20px/40px Arial;color:#FFF;height: 40px;margin: 0;padding:0;max-width: calc(100% - 765px);}
@media (max-width:600px) {
	.game-name{font-size: 12px;}
}
.right-toolbar-box{height: 40px;margin: 0;padding: 0;border: 0;position: absolute; right: 0;top:0;z-index: 1000;background: #f14444;}
.fullscreen{float: left;border: 0 solid #FFF; height: 20px; width: 20px;margin: 10px 15px 10px 0;background-color: transparent;cursor: pointer;transition:border 100ms linear;font:Bold 23px/20px Arial;color:white;text-align: center;}
.fullscreen:hover{border-color: #AAA;}
.toolbar-line{width: 0;height:10px;margin: 15px 0;float: left;border: 0;border-left: 1px solid rgb(0, 0, 0, 0.1);box-shadow: 1px 0 rgb(255, 255, 255, 0.1);}
.emulator-box{float: left;height: 30px; margin: 5px 10px;}
.emulator-label{display: block;float:left;padding:0 10px;font:italic 12px/30px Arial;color:#EEE}
@media (max-width: 1024px) {
  .emulator-label{display: none;}
  .game-name{max-width: calc(100% - 590px);}
}
.emulator-select{float: left;position: relative;}
.emulator-select .emulator-current{font:bold 12px/30px Arial;padding: 0 10px;color:yellow;border: 1px solid rgb(0, 0, 0, 0.1);border-radius: 3px;height: 30px;display: block;margin: 0;background-color: #000;cursor: pointer;padding-left: 20px;}
.emulator-select-sub{position:absolute;left: 50%;bottom:00px;transform: translateX(-50%);padding: 10px;z-index: 99;display: none;}
.emulator-select-sub-content{background-color: white;border-radius: 3px;box-shadow: 1px 0 5px rgb(0, 0, 0, 0.5);margin: 10px 10px 30px 10px;padding: 10px;min-width: 100px;}
.emulator-select-sub-content a:not(.selected){display: block;text-decoration: none;color: red;font:12px/26px Arial;border-bottom: 1px solid rgba(0,0,0,0.1);}
.emulator-select-sub-content a:last-child{border-bottom: 0;}
.emulator-select-sub-content a:not(.selected):hover{color:blue}
.selected{pointer-events: none;color:gray;display: block;text-decoration: none;font:12px/26px Arial;border-bottom: 1px solid rgba(0,0,0,0.1);}
.two-arrow{position: absolute;left:5px;top:5px;width: 10px;height: 20px;}
.arrow-up{border: 5px solid transparent;border-bottom-color: white;margin: 0 0 2px 0;width: 0;height: 0!important;padding: 0;display: block;}
.arrow-down{border: 5px solid transparent;border-top-color: white;margin: 0;width: 0;height: 0!important;padding: 0;display: block;}
/*.emulator-select:hover .emulator-select-sub{display: block;}*/

.toolbar-more{float: left;width: 20px;height: 20px;margin: 10px;cursor: pointer;transition:border 100ms linear;}
.toolbar-more i{
  font:Bold 23px/20px Arial;
  color: white;
}
.toolbar-more .more-box{width: 8px;height: 8px;background-color: white;float: left;margin: 1px;float: left;}
.toolbar-more:hover .more-box{background-color: #AAA;}
  .more-app-box{position: absolute;left: 0;right: 0; bottom: 40px; background-color: rgba(0,0,0,0.6);display: none;height: 256px;}
  .more-app-content-box{position: absolute;left:10px;top:10px; right:10px; bottom:10px;border-radius: 2px;overflow: hidden;background-color: white;}
  .more-app-title{float: left;width: 100%; font:Bold 16px/30px Arial;padding: 0 10px; 
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(45deg, rgba(0,0,0,0.3) , white);
    border-image-slice: 1;
  box-shadow: 0 3px 10px rgb(0, 0, 0, 0.1);margin: 0;}
  .more-app-close{width: 20px;height: 20px;position: absolute; right: 5px; top: 5px; font:10px Arial; line-height: 1;color:red;float: right;background-color:rgba(0,0,0,0.1);border-radius: 2em;padding: 0;border: 1px solid gray; cursor: pointer;}
  .more-app-body{height: 138px;clear: left; overflow-y: auto; padding: 10px; text-align: center;}
    .more-game-box{width: 80px; height: 120px; display: inline-block; vertical-align: top; background-color: red; margin: 10px;border-radius: 5px;overflow: hidden;}
    .more-game-box a{display: block;text-decoration: none;}
    .more-game-box a b{font:12px/16px Arial;color:white; text-align: center;display: block;margin-top: 3px;}
    .more-game-box img{width: 80px; height: 80px}
  .more-app-bottom{height: 50px;border-top: 1px solid transparent;
    border-image: linear-gradient(45deg, rgba(0,0,0,0.3) , white);
    border-image-slice: 1;}
.reload-button{color: white;float: left; margin:10px; height: 20px; width: 20px;font-size: 20px;cursor: pointer;}

.share-this-game-box{float: left;margin:0 5px; padding:0}
@media (max-width:700px) {
	.share-this-game-box{display: none;}
  .game-name{max-width: calc(100% - 400px);}
}

@media (max-width: 501px) {
  .emulator-box, .reload-button, .toolbar-more, .toolbar-line{display: none;}
  .game-name{max-width: calc(100% - 100px);}
}
.like-counter-text{padding-right: 3px;color:white;font:12px/20px Arial}

.share-container {
  display: flex;
  justify-content: flex-end;
  position: relative;
  float: right;
  font:11px/20px Arial;
}

.tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  z-index: 9999;
  padding-left: 10px;
  white-space: nowrap;
}
@media (max-width:1024px) {
  .tip-signal{display: none;}
}
.tip:after {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(44, 44, 44, 0.3);
  margin: 0 0 0 8px;
}
@media only screen and (max-width: 600px) {
  .tip {
    display: none;
  }
}

.trigger {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s, border 0.2s;
  font-size: 12px;
}
.trigger a {
  color: currentColor;
  text-decoration: none;
  transform: skew(10deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trigger i {
  font-size: 14px;
  line-height: 40px;
}
.trigger:hover {
  color: #2c2c2c;
  border-color: #2c2c2c !important;
}
.trigger.share-btn i {
  margin: 0 5px 0 0;
}

.like, .share {
  transform: skew(-10deg);
  margin: 0 0 0 10px;
}
.like .trigger, .share .trigger {
  width: 82px;
  border: 1px solid rgba(44, 44, 44, 0.3);
}
.like i, .share i {
  margin: 0 5px 0 0;
}

@media only screen and (min-width: 301px) {
  .share {
    display: none;
  }
}

.share-window {
  transform: skew(-10deg);
  overflow: hidden;
}

@media only screen and (max-width: 300px) {
  .share-window {
    display: none;
  }
}

.share-bar {
  position: relative;
  width: 82px;
  height: 40px;
  transition: width 0.4s ease 0.2s;
}
.share-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(44, 44, 44, 0.3) rgba(44, 44, 44, 0.3) rgba(44, 44, 44, 0.3) transparent;
}
.share-bar:hover {
  width: 247px;
  transition: width 0.4s ease;
}
.share-bar:hover .trigger:nth-child(3) {
  left: 82px;
  transition: left 0.45s ease 0.06s, color 0.2s, border 0.2s;
}
.share-bar:hover .trigger:nth-child(4) {
  left: 123px;
  transition: left 0.45s ease 0.12s, color 0.2s, border 0.2s;
}
.share-bar:hover .trigger:nth-child(5) {
  left: 164px;
  transition: left 0.45s ease 0.18s, color 0.2s, border 0.2s;
}
.share-bar:hover .trigger:nth-child(6) {
  left: 205px;
  transition: left 0.45s ease 0.24s, color 0.2s, border 0.2s;
}
.share-bar:hover .trigger:nth-child(7) {
  left: 246px;
  transition: left 0.45s ease 0.24s, color 0.2s, border 0.2s;
}
.share-bar .trigger {
  position: absolute;
  top: 0;
  width: 42px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(44, 44, 44, 0.3);
  transition: left 0s ease 0.45s, color 0.2s, border 0.2s;
}
.share-bar .trigger:nth-child(1) {
  left: 0;
}
.share-bar .trigger:nth-child(2) {
  left: 41px;
}
.share-bar .trigger:nth-child(3) {
  left: 102px;
}
.share-bar .trigger:nth-child(4) {
  left: 143px;
}
.share-bar .trigger:nth-child(5) {
  left: 184px;
}
.share-bar .trigger:nth-child(6) {
  left: 225px;
}
.share-bar .trigger:nth-child(7) {
  left: 266px;
}

/* Rotate Player box on some divices */
.mobile-logo-btn{
	position: fixed;
	left:0; top: 10px;
	background-color: red;
	border-radius: 0 2em 2em 0;
	z-index: 9999999;
	font:italic 16px/20px Arial;
	text-decoration: none;
	color:white;
	padding: 3px 10px 3px 3px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
	animation: all 300ms linear;
	display: none;
  white-space:nowrap;
}
.mobile-logo-btn:hover{box-shadow: 0 6px 3px rgba(0,0,0,0.5);}

.rotate-player-special-browser{
  transform: rotate(90deg);
  transform-origin: left top;
  width: 100vh;
  height: 100vw!important;
  overflow-x: hidden;
  position: absolute;
  left:100vw;
  top:0;
}

.rotate-mobile-logo-btn-special-browser{
  transform: rotate(90deg);
  transform-origin: left top;
  left:calc(100vw - 10px);
  top:0;
}

@media only screen and (hover: none) and (pointer: coarse) and (orientation:portrait) {
  .rotate-player{
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw!important;
    overflow-x: hidden;
    position: absolute;
    left:100vw;
    top:0;
  }

  .rotate-mobile-logo-btn{
    transform: rotate(90deg);
    transform-origin: left top;
    left:calc(100vw - 10px);
    top:0;
  }
}

/*
@-moz-document url-prefix() {// Only Firefox Browser
	@media only screen and (hover: none) and (pointer: coarse) and (orientation:portrait) {
		.landscape-player{
		  transform: rotate(90deg);
		  transform-origin: left top;
		  width: 100vh;
		  height: 100vw!important;
		  overflow-x: hidden;
		  position: absolute;
		  left:100vw;
		  top:0;
		}
    
		.mobile-logo-btn{
			transform: rotate(90deg);
			transform-origin: left top;
			left:calc(100vw - 20px);
			top:0;
		}	
	}
}
@supports (-webkit-touch-callout: none) { // Only for iOS devices
	body, html{overflow: auto;}
	@media only screen and (hover: none) and (pointer: coarse) and (orientation:portrait) {
		.landscape-player{
		  transform: rotate(90deg);
		  transform-origin: left top;
		  width: 100vh;
		  height: 100vw!important;
		  overflow-x: hidden;
		  position: absolute;
		  left:100vw;
		  top:0;
		}		
		.mobile-logo-btn{
			transform: rotate(90deg);
			transform-origin: left top;
			left:calc(100vw - 20px);
			top:0;
		}
	}
}
*/

.mobile-overlay-player{position: fixed; left: 0; top:0; right: 0; bottom: 0; background-color: #000;z-index: 99999999;display: none;}
.mobile-overlay-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
.mobile-overlay-content img{vertical-align:top;margin:0 22px;border-radius:5px 5px 0 0}
.mobile-overlay-menu{display:block;height:50px;background:#fff;clear:both;background:#f14444;position:relative;padding:0;margin:0}
.mobile-overlay-menu .fs-logo{height:50px!important}
.mobile-overlay-close-btn{border-radius:50%;background:#fff;width:30px;height:30px;float:right;z-index:99;display:block;font:Bold 12px/1 Arial;color:red;margin:10px;cursor:pointer;border:1px solid #e25653}
.mobile-overlay-close-btn:hover{border-color:#333}
.mobile-overlay-menu .fs-logo{line-height:50px}
.mobile-overlay-playnow{width:106px;display:block;margin:0 auto;font:Bold 15px/30px Helvetica,"Trebuchet MS",Verdana,sans-serif;color:#333;cursor:pointer;padding:2px 3px;border-radius:0 0 5px 5px;border:0;background:#d1c11b;color:white}
.mobile-overlay-playnow:hover{background:#FFF;color:red}
@media only screen and (hover: none) and (pointer: coarse){
  .mobile-overlay-player{display: block;}
}

@supports not (-webkit-touch-callout: none) {
	/* CSS for other than iOS devices */ 
}