@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700,900);

h2 {
	font-size: 2em;
	font-weight: 400;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	margin-top: 40px;
	text-align: left;		
}

h2 span{
	display: block;
	font-size: 0.6em;
	font-weight: 300;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	margin-bottom:5px;
}


.rb-grid {
	list-style: none;
	text-align: center;
	margin: 0 auto;
}

.rb-grid li {
	width: 100%;
	height: 13em;
	text-align:left;
	margin-bottom: 3%;
	background: #CCC;
	color: #fff;
	display: block;
	padding: 1.6em;
	cursor: pointer;
	position: relative;
	float:left;
}




ç {
	font-size: 1.6em;
	font-weight: 300;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}
.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
	font-size: 4em;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: auto;
	line-height: 2.5;
	opacity: 0.4;
	text-align: right;
	pointer-events: none;
}
.rb-grid li > div {
		text-align: center;
	}

.rb-temp {
	display: block;
	font-size: 2em;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.rb-grid li:hover .rb-temp {
	opacity: 1;
}





/* Colors */

/* Grid */
/* Verpackung Weltbild 1*/
.rb-grid li:nth-child(1) { 
background:url(../images/web-thaller.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(2) { 
background:url(../images/web-thaller2.jpg) 50% 50% no-repeat;
background-size:cover;}

/* Verpackung Weltbild 2*/

.rb-grid li:nth-child(4) { 
background:url(../images/web-timojanzen.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(5) { 
background:url(../images/web-timojanzen2.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(6) { 
background:url(../images/web-timojanzen3.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(7) { 
background:url(../images/web-timojanzen4.jpg)50% 50% no-repeat;
background-size:cover;}

.rb-grid li:nth-child(9) { 
background:url(../images/web-svu.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(10) { 
background:url(../images/web-svu2.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(11) { 
background:url(../images/web-svu3.jpg)50% 50% no-repeat;
background-size:cover;}
.rb-grid li:nth-child(12) { 
background:url(../images/web-svu4.jpg)50% 50% no-repeat;
background-size:cover;}


/* Media Queries for rb-grid */

@media screen and (min-width:420px) {
.rb-grid li {
	height: 15em;
	margin-bottom: 4%;	
	
}
@media screen and (min-width:550px) {
	.rb-grid li {
	height: 18em;
	margin-bottom: 4%;	
	
}
	
}
@media screen and (min-width:550px) {
	.rb-grid li {
	height: 20em;
	margin-bottom: 4%;	
	
}
	
}
@media screen and (min-width:830px) {
	.rb-grid li {
	height: 24em;
	margin-bottom: 4%;	
	
}
	
}
@media screen and (min-width:860px) {
	.rb-grid li {
	height: 26em;
	margin-bottom: 4%;	
	
}
	
}
@media screen and (min-width:1010px) {
	.rb-grid li {
	width: 24%;
	height: 22em;
	margin: 0.5%;
	background: #8CC7DF;
	color: #fff;
	display: block;
	float: left;
	padding: 1.6em;
	cursor: pointer;
	position: relative;
}

.rb-grid li.rb-span-2 {
	width: 49%;
}

.rb-grid li.rb-span-4 {
	width: 99%;
}

.rb-grid li h3 {
	font-size: 2.6em;
	font-weight: 300;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}
.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
	font-size: 10em;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	line-height: 3;
	opacity: 0.4;
	text-align: right;
	pointer-events: none;
}
.rb-grid li > div {
		text-align: center;
	}
	
	
}
@media screen and (min-width:980px) {
	
	
}