/* DEFAULTS */

* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
}



/* GLOBAL PARAMETERS */

* {
	font-family: "Helvetica Neue Regular", sans-serif !important;
	font-weight: 100 !important;
}

* {
	text-decoration: none !important;
}

*:focus,
*:hover {
	outline: none !important;
}

img {
	filter: none !important;
}

:root {
	--site: #603bc0;
	--light: #ffffff;
	--mid: #4c4c4c;
    --dark: #000000;
	--large: 13pt;
	--medium: 11pt;
	--small: 9pt;
}



/* SCROLLING */

scrollbar,
::-webkit-scrollbar {
	width: 6pt;
	height: 6pt;
}

scrollbar-track,
::-webkit-scrollbar-track,
scrollbar-corner,
::-webkit-scrollbar-corner {
	border-radius: 3pt;
	box-shadow: inset 0 0 3pt rgba(0, 0, 0, .4);
	background: rgba(169, 169, 169, .1);
}

scrollbar-thumb,
::-webkit-scrollbar-thumb {
	border-radius: 3pt;
	box-shadow: inset 0 0 3pt rgba(0, 0, 0, .6);
	background: rgba(169, 169, 169, .5);
}

scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
	background: rgba(169, 169, 169, .9);
}

scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(99, 99, 99, .3);
}



/* TEXT */

h1 {
	font-size: var(--large);
	color: var(--light);
	margin-left: 15pt;
	justify-content: flex-start;
}

h2 {
	font-size: var(--medium);
	color: var(--light);
	justify-content: flex-start;
}

h3 {
	font-size: var(--small);
	color: var(--light);
	text-align: left;
	margin-top: 12pt;
	margin-bottom: 6pt;
}

p {
	font-size: var(--small);
	color: var(--light);
	text-align: left;
}

p.cell {
	padding-top: 1pt;
	padding-bottom: 1pt;
}

figcaption > p {
	margin-top: 12pt;
	margin-bottom: 6pt;
}



/* CONTROL */

span {
	color: var(--light);
	font-size: var(--small);
	align-content: center;
}

button {
	width: auto;
	min-width: 70pt;
	max-width: 105pt;
	height: 18pt;
	resize: none;
	background: none;
	border: none;
	margin-bottom: 6pt;
	cursor: pointer !important;

}

button .cell {
	border: 1pt solid var(--site);
	border-radius: 3pt;
}

button > img {
	width: 12pt;
	height: 12pt;
	align-self: center;
	margin-left: 3pt;
	margin-right: 3pt;
}

button > span {
	font-size: var(--small);
}

button:enabled > span:hover,
button:enabled > span:focus {
	color: var(--site);
}

button:disabled > span,
button:disabled > span:hover,
button:disabled > span:focus {
	color: var(--mid);
}

.title > button {
	width: 18pt;
	min-width: 18pt;
}



/* HINT */

.hint .hint-text {
	min-width: 50pt;
	margin-top: 3pt;
	border: 1pt solid var(--mid);
	border-radius: 3pt;
	padding: 3pt 0;
	background-color: var(--dark);
	color: var(--light);
	text-align: center;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.5s;
}

.hint:hover .hint-text {
	visibility: visible;
	opacity: 1;
}



/* HTML */

html {
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	width: 100%;
	height: 100%;
}



/* BODY */

body {
	background-color: var(--dark);
	background-size: 100% 100%;
	grid-template-columns: 1fr;
	grid-template-rows: 100pt auto auto;
	width: 100%;
	height: 100%;
}

.cell {
	display: grid;
	padding: 3pt;
}



/* HEADER */

header {
	grid-template-areas:
		"logo title nav";
	grid-template-columns: 90pt auto 120pt;
	grid-template-rows: 1fr;
	opacity: 100%;
	background-color: var(--dark);
	border-bottom: 1pt groove var(--mid);
	top: 0;
	position: fixed;
	max-height: 100pt !important;
	width: 100%;
}

#logo {
	grid-area: logo;
	width: 90pt;
	height: 90pt;
	padding-left: 0;
}

#title {
	grid-area: title;
	align-self: self-start;
	margin-top: 15pt;
}

