:root
{
    
	/* --x_all: 1200px;
    --y_all: 750px; */
	/* --y_l: 55px;
	--fs_l: 30px;
	--y_sxc: 393px;
	--fs_h1: 40px;
	--fs_h2: 18px;
	--ti_h2: 75px;
	--m_h2: 20px;
	--x_xsl: 275px;
	--y_xsl: 175px;
	--p_xsl: 5px;
	--x_xop_: 100px;
	--y_xop_: 25px;
	--fs_xop_: 20px;
	--m_xop_: -5px;
	--y_xop: 15px;
	--fs_xop: 12px;
	--lh_xop: 20px;
	--mt_xop: -2px;
	--y_f1t: 20px;
	--fs_f1t: 20px;
	--mt_f1t: 10px;
	--ml_f1t: 25px;
	--mb_f1t: 10px;
	--fs_f: 20px;
	--ls_f: 5px;
	--t_x_nav: 20px;
	--x_x_nav: 115px;
	--y_x_nav: 30px;
	--fs_x_nav: 14px;
	--t_x_l: 1px;
	--l_x_l: 1px;
	--x_x_l: 310px;
	--y_x_l: 80px; */

	 --x_all: '';
     --y_all: '';
	--y_l: '';
	--fs_l: '';
	--ls_l: '';
	--p_l: '';
	--ts1_l: '';
	--ts2_l: '';
	--ts3_l: '';
	--y_sxc: '';
	--fs_h1: '';
	
	--fs_h2: '';
	
	--ti_h2: '';
	--m_h2: '';
	--x_xsl: '';
	--y_xsl: '';
	--p_xsl: '';
	--x_xop_: '';
	--y_xop_: '';
	--fs_xop_: '';
	--m_xop_: '';
	--y_xop: '';
	--fs_xop: '';
	/* --lh_xop: '';
	--mt_xop: ''; */
	--y_f1t: '';
	--fs_f1t: '';
	--mt_f1t: '';
	--ml_f1t: '';
	--mb_f1t: '';
	--fs_f: '';
	--ls_f: '';
	--t_x_nav: '';
	--x_x_nav: '';
	--y_x_nav: '';
	--fs_x_nav: '';
	--t_x_l: '';
	--l_x_l: '';
	--x_x_l: '';
	--y_x_l: '';
	--t_x_m: '';
	--r_x_m: '';
	--x_x_m: '';
	--y_x_m: '';
	--br_x_m: '';
	--fs_x_m: '';
	--b_ix_nh: '';

}	

body
{
	background-color: black;
}

