/* GAME SLIDE OUT */
#divAppGameSlideOut
{
    height:100%;
    left:0px;
    overflow:hidden;
    position:fixed;
    top:0px;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:0%;
    z-index:200;
}

#divAppGameSlideOut.show, #divAppGameSlideOut.hide
{
    width:100%;
}

#divAppGameSlideOut #divGameSlideOutOverlay
{
    height:100%;
    left:0px;
    top:0px;
    width:100%;
}

#divAppGameSlideOut .divGameSlideOutPanel
{
	height:100%;
    left:100%;
	position:absolute;
	top:0px;
    transition:left 0.25s, width 0.25s;
	width:600px;
}

#divAppGameSlideOut.show .divGameSlideOutPanel
{
    left:calc(100% - 600px);
}

#divAppGameSlideOut.hide .divGameSlideOutPanel
{
    left:100%;
}

#divAppGameSlideOut .divGameSlideOutPanel:before
{
    background-color:rgba(0, 0, 0, 0.75);
    border:3px solid #cffdff;
    bottom:-50%;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px rgba(0, 0, 0, 0.5);
    content:"";
    display:block;
    left:0%;
    position:absolute;
    top:-50%;
    transition:transform 0.25s;
    width:150%;
}

#divAppGameSlideOut.show .divGameSlideOutPanel:before
{
    transform:rotate(-15deg);
}

#divAppGameSlideOut #btnCloseGameSlideOut
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

#divAppGameSlideOut #btnCloseGameSlideOut:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppGameSlideOut #btnCloseGameSlideOut:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppGameSlideOut #btnCloseGameSlideOut:hover:before, #divAppGameSlideOut #btnCloseGameSlideOut:focus:before, #divAppGameSlideOut #btnCloseGameSlideOut:hover:after, #divAppGameSlideOut #btnCloseGameSlideOut:focus:after
{
    background-color:#cffdff;
    box-shadow:0px 0px 5px #01eff9;
}

#divAppGameSlideOut .divGameLabel
{
    color:#ffffff;
    display:inline-block;
    font-size:28px;
    left:50%;
    line-height:30px;
    margin-top:130px;
    max-width:300px;
    padding:0px 0px 0px 0px;
    position:relative;
    transform:translateX(-50%);
    transition:margin 0.25s;
}

.signedIn #divAppGameSlideOut .divGameLabel
{
    padding:0px 50px 0px 0px;
}

#divAppGameSlideOut #divGameName
{
    padding:5px 0px;
    text-align:center;
    text-shadow:0px 0px 5px #01eff9;
}

#divAppGameSlideOut #btnGameFavourite
{
    color:#888b90;
    cursor:pointer;
    float:right;
    font-size:24px;
    line-height:30px;
    position:absolute;
    right:0px;
    text-align:center;
    top:0px;
    transition:color 0.25s, text-shadow 0.25s;
    width:30px;
}

