@import url('https://use.typekit.net/yxb0jot.css');

html {
	--font-serif: serif;
	--font-sans-serif: 'proxima-nova', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

	--font-size-tiny: 0.75em;
	--font-size-normal: 1em;
	--font-size-small: 1.35em;
	--font-size-medium: 1.5em;
	--font-size-large: 2.25em;
	--font-size-huge: 2.5em;
	--font-size-insane: 3em;

	--font-size-double: 2em;

	--color-white: #fff;
	--color-black: #000;

	--color-dark-grey: #2a2c28;

	--color-accent: #B32625;
	--color-accent-secondary: #391804;

	--color-background: var(--color-white);
	--color-foreground: var(--color-black);

	--spacing-small: 0.5rem;
	--spacing-tiny: calc(0.5 * var(--spacing-small));
	--spacing-medium: calc(2 * var(--spacing-small));
	--spacing-large: calc(2 * var(--spacing-medium));
	--spacing-huge: calc(2 * var(--spacing-large));
	--spacing-insane: calc(2 * var(--spacing-huge));

	--max-width: 1400px;

	/*
	Media queries MUST be in this order.

	@media only screen and (min-width: 1400px) { }
	@media only screen and (max-width: 1400px) {  }
	@media only screen and (max-width: 1200px) {  }
	@media only screen and (max-width: 992px) {  }
	@media only screen and (max-width: 768px) {  }
	@media only screen and (max-width: 600px) {  }
	 */

	font-size: 16px;
}

body {
	font-family: var(--font-sans-serif);
	line-height: 1.5;
	font-weight: 400;

	background: var(--color-background);
	color: var(--color-foreground);

	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-accent);
	font-weight: 600;
}

h1 {
	font-size: var(--font-size-huge);
	line-height: 1.1;
	text-transform: uppercase;
}

h2 {
	font-size: var(--font-size-large);
	letter-spacing: 3px;
	font-weight: bold;
	line-height: 1.1;

	color: var(--color-accent);
}

h3 {
	font-size: var(--font-size-medium);
	line-height: 1.5;
}


p { margin: var(--spacing-medium) 0; }

a {
	color: var(--color-foreground);
	transition: all 350ms;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: var(--color-accent);
	transition: all 350ms;
}

a > i[class*='fa-'] { margin-left: var(--spacing-small); }

img { max-width: 100%; }

i[class*='fa-check-circle'] { color: var(--color-accent); }

/*
 * Document Header
 */
body { --header-bar-height: 4.5rem; }
body > header {
	position: relative;
	display: grid;
	grid-template-columns: 25vw var(--header-bar-height) 1fr;
	grid-template-rows: var(--header-bar-height);

	background: var(--color-background);
}

body > header > nav,
body > header > #alt-links {
	padding: 0 var(--spacing-large);
	height: var(--header-bar-height);
}

/* Fancy diagonal bar */
body > header > hr {
	position: relative;
	z-index: 9001;

	display: flex;
	justify-content: flex-end;
	align-items: center;
	border: 0;

	grid-row: 2;
	grid-column: 2;
	margin: 0;
}
body > header > hr::after {
	background: transparent;
	border-right: 0;
	border-top: 0;
	border-left: var(--header-bar-height) solid transparent;
	border-bottom: var(--header-bar-height) solid var(--color-accent);

	content: '';

	display: block;
}

body > header a {
	color: var(--color-foreground);
	font-family: var(--font-sans-serif);
	font-weight: 400;
}

body > header .locale-switch { text-transform: uppercase; }

body > header #brand { grid-row: 1 / all; grid-column: 1; font-size: 0; }
body > header #brand > img {
	height: calc(1.1 * var(--header-bar-height)); width: auto;
	margin-left: var(--spacing-large);
	margin-top: var(--spacing-medium);
}

/* Main Menu */
body > header > nav {
	background: var(--color-accent);
	position: relative;
	z-index: 9001;

	padding-left: 0;

	grid-row: 2;
	grid-column: 3;

	align-self: right;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
body > header > nav > a {
	color: var(--color-white);
	text-transform: uppercase;
	font-weight: 600;
}
body > header > nav > a:hover,
body > header > nav > a:active,
body > header > nav > a:focus {
	color: var(--color-white);
	text-decoration: underline;
}

body > header > nav > * { margin: 0 var(--spacing-huge); }
body > header > nav > *:first-child { margin-left: 0; }
body > header > nav > *:last-child { margin-right: 0; }

#alt-links {
	grid-row: 1;
	grid-column: 2/all;

	display: flex;
	flex-direction: row;
	align-items: center;

	justify-content: flex-end;

	width: 100%;
}

#alt-links > * {
	margin: 0 var(--spacing-medium);
	display: flex;
	align-items: center;
}
#alt-links > *:first-child { margin-left: 0; }
#alt-links > *:last-child { margin-right: 0; }

#alt-links > a {
	text-align: right;
}

#alt-links i[class*='fa-'] {
	color: var(--color-accent);
	margin-right: 1ch;
}

