@media (max-width : 1000px) {
	
	.content-container {
		width: 100% !important;
	}
	
	#info-block {
		float: left;
		width: 220px;
		padding-top: 0;
		padding-bottom: 0;
		height: 100%;
		margin-bottom: 0 !important;
		z-index: 700;
		position: absolute;
		overflow-y: auto;
		left: -220px;
		transition: all .3s ease;
	}
	
	#info-block.on-mobile {
		left: 0px;
		z-index: 900;
	}
	
	#game-block {
		position: absolute;
		width: calc(100% - 1rem);
		height: calc(100% - 1rem);
	}
	
	.game-button {
		text-align: center;
		margin-right: 0;
		margin: 1rem 0;
	}
	
	.game-info, .game-button {
		width: 100%;
		text-align: left;
		margin: 0;
	}
	
	.icon-name {
		/*display: inline-block;
		width: calc(100% - 2rem);
		*/
	}
	
	#step_back_mobile {
		position: absolute;
		right: .5rem;
		font-size: 2em;
		line-height: 1.5em;
		width: 1.5em;
		background: rgba(0, 0, 0, .2);
		border-radius: 1.5em;
		color: white;
		cursor: pointer;
		text-align: center;
		bottom: .5rem;
		z-index: 900;
	}
	
	.score-div-mobile {
		position: absolute;
		font-size: 1.2em;
		line-height: 2.5em;
		background: rgba(0, 0, 0, .2);
		border-radius: 1.5em;
		color: white;
		text-align: center;
		bottom: .5rem;
		right: 10.5rem;
		z-index: 10;
		padding: 0 .5em;
		
	}
	
	.score-div-mobile img {
		vertical-align: middle;
	}
	
	.score-div-mobile .score {
		display: inline-block;
		width: 2.5em;
		text-align: left;
	}
	
	body.minimal .user_menu_game {
		position: absolute;
		font-size: 1em;
		right: 3rem;
		/*top: calc(100vh - 0.5rem - 3em);*/
		bottom: .5rem;
		z-index: 900;
	}
	
	body.minimal .user_menu_game .login-btn  {
		
		line-height: 3em;
		width: 3em;
		height: 3em;
		background: rgba(0, 0, 0, .2);
		border-radius: 3em;
		color: white;
		cursor: pointer;
		text-align: center;
		border: 0;
		margin-top: 0;
	}
	
	body.minimal .user_icon {
		display: none;
	}
	
	#menu_mobile {
		position: absolute;
		left: 0.5rem;
		font-size: 2em;
		line-height: 1.5em;
		width: 1.5em;
		background: rgba(0, 0, 0, .2);
		border-radius: 1.5em;
		color: white;
		cursor: pointer;
		text-align: center;
		top: calc(100% - 0.5rem - 1.5em);
		z-index: 900;
		transition: all .3s ease;
	}
	
	#menu_mobile.on-mobile {
		left: calc(220px - 0.75em);
	}

	body {
		font-size: 13px;
		overflow-x: hidden;
	}

	.login-btn {
		/*margin-top: calc(30px - 1.665em);*/
 		padding: 0;
		width: 3.33em;
	}
	
	.login-btn .fa {
		font-size: 1.75em;
		line-height: 1.75em;
	}

	.s-mh-100prc, .s-vh100 {
		height: 100vh;
	}
	
	
	.s-visible {display: block;}
	
	.s-w10prc 		{width: 10%;}
	.s-w15prc 		{width: 15%;}
	.s-w20prc 		{width: 20%;}
	.s-w25prc 		{width: 25%;}
	.s-w30prc 		{width: 30%;}
	.s-w40prc 		{width: 40%;}
	.s-w50prc 		{width: 50%;}
	.s-w60prc 		{width: 60%;}
	.s-w70prc 		{width: 70%;}
	.s-w75prc 		{width: 75%;}
	.s-w80prc 		{width: 80%;}
	.s-w85prc 		{width: 85%;}
	.s-w90prc 		{width: 90%;}
	.s-w100prc 		{width: 100%;}


	.s-w180 			{width: 180px;}
	.s-w150 			{width: 150px;}
	.s-w360 			{width: 360px;}

	.s-c05x			{width: calc(0.5/12 * 100%);}
	.s-c1x			{width: calc(1/12 * 100%);}
	.s-c2x			{width: calc(2/12 * 100%);}
	.s-c3x			{width: calc(3/12 * 100%);}
	.s-c4x			{width: calc(4/12 * 100%);}
	.s-c5x			{width: calc(5/12 * 100%);}
	.s-c6x			{width: calc(6/12 * 100%);}
	.s-c7x			{width: calc(7/12 * 100%);}
	.s-c8x			{width: calc(8/12 * 100%);}
	.s-c9x			{width: calc(9/12 * 100%);}
	.s-c10x			{width: calc(10/12 * 100%);}
	.s-c11x			{width: calc(11/12 * 100%);}
	.s-c12x			{width: 100%;}




	/* padding */

	.s-p0  { padding: 0 }
	.s-pt0 { padding-top: 0 }
	.s-pr0 { padding-right: 0 }
	.s-pb0 { padding-bottom: 0 }
	.s-pl0 { padding-left: 0 }
	.s-px0 { padding-left: 0; padding-right:  0 }
	.s-py0 { padding-top: 0;  padding-bottom: 0 }

	.s-p1  { padding:        .5rem }
	.s-pt1 { padding-top:    .5rem }
	.s-pr1 { padding-right:  .5rem }
	.s-pb1 { padding-bottom: .5rem }
	.s-pl1 { padding-left:   .5rem }
	.s-py1 { padding-top:    .5rem; padding-bottom: .5rem }
	.s-px1 { padding-left:   .5rem; padding-right:  .5rem }

	.s-p2  { padding:        1rem }
	.s-pt2 { padding-top:    1rem }
	.s-pr2 { padding-right:  1rem }
	.s-pb2 { padding-bottom: 1rem }
	.s-pl2 { padding-left:   1rem }
	.s-py2 { padding-top:    1rem; padding-bottom: 1rem }
	.s-px2 { padding-left:   1rem; padding-right:  1rem }

	.s-p3  { padding:        2rem }
	.s-pt3 { padding-top:    2rem }
	.s-pr3 { padding-right:  2rem }
	.s-pb3 { padding-bottom: 2rem }
	.s-pl3 { padding-left:   2rem }
	.s-py3 { padding-top:    2rem; padding-bottom: 2rem }
	.s-px3 { padding-left:   2rem; padding-right:  2rem }

	.s-p4  { padding:        4rem }
	.s-pt4 { padding-top:    4rem }
	.s-pr4 { padding-right:  4rem }
	.s-pb4 { padding-bottom: 4rem }
	.s-pl4 { padding-left:   4rem }
	.s-py4 { padding-top:    4rem; padding-bottom: 4rem }
	.s-px4 { padding-left:   4rem; padding-right:  4rem }

	/* margin */

	.s-m0  { margin:        0 }
	.s-mt0 { margin-top:    0 }
	.s-mr0 { margin-right:  0 }
	.s-mb0 { margin-bottom: 0 }
	.s-ml0 { margin-left:   0 }
	.s-mx0 { margin-left:   0; margin-right:  0 }
	.s-my0 { margin-top:    0; margin-bottom: 0 }

	.s-m1  { margin:        .5rem }
	.s-mt1 { margin-top:    .5rem }
	.s-mr1 { margin-right:  .5rem }
	.s-mb1 { margin-bottom: .5rem }
	.s-ml1 { margin-left:   .5rem }
	.s-mx1 { margin-left:   .5rem; margin-right:  .5rem }
	.s-my1 { margin-top:    .5rem; margin-bottom: .5rem }

	.s-m2  { margin:        1rem }
	.s-mt2 { margin-top:    1rem }
	.s-mr2 { margin-right:  1rem }
	.s-mb2 { margin-bottom: 1rem }
	.s-ml2 { margin-left:   1rem }
	.s-mx2 { margin-left:   1rem; margin-right:  1rem }
	.s-my2 { margin-top:    1rem; margin-bottom: 1rem }

	.s-m3  { margin:        2rem }
	.s-mt3 { margin-top:    2rem }
	.s-mr3 { margin-right:  2rem }
	.s-mb3 { margin-bottom: 2rem }
	.s-ml3 { margin-left:   2rem }
	.s-mx3 { margin-left:   2rem; margin-right:  2rem }
	.s-my3 { margin-top:    2rem; margin-bottom: 2rem }

	.s-m4  { margin:        4rem }
	.s-mt4 { margin-top:    4rem }
	.s-mr4 { margin-right:  4rem }
	.s-mb4 { margin-bottom: 4rem }
	.s-ml4 { margin-left:   4rem }
	.s-mx4 { margin-left:   4rem; margin-right:  4rem }
	.s-my4 { margin-top:    4rem; margin-bottom: 4rem }

	.s-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
	.s-mxn2 { margin-left: -1rem; margin-right: -1rem; }
	.s-mxn3 { margin-left: -2rem; margin-right: -2rem; }
	.s-mxn4 { margin-left: -4rem; margin-right: -4rem; }

	.s-ml-auto { margin-left: auto }
	.s-mr-auto { margin-right: auto }
	.s-mx-auto { margin-left: auto; margin-right: auto; }

	.s-mb1em { margin-bottom: 1em; }
	.s-ml1em { margin-left: 1em; }
	.s-mr1em { margin-right: 1em; }
	.s-mt1em { margin-top: 1em; }

	.s-h100prc		{height: 100%;}
	.s-mh100prc		{min-height: 100%;}

	.s-tac,	.s-center	{text-align: center;}
	.s-tar			{text-align: right;}
	.s-tal 			{text-align: left;}

	.s-vat			{vertical-align: top;}
	.s-vac 			{vertical-align: middle;}
	.s-vab			{vertical-align: bottom;}

	.s-relative 		{position: relative;}
	.s-absolute 		{position: absolute;}

	.s-block			{display: block}
	.s-inline-block,	.s-inline_block
					{display: inline-block;}
	.s-inline			{display: inline;}

	.s-pointer 		{cursor: pointer;}

	.s-clear_all 		{clear: both; float: none;}

	.s-nowrap			{white-space: nowrap;}
	.s-border 		{border: 1px solid rgba(0, 0, 0, 0.2);}
	.s-bb 			{border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
	.s-noborder 		{border: 0 !important;}

	.s-left 			{float: left;}
	.s-right 			{float: right;}
	.s-clear			{clear:both; float: none;}

	.s-disp_none,	.s-hidden		{display: none;}

	.s-z-1 			{z-index: 1;}
	.s-z-2 			{z-index: 2;}
	.s-z-3 			{z-index: 3;}
	.s-z-4 			{z-index: 4;}
	.s-z-5 			{z-index: 5;}
	.s-z-6 			{z-index: 6;}
	.s-z-7 			{z-index: 7;}
	.s-z-8 			{z-index: 8;}
	.s-z-9 			{z-index: 9;}
	.s-z-10			{z-index: 10;}

	.s-uc 			{text-transform: uppercase; letter-spacing: 0.05em;}

	.s-overflow-hidden{overflow: hidden;}
	.s-ofhidden 		{overflow: hidden;}
	.s-tr 			{display: table-row;}
	.s-td 			{display: table-cell;}
	.s-table 			{display: table;}
}

