:root
{
    --x_width: '';
    --x_height: '';

    --l_width: '';
    --l_height: '';
	--l_t: '';
	--l_fs: '';
	--l_lh: '';
    
	--f_width: '';
    --f_height: '';
	--f_b: '';
	--f_fs: '';
	--f_lh: '';
    
	--bsr_width: '';
	--bsr_lr: '';
	--bs_fs: '';
	--bs_lh: '';
	--br_fs: '';
	--br_lh: '';

	--fi_width: '';
    --fi_height: '';
	--fi_fs: '';
	--fi_pa: '';
	--fi_t: '';
	--fi_l: '';

	--h_width:'';
	--h_height:'';

	--gli_width:'';
	--gli_height:'';
	--gli_br:'';

	--ss_width:'';
	--ss_height:'';
	--ss_t:'';
	--ss_br:'';

	--cl_width:'';
	--cl_tr:'';
	--cl_fs:'';

	--img_spn_w:'';
	--img_spn_fs:'';
	--img_spn_blr:'';

	--txt_n_w:'';
	--txt_n_h:'';
	--txt_n_fs:'';
	--txt_h_w:'';
	--txt_h_h:'';
	--txt_h_fs:'';
	--txt_nh_b:'';

	--img_f_fs:'';
	--img_f_p:'';
	--img_f_m:'';
        
}


body
{
	background-color: black;
    padding: 0;
	margin: 0;
    
}

.x_conntent
{
    background-color: black;
	width: var(--x_width);
	height: var(--x_height);
    position: relative;
	margin-left: auto;
	margin-right: auto;
    display: flex;
	justify-content: center; 
	align-content: center;
	align-items: center;
    
}

.x_photo
{
	/* background-color: silver; */
	width: 100%;
	height: 100%;
    position: relative;
	display: flex;
	justify-content: center; 
	align-content: center;
	align-items: center;
		
}

#photo{
    position: absolute;
    z-index: 2;
    width: var(--x_width);
	height: var(--x_height);
}

#wp{
    position: absolute;
    z-index: 3;
    width: var(--x_width);
	height: var(--x_height);
}

.r_navi, .sp_navi, .sn_navi
{
    background-color: rgb(59, 58, 58);
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;  
    width: var(--bsr_width);
    height: var(--bsr_width);
    position: absolute;
    z-index: 4;
    opacity: 0.65;
    cursor: pointer;
}

.r_navi
{
	right: var(--bsr_lr);
	font-size: var(--br_fs);
	line-height: var(--br_lh);

}

.sn_navi
{
	right: var(--bsr_lr);
	font-size: var(--bs_fs);
	line-height: var(--bs_lh);

}

.sp_navi
{
	left: var(--bsr_lr);
	font-size: var(--bs_fs);
	line-height: var(--bs_lh);

}

._off
{
	opacity: 0.65;
	animation-name: my_elem_off;
	animation-duration: 3.5s;
	animation-fill-mode: forwards;
			 
} 

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

._on
{
	opacity: 0;
	animation-name: my_elem_on;
	animation-duration: 3.5s;
	animation-fill-mode: forwards;
			 
} 

@keyframes my_elem_on
{
	0% { opacity: 0;} 
	100% { opacity: 0.65;}
}

#b_render, #b_photo
{
	
    width: var(--bsr_width);
    height: var(--bsr_width);
	position: absolute;
	right: var(--bsr_lr);
	top: var(--bsr_lr);
	border-radius: 5px;
	z-index: 3;
	opacity: 1;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	/* background-image: linear-gradient(to top, #535353 0%, #fff 80%, #FDFDFD 100%); */
	border: 1px solid #8F9092;
  	box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 0 #CECFD1;
}

#b_render img, #b_photo img
{
	width: 100%;
	
	/* border: solid 3px white; */
}

#modelv {
      /* background-color: aqua; */
      width: var(--x_width);
	  height: var(--x_height);    
	  position: relative; 
      /* border: solid 3px aqua;  */
      
  }
.x_foot
{
    background-color: #3b3d40;
    
    width: var(--f_width);
    height: var(--f_height);
    z-index: 4;
    position: absolute;
    bottom: var(--f_b);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	
}

