@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');

body { 
	/*background-color:#111; */
	background-image:none;
	font-family:'Ropa Sans', Helvetica, Arial !important;
	font-size: 1.1vw;
	line-height:1.3em;
	padding-bottom:15vh;
}
 
.gallery {
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
    grid-template-areas: 
		"a1 a1 a1 a1 a1 a1 a3 a3 a3 a4 a4 a4";
	max-height: 30vw;
	height: 30vw;
	grid-gap: 0.9vw;
	padding:2vw 2vw 1vw 2vw;
}
div.tile#s1 > div.video > div.text, div.tile#s1 > div.iframe > div.text {display:none}
div.tile#t1 {
	display:block;
	grid-area: 1 / 3 / 3 / 5;
	background: #e6e6e6;
}
div.tile#t1:hover {
    transform: none !important;
}
div.tile#t1 div.noimage, div.tile#t1:hover div.noimage  {
    font-size: 200% !important;
}

div.tile#t1 div.noimage .text, div.tile#t1:hover div.noimage .text  {
    font-size: 140% !important;
}
div.tile#t1 div.noimage .text.small, div.tile#t1:hover div.noimage .text.small  {
    font-size: 125% !important;
}

div.tile > div:before {display:none;}
div.tile > div > * {
	position: absolute;
	z-index:10;
}



div.tile {
	filter:none !important;
	background: #f7af3b;
	color: #ffffff; 
	position: relative;
	border: 1px solid #f7af3b40;
}	
div.tile > div {
	padding:0;
}
div.tile > div {
    background-color: #ffffff;
    color: #e7f416;
}


div.tile > div.hasimage > img, 
div.tile > div.hasimage > video,
div.tile > div.hasimage > iframe{
	max-height: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	z-index: 1;
	top: 0;
}

div.tile > div > div.text {
	padding: 1em 3.5em 2em 1em;
	background-color:#111111c9; 
	width: 100%;
	bottom: 0;
	margin: 0;
}
div.tile > div.noimage > div.text {
	padding: 1em 3em 2em 1em;
	padding: 1em 1em 2em 1em;
	height:100%;
	font-size:140%;
	line-height:1.1em;
	background-color: transparent;
}
div.tile > div.noimage > div.text.small {
	font-size:125%;
	line-height:1.1em;
}

div.tile > div > div.text span {
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	display: block;
}
div.tile > div > div.info {
	padding:0.2em 3.5em 0.5em 1.2em;
	padding:0.2em 1em 0.5em 1.2em;
}
div.tile > div > div.info > span.user {
	width:calc(100% - 11em);
	position: absolute;
}
div.tile > div > div.info > span.user span {
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
	overflow: hidden;
}

div.tile > div > span.serviceicon { 
	bottom: 0;
 	text-align: right;
	padding: 0.2em 0.7vw 1.4em 1vw;
}
div.tile > div > span.serviceicon::before { 
	position: relative; 
	margin:0;
}
.content {
    padding: 1vw 4vw 4vw 4vw;
}
.content > div.tile {
    padding-bottom: 120%;
}

.gallery > div.tile#s5:hover, .gallery > div.tile#s6:hover, .gallery > div.tile#s7:hover, .gallery > div.tile#s8:hover
	{ z-index: 1001; transform:scale(1.5) !important; 	transition: all 0.3s ease-in-out;}


#morebtn{
    background-color: #499bd0;
    font: inherit;
    padding: 3px 5px;
    color: #fff;
    margin: 10px;
    font-weight: bold;
    border: 1px solid #ffffff;
    height: 30px;
    border-radius: 0px;
    box-sizing: border-box;
    width: auto;
    text-transform: uppercase;
}
#morebtn:before {content: "mehr Nachrichten...";}


