body
{
	background-color: #000000;
	color: white;
}

.noselect
{
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.image_container
{
	/*
		wymiary obrazkow wyswietlanych na stronie	
	*/
	
	height: 180px;
	
	background-color: black;
	display: inline-block;
	margin-left: 10px;
	margin-top: 10px;
}

#title
{
	width: 100%;
	height: 70px;
	font-size: 50px;
	text-align: center;
}

#subtitle
{
	width: 100%;
	height: 40px;
	text-align: center;
	font-size: 25px;
}

#gallery_container
{
	width: 80%;
	margin: 20px auto 0 auto;
	min-width: 500px;
	text-align: center;
}


#image_container
{
	/*
		wymiary obrazka podczas powiekszenia	
	*/
	width: calc(100% - 100px);
	height: calc(100vh - 40px);
	margin: 20px auto 0 auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}


#view_image
{
	position: fixed;
		top: 0px;
		left: 0px;
	width: 100%;
	height: 100%;
	background-color: black;
}

#image_info
{
	width: 100%;
	height: 75px;
	position: absolute;
		top: calc(100vh - 80px);
		left: 20px;
	font-size: 17px;
	font-weight: bold;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

#image_info h1
{
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
	float: left;
	font-size: 30px;
}

#image_info div
{
	height: 35px;
	float: left;
}

#image_container video
{
	height: calc(100% - 80px);
	vertical-align: middle;
	outline: none;
}

.image_container img, .image_container video
{
	height: 100%;
	opacity: 0.6;
	transition-duration: 0.5s;
}

.image_container img:hover,  .image_container video:hover
{
	cursor: pointer;
	opacity: 1;
}

#close
{
	color: gray;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 50px;
	position: absolute;
		top: 10px;
		right: 10px;
		font-weight: bold;
}

#close:hover
{
	color: red;
	cursor: pointer;
}
#prev_image:hover, #next_image:hover
{
	color: lightgray;
	cursor: pointer;
}


#prev_image
{
	color: gray;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 50px;
	position: absolute;
		top: calc(50% - 20px);
		left: 20px;
}

#next_image
{
	color: gray;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 50px;
	position: absolute;
		top: calc(50% - 20px);
		right: 20px;
}


.video_container::after
{
	position:relative;
		top: -30%;
		left: -50%;
    content: '\25BA';
	width: 100px;
	height: 100px;
	display: inline-block;
    font-size: 100px;
    color: #fff;
    opacity: 0.5;
	pointer-events:none;
}