@media screen and (max-width: 800px) 
{

	header
	{
		height: 65px;
		position: fixed;
		top:  0;
		left: 0;
		z-index: 50;
	}

	header nav
	{
		width: 300px;
		border: 0px solid red;
		z-index: 60;
		position: relative;
	}

	header nav a#logo
	{
		font-size: 19px;
		line-height: 65px;
	}

	header nav ul
	{
		display: none;
	}

	/*- -------- МОБИЛЬНОЕ МЕНЮ ---------*/

	.hamburger
	{
	    display: block;
	    position: absolute;
	    overflow: hidden;
	    margin: 0;
	    padding: 0;
	    top: 22px;
	    right: 0px;
	    width: 30px;
	    height: 20px;
	    font-size: 0;
	    text-indent: -9999px;
	    appearance: none;
	    box-shadow: none;
	    border-radius: none;
	    border: none;
	    cursor: pointer;
	    transition: background 0.3s;
	    background: none;
	}

	.hamburger:focus
	{
	    outline: none;
	}

	.hamburger span 
	{
	  display: block;
	  position: absolute;
	  top: 9px;
	  left: 0px;
	  height: 2px;
	  width: 100%;

	  border-radius: 3px;
	  background: #FFFFFF;
	}

	.hamburger span::before,
	.hamburger span::after 
	{
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #FFFFFF;
	  content: "";

	  border-radius: 3px;
	}


	.hamburger span::before {
	  top: -9px;
	}
	 
	.hamburger span::after {
	  bottom: -9px;
	}

	.htx span 
	{
	  transition: background 0s 0.3s;
	}
	 
	.htx span::before,
	.htx span::after 
	{
	  transition-duration: 0.3s, 0.3s;
	  transition-delay: 0.3s, 0s;
	}
	 
	.htx span::before {
	  transition-property: top, transform;
	}
	 
	.htx span::after 
	{
	  transition-property: bottom, transform;
	}
	 
	/* состояние active при открытом меню  */
	.htx.is-active 
	{
	  background-color: none;
	}
	 
	.htx.is-active span 
	{
	  background: none;
	}
	 
	.htx.is-active span::before 
	{
	  top: 0;
	  transform: rotate(45deg);
	}
	 
	.htx.is-active span::after 
	{
	  bottom: 0;
	  transform: rotate(-45deg);
	}
	 
	.htx.is-active span::before,
	.htx.is-active span::after 
	{
	  transition-delay: 0s, 0.3s;
	}

	ul#mobileMenu
	{
		border: 0px solid red;
		display: none;
		position: absolute;
		z-index: 100;
		top: 50%;
		left: 0;
		width: 100%;
		margin-top: -100px;
	}

	ul#mobileMenu li 
	{
		border: 0px solid green;
	}
	
	ul#mobileMenu li a 
	{
		border: 0px solid blue;
		display: block;
		width: 100%;
		height: 40px;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		line-height: 40px;
	}

	ul#mobileMenu li a:hover, ul#mobileMenu li a#current
	{
		color: #f7ac53;
	}

	/*- ---------------------------------*/
	
	main
	{
		width: 300px;
		border: 0px solid green;
	}

	#personalMenu
	{
		display: none;
	}

	main #content
	{
		width: 300px;
		float: none;
		padding: 0;
		border-left: 0;
		border-right: 0px solid #343434;
		border-bottom: 0px solid #343434;
	}

	h1#pageTitle
	{
		font-size: 25px;
		margin-top: 75px;
	}

	#statistics
	{
		height: 55px;
	}

	#statistics .icon.dice, #statistics .descript.dice
	{
		display: none;
	}  

	#statistics .lock
	{
		width: 55px;
		background-image: url('/images/icon/lock32.png');
	}

	#statistics .card
	{
		width: 55px;
		background-image: url('/images/icon/card32.png');
	}

	#statistics .descript .count
	{
		margin-top: 5px;
		margin-left: 7px;
		font-size:  22px;
	}

	#statistics .descript .text
	{
		margin-top: 3px;
		margin-left: 7px;
		font-size: 12px;
	}

	/*--------- NO GAME ---------*/

	.content.noGame
	{
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.content.noGame img 
	{
		width: 125px;
	}

	#noGameDescript
	{
		font-size: 14px;
	}

	a#createButton
	{
		width: 200px;
		height: 50px;
		line-height: 50px;
	}

	/*--------------------------*/

	/*--------- RULES ---------*/

	#rulesPlace h2.dice
	{
		background: url('/images/icon/dice32.png') no-repeat 0 center;
	}

	#rulesPlace h2.card
	{
		background: url('/images/icon/card32.png') no-repeat 0 center;
	}

	#rulesPlace h2
	{
		font-size: 18px;
		text-indent: 43px;
	}

	#rulesPlace p
	{
		font-size: 14px;
		text-align: justify;
	}

	#rulesPlace b, #rulesPlace span 
	{
		font-size: 14px;
	}

	/*--------------------------*/

	/*--------- ВЫХОД ---------*/
	#logoutForm
	{
		width: 300px;
		height: 190px;
		margin-top: -95px;
		margin-left: -150px;
	}

	#logoutForm #form
	{
		width: 300px;
		height: 190px;
		margin-top: 50px;
	}

	#logoutForm #form p
	{
		font-size: 13px;
		text-align: left;
		margin-left: 10px;
	}

	#logoutForm #userCode
	{
		font-size: 20px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	#logoutForm #form input[type="submit"]
	{
		width: 130px;
		height: 35px;
		font-size: 14px;
	}

	/*--------------------------*/

	/*--------- GAME AREA ---------*/

	.smallCard
	{
		width: 90px;
		height: 132px;
		margin-left: 0;
		margin-right: 0;
		padding: 2px;
		border-radius: 5px;
	}

	.bigCard
	{
		width: 194px;
		height: 288px;
		margin-top: -125px;
		margin-left: -105px;
	}

	.shirt h1
	{
		padding-top: 22px;
		font-size: 26px;
	}

	.shirt.freezenCard h1
	{
		font-size: 20px;
	}

	.shirt.redCard #logo, .shirt.greenCard #logo, .shirt.yellowCard #logo, .shirt.DoubleUPCard #logo, .shirt.resetCard #logo, .shirt.freezenCard #logo
	{
		background-size:  contain;
		width: 85px;
		height: 101px;
		margin-top:  -75px;
		margin-left:  -45px;
	}

	.shirt p
	{
		width: 194px;
		bottom: 70px;
		font-size:  15px;
		margin: 0 auto;
		left: auto;
	}

	.shirt a
	{
		width: 80px;
		height: 35px;
		line-height: 35px;
		margin-left: -40px;
		bottom: 20px;
	}

	/* ------------------------ HISTORY -----------------  */

	#number_of_card
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}


	#number_of_card > .card
	{
		border: 0px solid red;
	}

	#number_of_card > .card > .count
	{
		height: 85px;
		width: 85px;
		border: 0px solid green;
	}

	#number_of_card > .card > .title
	{
		border: 0px solid blue;
		font-size: 13px;
	}

	.easypiechart .percent
	{
		width: 85px;
		height: 85px;
		line-height: 77px;
	}


	.easypiechart-panel 
	{
		height: 85px;
	}

	.easypiechart
	{
		width: 85px;
		height: 85px;
	}

	#historyPlace .messageBlock .avatar, #historyPlace .messageBlock.right .avatar, #historyPlace .messageBlock .avatar.slave, #historyPlace .messageBlock.right .avatar.slave
	{
		display: none;
	}

	#historyPlace .messageBlock .messages
	{
		width: auto;
	}

	#historyPlace .messageBlock .message .text
	{
		font-size: 14px;
	}

	/*--------- TIMER ---------*/

	.timerPage #logo
	{
		width: 150px;
		height: 150px;
	}

	.timer__items
	{
		font-size: 35px;
	}

	.timer__item
	{
		min-width: auto;
	}

	#script_block #grid .column, #script_block #grid .column.casino 
	{
		width: auto;
		border-right: 0;
		display: block;
	}

	#logoutForm.ratingResult
	{
	    width: 300px;
	    height: 190px;
	    margin-top: -95px;
	    margin-left: -150px;
	}

	#logoutForm.ratingResult #form
	{
		width: 300px;
		height: 170px;
		margin-top: 0;
	}

	#logoutForm.ratingResult #form p
	{
		margin-left: 0;
		text-align: center;
	}

	#ratingBlock .star
	{
	    border: 0px solid green;
	    width: 35px;
	    height: 33px;
	    cursor: pointer;
	    background: url('/images/icon/ratingstar_mob.png');
	    background-position: 0 0;
	    display: inline-block;
	    margin-left: 5px;
	    margin-right: 5px;
	}

	.tagsTitle
	{
		font-size: 18px;
	}

	.article_count
	{
		font-size: 13px;
	}

	.smallCard#article .views
	{
		right: 0px;
	}

	.image_404 
	{
		width: 170px;
		height: 170px;
		margin-top: 80px;
	}

	.text_404
	{
		font-size: 18px;
	}

	.download_contract
	{
		/*margin-left: 15px;*/
	}

	#profilePlace h2
	{
		font-size: 18px;
		text-indent: 43px;
	}

	#profilePlace h2.photocard
	{
		background: url('/images/icon/photocard_32.png') no-repeat 0 center;
		border: 0px solid red;
	}

	#profilePlace h2.user
	{
		background: url('/images/icon/user32.png') no-repeat 0 center;
		border: 0px solid red;
	}

	#profilePlace h2.chastity
	{
		background: url('/images/icon/chastity32.png') no-repeat 0 center;
		border: 0px solid red;
	}

	#profilePlace h2.gag
	{
		background: url('/images/icon/gag32.png') no-repeat 0 center;
		font-size: 16px;
		border: 0px solid red;
	}

	#profilePlace h2.dice
	{
		background: url('/images/icon/dice32.png') no-repeat 0 center;
		border: 0px solid red;
	}

	#profilePlace h2.setting
	{
		background: url('/images/icon/setting32.png') no-repeat 0 center;
		border: 0px solid red;
	}

	.notebookPreview > .message
	{
		font-size: 14px;
	}

	.profileAvatarBox
	{
		display: none;
	}

	.profileAvatarBoxMobile
	{
		display: block;
	}

	.profileCell.r.ava, .profileCell.l.ava
	{
		border: 0px solid red;
		width: 100%;
		display: block;
		position: relative;
		height: auto;
	}

	.profileCell.r.ava
	{
		text-align: center;
		margin-top: 10px;
		font-size: 13px;
	}

	.avatar_change
	{
		display: block;
		margin: 10px auto;
	}

	.smallCard#user, .smallCard2#user
	{
		margin: 12px auto;
	}

	#avatarsList
	{
		z-index: 49;
	}

}