BODY {
	background-attachment: fixed; 
	color: rgb(37,0,120); 
	font-size: 18px; 
	font-family: 'Times New Roman', 'Courier New';
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;}

/* nagłówek */
header {background-repeat: repeat;  background-position: center; 
	width:100%; height: 180px; bottom: 0px; left: 30px; margin: 0px; z-index: 1;}
header h1 {color: blue; position: relative; margin: 0px; top: 35px;
	font-size: 35px; 
	text-align: center; text-shadow: 7px 7px 3px black; z-index: 1;}
	
@keyframes header1_start { 
	0% {top: 0px;}
	50% {top: 0px;}
	100% {top: -180px;}
	}
	
header1 { background-image: url("/obrazy/header.jpg"); background-repeat: repeat;  background-position: center; 
	position: fixed; width:100%; height: 180px; top: -180px; left: 30px; margin: 0px; padding 0px;
	transform-origin: 50% 0;transition: 3s; z-index: 2;
	animation-name: header1_start; animation-duration: 6s; animation-delay: 0s; animation-iteration-count: 1;}
	
@keyframes header1_lapka_start { 
	0% {opacity: 0.1;}
	50% {opacity: 0.1;}
	100% {opacity: 1;}
	}
	
#header1_lapka {position: absolute; height: 20px; width: 18%; left: 41%; bottom: -25px; padding-top: 3px;
	background-image: url("/obrazy/header2.jpg");
	border-bottom:double; border-left:double; border-right:double;
	border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
	font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px;  /*font-size: 2vw; */
	letter-spacing: 5px; text-align: center;
	transition: 2s;
	animation-name: header1_lapka_start; animation-duration: 6s; animation-delay: 0s; animation-iteration-count: 1;}
 	
@keyframes header1_h1_start { 
	0% {top: 35px; font-size: 35px; text-shadow: 7px 7px 3px black;}
	50% {top: 35px; font-size: 35px; text-shadow: 7px 7px 3px black;}
	100% {top: -15px; font-size: 15px; text-shadow: 7px 7px 3px black;}
	}
	
header1 h1 {color: blue; position: relative; margin: 0px; font-size: 15px; top: -15px ;
			text-align: center; text-shadow: 0px 0px 0px black; transition: 2s; z-index: 2;
			animation-name: header1_h1_start; animation-duration: 6s; animation-delay: 0s; animation-iteration-count: 1;}
header1 h1#tyt_strony {color: blue; position: relative; margin: 0px; font-size: 15px; top: -15px ; 
			text-align: center; text-shadow: 0px 0px 0px black; transition: 2s; z-index: 2;}
header1:hover {height: 180px; top: 0px; bottom: 0px; transition: 2s; }
header1:hover h1 {font-size: 35px; top: 35px; text-shadow: 7px 7px 3px black; transition: 2s;}
header1:hover h1#tyt_strony {font-size: 35px; top: 35px; text-shadow: 7px 7px 3px black; transition: 2s;}
header1:hover div#header1_lapka {opacity: 0.1; }

#wedrowniczek { position:fixed; left: -200px; top: 0%; font-size:15px; color: black;
		height: 58px; width:170px;
		background-color: rgba(255,255,255,0.3);
		animation-name:wedrowniczek; 
		animation-duration: 20s;
		animation-timing-function: cubic-bezier(1,1,0.5,0.75);
		animation-delay: 90s;
		animation-iteration-count:1;
		
}


@keyframes wedrowniczek
{
   0% { left: -200px; top: 0%; opacity: 1;}
  55% { left: 50%; top: 65%;}
  75% { left: 80%; top: 65%; opacity: 1;}
  98% { left: 90%; top: 50%; opacity: 0; }
  100% { left: -200px; top: 0%;opacity: 0;}
}


/* Meni */
@keyframes anim_tlo_men { 
	0% {background-position:0 0}
	25% {background-position: -1200px -200px;}
	50% {background-position: 0 -500px;}
	75% {background-position: -1200px -500px;}
	100%  {background-position: 0 0;}
	}
@-webkit-keyframes anim_tlo_men {
	0% {background-position:0 0}
	25% {background-position: 100% 33%;}
	50% {background-position: 0% 66%;}
	75% {background-position: 100% 100%;}
	100%  {background-position: 0 0;}
	}
	
@keyframes anim_tlo_men_start { 
	0% {background-position:0 0}
	100% {background-position: -300px -200px;}
	}
@-webkit-keyframes anim_tlo_men_start {
	0% {background-position:0 0}
	100% {background-position: 25% 33%;}
	}
	
@keyframes meni_start {	
	0% {left:0px}
	60% {left: 0px}
	100% {left: -170px}
}

#meni {position: fixed; left:-170px; top:0px; height:100%; width:200px; 
		border-right: double;
		transition: 2s; z-index: 2;
		animation-name: meni_start; animation-delay: 0s; animation-iteration-count: 1;
		animation-duration: 1.5s;
			}
	#meni:hover {left: 0px; }
	
