/*
 * Styles for all 8 services pages (services/*.html)
 */

.banner > h1 {
	font-size: 1rem;
	font-weight: normal;
	text-shadow: 0 0 4px black;
}

.banner > h1 .large {
	display: block;
	font-size: 2rem;
	margin-bottom: 0.25rem;
}


/* Specific banners */
#starting-a-business-banner {
	background-image: url("../images/backgrounds/starting-a-business.jpg");
}

#accounting-banner {
	background-image: url("../images/backgrounds/accounting.jpg");
}

#tax-banner {
	/* background-image: url("../images/backgrounds/tax.jpg"); */
	/* background-position: 50% 75%; */
	background-image: url("../images/backgrounds/payroll.jpg");
}

#corporate-secretarial-banner {
	background-image: url("../images/backgrounds/corporate-secretarial.jpg");
}

#payroll-banner {
	background-image: url("../images/backgrounds/payroll.jpg");
}

#business-consultancy-banner {
	background-image: url("../images/backgrounds/business-consultancy.jpg");
}

#audit-banner {
	background-image: url("../images/backgrounds/audit.jpg");
}

#de-registration-banner {
	background-image: url("../images/backgrounds/de-registration.jpg");
	background-position: 50% 100%;
}


#information {
	background-color: var(--theme-white);
	line-height: 1.6rem;
}

#information > .container {
	padding: 2.5rem 0 1rem 0;
	display: flex;
	align-items: flex-start;
}

#information .hide-when-small {
	display: none;
}

#information-links {
	margin-right: 12.5%;
	/*border: 2px solid var(--theme-blue);*/
	/*border-radius: 10px;*/
}

#information-links h3 {
	margin: 0.5rem 0 1.5rem 0;
	font-size: 1.25rem;
	font-weight: normal;
}

#information-links img {
	max-height: 1.5rem;
	margin-right: 1rem;
}

#information-links a {
	margin: 1.75rem 0;
	display: flex;
	align-items: center;
	color: black;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.65rem;
	line-height: 1.2rem;
	opacity: 0.5;
	transition: opacity var(--default-transition-duration);
}

#information-links a.current, #information-links a:hover {
	opacity: 1.0;
}

#information-text h2 {
	margin-bottom: 0.5rem;
	font-size: 1.3rem;
	font-weight: normal;
}

#information-text p {
	margin: 0;
}


#contact {
	padding: 4rem 0 3rem 0;
	display: flex;
	justify-content: center;
	background-image: linear-gradient(var(--theme-white) 50%, var(--theme-light-grey) 50%);
}

#contact-content {
	min-width: 70vw;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	/* overflow hidden so border radius is respected by children */
	overflow: hidden;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

#contact-modes {
	background-color: var(--theme-blue);
}

#contact-container {
	height: 100%;
	min-height: 16rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
}

#contact-container h2 {
	color: white;
	font-weight: normal;
	margin: 0 0 1rem 0;
}

#contact-container a, #contact-container div {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: white;
	padding: 0.5rem 0;
}

.contact-icon {
	height: 1rem;
}

#contact-modes address {
	font-size: 0.85rem;
	font-style: normal;
	margin-left: 1.25rem;
	transition: opacity var(--default-transition-duration);
}

#contact-modes a:hover address {
	opacity: 0.5;
}

#contact-map {
	display: flex;
}

#contact-map iframe {
	border: none;
	width: 100%;
	min-height: 16rem;
}


@media(min-width: 900px) {

	/* Information - no links */
	#information .hide-when-small {
		display: block;
	}


	/* Contact - horizontally split */
	#contact-content {
		min-width: unset;
		flex-direction: row;
	}

	#contact-map iframe {
		/*width: 40vw;
		height: 35vw;*/
		width: 24rem;
		height: 24rem;
	}
}

@media(max-width: 480px) {

	/* Contact - h2 centered on page */
	#contact h2 {
		text-align: center;
	}

	/* Contact - full page width */
	#contact {
		padding: 3rem 0;
	}

	#contact-content {
		width: 100%;
		border-radius: 0;
		box-shadow: none;
	}

	#contact-modes, #contact-map iframe {
		min-height: 18rem;
	}
}