@media (max-width : 420px) {
	
	body {
		font-size: 13px;
	}

	.x-visible {display: block !important;}
	
	.x-w10prc 		{width: 10%;}
	.x-w15prc 		{width: 15%;}
	.x-w20prc 		{width: 20%;}
	.x-w25prc 		{width: 25%;}
	.x-w30prc 		{width: 30%;}
	.x-w40prc 		{width: 40%;}
	.x-w50prc 		{width: 50%;}
	.x-w60prc 		{width: 60%;}
	.x-w70prc 		{width: 70%;}
	.x-w75prc 		{width: 75%;}
	.x-w80prc 		{width: 80%;}
	.x-w85prc 		{width: 85%;}
	.x-w90prc 		{width: 90%;}
	.x-w100prc 		{width: 100%;}


	.x-w180 			{width: 180px;}
	.x-w150 			{width: 150px;}
	.x-w360 			{width: 360px;}

	.x-c05x			{width: calc(0.5/12 * 100%);}
	.x-c1x			{width: calc(1/12 * 100%);}
	.x-c2x			{width: calc(2/12 * 100%);}
	.x-c3x			{width: calc(3/12 * 100%);}
	.x-c4x			{width: calc(4/12 * 100%);}
	.x-c5x			{width: calc(5/12 * 100%);}
	.x-c6x			{width: calc(6/12 * 100%);}
	.x-c7x			{width: calc(7/12 * 100%);}
	.x-c8x			{width: calc(8/12 * 100%);}
	.x-c9x			{width: calc(9/12 * 100%);}
	.x-c10x			{width: calc(10/12 * 100%);}
	.x-c11x			{width: calc(11/12 * 100%);}
	.x-c12x			{width: 100%;}




	/* padding */

	.x-p0  { padding: 0 }
	.x-pt0 { padding-top: 0 }
	.x-pr0 { padding-right: 0 }
	.x-pb0 { padding-bottom: 0 }
	.x-pl0 { padding-left: 0 }
	.x-px0 { padding-left: 0; padding-right:  0 }
	.x-py0 { padding-top: 0;  padding-bottom: 0 }

	.x-p1  { padding:        .5rem }
	.x-pt1 { padding-top:    .5rem }
	.x-pr1 { padding-right:  .5rem }
	.x-pb1 { padding-bottom: .5rem }
	.x-pl1 { padding-left:   .5rem }
	.x-py1 { padding-top:    .5rem; padding-bottom: .5rem }
	.x-px1 { padding-left:   .5rem; padding-right:  .5rem }

	.x-p2  { padding:        1rem }
	.x-pt2 { padding-top:    1rem }
	.x-pr2 { padding-right:  1rem }
	.x-pb2 { padding-bottom: 1rem }
	.x-pl2 { padding-left:   1rem }
	.x-py2 { padding-top:    1rem; padding-bottom: 1rem }
	.x-px2 { padding-left:   1rem; padding-right:  1rem }

	.x-p3  { padding:        2rem }
	.x-pt3 { padding-top:    2rem }
	.x-pr3 { padding-right:  2rem }
	.x-pb3 { padding-bottom: 2rem }
	.x-pl3 { padding-left:   2rem }
	.x-py3 { padding-top:    2rem; padding-bottom: 2rem }
	.x-px3 { padding-left:   2rem; padding-right:  2rem }

	.x-p4  { padding:        4rem }
	.x-pt4 { padding-top:    4rem }
	.x-pr4 { padding-right:  4rem }
	.x-pb4 { padding-bottom: 4rem }
	.x-pl4 { padding-left:   4rem }
	.x-py4 { padding-top:    4rem; padding-bottom: 4rem }
	.x-px4 { padding-left:   4rem; padding-right:  4rem }

	/* margin */

	.x-m0  { margin:        0 }
	.x-mt0 { margin-top:    0 }
	.x-mr0 { margin-right:  0 }
	.x-mb0 { margin-bottom: 0 }
	.x-ml0 { margin-left:   0 }
	.x-mx0 { margin-left:   0; margin-right:  0 }
	.x-my0 { margin-top:    0; margin-bottom: 0 }

	.x-m1  { margin:        .5rem }
	.x-mt1 { margin-top:    .5rem }
	.x-mr1 { margin-right:  .5rem }
	.x-mb1 { margin-bottom: .5rem }
	.x-ml1 { margin-left:   .5rem }
	.x-mx1 { margin-left:   .5rem; margin-right:  .5rem }
	.x-my1 { margin-top:    .5rem; margin-bottom: .5rem }

	.x-m2  { margin:        1rem }
	.x-mt2 { margin-top:    1rem }
	.x-mr2 { margin-right:  1rem }
	.x-mb2 { margin-bottom: 1rem }
	.x-ml2 { margin-left:   1rem }
	.x-mx2 { margin-left:   1rem; margin-right:  1rem }
	.x-my2 { margin-top:    1rem; margin-bottom: 1rem }

	.x-m3  { margin:        2rem }
	.x-mt3 { margin-top:    2rem }
	.x-mr3 { margin-right:  2rem }
	.x-mb3 { margin-bottom: 2rem }
	.x-ml3 { margin-left:   2rem }
	.x-mx3 { margin-left:   2rem; margin-right:  2rem }
	.x-my3 { margin-top:    2rem; margin-bottom: 2rem }

	.x-m4  { margin:        4rem }
	.x-mt4 { margin-top:    4rem }
	.x-mr4 { margin-right:  4rem }
	.x-mb4 { margin-bottom: 4rem }
	.x-ml4 { margin-left:   4rem }
	.x-mx4 { margin-left:   4rem; margin-right:  4rem }
	.x-my4 { margin-top:    4rem; margin-bottom: 4rem }

	.x-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
	.x-mxn2 { margin-left: -1rem; margin-right: -1rem; }
	.x-mxn3 { margin-left: -2rem; margin-right: -2rem; }
	.x-mxn4 { margin-left: -4rem; margin-right: -4rem; }

	.x-ml-auto { margin-left: auto }
	.x-mr-auto { margin-right: auto }
	.x-mx-auto { margin-left: auto; margin-right: auto; }

	.x-mb1em { margin-bottom: 1em; }
	.x-ml1em { margin-left: 1em; }
	.x-mr1em { margin-right: 1em; }
	.x-mt1em { margin-top: 1em; }

	.x-h100prc		{height: 100%;}
	.x-mh100prc		{min-height: 100%;}

	.x-tac,	.x-center	{text-align: center;}
	.x-tar			{text-align: right;}
	.x-tal 			{text-align: left;}

	.x-vat			{vertical-align: top;}
	.x-vac 			{vertical-align: middle;}
	.x-vab			{vertical-align: bottom;}

	.x-relative 		{position: relative;}
	.x-absolute 		{position: absolute;}

	.x-block			{display: block}
	.x-inline-block,	.x-inline_block
					{display: inline-block;}
	.x-inline			{display: inline;}

	.x-pointer 		{cursor: pointer;}

	.x-clear_all 		{clear: both; float: none;}

	.x-nowrap			{white-space: nowrap;}
	.x-border 		{border: 1px solid rgba(0, 0, 0, 0.2);}
	.x-bb 			{border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
	.x-noborder 		{border: 0 !important;}

	.x-left 			{float: left;}
	.x-right 			{float: right;}
	.x-clear			{clear:both; float: none;}

	.x-disp_none,	.x-hidden		{display: none;}

	.x-z-1 			{z-index: 1;}
	.x-z-2 			{z-index: 2;}
	.x-z-3 			{z-index: 3;}
	.x-z-4 			{z-index: 4;}
	.x-z-5 			{z-index: 5;}
	.x-z-6 			{z-index: 6;}
	.x-z-7 			{z-index: 7;}
	.x-z-8 			{z-index: 8;}
	.x-z-9 			{z-index: 9;}
	.x-z-10			{z-index: 10;}

	.x-uc 			{text-transform: uppercase; letter-spacing: 0.05em;}

	.x-overflow-hidden{overflow: hidden;}
	.x-ofhidden 		{overflow: hidden;}
	.x-tr 			{display: table-row;}
	.x-td 			{display: table-cell;}
	.x-table 			{display: table;}
	
}