/*
 * Document body
 */
body > main {
	min-height: 70vh;
	/* Header nav is slightly over the first element on the page */
	position: relative;
	margin-top: calc(var(--header-bar-height) * -0.5);
}
body > main > * {
	padding: var(--spacing-huge) var(--spacing-huge);
}


#introduction {
	position: relative;
	padding-top: var(--spacing-insane);
	padding-bottom: var(--spacing-insane);
	min-height: 25vw;
}

#introduction > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

#introduction::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.65));
	z-index: 2;
}

#introduction > *:not(img) {
	position: relative;
	z-index: 3;
	color: var(--color-white);

	max-width: 35rem;
	margin: var(--spacing-large) var(--spacing-medium);
}

#introduction p { line-height: 1.75; }

#introduction h1 {
	font-size: var(--font-size-insane);
	font-weight: 700;

	letter-spacing: 1.4px;

	max-width: 45rem;

	text-transform: uppercase;
}


/*
 * Document Footer
 */
body > footer {
	padding: 0 var(--spacing-huge);
	background: var(--color-dark-grey);
	color: var(--color-white);
	padding-left: var(--spacing-large);

	position:relative;
	max-height: 12rem;

	display: grid;
	grid-template-columns: 3fr 1fr 1.5fr;
	grid-template-rows: auto;
	grid-column-gap: var(--spacing-huge);

	margin-top: var(--spacing-insane);
}

body > footer > * {
	padding-top: var(--spacing-large);
	padding-bottom: var(--spacing-large);
}

body > footer a { color: var(--color-white); }
body > footer p { margin: 0; }

body > footer #contact-information {
	grid-row: 2; grid-column: 3;

	line-height: 2;
	text-align: right;
	max-height: 8rem;

}

body > footer #company-description {
	grid-row: 2; grid-column: 1;
	position: relative;
	z-index: 9001;
	top: calc(-1 * var(--spacing-huge));
	font-size: 1rem;
	font-weight: 600;

	max-width: 33vw;

	line-height: 1.3333;
	letter-spacing: -0.1px;

	padding: var(--spacing-huge);

	background: var(--color-foreground);
}

body > footer #company-description img {
	margin-bottom: var(--spacing-medium);
	margin-right: auto;

	max-width: 20rem;
}

body > footer #site-map {
	grid-row: 2; grid-column: 2;
	max-height: 8rem;
}

body > footer #site-map a {
	line-height: 2;
}

/*
 * Legal
 */
#legal {
	display: grid;
	grid-template-columns: auto 1fr auto;

	font-size: 0.8em;
	opacity: 0.45;
	padding: var(--spacing-medium) var(--spacing-huge);
	padding-bottom: 0;
	margin-left: calc(33vw + var(--spacing-large));
}

#legal p { margin: 0; }

#legal > * { flex-basis: calc(100% / 3); }

#legal > *:nth-child(2) { text-align: center; }
#legal > *:last-child { text-align: right; }

#legal > nav { display: flex; justify-content: center; }
#legal > nav > * { margin: 0 var(--spacing-medium); }

#made-by-bolean i { margin-left: 0; }

/*
 * Common Elements
 */

/*
Same principle as a regular media-object, except the image fills to
the edge of the viewport.
 */
.media-object {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: var(--spacing-huge);

	padding-left: 0;
	padding-right: 0;
}

.media-object > * { margin: 0 var(--spacing-huge); flex-basis: 50%; }
.media-object > img {
	height: 100%;
	width: 100%;
	display: block;
	margin: 0;
	object-fit: cover;
}

