/* TSG Instagram Feed: front page only (slogan in header + intro block). */

/* ---- Slogan in the header graphic ("Variante A") ---- */
.tsg-claim[hidden] { display: none; }
.tsg-claim {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 46%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px 54px 24px 24px;
	z-index: 2;
	background: radial-gradient(ellipse 70% 80% at 35% 50%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .75) 45%, rgba(255, 255, 255, 0) 75%);
}
.tsg-claim__slogan {
	margin: 0;
	font: italic 400 44px/1.15 "Old Standard TT", Georgia, "Times New Roman", serif;
	color: #011627;
	text-shadow: 0 0 6px #fff, 0 0 12px #fff;
}
.tsg-claim__extra {
	margin: 14px 0 0;
	font: 700 12.75px/1.5 Lato, Arial, sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #ff8100;
	text-shadow: 0 0 6px #fff, 0 0 12px #fff;
}
.tsg-claim__extra::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 28px;
	height: 1px;
	margin-right: 10px;
	background: #ff8100;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
	.tsg-claim { width: 52%; padding-right: 27px; }
	.tsg-claim__slogan { font-size: 34px; }
}

/* Mobile */
/* Phone: the theme collapses the header to height 0. On the front page we
   re-open it: graphic on top (200px), slogan below it, like the mockup. */
@media (max-width: 767px) {
	.home .ct-header__hero {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		padding-top: 200px !important;
	}
	.home .ct-header__hero::before {
		bottom: auto !important;
		height: 200px !important;
		background-size: auto 300px !important;
		background-position: 30% 55% !important;
	}
	.home .ct-content { padding-top: 8px !important; }
	.tsg-claim {
		position: static;
		width: auto;
		text-align: center;
		padding: 14px 16px 4px;
		background: none;
	}
	.tsg-claim__slogan { font-size: 30px; }
}

/* ---- Intro block in the page content ---- */
.tsg-intro {
	max-width: 780px;
	margin: 0 auto 64px;
	text-align: center;
}
/* Heading in the theme's menu style (bold, uppercase, tracked), just larger */
.tsg-intro h1 {
	font: 700 34px/1.25 Lato, Arial, sans-serif;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: #011627;
	margin: 0 0 22px;
}
.tsg-intro p { margin: 0 0 14px; }
.tsg-intro p:empty,
.tsg-intro br { display: none; }
.tsg-intro .tsg-intro__links {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
}
.tsg-intro__links br { display: none; }
.tsg-intro__links a {
	color: #ff8100;
	font: 700 12.75px/1.5 Lato, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.275px;
	text-decoration: none;
}
.tsg-intro__links a:hover,
.tsg-intro__links a:focus { color: #011627; }

@media (max-width: 480px) {
	.tsg-intro { margin-bottom: 44px; }
	.tsg-intro h1 { font-size: 24px; letter-spacing: 2.4px; }
}