#meni_tlo {position: absolute; height: 100%; width: 100%;
	background-image: url("/obrazy/meni_tlo2.jpg"); background-repeat: repeat;
	animation-name:anim_tlo_men_start; animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 10s;
	}

#meni:hover #meni_tlo	{animation:anim_tlo_men 160s linear infinite;}
	
#meni_tyt {position: absolute; z-index: 1; right: 0px; width: 30px; height: 100%; background-image: url("/obrazy/meni_tlo1.jpg"); transition: 2s;}
	#meni:hover div.meni_tyt {background: red; opacity: 0;}

#meni_li {position: absolute; height: calc(100% - 130px); width: 100%; top: 130px;
			overflow-y: auto;}

@keyframes meni_tyt_txt_start {
	0% {transform: rotate( 0deg);  top:97px; right: 85px; font-size:35px; color: yellow; letter-spacing: normal; font-weight: normal;}
	60% {transform: rotate( 0deg);  top:97px; right: 85px; font-size:35px; color: yellow; letter-spacing: normal; font-weight: normal;}
	100% {transform: rotate(-90deg); top: 40%; right: -22px; color: blue; letter-spacing: 10px; font-weight: bold;}
}
	
p.meni_tyt_txt {position: absolute; margin: 0px;  font-family:Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 10px;
					transform: rotate(-90deg); color: blue;
					text-align: center; top: 40%; right: -22px; transition: 2s;
					text-shadow: 2px 2px 3px black; padding:0px;
					animation-name: meni_tyt_txt_start; animation-delay: 0s; animation-iteration-count: 1;
					animation-duration: 1.5s;
					z-index: 1;
					}
	#meni:hover p.meni_tyt_txt {transform: rotate( 0deg);  top:97px; right: 85px; font-size:35px; color: yellow; 
								letter-spacing: normal; font-weight: normal; transition: 3s;}

@keyframes meni_img_start {	
	0% {width: 85%}
	60% {width: 85%}
	100% {width: 1%}
}

#meni_img {position: absolute; margin: 0px; right: 30px; width: 1%; border-bottom: double; transition: 2s;
			animation-name: meni_img_start; animation-delay: 0s; animation-iteration-count: 1;
			animation-duration: 1.5s;
			}
	#meni:hover #meni_img {width: 85%; }

a.meni {color: yellow;
		display: block;
		text-decoration: none;}

ul.men {position: absolute; width: 160px;left: 5px; padding: 0;
	list-style: none;
	}
	
li.menu {border-style: double; border-radius: 8px;
		text-align: center;
		background: radial-gradient(#1e671c, #200f61, #7e889c); 
		margin-bottom: 4px;
		transition: 3s;}
		
li.menu:hover {
		background: radial-gradient(#232d4242,#200f617a, #1e671c);
		}
	
/* Strona */
.STRONA { 
	color: rgb(37,0,120); 
	font-size: 18px;
	font-size: 1.2vw;
	font-family: 'Times New Roman', 'Courier New';
	margin-top: 10px;
	margin-left: 35px;
	margin-right: 10px;
	margin-bottom: 10px;}
	
@media (min-resolution: 150dpi), (min-width: 1600px) {
	.STRONA { 
		font-size: 20px;
		max-width: 1600px;
	}
}
	
	
}
	
h2 {
	font-size: 17px;
	font-size: 1.1vw;
	font-family: 'Times New Roman', 'Courier New';
	}
h1 {
	font-size: 19px;
	font-size: 1.4vw;
	font-family: 'Times New Roman', 'Courier New';
	}
h1.Trasa {
	font-size: 13px;
	font-size: 1.0vw;
	font-family: 'Times New Roman', 'Courier New';
	}
	
@media (min-resolution: 150dpi), (max-width: 900px)  {
	.strona {
		font-size: 18px;
		/* font-size: 2.36vw; */
		}
	h2 {
		font-size: 18px;
		/* font-size: 2.36vw; */
		}
	h1 {
		font-size: 20px;
		/* font-size: 2.36vw; */
		}
	h1.Trasa {
		font-size: 18px;
		/* font-size: 2.36vw; */
		}
		
		@keyframes header1_h1_start { 
			0% {top: 25px; font-size: 25px; 
				/* font-size: 4.5vw; */
				}
			50% {top: 25px; font-size: 25px; 
				font-size: 4.5vw;
				}
			100% {top: -15px; font-size: 5px;}
		}
		
		#header1_lapka {font-size: 11px; width:150px; left: 35vw;
						/* font-size: 1.5vw; */
						}
		header1:hover h1   {font-size: 25px; 
							/* font-size: 4.1vw; */
							}
		header h1   {font-size: 25px; 
					/* font-size: 4.1vw; */
					}
	}


