/* === SCROLLBAR =====> SCROLLBAR <===== SCROLLBAR === */

/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #000000; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b1391f;
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #8d240d; 
}

/* === ANIMATION =====> ANIMATION <===== ANIMATION ===*/

@-webkit-keyframes margines {
	0% {margin-left: 0; opacity: 0;}
	1% {opacity: 1;}
    100% {margin-left: 12px;}
}

body{
		background-color: black;
}

div{	
	position:relative;
	text-align: center;}

/* === ID's CSS =====> ID's CSS <===== ID's CSS ===*/

#RMenu{
	position: absolute;

	margin: auto;
	right:0;
	top: 0;
	bottom: 0;

	height: 80%;
	overflow: auto;
	max-width: 7%;

	z-index: 10;
}

#RMenu img{
  max-width: 90%;
  max-height: 90%;
  height: auto;
}

#LMenu{
	position: fixed;
	left: 0;
	padding-top: 1.5rem;
	list-style-image: url('https://www.iwanski.com.pl/public/photo/li.jpg');

	z-index: 1;
}

#stage{
	position: fixed;
	left: 0;
	right: 0;
	top: auto;
	bottom: auto;
	height: 100%;

	padding: 0.5rem;
	text-align: center;
}

#main_img{
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	max-width: 70%;
	max-height: 90%;
	height: auto; 
}

/* === Classes CSS =====> Classes CSS <===== Classes CSS === */
.photo_list{
  margin-top: 0.8rem;
}

.category{
	text-align: left;
	color: grey;

	margin-top: 1px;

	font-family: Arial;
	font-size: 115%;
	line-height: normal;
	font-style: normal;
	font-weight: 500;

	cursor: pointer;
}

.main_category{
	color: #b1391f;
	font-weight: 600;
}

.current_category{
	text-align: left;
	color: grey;

	-webkit-animation-name: margines;
	animation-name: margines;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;

    margin-left: 12%;
	margin-top: 1px;


	font-family: Arial;
	font-size: 115%;
	line-height: normal;
	font-style: normal;
	font-weight: 500;

	cursor: pointer;

	color: #8d240d;
	list-style-image: url('https://www.iwanski.com.pl/public/photo/li2.jpg');
}


/* === MOBILE =====> MOBILE <===== MOBILE === ECECEC */

@media (pointer:coarse) {
	body{
		background-color: #ececec;
	}

	#LMenu{
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;

		top: 0;
		right: 0;
		left: 0;

		padding-top: 0;
		/*padding-bottom: 8rem;*/

		/*max-height: 8%;*/
		max-width: 100%;

		z-index: 11;
	}

	#LMenu ul{
  		padding: 0;
 		overflow: auto;
	}

	#LMenu li{
		display: block;
		padding-right: 2rem;
		padding-left: 2rem;
	}

	#titleUL{
		display: none;
	}

	/* */

	#menu_icon{
	    position: absolute;
	    top: 30px;
	    left: 2%;
	}

	#cancel_icon{
	    position: absolute;
	    top: 30px;
	    right: 2%;
	}

	#stage{
		display: none;
	}

	#RMenu{
		position: relative;

		max-width: 100%;
		padding-top: 12%;
		right:0;
		left:0;
		bottom: 0;

		overflow: hidden;
		z-index: 10;
	}

	#RMenu img{
		padding-bottom: 10%;
		max-height: 20%;
	}

	.photo_list{
		top: 0;
		bottom: 0;
	}


	/* */

	.category{
		text-align: center;
		font-size: 8.2rem;
		margin-top: 0;
	}

	.current_category{
		color: white;

		text-align: center;
		font-size: 8.2rem;

		-webkit-animation-name: margines;
	    -webkit-animation-duration: 0s;
	    margin-left: 0;

		display: block;
	}

	.main_category{
		padding-top: 1px;
	}
}