.media-object:not(#introduction) > img {
	max-height: 450px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.media-object > .content {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding-top: var(--spacing-huge);
	padding-bottom: var(--spacing-huge);

	margin: 0;
}

.media-object > .content > *:last-child { margin-bottom: 0; }

.media-object:not(.alt) { padding-left: 0; }
.media-object:not(.alt) .content {
	order: 2;
	padding-right: var(--spacing-huge);
}
.media-object:not(.alt) > img { order: 1; margin-left: 0; }

.media-object.alt { padding-right: 0; }
.media-object.alt .content {
	order: 1;
	padding-left: var(--spacing-huge);
}
.media-object.alt > img { order: 2; margin-right: 0; }


/* embeded iframe form */
.iframe-form {
	width: 100%;
	height: 500px;
}
/* end of embeded iframe form */

/*
 * Responsive
 */

@media only screen and (min-width: 1400px) {
	html { font-size: 20px; }
}


@media only screen and (min-width: 1800px) {
	html { font-size: 24px; }
	.media-object:not(#introduction) > img { max-height: calc(9/16 * 50vw); }
	body > footer { font-size: 20px; }

	body > footer #company-description { max-width: 25vw; }
	#legal { margin-left: calc(25vw + var(--spacing-large)); }
}

@media only screen and (min-width: 2100px) {
	html { font-size: 32px; }
	body > footer { font-size: 24px; }
	#legal { font-size: 22px; }
}

@media only screen and (min-width: 2561px) {
	html { font-size: 40px; }
	body > footer { font-size: 32px; }
	#legal { font-size: 28px; }
}

@media only screen and (max-width: 1400px) {
	html { font-size: 18px; }

	body > footer { font-size: 16px; }

}

@media only screen and (max-width: 1200px) {
	html { font-size: 16px; }
	body > footer { font-size: 13px; }
}

@media only screen and (max-width: 1130px) {
	.iframe-form {
		height: 800px;
	}
}

@media only screen and (max-width: 992px) {
	html {
		font-size: 15px;
	}

	body > footer {
		font-size: 13px;
	}

	body > footer #contact-us { font-size: 1.15rem; }

}

@media only screen and (max-width: 768px) {
	body > header > nav > * { margin: 0 var(--spacing-large); }

	body > main > * {
		padding: 0 var(--spacing-large);
		margin-top: var(--spacing-huge);
		margin-bottom: var(--spacing-huge);
	}

	body > main > *:first-child { margin-top: 0; }

	.media-object { grid-template-columns: 1fr; }
	.media-object img, .media-object picture {
		margin-left: 0;
		margin-right: 0;
		max-height: calc((9/16) * 100vw);
	}
	.media-object .content {
		/* It's either !important, or override odd and even again. */
		border-right: none !important;
		border-left: none !important;
		padding-left: var(--spacing-large) !important;
		padding-right: var(--spacing-large) !important;
		padding-bottom: var(--spacing-huge);
	}


	body > footer { padding-left: 0;
		column-gap: var(--spacing-large);
	}
	#legal {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-row-gap: var(--spacing-small);
	}
	#legal > * { text-align: right !important; }
	#legal > nav { justify-content: flex-end; }
	#legal > nav > * { display: block; margin-right: 0; }

	body > footer > #company-description { max-width: 45vw; }

	#introduction {
		padding: var(--spacing-huge) var(--spacing-medium);
	}

	#introduction > :not(img) {
		margin: var(--spacing-large) var(--spacing-small);
	}

	#introduction h1 {
		font-size: var(--font-size-double);
		margin-bottom: var(--spacing-large);
		margin-right: 25%;
	}
}

@media only screen and (max-width: 640px) {
	body > header {
		grid-template-columns: var(--spacing-small) var(--header-bar-height) 1fr;
		grid-template-rows: repeat(3, auto);
	}
	body > header > #brand {
		grid-row: 1; grid-column: 1 / all;
		margin-left: auto; margin-right: auto;
		margin-bottom: var(--spacing-medium);
	}
	body > header > #brand > img { margin-left: 0; }	body > header > #alt-links { grid-row: 2; justify-content: center; }
	body > header > nav { grid-row: 3; justify-content: center; }
	body > header > hr { grid-row: 3; }
	body > header > nav > * { margin: 0 var(--spacing-large); }


	body > footer {
		display: grid;
		grid-template-rows: repeat(2, auto);
		grid-template-columns: 1fr 1fr;

		max-height: none;
		padding-left: 0;
		padding-right: 0;
		margin-top: 0;
	}

	body > footer > * {
		padding: var(--spacing-large);
	}

	body > footer > #company-description {
		grid-row: 1;
		grid-column: 1 / 3;
		position: static;
		transform: none;
		max-width: none;
		width: 100%;
	}

	body > footer > #company-description img {
		float: left;
		margin-right: var(--spacing-huge);
		max-width: 200px;
	}
	body > footer > #site-map {
		grid-row: 2; grid-column: 1;
		max-height: none;

	}
	body > footer > #contact-information {
		grid-row: 2; grid-column: 2;
		max-height: none;
	}

	#introduction h1 { margin-right: auto; }
	#introduction > *:not(img) {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	#legal {
		justify-content: center;
		margin-left: 0;
	}

	#legal > * {
		text-align: center !important;
	}

	#legal > nav { justify-content: center; }
}

@media only screen and (max-width: 560px) {
	body > footer > #company-description p { font-size: 0.8em; }
}

@media only screen and (max-width: 520px) {
	body > header { position: static; }
	body > header > * { height: auto; }
	body > header > hr { display: none; }
	body > header { display: flex; flex-direction: column; }
	body > header > #brand { order: 1; }
	body > header > #alt-links { order: 3; }
	body > header > #alt-links > *:nth-child(2) { display: none; }
	body > header > nav {
		position: static;
		z-index: 1;
		order: 2;
		padding-left: var(--spacing-medium);
		padding-right: var(--spacing-medium);
		justify-content: space-between;
		font-size: 0.85em;
	}
	body > header > nav > * { margin: 0 var(--spacing-medium); }

	body > main { margin-top: 0; }

	body > footer > #company-description img {
		float: none;
		display: block;
		mnargin-bottom: var(--spacing-large);
		margin-left: auto;
		margin-right: auto;
	}

	body > footer > #contact-information { font-size: 0.8em; }
}