/*
 *  CSS Reset v2.0
 *  Eric Meyer, 2011-01-26
 *  http://meyerweb.com/eric/tools/css/reset/
 *
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*
 *  Generic element styles
 *  Pasi Lallinaho, 2016-08-25
 *
 */

p, blockquote, pre, address, dl, ol, ul, form, table {
	margin-bottom: 1em;
}

* {
	box-sizing: border-box;
}

/*
 *  Typography
 *
 */

@font-face {
	font-family: 'Merriweather Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Merriweather Sans Light'), url(fonts/MerriweatherSans-Light.woff2) format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Merriweather Sans'), url(fonts/MerriweatherSans-Regular.woff2) format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), url(fonts/Lato-Regular.woff2) format('woff2');
	font-display: swap;
}

/*
 *   ...
 *
 */

:root {
	--header-height: 3.5rem;
	--transition-time: 250ms;
	--spacing-horizontal: 2.5rem;
	--spacing-vertical: 2.5rem;
	--spacing-grid: 1.5em;

	--font-heading: "Merriweather Sans", sans-serif;
	--font-paragraph: "Lato", sans-serif;

	--color-body-bg: #fff;
	--color-header-bg: #fff;
	--color-header-fg: #555;
	--color-box-bg: #fff;

	--color-floating-heading: #fff;
	--color-text: #1a1a1a;
	--color-paragraph: #656565;

	--page-margin: var(--spacing-horizontal);

	--box-padding: 1.5em;
}

/**
 *  Styles
 *
 */

.style {
	--color-bg-first: #c5501a;
	--color-bg-second: #840000;
	--color-highlight: #f67511;
}
.style.websites {
	--color-bg-first: hsl(180,63%,37%);
	--color-bg-second: hsl(208,78%,42%);
	--color-highlight: hsl(208,78%,37%);
}
.style.graphic {
	--color-bg-first: hsl(112,24%,48%);
	--color-bg-second: hsl(139,34%,27%);
	--color-highlight: hsl(126,75%,40%);
}
.style.partners {
	--color-bg-first: hsl(192,86%,23%);
	--color-bg-second: hsl(172,66%,43%);
	--color-highlight: hsl(181,58%,51%);
}
.style.contact {
	--color-bg-first: hsl(208,78%,34%);
	--color-bg-second: hsl(257,63%,46%);
	--color-highlight: hsl(310,68%,58%);
}

/**
 *  Dark mode
 *
 */

@media screen and (prefers-color-scheme: dark) {
	:root {
		--color-body-bg: #111;
		--color-box-bg: #262626;
		--color-header-bg: #111;
		--color-header-fg: #eee;
		--color-text: #eee;
		--color-paragraph: #aaa;
	}
}

::selection { background-color: var(--color-highlight, #111); color: #fff; }

/*
 *  Layout
 *
 */

html {
	height: 100%;
	font-size: medium;
	background-color: var(--color-body-bg);
}

body {
	min-width: 320px;
	min-height: 100%;
	padding: 0;

/*	transition: all calc( var(--transition-time) * 2 ); */

	font-family: var(--font-paragraph);
	font-weight: 400;
	line-height: 1.4em;
	background-color: var(--color-body-bg);
	color: var(--color-text);
}

/*
 *  ELEMENTS
 *
 */

a {
	outline: none;
	color: var(--color-highlight);
}
	a, a:link, a:visited {
		text-decoration: none;
	}


/*
 *  LAYOUT
 *
 */

header {
	position: fixed;
	z-index: 10000;
	width: 100vw;
	height: var(--header-height);
	background-color: var(--color-header-bg);
}
	nav {
		float: left;
		height: var(--header-height);
		font-family: var(--font-heading);
	}
		nav a {
			display: none;
			padding: 1em 1.5em;
			background-color: var(--color-header-bg);
			color: var(--color-header-fg);
			font-weight: 500;

			transition: var(--transition-time) all;
		}
		nav#direct a {
			padding-left: 4.5em;
			background: var(--color-header-bg) url(img/digitoucan_icon.svg) 1.5em 50% no-repeat;
			background-size: 2em;
		}
		@media screen and (prefers-color-scheme: dark) {
			nav#direct a {
				background-image: url(img/digitoucan_icon_dark.svg);
			}
		}
			nav a.current {
				cursor: default;
				display: block;
			}
		nav#secondary {
			float: right;
			padding-right: 0.5em;
		}
			nav#secondary a {
				cursor: pointer;
				display: inline-block;
				padding: 1em;
			}

