@font-face  {
	font-family:"VeneerTwo";
	font-weight:normal;
	font-style:normal;
	src: url('https://live.flyp.tv/fkpscorpio/highfield2023/assets/VeneerTwo.woff2') format("woff2"),
	url('https://live.flyp.tv/fkpscorpio/highfield2023/assets/VeneerTwo.woff') format("woff");
}

body { 
	background-color:#ff9900; 
	background-image:none;
	font-family:VeneerTwo;
	font-size: 14px;
}
div.tile > div.hasimage > span.serviceicon::before {
    top:-0.4rem;
}

div.tile > div > span.serviceicon::before {
    right:0.65rem;
    font-size:2rem;
}

.serviceicon::before {
  color: transparent;
  background-repeat: no-repeat;
  background-position: center right;
}

.serviceicon_instagram::before {
    background-image: url('https://live.flyp.tv/fkpscorpio/highfield2022/assets/insta_highfield.svg');
}
.serviceicon_twitter::before {
    background-image: url('https://live.flyp.tv/fkpscorpio/highfield2022/assets/twitter_highfield.svg');
    background-size: 22px 22px;
    background-position: top 4px right;
}
.serviceicon_facebook::before {
    background-image: url('https://live.flyp.tv/fkpscorpio/highfield2022/assets/fb_highfield.svg');
}
.serviceicon_youtube::before {
    background-image: url('https://live.flyp.tv/fkpscorpio/highfield2022/assets/icon_yt.svg');
}

div.noimage .serviceicon {	background:#f2f0f1d0 !important;} 

.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: 66vw;
	height: 66vw;
}
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: white; 
	position: relative;
	border-radius:20px;
}	
div.tile > div {
	padding:0;
}
div.tile > div {
    background-color: #398b85 !important;
}
div.tile a { color: #ff9900!important; }
.info {z-index: 100!important;color: #3d2f30!important;}
div.tile > div.hasimage {
    background-color: transportant !important;
}

.tile .noimage {
    background-image: url(hf23_textbg_4.jpg);
    background-size: cover;
    background-position:bottom;
}

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:#f2f0f1f0;
	color:#3d2f30;
	min-height:3.3rem;
	max-height:3.3rem;
}
div.tile > div > div.text {
	padding: 0.4rem 3rem 1.8rem 0.6rem;
    color: #413c46;
    text-align: center;
	width: 100%;
	bottom: 0;
	margin: 0;
}
div.tile > div.noimage > div.text {
	padding: 1em 1em 2em 1em;
	height:100%;
	font-size:120%;
	line-height:1.1em;
	background-color: transparent;
}
div.tile > div.noimage > div.text.small {
	font-size:105%;
	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 0.7rem 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-bottom:0.8rem;
	padding-top: 0.3rem;
}
div.tile > div.noimage > span.serviceicon {
    /* padding-top: 0.8rem; */
    max-height: 3.3rem;
    min-height: 3.3rem;
}
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: #f90;
    font: inherit;
    font-weight: bold;
    padding: 11px 5px 8px;
    color: #FFF;
    margin: 10px;
    border: 0px solid #ffffff;
    border-radius: 0px;
    box-sizing: border-box;
    width: auto;
    text-transform: uppercase;
    font-size: 1.4em;
}

div#s4 {
    font-size: 200%;
}


@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 (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(3) { transform-origin: 20% 30%;}
	.content > div.tile:nth-child(2)   { transform-origin: 80% 30%;}
	
	/*div.tile > div > span.serviceicon {
        padding-top: 1.3em;
    }*/

}
@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: 133vw;
		height: 133vw;
		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%;}
div#s4 {
    font-size: 100%;
}

	
}
@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: 287vw;
		height: 287vw;
		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:not(.intents) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    line-height:1.6em;
}
.info .user span:nth-child(2) {
  display:none !important;
}

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

div.tile div.consent {z-index: 101 !important;}
div.tile div.consent p {color:white;}