#nav {
	grid-area: nav;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	align-self: center;
}

#nav-reset {
	align-self: center;
	max-width: none;
}

#nav-switch {
	grid-template-columns: 18pt 18pt;
    grid-template-rows: 1fr;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#nav-prev {
	width: 18pt;
	min-width: 18pt;
	align-self: center;
}

#nav-next {
	width: 18pt;
	min-width: 18pt;
	align-self: center;
}



/* MAIN */

main {
	left: 0;
	top: 100pt;
	position: fixed;
	width: 100vw;
	height: calc(100vh - 100pt);
	overflow: auto;
}



/* PANEL */

.panel {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	position: absolute;
	border: 1pt groove var(--mid);
	border-radius: 1pt;
	background-color: var(--dark);
	box-shadow: 3pt 3pt 3pt var(--mid);
}

.title {
	grid-template-columns: auto 18pt;
	grid-template-rows: 1fr;
	cursor: move !important;
	height: 24pt;
	border-bottom: 1pt groove var(--mid);
	border-radius: 1pt;
}

.content {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	top: 24pt;
	left: 0;
}

.aside {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}



/* PORTFOLIO LIST PANEL */

#list-panel {
	width: 180pt;
	max-height: 375pt;
}

#list-content {
	overflow: auto;
	max-height: calc(375pt - 27pt);
}

#list {
	justify-items: center;
}

[id^="list-"] figure img {
	width: 120pt;
	height: 70pt;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}



/* PORTFOLIO ITEM PANEL */

[id^="item-panel-"] {
	width: 265pt;
	max-height: 250pt;
}

[id^="item-content-"] {
	overflow: auto;
	max-height: calc(250pt - 27pt);
}

[id^="item-content-"] figure img {
	width: 230pt;
	height: 140pt;
}



/* SERVICES PANEL */

#services-panel {
	width: 225pt;
	max-height: 375pt;
}

#services-content {
	display: none;
	overflow: auto;
	max-height: calc(375pt - 27pt);
}



/* CONTACT PANEL */

#contact-panel {
	width: 180pt;
	max-height: 225pt;
}

#contact-content {
	overflow: auto;
	max-height: calc(225pt - 27pt);
}

#contact-links {
	border-bottom: 1pt groove var(--mid);
}

#contact-hours {
	grid-template-columns: 90pt auto;
	grid-template-rows: auto;
	border-bottom: 1pt groove var(--mid);
}

#contact-postal-address {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	border-bottom: 1pt groove var(--mid);
}

#contact-legal {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}



/* PRIVACY PANEL */

#privacy-panel {
	width: 225pt;
	max-height: 375pt;
}

#privacy-content {
	display: none;
	overflow: auto;
	max-height: calc(375pt - 27pt);
}



/* FOOTER */

footer {
	left: 0;
	bottom: 0;
	position: fixed;
	width: 0;
	height: 0;
}



/* MEDIA QUERIES */

@media only print {

	html {
		display: none;
	}

}

@media only screen and (max-width: 520px) {

	header {
		grid-template-areas:
			"logo title"
			"logo nav";
		grid-template-columns: 90pt auto;
		border-bottom: 1pt solid var(--mid);
	}

	#nav {
		grid-template-rows: 1fr;
		margin-left: 15pt;
		margin-bottom: 15pt;
	}

	#nav-reset {
		display: none;
	}

	#nav-switch {
		margin-right: 15pt;
	}

	#nav-switch > button {
		margin-bottom: 0;
	}

	.panel {
		border: 1pt solid var(--mid);
		border-radius: 1pt;
		position: relative;
		box-shadow: none;
		margin-top: 3pt;
	}

	.title {
		cursor: auto;

	}

	main {
		display: grid;
		grid-template-columns: auto;
		grid-auto-rows: max-content;
		justify-items: center;
	}

	#list-panel,
	#services-panel,
	#contact-panel,
	#privacy-panel {
		width: 90vw;
		max-height: none;
		scroll-margin-top: 3pt;
	}

	[id^="list-data"] figure img {
		width: 100%;
		height: auto;
	}

	[id^="item-panel-"] {
		display: none;
	}

}