/*
 *  Main content area
 *
 */

section {
	display: none;
	min-height: 100vh;
	z-index: 50;
	box-sizing: border-box;

	background-image: linear-gradient( to bottom, var(--color-bg-first) 40px, var(--color-bg-second) );

	padding: calc( var(--header-height) + var(--spacing-vertical) ) var(--spacing-horizontal) var(--spacing-vertical) var(--spacing-horizontal);
	font-size: 125%;
	line-height: 1.4em;

	grid-template-rows: min-content auto 22px;
	grid-template-areas: 'title' 'content' 'credits';
	grid-gap: var(--spacing-grid);
}
	section.current {
		display: grid;
	}

	section > * {
		position: relative;
		z-index: 2;
	}

	/*  Background image in ::before pseudo  */
	section::before {
		content: ' ';
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		background-image: var(--image-background);
		background-size: cover;
		background-position: 50% 0;
		height: 100vh;
		width: 100vw;
		opacity: 0;
		transition: opacity 200ms;
	}
		section.in::before {
			opacity: 0.5;
		}

	/*  Sub-area layout  */
	section .content {
		display: grid;
		grid-gap: var(--spacing-grid);
		grid-template-rows: auto;
		align-content: start;
	}
		section .box {
			align-self: start;
		}
		section .image {
			align-self: center;
			text-align: center;
		}
			section .image img {
				max-width: 300px;
				height: auto;
			}
			section .image.align-right-edge {
				text-align: right;
			}
			section .image.size-full {
				margin-right: calc( -1 * var(--page-margin) );
				margin-top: calc( 2 * var(--spacing-vertical) );
			}
				section .image.size-full img {
					max-width: 90%;
					height: 100%;
				}

	/*  Heading  */
	h2 {
		font-family: var(--font-heading);
		font-weight: 300;
		width: 100%;
		font-size: 170%;
		line-height: 1.4em;
		color: var(--color-floating-heading);
		text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.2 );
	}
		h2 strong {
			font-weight: 400;
		}
		h2 img {
			max-width: 90%;
			height: auto;
			margin-bottom: -10px;
		}

	/*  Content  */
	.box {
		padding: var(--box-padding);
		margin: 0;
		border-left: 0.75em solid var(--color-highlight);
		background-color: var(--color-box-bg);
	}
		.box h3 {
			font-family: var(--font-heading);
			margin-bottom: 0.8em;
			font-size: 105%;
			font-weight: 400;
		}
		.box p {
			color: var(--color-paragraph);
		}
		.box:last-child,
		.box > :last-child {
			margin-bottom: 0;
		}
		.box a {
			color: var(--color-highlight);
		}
		.box a.button {
			display: inline-block;
			box-sizing: initial;
			width: 100%;
			margin: 0 -1.5em;
			padding: 0.1em 1.5em;
			transition: all var(--transition-time);
		}

		/*  Section sub-areas  */

		section .credits {
			grid-area: credits;
			display: block;
			height: 22px;
			opacity: 0.4;
			color: #fff;
			font-size: 80%;
		}
				section .credits .image_link {
					display: block;
					width: 22px;
					height: 22px;
				}
				section .credits .credit_link {
					display: none;
					padding-left: 0.75em;
					line-height: 22px;
				}
				section .credits:hover,
				section .credits:active,
				section .credits:focus {
					opacity: 1;
				}
					section .credits:hover .credit_link,
					section .credits:active .credit_link,
					section .credits:focus .credit_link,
					section .credits.seen .credit_link {
						display: block;
					}
				section .credits a {
					float: left;
					color: #fff;
					text-decoration: underline;
				}


		section img {
			max-width: 100%;
			height: auto;
			margin-bottom: -5px;
		}

