/* #Base 1280 Grid
================================================== */
/*ta czesc definiowana w kodzie*/

@media only screen and (min-width: 1280px) {
	
}

/* #Base 960 Grid
================================================== */

@media only screen and (min-width: 961px) and (max-width: 1279px) {

	#main-nav ul li a, nav ul li a {
		font-size:30px;
	}

	
	
}


/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */

@media only screen and (min-width: 769px) and (max-width: 960px) {

	#main-nav ul li a, nav ul li a {
		font-size:20px;
		padding:20px 0px;
	}
	
		/*----------------------------------------------------------------
	 * 
	 ************************ BANER GLOWNY  ***************************
	 *  
	 ---------------------------------------------------------------*/
	
		
	div.baner-glowny ul li  {
		margin:0;
		padding:15px 0px 50px 0px;
		position:relative;
		width:100%;
	}

	div.baner-glowny ul li div.baner-opis {
		position:ralative;
		left:0px;
		top:0px;
		width:95%;
		margin:0 auto;
		overflow:hidden;
	}



	div.baner-glowny ul li div.baner-opis h2 {
		text-transform: uppercase;
		font-size:36px;
		font-weight:400;
		border-bottom:0px solid #787878;
		margin:0px 0px 0px 0px;
		padding:0px 0px 10px 0px;
		color: #fff;

	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-1 {
		line-height:1em;
		display:inline-block;
	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-2 {
		font-size:22px;
		font-weight:300;
		line-height:1em;
		color:#fff;
		margin:0px 0px 0px 0px;
		padding:0px 0px 5px 0px;
		text-transform:uppercase;
		background:none;
		display:inline-block;
	}
	
	
	div.baner-glowny ul li div.baner-opis  p {
		line-height:1.3em;
	}
	

	/*----------------------------------------------------------------
	 * 
	 ********************** BOKSY GLOWNA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.baner-boksy-lista li {
		width:33.33%;
	}
	
	/* #Podstrony
	================================================== */
	ul.podstrony-lista li {
		width:33.33%;
		height:150px;
	}
	
	
}

/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */

@media only screen and (min-width: 480px) and  (max-width: 768px) {
	
	/*naglowek---------------*/
	#main-header h1, header h1 {
		
	}
	
	#main-header h1 a, header h1 a {
		
	} 
	
	#main-header p, header p {
		display:none;
	}
	
	#main-header p.telefon, header p.telefon {
		text-align:right;
		float:none;	
		width:100%;
		max-width:100%;
		padding:15px 20px 0px 20px;
		font-size:0.8em;
	}
	
	#main-header p.adress, header p.adress {
		text-align:right;
		float:none;	
		width:100%;
		max-width:100%;
		padding:5px 20px 10px 20px;
		font-size:0.8em;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ style menu  ***************************
	 *  
	 ---------------------------------------------------------------*/


	a.show-menu {
		width:40px;
		height:40px;
		top:10px;
		right:10px;
	}
	
	div.close-menu {
		width:40px;
		height:40px;
		top:-50px;
		right:10px;
	}
	
	#main-nav ul li a, nav ul li a {
		font-size:20px;
		padding:20px 0px;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ BANER GLOWNY  ***************************
	 *  
	 ---------------------------------------------------------------*/
	
		
	div.baner-glowny ul li  {
		margin:0;
		padding:15px 0px 60px 0px;
		position:relative;
		width:100%;
	}

	div.baner-glowny ul li div.baner-opis {
		position:ralative;
		left:0px;
		top:0px;
		width:95%;
		margin:0 auto;
		overflow:hidden;
	}



	div.baner-glowny ul li div.baner-opis h2 {
		text-transform: uppercase;
		font-size:28px;
		font-weight:400;
		border-bottom:0px solid #787878;
		margin:0px 0px 0px 0px;
		padding:0px 0px 10px 0px;
		color: #fff;

	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-1 {
		line-height:1em;
		display:inline-block;

	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-2 {
		font-size:16px;
		font-weight:300;
		line-height:1em;
		color:#fff;
		margin:0px 0px 0px 0px;
		padding:0px 0px 5px 0px;
		text-transform:uppercase;
		background:none;
		display:inline-block;
	}
	
	
	div.baner-glowny ul li div.baner-opis  p {
		line-height:1.3em;
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ********************** BOKSY GLOWNA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.baner-boksy-lista li {
		width:50%;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ BOKSY GLOWNA  ***************************
	 *  
	 ---------------------------------------------------------------*/
	
	div.glowna-pojemnik {

	}
	
	ul.boksy-glowna-lista li {
		padding: 0px 0px 20px 0px; 
		margin:0px 0px 0px 0px;
		width:100%;
		float:none;
		overflow:hidden;
		
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ********************** NAGLOWKI ****************************
	 *  
	 ---------------------------------------------------------------*/
	h2.tytul {
		font-size:22px;
		margin:0px 0px 0px 0px;
		padding:20px 0px 25px 0px;
		line-height:.9em;
	}

	h2.tytul span {
		line-height:1.8em;
		font-size:14px;
		margin:0px 0px  0px 0px;
		padding:0px 0px 0px 0px;
	}
	
	
	h3 {
		text-transform: uppercase;
		font-size:15px;
		margin:10px 0px 10px 0px;
		padding:0px 0px 0px 0px;
		font-weight: 700; 
	}

	
	/*----------------------------------------------------------------
	 * 
	 ********************** GALERIA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.galeria-lista li {
		width:50%;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ********************** GALERIA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.kategorie-lista li {
		width:50%;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ PRODUKTY SPIS ***************************
	 *  
	 ---------------------------------------------------------------*/

	div.produkt-pojemnik {
		padding:0px 0px 20px 0px;
		margin:0px 0px 20px 0px;
		border-bottom:solid 1px #444;
	}


	div.produkt-pojemnik:last-of-type {
		padding:0px 0px 20px 0px;
		margin:0px 0px 0px 0px;
		border-bottom:solid 0px #888;
	}


	div.produkt-pojemnik div.opis {
		width:100%;
		float:none;
		padding:0px 0px 20px 0px;
	}


	div.produkt-pojemnik div.galeria{
		width:100%;
		float:none;
		padding:0px 0px 0px 0px;
	}


	div.produkt-pojemnik  h3  {
		padding:0px 0px 20px 0px;
		margin:0px 0px 0px 0px;
		text-transform:uppercase;
		font-size:1.2em;
		width:100%;
		clear:both;
	}

	div.produkt-pojemnik div.galeria ul.galeria-lista li {
		width:33.33%;
	}
	
	/* #Podstrony
	================================================== */
	ul.podstrony-lista li {
		width:33.33%;
		height:150px;
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ********************** STOPKA ****************************
	 *  
	 ---------------------------------------------------------------*/
	#main-footer, footer {
		background:#000;
		background: rgba(0, 0, 0, 1);
	}
	
	#main-footer p.copy, footer p.copy {
		text-align:left;
		float:none;	
	}

	#main-footer p.projekt, footer p.projekt {
		text-align:left;
		float:none;		
	}


	
}

/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and  (max-width: 480px) {
	
	/*naglowek---------------*/
	#main-header h1, header h1 {
		overflow:hidden;
		float:left;
		width:100%;
		min-width:100%;
		padding:20px 0px 10px 0px;
		margin:0;
	}
	
	#main-header h1 a, header h1 a {
		width:100%;
		max-width:195px;
		position:relative;
		top:0px;
		left:0%;
		margin:0px;
		display:block;
		overflow:hidden;
	} 
	
	#main-header p, header p {
		display:none;
	}
	
	#main-header p.telefon, header p.telefon {
		text-align:center;
		float:none;	
		width:100%;
		max-width:100%;
		padding:0px 20px 0px 20px;
		font-size:0.8em;
	}
	
	#main-header p.adress, header p.adress {
		text-align:center;
		float:none;	
		width:100%;
		max-width:100%;
		padding:5px 20px 10px 20px;
		font-size:0.8em;
		display:none;
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ************************ style menu  ***************************
	 *  
	 ---------------------------------------------------------------*/


	a.show-menu {
		width:40px;
		height:40px;
		top:10px;
		right:10px;
	}
	
	div.close-menu {
		width:40px;
		height:40px;
		top:-50px;
		right:10px;
	}
	
	#main-nav ul li a, nav ul li a {
		font-size:20px;
		padding:20px 0px;
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ************************ BANER GLOWNY  ***************************
	 *  
	 ---------------------------------------------------------------*/
	
		
	div.baner-glowny ul li  {
		margin:0;
		padding:15px 0px 60px 0px;
		position:relative;
		width:100%;
		background:transparent;
		background: rgba(0, 0, 0, 0.5);
	}

	div.baner-glowny ul li div.baner-opis {
		position:ralative;
		left:0px;
		top:0px;
		width:80%;
		margin:0 auto;
		overflow:hidden;
		text-align:center;
	}



	div.baner-glowny ul li div.baner-opis h2 {
		text-transform: uppercase;
		font-size:28px;
		font-weight:400;
		border-bottom:0px solid #787878;
		margin:0px 0px 0px 0px;
		padding:0px 0px 10px 0px;
		color: #fff;
		text-align:center;
	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-1 {
		line-height:1em;
		display:inline-block;
		border-right:solid 0em #56ace5;
		padding-right:0px;
	}

	div.baner-glowny ul li div.baner-opis h2 span.tytul-2 {
		font-size:16px;
		font-weight:300;
		line-height:1em;
		color:#fff;
		margin:0px 0px 0px 0px;
		padding:0px 0px 5px 0px;
		text-transform:uppercase;
		background:none;
		display:inline-block;
	}
	
	
	div.baner-glowny ul li div.baner-opis  p {
		text-align:center;
		line-height:1.3em;
	}
	

	
	/*----------------------------------------------------------------
	 * 
	 ********************** BOKSY GLOWNA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.baner-boksy-lista li {
		width:100%;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ BOKSY GLOWNA  ***************************
	 *  
	 ---------------------------------------------------------------*/
	
	div.glowna-pojemnik {

	}
	
	ul.boksy-glowna-lista li {
		padding: 0px 0px 20px 0px; 
		margin:0px 0px 0px 0px;
		width:100%;
		float:none;
		overflow:hidden;
		
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ********************** NAGLOWKI ****************************
	 *  
	 ---------------------------------------------------------------*/
	h2.tytul {
		font-size:22px;
		margin:0px 0px 0px 0px;
		padding:20px 0px 25px 0px;
		line-height:.9em;
	}

	h2.tytul span {
		line-height:1.8em;
		font-size:14px;
		margin:0px 0px  0px 0px;
		padding:0px 0px 0px 0px;
	}
	
	h3 {
		text-transform: uppercase;
		font-size:15px;
		margin:10px 0px 10px 0px;
		padding:0px 0px 0px 0px;
		font-weight: 700; 
	}
	
	/*----------------------------------------------------------------
	 * 
	 ********************** POJEMNIKI ****************************
	 *  
	 ---------------------------------------------------------------*/
	div.podmenu-pojemnik {
		width:100%;
		float:none;
		margin-top:20px;
		padding-top:20px;
		border-left:solid 0px #f5f5f5;
		border-top:solid 1px #f5f5f5;
	}

	div.tresc-strony-pojemnik {
		width:100%;
		float:none;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ********************** PODMENU ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.boksy-podmenu-lista li {
		padding: 0px 0px 10px 0px; 
	}
	
	
	/*----------------------------------------------------------------
	 * 
	 ********************** GALERIA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.galeria-lista li {
		width:50%;
	}
	
	/* #Podstrony
	================================================== */
	ul.podstrony-lista li {
		width:33.33%;
		height:150px;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ********************** GALERIA ****************************
	 *  
	 ---------------------------------------------------------------*/
	ul.kategorie-lista li {
		width:100%;
	}
	
	/*----------------------------------------------------------------
	 * 
	 ************************ PRODUKTY SPIS ***************************
	 *  
	 ---------------------------------------------------------------*/

	div.produkt-pojemnik {
		padding:0px 0px 20px 0px;
		margin:0px 0px 20px 0px;
		border-bottom:solid 1px #444;
	}


	div.produkt-pojemnik:last-of-type {
		padding:0px 0px 20px 0px;
		margin:0px 0px 0px 0px;
		border-bottom:solid 0px #888;
	}


	div.produkt-pojemnik div.opis {
		width:100%;
		float:none;
		padding:0px 0px 20px 0px;
	}


	div.produkt-pojemnik div.galeria{
		width:100%;
		float:none;
		padding:0px 0px 0px 0px;
	}


	div.produkt-pojemnik  h3  {
		padding:0px 0px 20px 0px;
		margin:0px 0px 0px 0px;
		text-transform:uppercase;
		font-size:1.2em;
		width:100%;
		clear:both;
	}

	div.produkt-pojemnik div.galeria ul.galeria-lista li {
		width:50%;
	}

	
	/*----------------------------------------------------------------
	 * 
	 ********************** STOPKA ****************************
	 *  
	 ---------------------------------------------------------------*/
	#main-footer, footer {
		background:#000;
		background: rgba(0, 0, 0, 1);
	}

	#main-footer p.copy, footer p.copy {
		text-align:center;
		float:none;	
	}

	#main-footer p.projekt, footer p.projekt {
		text-align:center;
		float:none;		
	}
			
	
}