#container
{
	background-color: dimgray;
	width: var(--x_all);
	height: var(--y_all);
	border-radius: 10px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#logo
{
	/* background-color: dimgray; */
	
	height: var(--y_l);
	border-radius: 10px 10px 0px 0px;
	margin-top: 0; 
	color: white;
	font-size: var(--fs_l);
	letter-spacing: var(--ls_l);
	padding: var(--p_l);
/*	text-align: center; */
	display: flex;
	justify-content: center; 
	align-items: center;
	text-shadow: var(--ts1_l) var(--ts2_l) var(--ts3_l) black;
	/* left: 400px; */
}

#frame_0
{
	background-color: navy;
	
	display: flex;
	justify-content: space-evenly;
}

#show
{
	background-color: dimgray; 
	/* background-color: pink;  */
		
	width: 50%; 
	height: var(--y_sxc);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	/* cursor: pointer; */
}

#slide
{
/*		background-color: dimgray; */
		position: relative;	
		/* width: 625px; 
		height: 393px;  */
		width: 100%; 
		height: 100%; 
		margin: auto;
				
}

.slide_show_h
{
/*	background-color: gold; */
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%;
	overflow: hidden; 
	display: flex; 
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
/*	animation: my_show2 10s infinite; */
	
}

.slide_show_h img
{
	
	width: 100%;
	animation: my_show2 30s infinite; 
}


@keyframes my_show
{
	0% { transform: translateX(0px); }
	25% { transform: translateX(-800px); }
	50% { transform: translateX(-1600px); }
	75% { transform: translateX(-800px); }
	100% { transform: translateX(0px); }
	
}

@keyframes my_show2
{
/*	0% { transform: translateX(0px); }
	33% { transform: translateX(-800px); }
	66% { transform: translateX(-1600px); }
	100% { transform: translateX(-2400px); } */
	
	0% { transform: translateX(0); }
	34% { transform: translateX(-100%); }
	67% { transform: translateX(-200%); }
	100% { transform: translateX(-300%); }
	
	
}

.slide_show_v
{
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; 
/*	display: flex; */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
/*	animation: my_show3 10s infinite; */
	
}

.slide_show_v img
{
	
	height: 100%;
	animation: my_show3 30s infinite; 
}


@keyframes my_show3
{
/*	0% { transform: translateY(0px); }
	33% { transform: translateY(-600px); }
	66% { transform: translateY(-1200px); }
	100% { transform: translateY(-1800px); } */
	
	0% { transform: translateY(0); }
	33% { transform: translateY(-101%); }
	66% { transform: translateY(-202%); }
	100% { transform: translateY(-303%); }
	
	
}

#content
{
		background-color: gray;
		/* background-color: red; */
		width: 50%;
		height: var(--y_sxc);
}

h1
{
	font-family: Times New Roman;
	color: white;
	font-size: calc(var(--fs_h1) * 0.95);
	letter-spacing: normal;
	text-align: center;
}

h2
{
/*	font-family: Times New Roman; */
/*	background-color: gold; */
	color: white;
	font-size: calc(var(--fs_h2) * 0.95);
	letter-spacing: normal;
	text-align: justify;
	text-indent: var(--ti_h2);
	margin-left: var(--m_h2);
	margin-right: var(--m_h2);
	margin-top: 0;
	margin-bottom: 0;
}

#frame_2
{
	
	background-color: dimgray;
	width: 100%;
	height: 30%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-content: center;
	
	
}

.frame_1
{
/*	background-color: pink; */
	width: 100%;
	height: 90%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-content: center;
	margin: auto;
	
}

.xslide_
{
/*	background-color: black; */
	width: var(--x_xsl); 
	height: var(--y_xsl);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	cursor: pointer;
	
}

.xslide_:hover .xphoto_
{
	transform: scale(1.55);
	opacity: 1;
	z-index: 1;
	overflow: hidden; 
}

.xslide_:hover .xopis_
{
/*	transform: scale(1.25); 
	background-color: black;
	opacity: 0.55;
	margin: 5px;
	z-index: 1; */
	visibility: hidden;
	overflow: hidden;
}

.xslide_:hover .xopis
{
	width: 60%;
	transform: scale(1.25); 
	background-color: black;
	opacity: 0.95;
	margin: var(--p_xsl);
	z-index: 1;
	visibility: visible;
	overflow: hidden; 
	text-decoration: none;
}


.xphoto_
{
/*	background-color: yellow; */
	/* width: 275px;
	height: 175px; */
	width: 100%;
	height: 100%;
	
	position: relative;
	display: flex;
	justify-content: center; 
	align-content: flex-start;
	opacity: 1;
	transition: all 1.5s linear;
	overflow: hidden; 
}

.xphoto_ img
{
	width: 97%;
	border-radius: 5px;
	overflow: hidden; 
}

.xopis_
{
	background-color: black;
	width: var(--x_xop_);
	height: var(--y_xop_);
	position: absolute;
	bottom: 0;
	
	text-align: center;
	opacity: 1;
/*	transition: all 0.1s linear; */
}


.xopis_ p
{
	font-size: var(--fs_xop_);
	display: inline-block;
	color: white;
	margin: var(--m_xop_);
	opacity: 1;
	vertical-align: middle;
}


.xopis
{
	background-color: black;
	width: 60%;
	height: var(--y_xop);
	position: absolute;
	bottom: 0;
	visibility: hidden;
	text-align: center;
	opacity: 1;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 1.5s linear;
}


.xopis p
{
	font-size: var(--fs_xop);
	color: white;
	opacity: 1;
	text-decoration: none;
}

.frame_1_t p
{
/*	background-color: red; */
	height: var(--y_f1t);
	color: white;
	font-size: var(--fs_f1t);
	text-align: left; 
/*	vertical-align: center; */
	margin-top: var(--mt_f1t);
	margin-left: var(--ml_f1t);
	margin-bottom: var(--mb_f1t);
	letter-spacing: 1px;
	
	
}
 

#footer
{
	background-color: #3b3d40;
	width: 100%;
	height: 9.5%;
	border-radius: 0px 0px 10px 10px;
	color: white;
	font-size: var(--fs_f);
	letter-spacing: var(--ls_f);
	text-shadow: var(--ts1_l) var(--ts2_l) var(--ts3_l) black;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center; 
	align-items: center;
	
		
}


/* obsługa fiszki */


.x_fiszka_on
{
	font-family: Arial; 
/*	background-color: gold; */ 
	color: black;
	font-size: 12px;
	text-align: center;
/*	text-indent: 75px; */
	/* padding: 25px; */
	opacity: 0.05;
	animation-name: my_fiszka_on;
	animation-duration: 3.5s;
	animation-fill-mode: forwards;
				 
}

 .x_img
{
	background-color: pink;
	width: 100%;
	/* height: 700px; */
	
				 
} 

@keyframes my_fiszka_on
{
	0% { opacity: 0.15; }
	100% { opacity: 1.0; }
		
}

.x_fiszka_off
{
	font-family: Arial; 
/*	background-color: gold; */ 
	color: black;
	font-size: 12px;
	text-align: center;
/*	text-indent: 75px; */
	/* padding: 25px; */
	opacity: 1;
	animation-name: my_fiszka_off;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
			 
} 

@keyframes my_fiszka_off
{
	0% { opacity: 1;} 
	100% { opacity: 0; transform: rotateX(180deg);}
}

#x_fiszka
{
	/* background-color: white;   */
	position: absolute;
	top: 145px;
	right: 45px;
	/* width: 550px;  */
	width: 550px; 
	height: 350px;
	z-index: 10;
	/* border-radius: 20px; */
	display: flex;
	flex-direction: column;
	justify-content: top; 
	align-items: center;	
	/* overflow-y: scroll; 
	overflow-x: hidden;  */
}

#x_close
{
	background-color: dimgray;
	position: absolute;
	top: 150px;
	right: 52px;
	width: 70px; 
	height: 20px;
	z-index: 11;
	border-radius: 3px; 
	cursor: pointer;
	display: flex;
	justify-content: center; 
	align-items: center;
		
}

.x_close_on
{
	font-family: Times New Roman; 

	color: white;
	font-size: 12px;
	text-align: center;
			 
}

.x_close_off
{
	visibility: hidden;
		
}

#x_dload
{
	background-color: dimgray;
	position: absolute;
	top: 155px;
	right: 155px;
	width: 70px; 
	height: 20px;
	z-index: 11;
	border-radius: 3px; 
	cursor: pointer;
	display: flex;
	justify-content: center; 
	align-items: center;
		
}

._x_navi
{
	/* background-color: pink; */
	position: absolute;
	width: var(--x_x_nav); 
	z-index: 10;
	display: flex;
	justify-content: center; 
	align-items: center;
		
}

.x_navi1, .x_navi2, .ix_navi1, .ix_navi2
{
	background-color: white;
	position: absolute;
	top: var(--t_x_nav);
	/* right: 45px; */
	width: var(--x_x_nav); 
	height: var(--y_x_nav);
	z-index: 11;
	border-radius: 10px; 
	cursor: pointer;
	display: flex;
	justify-content: center; 
	align-items: center;
	font-family: Times New Roman; 
	letter-spacing: 0;
	text-shadow: none;
	color: black;
	font-size: var(--fs_x_nav);
	text-align: center;
	font-weight: 900;
	visibility: visible;
	transition: all 1.5s linear;	 
}

.ix_navi1, .ix_navi2
{ 
	/* display: none; */
	visibility: hidden;
	opacity: 0;
}

.x_navi1:hover .ix_navi1, .x_navi2:hover .ix_navi2
{
	/* display: flex; */
	visibility: visible;
	opacity: 1;
		

}

.ix_navi1:hover, .ix_navi2:hover 
{
	background-color: dimgray;
	color: white;
	border: solid calc(var(--b_ix_nh) * 0.25) white; 
}

#x_logo
{
	background-color: white;
	position: absolute;
	top: var(--t_x_l);
	left: var(--l_x_l);
	width: var(--x_x_l); 
	height: var(--y_x_l);
	z-index: 11;
	border-radius: 5px; 
	/*cursor: pointer; */
	display: flex;
	justify-content: center; 
	align-items: center;
		
}

.x_logo_img
{
	/* font-family: Times New Roman; 
	letter-spacing: 0;
	text-shadow: none;
	color: black;
	font-size: 14px;
	text-align: center;
	font-weight: 900; */
	width: 90%;
	height: 90%;
	
			 
}

.slide_p,
.slide_n  
{
	background-color: black;
	border-radius: 50%;
	font-family: Arial;
	font-size: 50px;
	font-weight: 600;
	line-height: 50px;
	color: white;
	width: 50px;
	height: 50px;
	z-index: 2;
	text-align: center;
	padding: 0;
	cursor: pointer;
	position: absolute;
	/* opacity: 0; */
	/* visibility: hidden; */
	/* transition: all 1.5s ease-in-out; */
}
.slide_p
{
	bottom: 100px;
	left: 5px;
}
.slide_n
{
	bottom: 100px;
	right: 5px;
}

.xphoto_n
{
	background-color: silver;
	/* border: solid 3px pink;  */
	width: 95%;
	height: 95%;
	position: relative;
	display: flex;
	justify-content: center; 
	align-content: flex-start;
	/* opacity: 1;
	transition: all 1.5s linear; */
}

.xphoto_n img
{
	
	width: auto;
	height: 100%;
	
	
}

#x_motto
{
	background-color: silver;  
	position: absolute;
	top: var(--t_x_m);
	right: var(--r_x_m);
	width: var(--x_x_m); 
	height: var(--y_x_m);
	z-index: 15;
	border-radius: var(--br_x_m);
	display: flex;
	justify-content: center; 
	align-items: center;	

	font-family: Times New Roman;
	font-weight: 600;
	color: white;
	/* font-size: 70px; */
	font-size: var(--fs_x_m);
	text-align: center;
	font-style: italic;
	
}

@keyframes my_motto_on
{
	0% { opacity: 0.15; }
	100% { opacity: 1.0; }
		
}
.x_motto_on
{	
	opacity: 0.05;
	animation-name: my_fiszka_on;
	animation-duration: 4.5s;
	animation-fill-mode: forwards;
	overflow: hidden; 
}

@keyframes my_motto_off
{
	0% { opacity: 1;} 
	100% { opacity: 0; transform: rotateX(180deg);}
}

.x_motto_off
{
	opacity: 1;
	animation-name: my_motto_off;
	animation-duration: 3.5s;
	animation-fill-mode: forwards;
	overflow: hidden; 
}

.x_motto_img
{
	background-color: yellow;
	width: 100%;
	
}