@media (min-width: 1061px) {
	.gallery > div.tile:nth-child(4n+1) { transform-origin: 20% 30%;}
	.gallery > div.tile:nth-child(4n+2) { transform-origin: 40% 30%;}
	.gallery > div.tile:nth-child(4n+3) { transform-origin: 60% 30%;}
	.gallery > div.tile:nth-child(4n)   { transform-origin: 80% 30%;}
	.content > div.tile:nth-child(5n) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(5n+1) { transform-origin: 35% 40%;}
	.content > div.tile:nth-child(5n+2) { transform-origin: 50% 40%;}
	.content > div.tile:nth-child(5n+3)   { transform-origin: 65% 40%;}
	.content > div.tile:nth-child(5n+4) { transform-origin: 80% 40%;}
	.content > div.tile:nth-child(1) { transform-origin: 80% 40%;}
	.content > div.tile:nth-child(2) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(3) { transform-origin: 40% 40%;}
	.content > div.tile:nth-child(4) { transform-origin: 80% 40%;}
/*	.content > div.tile:nth-child(5) { transform-origin: 65% 40%;}
	.content > div.tile:nth-child(6) { transform-origin: 80% 40%;}*/

}

@media (min-width: 641px) AND (max-width: 1060px) {
	body { 
		font-size: 1.5vw; 
		line-height: normal;
	}
	.content { font-size:90%;}
	div.tile > div > span.serviceicon::before {font-size:auto;}

	.gallery > div.tile:nth-child(4n+1) { transform-origin: 20% 30%;}
	.gallery > div.tile:nth-child(4n+2) { transform-origin: 40% 30%;}
	.gallery > div.tile:nth-child(4n+3) { transform-origin: 60% 30%;}
	.gallery > div.tile:nth-child(4n)   { transform-origin: 80% 30%;}
	.content > div.tile:nth-child(4n+3) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(4n)   { transform-origin: 40% 40%;}
	.content > div.tile:nth-child(4n+1) { transform-origin: 60% 40%;}
	.content > div.tile:nth-child(4n+2) { transform-origin: 80% 40%;}

	.content > div.tile:nth-child(1) { transform-origin: 20% 30%;}
	.content > div.tile:nth-child(2) { transform-origin: 40% 30%;}

}
@media (min-width: 481px) AND (max-width: 640px) {
	body { font-size:2.3vw;}
	.gallery {
		grid-template-areas: 
			"a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1" 
			"a3 a3 a3 a3 a3 a3 a4 a4 a4 a4 a4 a4";
        grid-template-rows: 1fr 1fr;
		max-height: 100vw;
		height: 100vw;
		grid-gap: 1vw;
	}
	.gallery > .tile > div {
		padding: 0;
	}
	.gallery > div.tile:nth-child(2n+1) { transform-origin: -5% -5%;}
	.gallery > div.tile:nth-child(2n)   { transform-origin: 105% -5%;}

	.content > div.tile:nth-child(3n+1) { transform-origin: 20% 10%;}
	.content > div.tile:nth-child(3n+2) { transform-origin: 50% 10%;}
	.content > div.tile:nth-child(3n)   { transform-origin: 80% 10%;}
	.content > div.tile:nth-child(1) { transform-origin: 80% 10%;}
	.content > div.tile:nth-child(2) { transform-origin: 80% 10%;}
	.content > div.tile:nth-child(3) { transform-origin: 80% 10%;}


	
}
@media (max-width: 480px) {
	body { font-size:12px; }
	.gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: 
			"a1 a1"
			"a3 a4";
		max-height: 120vw;
		height: 120vw;

		grid-gap: 1vw;
	}
	div.tile#t1 {
		grid-area: 2 / 1 / 4 / 3;
	}

	.gallery > div.tile:nth-child(2n+1) { transform-origin: -5% -5%;}
	.gallery > div.tile:nth-child(2n)   { transform-origin: 105% -5%;}
}

div.tile#s1 > div.video > .text {
    background: transparent;
}

div.tile > div.noimage > div.text span {
   white-space: normal;   
}

#s2, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12 {display: none!important;}

.tile:hover .video .text, .tile:hover .video .info, .tile:hover .video .serviceicon {display: none !important;}
.tile:hover .video video, .tile:hover .video iframe {object-fit: contain !important}