.x_foot_1, .x_foot_2
{
        
    width: var(--f_width);
    height: calc(var(--f_height) / 2);
    z-index: 4;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	
}
/* .x_foot_1
{
	background-color: yellow;
}

.x_foot_2
{
	background-color: red;
} */

#x_contact_1 
{
	/* background-color: pink; */
	cursor: pointer
}

#x_contact_2
{
	/* background-color: red; */
	cursor: pointer;
}

/* #x_contact_3
{
	background-color: pink;
} */

.x_company, .x_contact
{
	/* background-color: pink; */
	color: white;
	font-size: var(--f_fs);
	line-height: var(--f_lh);

	margin: 0;
	
}

.x_logo
{
    background-color: #3b3d40; 
    width: var(--l_width);
    height: var(--l_height);
    z-index: 4;
    position: absolute;
    top: var(--l_t);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.x_name, .x_phone, .x_info, .x_home
{
	color: white;
	font-size: var(--l_fs);
	line-height: var(--l_lh);
}

.x_info, .x_home
{
	cursor: pointer;
}

.x_fiszka_on
{
	font-family: Arial; 
/*	background-color: gold; */ 
	color: black;
	font-size: var(--fi_fs);
	text-align: justify;
/*	text-indent: 75px; */
	padding: var(--fi_pa);
	opacity: 0.05;
	animation-name: my_fiszka_on;
	animation-duration: 3.5s;
	animation-fill-mode: forwards;
			 
} 

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

.x_fiszka_off
{
	font-family: Arial; 
/*	background-color: gold; */ 
	color: black;
	font-size: var(--fi_fs);
	text-align: justify;
/*	text-indent: 75px; */
	padding: var(--fi_pa);
	opacity: 1;
	animation-name: my_fiszka_off;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
			 
} 

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

#x_rfiszka
{
	background-color: gold; 
	position: absolute;
	
    top: var(--fi_t);
	left: var(--fi_l);
	
    width: var(--fi_width);
    height: var(--fi_height);
	z-index: 10;
	border-radius: 20px;
		
}

#x_span
{
	color: gold;
	/* cursor: pointer; */
}

.x_ghome
{
	/* background-color: pink; */
	width: var(--h_width);
	height: var(--h_height) ;
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-content: space-around;
	
}

.x_gall_c, .x_gall_p
{
	
	width: 50%;
	height: calc(var(--h_height) * 0.8);
	position: relative;
	
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-content: space-evenly;
	
}

.x_gall_c
{
	background-color: gray;
	z-index: auto;
	
}

.x_gall_p
{
	background-color: dimgray;
	z-index: auto;
	
}

.x_gall_ci, .x_gall_pi
{
	background-color: white;
	width: var(--gli_width);
	height: var(--gli_height);
	border-radius: var(--gli_br);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	/* overflow: hidden; */
	z-index: 2;
	position: relative;
	transition: all 1.5s ease-in-out;
	cursor: pointer;
	
}

.x_gall_ci_lock, .x_gall_pi_lock
{
	background-color: gray;
	width: var(--gli_width);
	height: var(--gli_height);
	border-radius: var(--gli_br);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	/* overflow: hidden; */
	z-index: 2;
	position: relative;
	/* transition: all 1.5s ease-in-out;
	cursor: pointer; */
	
}

.x_gall_ci:hover, .x_gall_pi:hover  
{
	transform: scale(1.55);
	
	z-index: 3;
	/* border: solid .5px black; */
}

.x_sshow, .x_sshow_off
{
	background-color: dimgray;
	width: var(--ss_width);
	height: var(--ss_height);
	position: absolute;
	top: var(--ss_t);
	border-radius: var(--ss_br);
	z-index: 4;
	overflow: hidden;
	display: flex;
	flex-direction: row;
}

.x_sshow_off
{
	/* background-color: green; */
	opacity: 0.5;
	animation-name: my_sshow_off;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	z-index: 4;
			 
} 

@keyframes my_sshow_off
{
	0% { opacity: 0.9;} 
	100% { visibility: hidden; opacity: 0; transform: rotateX(180deg);}
}

.x_close
{
	background-color: black;
	width: var(--cl_width);
	height: var(--cl_width);
	position: absolute;
	top: var(--cl_tr);
	right: var(--cl_tr);
	color: white;
	font-family: Arial; 
	font-size: var(--cl_fs);
	font-weight: 600;  
	text-align: justify;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
}

.x_img 
{
	
	animation: my_show2 90s linear infinite; 		
}

#x_wp
{
	width: 100%;
	height: 100%;
	position: absolute;
	
}

.x_img_ci, .x_img_pi
{
	width: 100%;
	height: 100%;
	border-radius: var(--gli_br);

}

@keyframes my_show2
{
	0% { opacity: .1; transform: translateX(0); }
	2.5% { opacity: 1; }

	4.75% { opacity: 0; transform: translateX(0); }
	5% { opacity: 0; transform: translateX(-100%);  }
	5.5% { opacity: .1; }
	7.5% { opacity: 1; }

	9.75% { opacity: 0; transform: translateX(-100%); }
	10% { opacity: 0; transform: translateX(-200%);  }
	10.5% { opacity: .1; }
	12.5% { opacity: 1; }

	14.75% { opacity: 0; transform: translateX(-200%); }
	15% { opacity: 0; transform: translateX(-300%);  }
	15.5% { opacity: .1; }
	17.5% { opacity: 1; }

	19.75% { opacity: 0; transform: translateX(-300%); }
	20% { opacity: 0; transform: translateX(-400%);  }
	20.5% { opacity: .1; }
	22.5% { opacity: 1; }

	24.75% { opacity: 0; transform: translateX(-400%); }
	25% { opacity: 0; transform: translateX(-500%);  }
	25.5% { opacity: .1; }
	27.5% { opacity: 1; }

	29.75% { opacity: 0; transform: translateX(-500%); }
	30% { opacity: 0; transform: translateX(-600%);  }
	30.5% { opacity: .1; }
	32.5% { opacity: 1; }

	34.75% { opacity: 0; transform: translateX(-600%); }
	35% { opacity: 0; transform: translateX(-700%);  }
	35.5% { opacity: .1; }
	37.5% { opacity: 1; }

	39.75% { opacity: 0; transform: translateX(-700%); }
	40% { opacity: 0; transform: translateX(-800%);  }
	40.5% { opacity: .1; }
	42.5% { opacity: 1; }

	44.75% { opacity: 0; transform: translateX(-800%); }
	45% { opacity: 0; transform: translateX(-900%);  }
	45.5% { opacity: .1; }
	47.5% { opacity: 1; }

	49.75% { opacity: 0; transform: translateX(-900%); }
	50% { opacity: 0; transform: translateX(-1000%);  }
	50.5% { opacity: .1; }
	52.5% { opacity: 1; }

	54.75% { opacity: 0; transform: translateX(-1000%); }
	55% { opacity: 0; transform: translateX(-1100%);  }
	55.5% { opacity: .1; }
	57.5% { opacity: 1; }

	59.75% { opacity: 0; transform: translateX(-1100%); }
	60% { opacity: 0; transform: translateX(-1200%);  }
	60.5% { opacity: .1; }
	62.5% { opacity: 1; }

	64.75% { opacity: 0; transform: translateX(-1200%); }
	65% { opacity: 0; transform: translateX(-1300%);  }
	65.5% { opacity: .1; }
	67.5% { opacity: 1; }

	69.75% { opacity: 0; transform: translateX(-1300%); }
	70% { opacity: 0; transform: translateX(-1400%);  }
	70.5% { opacity: .1; }
	72.5% { opacity: 1; }

	74.75% { opacity: 0; transform: translateX(-1400%); }
	75% { opacity: 0; transform: translateX(-1500%);  }
	75.5% { opacity: .1; }
	77.5% { opacity: 1; }

	79.75% { opacity: 0; transform: translateX(-1500%); }
	80% { opacity: 0; transform: translateX(-1600%);  }
	80.5% { opacity: .1; }
	82.5% { opacity: 1; }

	84.75% { opacity: 0; transform: translateX(-1600%); }
	85% { opacity: 0; transform: translateX(-1700%);  }
	85.5% { opacity: .1; }
	87.5% { opacity: 1; }

	89.75% { opacity: 0; transform: translateX(-1700%); }
	90% { opacity: 0; transform: translateX(-1800%);  }
	90.5% { opacity: .1; }
	92.5% { opacity: 1; }

	94.75% { opacity: 0; transform: translateX(-1800%); }
	95% { opacity: 0; transform: translateX(-1900%);  }
	95.5% { opacity: .1; }
	97.5% { opacity: 1; }

	99.75% { opacity: 0; transform: translateX(-1900%); }
	100% { opacity: 0; transform: translateX(-2000%);  }

}

.x_img_sp, .x_img_sn
{
	background-color: grey;
	width: var(--img_spn_w);
	height: var(--img_spn_w);
	color: white;
	font-family: Arial, sans-serif;
	font-size: var(--img_spn_fs);
	font-weight: 600;
	text-align: justify;
	position: absolute;
	bottom: var(--img_spn_blr);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center; 
	opacity: 0;
	/* visibility: hidden; */
	transition: all 1.5s ease-in-out;
}

.x_img_sp
{
	left: var(--img_spn_blr);
}

.x_img_sn
{
	right: var(--img_spn_blr);
}

.x_gall_ci:hover  .x_img_sp
{
	/* animation-name: my_img_on;
	animation-duration: 1.5s;
	animation-fill-mode: forwards; */
	opacity: 1;
	/* visibility: visible; */
}

.x_gall_ci:hover  .x_img_sn
{
	/* animation-name: my_img_on;
	animation-duration: 1.5s;
	animation-fill-mode: forwards; */
	opacity: 1;
	/* visibility: visible; */
}

.x_gall_pi:hover  .x_img_sp
{
	/* animation-name: my_img_on;
	animation-duration: 1.5s;
	animation-fill-mode: forwards; */
	opacity: 1;
	/* visibility: visible; */
}

.x_gall_pi:hover  .x_img_sn
{
	/* animation-name: my_img_on;
	animation-duration: 1.5s;
	animation-fill-mode: forwards; */
	opacity: 1;
	/* visibility: visible; */
}

@keyframes my_img_on
{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes my_img_off
{
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}

.x_txt_n, .x_txt_h
{
	background-color: dimgray;
	
	
	color: white;
	font-family: Arial, sans-serif;
	font-weight: 400;
	text-align: justify;
	position: absolute;
	bottom: var(--txt_nh_b);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center; 
	
	transition: all 1.5s ease-in-out;
	/* visibility: hidden; */
}

.x_txt_n
{
	width: var(--txt_n_w);
	height: var(--txt_n_h);
	font-size: var(--txt_n_fs);
	opacity: 1;
	
}

.x_txt_h
{
	width: var(--txt_h_w);
	height: var(--txt_h_h);
	font-size: var(--txt_h_fs);
	opacity: 0;
	
}

.x_gall_ci:hover  .x_txt_h
{
	opacity: 1;
	
}

.x_gall_ci:hover  .x_txt_n
{
	opacity: 0;
	
}

.x_gall_pi:hover  .x_txt_h
{
	opacity: 1;
	
}

.x_gall_pi:hover  .x_txt_n
{
	opacity: 0;
	
}

.img_fisz, .img_fisz_off
{
	background-color: yellow;
	width: calc(var(--gli_width) * 0.975);
	height: calc(var(--gli_height) / 6);
	border-radius: var(--gli_br);
	position: absolute;
	bottom: var(--gli_height);
	left: auto;
	padding: var(--img_f_p);
	margin: var(--img_f_m);
	z-index: 2;
	font-family: Arial, sans-serif;
	font-size: var(--img_f_fs);
	font-weight: 600;
	text-align: justify;
	color: black;
}

.img_fisz
{
	animation-name: img_fisz_on;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
			 
}

.img_fisz_off
{
	animation-name: img_fisz_off;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
			 
} 

@keyframes img_fisz_on
{
	0% { opacity: 0;} 
	100% { opacity: 1;}
}

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