#divAppGameSlideOut #btnGameFavourite:hover, #divAppGameSlideOut #btnGameFavourite:focus, #divAppGameSlideOut #btnGameFavourite.fa-heart
{
    color:#ffffff;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppGameSlideOut #divGameProvider
{
    color:#ffffff;
    font-size:18px;
    left:50%;
    padding:0px 30px;
    position:relative;
    text-align:center;
    text-shadow:0px 0px 5px #e600ff;
    transform:translateX(-50%);
}

#divAppGameSlideOut #divGameImage
{
    background-color:#292a2f;
    background-position:center;
    background-size:cover;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 5px #01eff9;
	height:155px;
	left:50%;
    margin-top:20px;
	position:relative;
    transform:translateX(-50%);
    transition:height 0.25s, width 0.25s;
	width:215px;
}

#divAppGameSlideOut .divPlayContainer
{
    height:118px;
    left:calc(50% - 180px);
    overflow:hidden;
    position:relative;
    width:180px;
}

#divAppGameSlideOut.noDemo .divPlayContainer
{
    width:360px;
}

#divAppGameSlideOut #btnPlay
{
    margin:30px;
    width:300px;
}

#divAppGameSlideOut #btnPlay .divMagicButtonLabel
{
    width:110px;
}

#divAppGameSlideOut.noDemo #btnPlay .divMagicButtonLabel
{
    width:auto;
}

#divAppGameSlideOut .divDemoContainer
{
    height:118px;
    left:50%;
    margin-top:-118px;
    overflow:hidden;
    position:relative;
    width:180px;
}

#divAppGameSlideOut.noDemo .divDemoContainer
{
    display:none;
}

#divAppGameSlideOut .divDemoContainer:after
{
    background-color:#ffffff;
    content:"";
    height:18px;
    left:0px;
    position:absolute;
    top:50px;
    width:1px;
}

#divAppGameSlideOut #btnDemo
{
    position:absolute;
    right:30px;
    top:30px;
    width:300px;
}

#divAppGameSlideOut #btnDemo .divMagicButtonLabel
{
    left:calc(50% + 20px);
    position:relative;
    width:110px;
}

#divAppGameSlideOut .divTournamentContainer
{
    display:none;
	height:118px;
    left:calc(50% - 180px);
    overflow:hidden;
    position:relative;
    width:360px;
}

#divAppGameSlideOut.hasTournament .divTournamentContainer
{
    display:block;
}

#divAppGameSlideOut #btnTournament
{
    margin:30px;
    width:300px;
}

#divAppGameSlideOut #btnTournament .divMagicButtonLabel
{
    width:auto;
}

#divAppGameSlideOut #divGameRating
{
    left:calc(50% - 100px);
    position:relative;
    width:200px;
}

#divAppGameSlideOut .divGameRatingStars:after
{
	clear:both;
	content:"";
	display:block;
}

#divAppGameSlideOut .divGameRatingStar
{
	color:#ffffff;
	float:left;
	font-size:24px;
	height:24px;
	line-height:24px;
	text-align:center;
	width:40px;
}

#divAppGameSlideOut .divGameRatingCount
{
	font-size:13px;
	margin-top:5px;
	text-align:center;
}

#divAppGameSlideOut .btnRateNow
{
	color:#ffffff;
	left:50%;
	margin-top:10px;
	position:relative;
	text-shadow:0px 0px 5px #e600ff;
	transform:translateX(-50%);
}

#divAppGameSlideOut .divRateGame
{
	background-color:rgba(0, 0, 0, 0.9);
	border:1px solid #ffffff;
	border-radius:10px;
	box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px rgba(0, 0, 0, 0.5);
	height:0%;
	left:-1px;
	overflow:hidden;
	padding-top:0px;
	position:absolute;
	top:-11px;
	transition:height 0.25s, padding 0.25s;
	width:100%;
}

#divAppGameSlideOut .divRateGame.show
{
	height:100%;
	padding-top:10px;
}

#divAppGameSlideOut .divRateGameStar
{
	color:#ffffff;
	cursor:pointer;
	float:left;
	font-size:24px;
	height:24px;
	line-height:24px;
	text-align:center;
	width:40px;
}

#divAppGameSlideOut .divSubmitRating
{
	color:#cffdff;
	cursor:pointer;
	left:25px;
	position:absolute;
	text-shadow:0px 0px 5px #01eff9;
	top:58px;
}

#divAppGameSlideOut .divCancelRating
{
	color:#fbd3ff;
	cursor:pointer;
	position:absolute;
	right:25px;
	text-shadow:0px 0px 5px #e600ff;
	top:58px;
}

/* MEDIA QUERIES */
@media (max-width: 800px)
{
    #divAppGameSlideOut .divGameSlideOutPanel
    {
        width:480px;
    }

    #divAppGameSlideOut.show .divGameSlideOutPanel
    {
        left:calc(100% - 480px);
    }

    #divAppGameSlideOut.show .divGameSlideOutPanel:before
    {
        transform:rotate(-10deg);
    }
}

@media (max-width: 600px)
{
    #divAppGameSlideOut .divGameSlideOutPanel
    {
        width:360px;
    }

    #divAppGameSlideOut.show .divGameSlideOutPanel
    {
        left:calc(100% - 360px);
    }

    #divAppGameSlideOut.show .divGameSlideOutPanel:before
    {
        transform:rotate(-8deg);
    }

    #divAppGameSlideOut #btnCloseGameSlideOut:before, #divAppGameSlideOut #btnCloseGameSlideOut:after
    {
        background-color:#fbd3ff;
        box-shadow:0px 0px 5px #01eff9;
    }

    #divAppGameSlideOut .divGameLabel
    {
        font-size:24px;
        line-height:28px;
        margin-top:80px;
        max-width:260px;
    }

    #divAppGameSlideOut .divPlayContainer
    {
        left:calc(50% - 160px);
        width:160px;
    }

    #divAppGameSlideOut.noDemo .divPlayContainer
    {
        width:320px;
    }

    #divAppGameSlideOut #btnPlay
    {
        width:260px;
    }

	#divAppGameSlideOut #btnPlay .divMagicButtonLabel
    {
        width:90px;
    }

    #divAppGameSlideOut .divDemoContainer
    {
        width:160px;
    }

    #divAppGameSlideOut #btnDemo
    {
        width:260px;
    }

    #divAppGameSlideOut #btnDemo .divMagicButtonLabel
    {
        width:90px;
    }

	#divAppGameSlideOut .divTournamentContainer
    {
        width:320px;
    }

    #divAppGameSlideOut #btnTournament
    {
        width:260px;
    }
}

@media (max-width: 460px)
{
    #divAppGameSlideOut .divGameSlideOutPanel
    {
        width:280px;
    }

    #divAppGameSlideOut.show .divGameSlideOutPanel
    {
        left:calc(100% - 280px);
    }

    #divAppGameSlideOut .divGameLabel
    {
        font-size:18px;
        line-height:22px;
        max-width:200px;
    }

    #divAppGameSlideOut #divGameProvider
    {
        font-size:14px;
    }

    #divAppGameSlideOut #divGameImage
    {
        height:170px;
        margin-top:10px;
        width:220px;
    }

    #divAppGameSlideOut .divPlayContainer
    {
        height:85px;
		left:calc(50% - 140px);
        width:140px;
    }

    #divAppGameSlideOut.noDemo .divPlayContainer
    {
        width:280px;
    }

    #divAppGameSlideOut #btnPlay
    {
        margin:20px 30px;
        width:220px;
    }

    #divAppGameSlideOut #btnPlay .divMagicButtonLabel
    {
        width:70px;
    }

    #divAppGameSlideOut .divDemoContainer
    {
        margin-top:-128px;
        width:140px;
    }

    #divAppGameSlideOut #btnDemo
    {
        width:220px;
    }

    #divAppGameSlideOut #btnDemo .divMagicButtonLabel
    {
        width:70px;
    }

	#divAppGameSlideOut .divTournamentContainer
    {
        left:calc(50% - 140px);
        width:280px;
    }

    #divAppGameSlideOut #btnTournament
    {
        margin:20px 30px;
        width:220px;
    }

	#divAppGameSlideOut #divGameRating
	{
		margin-top:20px;
	}
}