main.scss

---
---

body {
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
}

.search-icon {
	// Older browsers: PNG fallback (resized to 40px wide)
	background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon:search?width=40&format=png&source=o-icons');
	// Modern browsers: SVG covering the whole size of the element
	// we declare multiple backgrounds so that only modern browsers read this property
	background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:search?format=svg&source=o-icons'), none;

	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	background-color: transparent;
	vertical-align: middle;
	float: right;
	cursor: pointer;

	&:hover {
		background-color: #f2e5da;
	}
}

.o-header-services__nav-list {
	display: inline-block;
	@media (max-width: 46.24em) {
		.o-header-services__nav-item {
			display: inline-block;
		}
	}
}
/* Google custom search overrides */
.gsc-control-cse {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
}
.gsc-input {
	padding-right: 0 !important;
}
.gsc-input-box-focus {
	opacity: 1;
}
.gsc-search-button {
	display: none;
}

.c-search {
	padding-top: 7px;
	display: inline-block;
	width: 40%;
	float: right;
}

.searchbox.hidden {
	display: none;
}


.footer-logo {
	float: right;
	font-size: 20px;
	line-height: 40px;
}

.origami-logo {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2My4zIDYzLjMnPjxnPjxnPjxwb2x5Z29uIGZpbGw9JyNEN0QxQzYnIHBvaW50cz0nMzEuNyw1MS4zIDE5LjksNjMuMiAwLjEsNDMuNCAwLjEsMTkuNycvPjxwb2x5bGluZSBmaWxsPScjQjdCNUFCJyBwb2ludHM9JzQzLjYsMCAxOS45LDAgMC4xLDE5LjcgMTIsMzEuNiA0My42LDAnLz48cG9seWxpbmUgZmlsbD0nIzg3ODY4MCcgcG9pbnRzPSc2My4zLDQzLjQgNjMuMywxOS43IDQzLjYsMCAzMS43LDExLjggNjMuMyw0My40Jy8+PHBvbHlnb24gZmlsbD0nIzY0NjQ2NCcgcG9pbnRzPScxOS45LDYzLjIgNDMuNiw2My4yIDYzLjMsNDMuNCA1MS41LDMxLjYnLz48cGF0aCBmaWxsPScjRDdEMUM2JyBkPSdtMC4wOTgwNjggMTkuNycvPjwvZz48L2c+PC9zdmc+");
	vertical-align: top;
	margin-right: 10px;
}

.hero {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-top: -100px;
	padding-top: 100px;
	margin-bottom: 40px;
	text-shadow: 0 0 25px rgba(#000000, 0.4);
	text-align: center;
	color: #ffffff;
	background: #131313;
	background: linear-gradient(to bottom, rgb(51, 51, 51) 55%, #131313);

	h1 {
		font-size: 3em;
		font-weight: 200;
		margin: 0 0 30px;
	}

}
.hero__primary {
	background: #131313 url(/img/hero.png) no-repeat center top;
	background-size: cover;
}
@media (min-width: 46.25em) {
	.hero__primary {
		background: none;
		padding-top: 40px;
		margin-bottom: 0;
		margin-top: 0;
	}
	.hero {
		background: #131313 url(/img/hero.png) no-repeat center top;
		background-size: cover;
	}
}

.hero__summary {
	font-size: 1.5em;
	line-height: 1.4;
	margin-bottom: 0.25em;
	margin-top: 0;
}
.hero__actions {
	margin-top: 30px;
	margin-bottom: 20px;

	a {
		font-size: 24px;
		line-height: 1;
		padding-top: 12px;
		padding-bottom: 12px;
		border-width: 2px;
		margin-left: 0.5em;
		margin-right: 0.5em;
		margin-bottom: 0.5em;
		text-shadow: none;
		background-color: rgba(#000000, 0.15);
	}
}

.homepage-header {
	.o-header-services,
	.o-header-services__top {
		background: transparent;
	}
	.o-header-services__primary-nav {
		display: none;
	}
}