a {color: rgb(20,80,20)}

hr {clear: both; width: 100%; color: rgb(187,193,193)}

img {border: 0; margin: 10px; margin-bottom: 10px; float: left;
    border-radius: 5px;
    transition: 0.3s;
}


.img_male {border: 0; width: 31%; margin: 1%; margin-bottom: 10px; float: left;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male:hover {opacity: 0.8;}

.img_male_prawe {border: 0; width: 31%; margin: 1%; margin-bottom: 10px; float: right;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male_prawe:hover {opacity: 0.8;}

.img_male_pion {border: 0; width: 22%; margin: 1%; margin-bottom: 10px; float: left;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male_pion:hover {opacity: 0.8;}

.img_male_4_3_pion {border: 0; width: 15%; margin: 1%; margin-bottom: 10px; float: left;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male_4_3_pion:hover {opacity: 0.8;}

.img_male_4_3 {border: 0; width: 23%; margin: 1%; margin-bottom: 10px; float: left;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male_4_3:hover {opacity: 0.8;}

.img_male_4_3_prawe {border: 0; width: 23%; margin: 1%; margin-bottom: 10px; float: right;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.img_male_4_3_prawe:hover {opacity: 0.8;}


#przypisy {text-align: right; 
	color: rgb(20,80,20); 
	font-size: 12px; 
	margin-right: 10px}

#dodatkowe {text-align: left; 
	color: rgb(3,32,5); 
	font-size: 16px; 
	margin-left: 10px}
	
	
/* Podgląd zdjęcia */
	
@keyframes caption_anim {	
	0% {bottom: 25%; background-color: rgba(0,0,0,0.3); color: rgba(72,87,234,1);}
	7% {bottom: 25%; background-color: rgba(0,0,0,0.75); color: rgba(72,87,234,1);}
	30% {bottom: 25%; background-color: rgba(0,0,0,0.75); color: rgba(72,87,234,1); }
	90% {bottom: 10px; background-color: rgba(0,0,0,0.75); color: rgba(72,87,234,1);}
	93% {color: rgba(72,87,234,0);}
	100% {bottom: -60px; background-color: rgba(0,0,0,0);color: rgba(72,87,234,0);}
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 1px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	z-index: 3;
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    height: 97%;
    width: initial;
		position: absolute;
		top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
	}

#img01 {
    	border-radius: 0px;
	cursor: url('/obrazy/cursor_zwin.png'), auto;
    	transition: 0.0s;
	border-style:ridge;
	border-width:6px;
	border-color: rgb(72,87,234);
	float: none;
	}

#img01:hover {opacity: 1;}


@media (orientation: portrait) {.modal-content {height: initial;
												width: 97%}}

/* Caption of Modal Image */
#caption {
    margin: 0;
    display: block;
	position: absolute;
    width: 100%;
    text-align: center;
    color: rgba(72,87,234,0);
	background-color: rgba(0,0,0,0);
	font-size: 20px; 
	font-family: 'Times New Roman', 'Courier New';
	font-weight: bold;
    padding-bottom: 15px;
	padding-top: 15px;
	bottom: -60px;
	z-index: 1;
	animation-name: caption_anim; animation-duration: 17s; animation-delay: 2s; animation-iteration-count: 1;
}

.wysk_opis {
	position: fixed; 
	left: 150px; top: 18%; height: 5%; width: 5%; max-width: 600px; max-height: 300px;
	padding: 20px;
	background-image: url("/obrazy/meni_tlo2.jpg");
	border: double; border-color: blue; border-radius: 10px;
	color: yellow;
	overflow: hidden;
	visibility: hidden;
	font-size: 0px;
	z-index: 2;
}

.wyk_opis_a {
	color: rgb(188,114,50);
	}

@keyframes wyk_opis_hover {	
	0% {top: 18%; height: 5%; width: 5%; font-size: 0px; visibility: visible;}
	7% {top: 20%; height:55%; width: 55%;font-size: 14px; visibility: visible;}
	95% {top: 20%; height:55%; width: 55%;font-size: 14px; visibility: visible;}
	100% {top: 18%; height: 5%; width: 5%; font-size: 0px; visibility: hidden;}
}

li.menu:hover .wysk_opis {		
		animation-name: wyk_opis_hover; animation-duration: 30s; animation-delay: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards;
		}

.tekst_zielony {
	color: rgb(0,170,0);
	background-color: rgb(230,230,230);
}
.tekst_niebieski {
	color: rgb(0,0,170);
	background-color: rgb(230,230,230);
}
.tekst_czerwony {
	color: rgb(170,0,0);
	background-color: rgb(230,230,230);
}
.tekst_czrny {
	color: rgb(0,0,0);
	background-color: rgb(230,230,230);
}
.tekst_zolty {
	color: rgb(240,230,0);
	background-color: rgb(230,230,230);
}