@font-face {
    font-family: "Rubens";
    src: url(Rubens.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

/*
@font-face {
    font-family: "DoublePica";
    src: url(doublepica.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}
*/
@font-face {
    font-family: "GreatPrimer";
    src: url(greatprimer.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

body { 
	background-color:#000; 
	background-image:none;
	font-family:GreatPrimer, Arial, Helvetica;
}

div.tile > div.hasimage > span.serviceicon::before {
    top:-5px;
}
div.tile > div > span.serviceicon::before {
      font-size:1.3em;
      right:0;
      opacity: 0.7;
}
.serviceicon::before {

  color: transparent;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center right;
}

.serviceicon_instagram::before {
    background-image: url(insta_meraluna.svg);
}
.serviceicon_twitter::before {
    background-image: url(twitter_meraluna.svg);
}
.serviceicon_facebook::before {
    background-image: url(fb_meraluna.svg);
}
.serviceicon_youtube::before {
    background-image: url(youtube_mera-luna.svg);
}




.gallery {
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 2fr 1.45fr;
	grid-template-areas: 
		"a1 a1 a1 a1 a1 a1 a1 a1 a4 a4 a4 a4" 
		"a5 a5 a5 a6 a6 a6 a7 a7 a7 a8 a8 a8";
	grid-gap: 0.66vw;
	padding:1vw;
	max-height: 65vw;
	height: 65vw;
}
div.tile#s1 > div.video > div.text, div.tile#s1 > div.iframe > div.text {display:none}
div.tile#s3 {display:none}
div.tile#t1 {
	display:block;
	grid-area: 1 / 2 / 3 / 4;
	background: #f1f0f1;
}

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



div.tile {
	filter:none;
	background: transparent;
	color: #424131; 
	position: relative;
}	
div.tile > div {
	padding:0;
}
div.tile > div {
    background-color: #f2f0f1 !important;
}
div.tile a { color: #91bc55; }
div.tile > div.hasimage {
    background-color: transportant !important;
}
.tile .noimage {
    background-image: url(textbg.jpg);
    background-size: cover;
}

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;
	object-position: center;
	z-index: 1;
	top: 0;
}
div.tile > div.hasimage > div.text {
    background: #3B3735f0;
    color: #F2F1E1;
}

div.tile > div > div.text {
	padding: 0.3em 3.5em 2em 1em;
/* 	background-color:#f2f0f1f0; */
	width: 100%;
	bottom: 0;
	margin: 0;
}
div.tile > div.noimage > div.text {
	padding: 3.5em 1em 2em 1em;
	height:100%;
	font-size:140%;
	line-height:1.25em;
	background-color: transparent;
}
div.tile > div.noimage > div.text.small {
	font-size:125%;
	line-height:1.1em;
}
div.tile > div.noimage > div.text.big {
	line-height:1.1em;
}
div.tile > div.hasimage > 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 > div.tile {
    padding-bottom: 110%;
}

.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: #EA1864;
    font: inherit;
    padding: 3px 5px;
    color: #FFF;
    margin: 10px;
    font-weight: 300;
    border: 1px solid #ffffff;
    height: 30px;
    border-radius: 0px;
    box-sizing: border-box;
    width: auto;
    text-transform: uppercase;
}


@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+2) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(5n+3) { transform-origin: 35% 40%;}
	.content > div.tile:nth-child(5n+4) { transform-origin: 50% 40%;}
	.content > div.tile:nth-child(5n)   { transform-origin: 65% 40%;}
	.content > div.tile:nth-child(5n+1) { transform-origin: 80% 40%;}
	.content > div.tile:nth-child(1) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(2) { transform-origin: 65% 40%;}
	.content > div.tile:nth-child(3) { transform-origin: 80% 40%;}
	.content > div.tile:nth-child(4) { transform-origin: 20% 40%;}
	.content > div.tile:nth-child(5) { transform-origin: 65% 40%;}
	.content > div.tile:nth-child(6) { transform-origin: 80% 40%;}

}

@media (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(3) { transform-origin: 20% 30%;}
	.content > div.tile:nth-child(2)   { transform-origin: 80% 30%;}

}
@media (max-width: 640px) {
	body { font-size:12px;}
	.gallery {
		grid-template-rows: 0.8fr 1fr 1fr;
		grid-template-areas: 
			"a1 a1 a1 a1 a1 a1 a1 a1 a4 a4 a4 a4" 
			"a5 a5 a5 a5 a5 a5 a6 a6 a6 a6 a6 a6"
			"a7 a7 a7 a7 a7 a7 a8 a8 a8 a8 a8 a8";
		max-height: 140vw;
		height: 140vw;
		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) { transform-origin: 20% 10%;}
	.content > div.tile:nth-child(3n+1) { transform-origin: 50% 10%;}
	.content > div.tile:nth-child(3n+2)   { transform-origin: 80% 10%;}
	.content > div.tile:nth-child(1) { transform-origin: 20% 10%;}
	.content > div.tile:nth-child(2) { transform-origin: 20% 10%;}


	
}
@media (max-width: 480px) {
	body { font-size:11px; }
	.gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 2fr 1fr 1fr;
		grid-template-areas: 
			"a1 a1" 
			"a4 a4" 
			"a5 a6"
			"a7 a8";
		max-height: 300vw;
		height: 300vw;
		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;
}

.content {padding: 4vw 1vw 4vw 1vw}
.tile#t1 > div > img, .tile#sxxx > div > img {object-fit:cover}

div.tile > div.hasimage > img {object-fit: cover!important;}
div.tile > div.noimage > div > span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}
.info .user span:nth-child(2) {
  display:none !important;
}

div.tile > div.noimage > div.text.big {
  padding:1.5em 1em 0.5em 0.5em;
}

div.tile div.consent input, a#morebtn {font-family:GreatPrimer, Arial, Helvetica;
    margin: 0.1em;
    color: #91bc55;
    background: #292624f0;
}
div.tile div.consent input:hover {
    color:#fff;   
}
a#morebtn {
    border:0;
}
}