/* Smartphone version
   Usually Nothing to do: blocks are stacked by default. */
	
	.b15 { width: 25%; }
	.b50-50-60 { width: 60%; }

/* Tablet version */
@media (min-width: 768px) {
	.b1, .b2 { width: 50%; }
	.b4 { width: 25%; }
	.b8 { width: 50%; }
	.b12 { width: 75% }
	.b15 { width: 25%; }
	.b20 { width: 20%; }
	.b30 { width: 30%; }
	.b33 { width: 33.3334%; }
	.b40 { width: 40%; }
	.b60 { width: 60%; }
	.b70 { width: 70%; }
	
	.b10-10 { width: 10% }
  	.b25-25 { width: 25%; }
  	.b25-50 { width: 50%; }
  	.b50-50 { width: 50%; }
  	.b75-75 { width: 75%; }
  	.b50-50-60 { width: 50%; }
  	
  	/*Offset*/
	.offset10 {margin-left:10%;}
	.offset15 {margin-left:15%;}
	.offset20 {margin-left:20%;}
	.offset25 {margin-left:25%;}
	.offset30 {margin-left:30%;}
	.offset35 {margin-left:35%;}
	.offset40 {margin-left:40%;}
	.offset45 {margin-left:45%;}
	.offset50 {margin-left:50%;}
	.offset55 {margin-left:55%;}
	.offset60 {margin-left:60%;}
	.offset65 {margin-left:65%;}
	.offset70 {margin-left:70%;}
	.offset75 {margin-left:75%;}
	.offset80 {margin-left:80%;}
	.offset85 {margin-left:85%;}
	.offset90 {margin-left:90%;}
  	
  	/* Gallery columns */
  	.ce_gallery>ul.cols_2 li {width: 50%;}
	.ce_gallery>ul.cols_3 li {width: 33.33%;}
	.ce_gallery>ul.cols_4 li {width: 25%;}
	.ce_gallery>ul.cols_5 li {width: 20%;}
	.ce_gallery>ul.cols_6 li {width: 16.66%;}
	.ce_gallery>ul.cols_7 li {width: 14.285%;}
	.ce_gallery>ul.cols_8 li {width: 12.5%;}
  	
  	/* Newslist in columns. Can also be used for events etc. Just adjust respective template file */
  	.columns_3 { width: 33.33%; }
  
  	/*Clear and reset after 3 blocks for cleaner layout when columns have different heights */
  	.columns_3:nth-child(3n+1) { clear:left; }
	
  	/*  Give the columns padding left and right */
  	.columns_3 { padding: 0 .5em; }
  		
  	/* cards in columns */
  	
  	.two-cards { width:calc(50% - 10px); margin:5px; }			
  	.two-cards:nth-child(2n+1) { clear:left; }
  	
  	.three-cards { width:calc(33.33% - 10px); margin:5px; }			
  	.three-cards:nth-child(3n+1) { clear:left; }
  		
  	.four-cards { width:calc(25% - 10px); margin:5px; }
  	.four-cards:nth-child(4n+1) { clear:left; }
  		
  	.five-cards { width:calc(20% - 10px); margin:5px; }
  	.five-cards:nth-child(5n+1) { clear:left; }
  	
  	.six-cards { width:calc(16.6666% - 10px); margin:5px; }
  	.six-cards:nth-child(6n+1) { clear:left; }
}

/* Desktop version */
@media (min-width: 1024px) {
 
  .b1, .b2, .b3 { width: 50%; }
  .b4, .b5, .b6, .b7 { width: 25%; }
  .b8, .b9, .b10 { width: 20%; }
  .b11, .b33 { width: 33.3334%; }
  .b12 { width: 75%; }
  .b13 { width: 30%; }
  .b14 { width: 70%; }
  .b15 { width: 25%; }
  
  
  .b20 { width: 20%; }
  .b25-25 { width: 25%; }
  .b25-50 { width: 25%; }
  .b30 { width: 30%; }
  .b33 { width: 33.3334%; }
  .b40 { width: 40%; }
  .b50 { width: 50%; }
  .b50-50 { width: 50%; }
  .b60 { width: 60%; }
  .b66 { width: 66.6666%; }
  .b70 { width: 70%; }
  .b75 { width: 75%; }
  .b75-75 { width: 75%; }
  
  
  .grid1 { width: 8.3334%; }
  .grid2 { width: 16.6666%; }
  .grid3 { width: 25%; }
  .grid4 { width: 33.3334%; }
  .grid5 { width: 41.6667% }
  .grid6 { width: 50%; }
  .grid7 { width: 58.3333%; }
  .grid8 { width: 66.6666%; }
  .grid9 { width: 75%; }
  .grid10 { width: 83.3334%; }
  .grid11 { width: 91.6664%; }
  
  /* Gallery columns */
 	.ce_gallery>ul.cols_2 li {width: 50%;}
 	.ce_gallery>ul.cols_3 li {width: 33.33%;}
	.ce_gallery>ul.cols_4 li {width: 25%;}
	.ce_gallery>ul.cols_5 li {width: 20%;}
	.ce_gallery>ul.cols_6 li {width: 16.66%;}
	.ce_gallery>ul.cols_7 li {width: 14.285%;}
	.ce_gallery>ul.cols_8 li {width: 12.5%;}
	
  /* Newslist in columns. Can also be used for events etc. Just adjust respective template file */
  	.columns_3 {
  			width: 33.33%;
		 }
  /*Clear and reset after 3 blocks for cleaner layout when columns have different heights */
  	.columns_3:nth-child(3n+1) {
			 clear: left;
		}
  /*  Give the columns padding left and right */
  	.columns_3 {padding: 0 .5em;}
  
  /* cards in columns */
  	
  	.two-cards { width:calc(50% - 10px); margin:5px; }			
  	.two-cards:nth-child(2n+1) { clear:left; }
  	
  	.three-cards { width:calc(33.33% - 10px); margin:5px; }			
  	.three-cards:nth-child(3n+1) { clear:left; }
  		
  	.four-cards { width:calc(25% - 10px); margin:5px; }
  	.four-cards:nth-child(4n+1) { clear:left; }
  		
  	.five-cards { width:calc(20% - 10px); margin:5px; }
  	.five-cards:nth-child(5n+1) { clear:left; }
  	
  	.six-cards { width:calc(16.6666% - 10px); margin:5px; }
  	.six-cards:nth-child(6n+1) { clear:left; }
  	
}