/*  Partner boxes  */
.box .partner-logo {
	margin-top: var(--box-padding);
}
	.box .partner-logo a {
		display: block;
		width: calc( 100% + 2 * var(--box-padding) );
		padding: var(--box-padding);
		margin-bottom: -1.5em;
		margin-right: calc( -1 * var(--box-padding) );
		margin-left: calc( -1 * var(--box-padding) );
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	.box .partner-logo img {
		max-width: 200px;
	}

/*
 *  CUSTOM
 *
 */

.box.digitoucan {
	background-image: url(img/digitoucan_icon.svg);
	background-repeat: no-repeat;
	background-position: top 0.6em right 0.8em;
	background-size: 45px;
}

@media screen and (prefers-color-scheme: dark) {
	.box.digitoucan {
		background-image: url(img/digitoucan_icon_dark.svg);
	}
}

@media screen and (min-width:800px) {
	section.inenglish .content {
		grid-template-columns: repeat(2,1fr);
		grid-template-areas: 'company services' 'contact image';
		align-content: space-between;
	}
		section.inenglish .box { max-width: none; }
		section.inenglish #en_company { grid-area: company; align-self: stretch; }
		section.inenglish #en_services { grid-area: services; align-self: stretch; justify-self: end; }
		section.inenglish #en_contact { grid-area: contact; align-self: center; }
		section.inenglish #en_image { grid-area: image; }
}

/*
 *  ANIMATIONS
 *
 */

.wiggle {
	animation: 150ms ease-in-out 0s 4 alternate wiggle;
}

@keyframes wiggle {
	0% { transform: translate( 0, 0 ); }
	50% { transform: translate( -5px, 0 ); }
	100% { transform: translate( 5px, 0 ); }
}

/*
 *  RESPONSIVITY
 *
 */

@media screen and (min-width:800px) {
	:root {
		--spacing-horizontal: 60px;
		--spacing-vertical: 40px;
	}

	body {
		background-color: var(--color-bg-second);
	}

	/*
	 *  Navigation
	 *
	 */

	header {
		font-size: 90%;
		background-color: transparent;
	}
		nav {
			z-index: 100;

			float: none;
			position: fixed;
			width: 100%;
		}
			nav#secondary {
				display: none;
			}

			nav a {
				padding: 1em 1em 0.65em 1em;
				cursor: pointer;
				transition: var(--transition-time) color;
				border-bottom: 0.35em solid transparent;
			}
				nav#direct a {
					padding: 1em;
					background-image: none;
				}
			nav a.current {
				color: #fff;
			}

			nav#direct a.current {
				background-color: transparent;
			}
				body.scrolled nav#direct a.current {
					background-color: var(--color-bg-first);
					border-color: rgba(0,0,0,0.25);
				}
			nav#direct a:not(.current):hover {
				color: var(--color-highlight);
			}

	/*
	 *  Page layout
	 *
	 */

	section {
		display: none;
		min-height: 100vh;
		z-index: 50;
		font-size: 110%;
	}
		h2 {
			font-size: 250%;
			opacity: 0;
		}
			section.in h2 {
				opacity: 1;
			}
		.box {
			position: relative;
			z-index: 2000;
			display: block;
			max-width: 500px;

			border-left: none;
			border-top: 0.5em solid var(--color-highlight);

			opacity: 0;
			margin-left: -500px;
		}
			section.in .box {
				opacity: 1;
				margin-left: 0;
			}
			.box + .box {
				border-top-width: 7px;
				padding-top: 1.2em;
			}

	section h2 {
		margin-bottom: calc( var(--spacing-vertical) / 2 );
	}

	section .content {
		grid-template-columns: minmax(250px, 50%) auto;
	}
		section .box {
			grid-column: 1;
		}
		section .image {
			grid-column: 2;
			text-align: right;
		}
			section .image.align-bottom {
				position: absolute;
				bottom: 0;
				right: 0;
			}
			section .image img {
				max-height: 200px;
				max-width: 100%;
			}
				section .image.size-full img {
					max-height: unset;
				}

	/*  Transitions  */
	section
	.box,
	h2 {
		transition: all var(--transition-time);
	}
}

@media screen and (min-width:1200px) {
	:root {
		--page-margin: calc( ( 100vw - 1100px ) / 2 );
	}

	section {
		padding: calc( var(--header-height) + var(--spacing-vertical) * 1.75 ) var(--page-margin) var(--spacing-vertical) var(--page-margin);
	}
		h2 {
			margin-bottom: var(--spacing-vertical);
		}
		section.content {
			grid-template-columns: 500px auto;
			grid-template-rows: max-content auto;
		}
}

@media screen and (min-width:1200px) and (min-height:800px) {
	section {
		padding-top: calc( var(--header-height) + var(--spacing-vertical) * 2.5 );
	}
}