#cienb, .left img {
	-webkit-box-shadow: 1px 4px 5px 0px #626262;
	-moz-box-shadow: 1px 4px 5px 0px #626262;
	box-shadow: 1px 4px 5px 0px #626262;
}

#g-container-main .g-content{
background-color:#fff;
border: solid 1px #008500;
}

.pull-left, .sprocket-grids-b-item{

-webkit-box-shadow: 1px 4px 5px 0px #626262;
	-moz-box-shadow: 1px 4px 5px 0px #626262;
	box-shadow: 1px 4px 5px 0px #626262;

}

#headri {

	position: relative;
	z-index: -1;
	}
	#headerc {
	margin: -2%;
	}
	#headt {
	position: absolute;
	top: -5%;
	padding: 1%;
	width: 14%;
}
#headertt {
	position: absolute;
	top: 73%;
	padding: 1%;
	width: 24%; 
	padding: 0rem 0;

 	/* border-top: 1px solid #000;
 Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d3d3d3+0,000000+100 */
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top,  #d3d3d3 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d3d3d3 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d3d3d3 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

#g-expanded, #g-header {
padding: 0rem 0;
}

#g-footer #g-navigation {
background: none;
}
#copyright-4819-particle {
margin-top: -11% !important;

}
#g-footer .g-copyright {
	font-size: 1rem;
	line-height: 1.25rem;
}
#g-footer .g-copyright a {
color: #fff !important;
}
#g-footer .g-container .g-grid {
position: relative;
top: -7%;
}
#g-header {
    color: #fff;
	 text-shadow: rgb(6, 6, 6) 4px 3px 5px;
/*	 -webkit-text-stroke: 1px black; */
 margin-top: 0.0rem !important;
	padding: 0;

}
#logart {

	left: 23%;
	position: relative;
}

#copyright-2539-particle{
	position: relative;
	top: -49%;
	padding: 0.0rem;
	margin: 0.0rem;
}
#g-navigation {

}
menug {
background: #000!important;

}

.ppic {
  display: none;
	width: 98%;
	position: fixed;
	z-index: 8001;
	right: 0;
	left: 0;
	bottom: 2%;
	margin: 0 auto;
	max-height: 700px;
	height: auto;
	padding: 1%;
	text-align: center;
	color: #333;
	background: rgba(226,226,226,.85);
	-webkit-box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
	-moz-box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
	box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
  -webkit-animation: fadeInUp 1.5s ease 0s 1 normal;
  animation-name: fadeInUp 1.5s ease 0s 1 normal;
}
.ppicd {
  -webkit-animation: fadeInd 1.5s ease 0s 1 normal;
  animation-name: fadeInd 1.5s ease 0s 1 normal;
}




@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



@keyframes fadeInd {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.ppicukryj {
	border: none;
	color: #ff0f0f;
	height: auto !important;
	width: auto !important;
	display: block;
	position: absolute;
	top: 10px;
	right: 15px;
	padding: 5px;
	cursor: pointer;
	-webkit-box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
	-moz-box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
	box-shadow: 0 0 15px 0 rgba(50,50,50,.75);
}

#audioklik {
position: absolute;
top: 80px;
right: 10px;
width: auto;
z-index: 105;
color: #fff;
    padding: 15px;
    font-size: 12px;
    font-weight: bold;
    background: transparent no-repeat right -92px !important;
border: solid 1px #008500;
    cursor: pointer;
    overflow: visible;
}
#pyty {
text-align: center;
display: block !important;
float: left !important;
color: #000;
    padding: 15px;
    font-size: 12px;
    font-weight: bold;
    background: transparent no-repeat right -92px !important;
    position: relative;
border: solid 1px #008500;
    cursor: pointer;
    overflow: visible;
	 margin-left: 40% ;
}
#pytn {
text-align: center;
display: block !important;
float: left !important;
color: #000;
    padding: 15px;
    font-size: 12px;
    font-weight: bold;
    background: transparent no-repeat right -92px !important;
    position: relative;
border: solid 1px #008500;
    cursor: pointer;
    overflow: visible;
margin-left: 1%;
}
#pyt {
text-align: center;
position: fixed;
color: rgb(0,0,5);
z-index: 105;
background-color: #fff;
border: solid 1px #008500;
margin: auto;
font-size: large;
padding: 25px;
padding-bottom: 15px;
top: 40%;
left: 36%;
}

#podpyt {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
height: 100%;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 99%, rgba(0,0,0,0.4) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.4) 99%,rgba(0,0,0,0.4) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.4) 99%,rgba(0,0,0,0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#66000000',GradientType=0 );

}
.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}


.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}


