@supports not (display: grid) {
	.asdf span{
margin:1em;
}
.main-content {
	display:none;
}
		.pudlo {		width:100%;
color: #000;
    font-weight: 600;
	text-align:left;
}
.pudlo span{
margin:1em;
}

.plakaty:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.ulotki:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.teczki:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.foldery:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.zaproszenia:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.skladane:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.wizytowki:hover {
	opacity: 0.6;
	color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

.lewy {
width: calc(40% - 20px);
margin-right:20px;
float:left;
}

.plakaty {
height:300px;
width:100%;
  background-image:url('../img/plakatyN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
}

.p1 {
width:100%;
height:20px;
}
.teczki {
width: 100%;
height:150px;
background-image:url(../img/teczkiN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
}

.prawy {
width:60%;
float:left;
}

.ulotki {
width:33%;
height:300px;
background-image:url(../img/ulotkiN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
float:left;
}

.skladane {
width:calc(67% - 20px);
height:140px;
background-image:url(../img/ulotki-skladaneN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
margin-left:20px;
float:left;
}

.wizytowki {
width:33%;
height:140px;
float:left;
margin-left:20px;
margin-top:20px;
background-image:url(../img/wizytowkiN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
}

.zaproszenia {
width:calc(66% + 20px);
background-image:url(../img/zaproszeniaN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
float:left;
margin-top:20px;
height:150px;
}

.foldery {
height:310px;
width: calc(34% - 40px);
margin-left:20px;
margin-top:-140px;
background-image:url(../img/folderyN.png);
	  background-repeat:no-repeat;
	  background-size:cover;
	 background-position: center; 
float:left;
}
}
@supports (display: grid) {
		.asdf span{
margin:1em;
}
	.pudlo {
		display:none;
	}
	
.main-content {
  padding: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 80%;
          flex: 1 1 80%;
  /*min-height: 100vh;*/
}

.portfolio {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-rows: (60px)[9];
      grid-template-rows: repeat(9, 60px);
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
}

.portfolio-item {
  background: #f96855;
  color: #000;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: top;
      -ms-flex-pack: top;
          justify-content: top;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  font-size: 1.0em;
  padding:1em;
  background-size: cover;
  background-position: top left;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  position: relative;
  z-index: 10;
}

.portfolio-item:hover {
	opacity: 0.6;
}
.portfolio-item.small {
  -ms-grid-row: span 6;
      grid-row: span 6;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  background-image:url('../img/plakatyN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.medium {
  -ms-grid-row: span 6;
      grid-row: span 6;
  -ms-grid-column: span 1;
      grid-column: span 1;
	  	    background-image:url('../img/ulotkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.large {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	    background-image:url('../img/ulotki-skladaneN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.tall {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 1;
      grid-column: span 1;
	  	    background-image:url('../img/wizytowkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.wide {
  -ms-grid-row: span 6;
      grid-row: span 6;
  -ms-grid-column: span 1;
      grid-column: span 1;
	  background-image:url('../img/folderyN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}

.portfolio-item.six {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/teczkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}

.portfolio-item.seven {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/zaproszeniaN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item:hover {
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

}

/*------*/
@media screen and (max-width: 830px) {
@supports not (display: grid) {
		.asdf {
			
		}
		
		.lewy {
			width:100%;
			clear:both;
		}
		
		.prawy {
			width:100%;
			margin-left:0px;
		}
		
		.ulotki {
			width:calc(50% - 10px);
			margin-right:10px;
			float:left;
			height:150px;
			margin-top:20px;
		}
		
		.skladane {
				width:calc(50% - 10px);
			margin-left:10px;
			float:left;
			height:150px;
			margin-top:20px;
		}
		
		.wizytowki {
			width:100%;
			clear:both;
			margin-top:20px;
			margin-left:0px;
		}
		
		.foldery {
			width:calc(50% - 10px);
			margin-left:10px;
			float:left;
			height:150px;
			margin-top:20px;
			
		}
		
		.zaproszenia {
				width:calc(50% - 10px);
			margin-right:10px;
			float:left;
			height:150px;
			margin-top:20px;
			margin-left:0px;
		}
	}
	
	@supports (display: grid) {
			.asdf span{
margin:1em;
}

	
	.portfolio {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-rows: (40px)[12];
      grid-template-rows: repeat(12, 40px);
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.portfolio-item.small {
  -ms-grid-row: span 6;
      grid-row: span 6;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  background-image:url('../img/plakatyN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:top;
}
.portfolio-item.medium {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/ulotkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:center;
}
.portfolio-item.large {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	    background-image:url('../img/ulotki-skladaneN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.tall {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/wizytowkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item.wide {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  background-image:url('../img/folderyN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:center;
}

.portfolio-item.six {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/teczkiN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}

.portfolio-item.seven {
  -ms-grid-row: span 3;
      grid-row: span 3;
  -ms-grid-column: span 2;
      grid-column: span 2;
	  	    background-image:url('../img/zaproszeniaN.png');
	  background-repeat:no-repeat;
	  background-size:cover;
}
.portfolio-item:hover {
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.85);
}

}
}