/* Zewnętrzny kontener kafelka */
.mwall-item-outer-cont {
    /* height: 7vh; /* Wysokość kafelka jako 7% wysokości ekranu */
	border: 1px solid #008500; /* Zielona ramka wokół kafelka */
} 
.mwall-cover {
    height: auto; /* Ustal docelową wysokość kontenera */
	max-width: 20% !important;
    padding: 7px; /* Dodaj padding */
    box-sizing: border-box; /* Uwzględnij padding w wymiarach */
    position: relative;
    overflow: hidden; /* Zapobiega wychodzeniu obrazu poza kontener */
}
.mwall-item-inner-cont {
	background-color: rgba(72, 125, 71, 1);
background-image: linear-gradient(90deg, rgba(72, 125, 71, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.mwall-photo-link {
    height: 102%; /* Dopasuj obraz do wysokości kontenera z paddingiem */
    width: auto; /* Zachowaj proporcje obrazu */
    object-fit: contain; /* Przytnij obraz, aby wypełnić kontener */
    display: flex !important; /* Usuń domyślny margines */
    margin: auto; /* Wycentruj obraz */
}


.mwall-item-outer-cont a {
    position: relative; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    text-decoration: none;
    color: inherit;
}

.mwall-item-outer-cont:hover {
    background-color: rgba(0, 128, 0, 0.1);
    transition: background-color 0.3s ease;
}

.mwall-item-outer-cont a:hover {
    cursor: pointer;
}
 /* modale  */
 
 .teammm {
    display: grid; /* Ustawienie grid */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* Dynamiczne kolumny */
    gap: 10px; /* Odstępy między elementami */
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
} .team {
     display: block;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

 /* Wycentrowany modal */

.team_modal, .artmodal {
    width: 70%; /* Szerokość modala */
    max-height: 80vh; /* Maksymalna wysokość: 80% wysokości ekranu */
    overflow-y: auto; /* Dodaje pionowy pasek przewijania, gdy treść się nie mieści */
    height: auto; /* Wysokość modala */
    position: fixed; /* Wycentrowanie względem ekranu */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Dokładne wycentrowanie */
    background-color: #fff; /* Opcjonalne tło */
	border: 1px solid #008500; /* Zielona ramka wokół kafelka */
    border-radius: 10px; /* Zaokrąglenie rogów */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Delikatny cień */
    overflow: hidden; /* Ukrycie nadmiarowej treści */
    padding: 10px;
    box-sizing: border-box;
} 

/* Obrazki wewnątrz modala */
.team_modal img {
    width: 35%; /* Skalowanie obrazka do 35% szerokości kontenera */
    height: 35%; /* Skalowanie do 35% wysokości kontenera */
    object-fit: contain; /* Zachowanie proporcji */
    display: block; /* Zapobiega dodatkowym marginesom */
    margin: 0; /* Naturalna pozycja */
    padding: 0;
		-webkit-box-shadow: 1px 4px 5px 0px #626262;
	-moz-box-shadow: 1px 4px 5px 0px #626262;
	box-shadow: 1px 4px 5px 0px #626262;
	box-shadow: 1px 4px 5px 0px #626262;
}
/* Główny kontener z efektem hover */
.team_mod_hov {
    position: relative; /* Podstawa do pozycjonowania elementów wewnątrz */
    display: inline-block; /* Dopasowanie do wymiarów obrazka */
    width: 280px;
    height: 320px;
    overflow: hidden; /* Ukrywa nadmiarowy hover-content */
    cursor: pointer;
    border-radius: 10px; /* Opcjonalne zaokrąglenie rogów */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lekki cień */
}

/* Stylizacja obrazka */
.team_mod_hov img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Obrazek wypełnia kontener */
    transition: transform 0.3s ease-in-out; /* Efekt płynnego powiększenia */
}

/* Efekt hover - powiększenie obrazka */
.team_mod_hov:hover img {
    transform: scale(1.1); /* Powiększenie obrazka */
}

/* Treść hover nad obrazkiem */
.team_mod_hov .hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Ciemne przezroczyste tło */
    color: #fff; /* Kolor tekstu */
    display: flex; /* Wyśrodkowanie tekstu */
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
    opacity: 0; /* Ukryta treść domyślnie */
    transition: opacity 0.3s ease-in-out; /* Płynne pojawianie */
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* Efekt hover - pojawienie się treści */
.team_mod_hov:hover .hover-content {
    opacity: 1; /* Wyświetlenie treści */
}

.mytube-ui {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mytube-title {
    color: #ffcc00;
    text-decoration: none;
    font-size: 14px;
}

.mytube-song {
    color: white;
    font-size: 14px;
}

.mytube-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
#myTubeUI {
    transition: top 0.3s ease-out;
}

.control-button {
    cursor: pointer;
    margin-right: 10px;
}